Tips Tentang Cara Membuat Pasang Tooltip di Blog adalah pembahasan yang akan saya angkat pada malam kali ini, Bagimana Cara Membuat Pasang Tooltip di Blog tersebut? untuk tutorialnya akan saya bahas sesingkat mungkin, dan sebelum saya lanjutkan silahkan baca juga postingan sebelumnya tentang Cara Pasang Artikel Terkait di bawah postingan blog serta tips Cara Membuat Mesin Pencari sederhana , oke untuk tutorial cara pasang tooltip ini silahkan simak berikut ini:
Cara Pertama Memasang Tooltip Keren di Blog
1. Langkah pertama Silahkan masuk ke akun blogger sahabat lalu cari menu TEMPLATE klik EDIT TEMPLATE lalu search kode ]]></b:skin> Lau Pasangkan Kode dibawah ini tepat diatas kode ]]></b:skin> untuk memepercepat pencarian silahkan tekan CTRL+F saja jika sudah ketemu lakukan seperti yang sudah saya sebutkan sebelumnya.
/* Pure CSS Tooltip - Cara Membuat Pasang tooltip di blog */
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;
}
Jika sudah selesai silahkan simpan template sahabat.
2. Langkah yang kedua adalah sahabat hanya tinggal menambahkan kode tooltif dibawah ini pada setiap link yang akan sahabat buat.
<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>
Contoh hasilnya akan nampak seperti contoh pada gambar berikut ini:
 |
Cara Memasang Kode Tooltip di Blog |
Cara Kedua Membuat Tooltip Cantik di Blog
1. Untuk cara yang kedua ini tidaklah jauh sama persis pemasangnnya dengan cara yang pertama yaitu cari kode ]]></b:skin> di bagian TEMPLATE > EDIT TEMPLATE lalu pasangkan kode dibawah ini tepat 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/AVvXsEg00_VyB7SOY5DGW3kJBsQ1KYLPS3yM8erRIAS5eEV2oDa0M-jHmhLJQHdSh0xF1q7mMeRrAl85Xb0qo8CtGQi1YEo-ZZXdnNMRyNvMU7CJx-2Ub2lXUYJsV23o8JYIx3CWq62sJQao_7g/) 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/AVvXsEhJkf8rwELUOzQz9PIEzO-nk3wUcTs50kpMpfW479VtARdNvrffY63Wd5wjBYOCicrivqQy16NyXLEzgX0utjaIamqruVuwwvvIltFSjDOZ6CaQf8-J1eHjPlNEDwQ6wnb0BJirlRwNEvY/) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #00FF7F;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg00_VyB7SOY5DGW3kJBsQ1KYLPS3yM8erRIAS5eEV2oDa0M-jHmhLJQHdSh0xF1q7mMeRrAl85Xb0qo8CtGQi1YEo-ZZXdnNMRyNvMU7CJx-2Ub2lXUYJsV23o8JYIx3CWq62sJQao_7g/) no-repeat bottom;
}
Jika sudah beres silahkan simpan template sahabat.
2. Untuk cara yang kedua ini cara menggunakannya sahabat hanya melakukan pembuatan link dengan kode tooltip dibawah ini, jadi setiap membuat link coba gunakan kode dibawah ini tinggal sahabt ganti link blog saya dengan tulisan yang ada didalam kodenya.
<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>
Contoh hasilnya akan terlihat seperti pada gambar dibawah ini:
 |
Cara Mudah Pasang Tooltip di Blog |
Untuk Copy Paste kode kode diatas sekaligus contohnya silahkan CEK DISINI
Oke itu saja tips kali ini tentang Cara Membuat Pasang Tooltip di Blog untuk itu pilih salah satu saja dari kedua cara diatas tersebut dan semoga tutorial sederhana ini bisa bermanfaat buat sahabat semuanya dan atas kunjungannya saya ucapkan terima kasih.
Tidak ada komentar:
Posting Komentar