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 :



Menampilkan link



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!

0 Response to "Membuat Efek Tooltip dengan CSS di Link dan Gambar Blog "

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel