Membuat Efek Tooltip dengan CSS di Link dan Gambar Blog

Membuat Efek Tooltip dengan CSS di Link dan Gambar Blog- Tooltip jika diartikan seperti tittle pada link atau gambar pada Blog ketika kursor di arahkan pada link atau gambar tersebut. Efek pada Tooltip dapat membantu anda menjelaskan dan membritahukan arti kepada pengunjung link tujuan dan gambar yang ada di dalam postingan. 

Efek Tooltip juga dapat membuat tampilan link dan gambar anda lebih menarik, sebagia contoh berikut saya berikan live demo :

Live Demo :

Widget sosial media berputarwidget sosial media berikut ini dapat berputar, menjadikan tampilan sosial media menjadi lebih menarik

Menampilkan link

Membuat Recent Post Thumbnail With a Tooltip Effect Efek Toltip adalah pesan singkat yang muncul pada saat kita arahkan kursor kearah link, gambar atau elemant yang lain yang akan kita klik

Menampilkan link dengan gambar

Untuk penerapannya berikut ini langkah-langkahnya :

1. Login keakun Blogger
2. Pilih Template » klik Edit HTML
3. Anda cari kode ]]></b:skin>
4. Kemudian anda terapkan diatasnya

CSS

/* Tooltip Provided by aak */
a:link,
a:visited {
position:relative;
}
.bgttooltip {
width:300px;
position:absolute;
bottom:100%;
margin:0 0 7px 0;
padding:5px;
font-family:Verdana,sans-serif;
font-size:13px;
font-weight:normal;
font-style:normal;
text-align:left;
text-decoration:none;
text-shadow:0 1px 0 rgba(255,255,255,0.3);
line-height:1.5;
border:solid 1px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
border-radius:0px;
-moz-box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 1px 2px rgba(255,255,255,0.5) inset;
-webkit-box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 1px 2px rgba(255,255,255,0.5) inset;
box-shadow:
0 1px 2px rgba(0,0,0,0.3),
0 1px 2px rgba(255,255,255,0.5) inset;
cursor:default;
display:block;
visibility:hidden;
opacity:0;
z-index:999;
-moz-transition:all 0.4s linear;
-webkit-transition:all 0.4s linear;
-o-transition:all 0.4s linear;
transition:all 0.4s linear;
color:#2B2B2B;
background:#2aa4cf;
background:-moz-linear-gradient(top,rgba(192,192,192,0.8),rgba(192,192,192,1));
background: #2aa4cf;
border-color:#2aa4cf;
}
.bgttooltip:before,
.bgttooltip:after
{
width:0;
height:0;
position:absolute;
bottom:0;
margin:0 0 -20px -10px;
border:solid 10px;
border-color:transparent;
display:table-cell;
content:"";
}
.bgttooltip:before
{
margin:0 0 -24px -12px;
border:solid 12px;
border-color:transparent;
z-index:-1;
}
a:hover .bgttooltip
{
text-decoration:none;
visibility:visible;
opacity:1;
-moz-transition:all 0.2s linear;
-webkit-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
.bgttooltip,
.bgttooltip.left {
left:0;
right:0;
}
.bgttooltip:before,
.bgttooltip:after,
.bgttooltip.left:before,
.bgttooltip.left:after {
left:40px;
right:auto;
}
.bgttooltip:before {
border-top-color:#2aa4cf;
}
.bgttooltip:after {
border-top-color:#2aa4cf;
}
/* Tooltip Provided by aak */

5. Simpan template

Untuk memanggil kode diatas anda masuk kelaman baru » masuk kemode HTML » kemudian anda sisipakan kode dibawah ini :

Menampilkan link

<a href="Link tujuan">Teks yang akan tampil <span class="bgttooltip">Teks dalam postingan</span></a>

Menampilkan link dengan gambar

<a href="Link Tujuan"><img src="URL gambar" height="300" width="300" /> Teks yang akan tampil <span class="bgttooltip">Teks dalam postingan</span></a>

Demikian Membuat Efek Tooltip dengan CSS di Link dan Gambar Blog, semoga bermanfaat!

Share this post