Kode Tooltip Untuk Blog

CARA 1

Pasang Kode dibawah ini diatas kode ]]></b:skin>

/* Pure CSS Tooltip - Cara memasang tooltip hanya dengan css */
a[data-tooltip]:link, a[data-tooltip]:visited {position: relative;text-decoration: none;}
a[data-tooltip]:before {
content: "";
position: absolute;
border:20px solid;
border-color:#333 transparent transparent transparent;
border-top: 20px solid #333;
visibility: hidden;
top: -18px;left: 50%;
}
a[data-tooltip]:after {
text-shadow:none;
content: attr(data-tooltip);
position: absolute;
color: white;
top: -35px;
left: 0px;
background: #333;
padding: 8px 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
white-space: nowrap;
visibility: hidden;
font:12px Arial;
}
a[data-tooltip]:hover:before, a[data-tooltip]:hover:after {
visibility: visible;
-moz-transition: visibility 0s linear .3s;
}

Silahkan Simpan Template

Langkah terakhir Sahabat hanya tinggal perlu menambahkan data-tooltip di bagian komponen html pada setiap link yang dibuat Contohnya seperti ini :

<a href="http://kode.jasaseoblog.com/" data-tooltip="Kode Tooltip Untuk Blog">Kode Tooltip Tutorial Blog</a>
ATAU
<a data-tooltip="Kode Tooltip Untuk Blog" href="http://kode.jasaseoblog.com/">Kode Tooltip Tutorial Blog</a>

Hasilnya:

Kode Tooltip Tutorial Blog

Silahkan sorot link diatas,

CARA 2

Pasang Kode dibawah ini diatas kode ]]></b:skin>

/*---------- bubble tooltip -----------*/
a.tt{
position:relative;
z-index:24;
color:#0000FF;
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: #00FFFF; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #000000;
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMXeWrTD016UmU0-DCm2i1IG0jh0D_7E8qdQGeYPUEQt0q4Re5qfRQNLXisBlWHfdS8y1j-b2p7SOT1Cc7oCMXMg1XA34dkaIeuFsHuKJJTTr0Onf48QCU9s_ihkymrcRB4p6lgOauMkA/) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic0KbJts0A-5YPCh5iaZ42zyL1KM1nsjcWDAGTYwg40rcrycdRZHgyvPgBh-sZuGxrxhHeOKgtziYNoNZwIEw2zEcAG183Q8wiD_wQkXQnYHB3y1uiCZ9Bju80IWggiAE7C2m_6AOkLJE/) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #00FF7F;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMXeWrTD016UmU0-DCm2i1IG0jh0D_7E8qdQGeYPUEQt0q4Re5qfRQNLXisBlWHfdS8y1j-b2p7SOT1Cc7oCMXMg1XA34dkaIeuFsHuKJJTTr0Onf48QCU9s_ihkymrcRB4p6lgOauMkA/) no-repeat bottom;
}

Silahkan Simpan Template

Langkah terakhir Sahabat hanya tinggal perlu menambahkan data-tooltip di bagian komponen html pada setiap link yang dibuat Contohnya seperti ini :

<a href="http://kode.jasaseoblog.com/2014/05/kode-tooltip-untuk-blog.html" class="tt">Kode Tooltip Untuk Blog<span class="tooltip"><span class="top"></span><span class="middle">Isi Dari Kode Tooltip Yang Bisa Sahabat isi Dengan Berbagai Keperluan Sahabat</span><span class="bottom"></a>

Hasilnya:

Kode Tooltip Untuk BlogIsi Dari Kode Tooltip Yang Bisa Sahabat isi Dengan Berbagai Keperluan Sahabat

Kembali ke halaman artikel: http://www.jasaseoblog.com/2014/05/cara-membuat-pasang-tooltip-di-blog.htmlCara Memasang Membuat Pasang Tooltip di Blog Keren dan Cantik.