BLOG BUDAK BUNGO

Pages

Connect With Us

Instructions

Recomended

blogbudakbungo. Powered by Blogger.

Labels

Las series mรกs vistas

Categories

Followers

Our Partners

Archive

Membuat Bubble tooltip di dalam posting

tooltip menggunakan css memungkinkan lebih cepatnya loading tanpa script pemanggil, yg biasanya tulisan pada tooltip akan muncul ketika loading pemanggil script selesai,Jika tertarik buat mencobanya silahkan mengikuti langkah berikut ini

O iya yg belum mengerti apa sih tooltip itu?
Tooltip adalah tulisan yang muncul ketika kursor berhenti diatas ling yg diberi tooltip atau semacam petunjuk dan penjelasan ya begitu lah kira2 contohnya anda letakan kursor di atas link di bawah ini..
tahan kursor disini
Dengan ditambahkan backgroud bubble lebih terlihat cantik, Untuk membuatnya Copy css dibawah ini
/*---------- bubble tooltip oce-modifblog.blogspot.com-----------*/
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(http://4.bp.blogspot.com/_camK6MacbVQ/SmNbRIxiTxI/AAAAAAAAAOc/zjNMwrdyd80/s320/bubble-712378.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(http://1.bp.blogspot.com/_camK6MacbVQ/SmNbQ-VEh2I/AAAAAAAAAOU/qiVSMin-U6k/s320/bubble_filler-711451.gif) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(http://4.bp.blogspot.com/_camK6MacbVQ/SmNbRIxiTxI/AAAAAAAAAOc/zjNMwrdyd80/s320/bubble-712378.gif) no-repeat bottom;
}

Nah setelah di copy selanjutnya login blogger> tataletak> edit html> cari tag ]]></b:skin> paste code css yg udah di copy tadi di atasnya dan save Template. Untuk format penulisan link pada posting yg di beri tooltip seperti ini

<a href="#" class="tt">nama link disini<span class="tooltip"><span class="top"></span><span class="middle">keterangan atau tulisan pada tooltip disini</span><span class="bottom"></span></span></a>
Anda baru saja membaca artikel yang berkategori blogger dengan judul Membuat Bubble tooltip di dalam posting. Anda bisa bookmark halaman ini dengan URL https://blogbudakbungo.blogspot.com/2013/03/membuat-bubble-tooltip-di-dalam-posting.html. Terima kasih......??? sampai jumpa di blog saya berikutnya......??
Ditulis oleh: blog budak bungo - Wednesday 6 March 2013
Comments
0 Comments

Belum ada komentar untuk "Membuat Bubble tooltip di dalam posting"

Proudly powered by : Blogger
Copyright © 2013. Blog Budak Bungo - All Rights Reserved
Blog By : Vhen Part II
Template by blogbudakbungo.blogspot.com | Publish :budakbungo