TRIK MEMBUAT CSS3 IMAGE TOOLTIP PADA WORDPRESS – Tooltips merupakan cara yang sangat bagus untuk dapat menampilkan informasi untuk pengunjung pada website milik Anda dengan cara melayang di atas objek gambar atau teks ketika image ataupun text tersebut ter sorot oleh mouse. Tooltips bisa digunakan, misalnya untuk memberikan sebuah keterangan atas gambar, ataupun deskripsi yang lebih panjang lagi untuk sebuah link, ataupun informasi yang berfungsi yang akan meningkatkan sebuah pengalaman pengguna dari situs milik Anda, tanpa harus mengganggu desain.
Tutorial kita Kali ini, saya akan menunjukkan pada Anda bagaimana cara untuk membuat sebuah tooltip yang sederhana menggunakan HTML dan CSS untuk dapat menampilkan tag judul hyperlink milik Anda. dan pada akhirnya akan di aplikasikan untuk website yang anda miliki dengan wordpress, sebagai contoh di bagian Avatar logo author box seperti yang dimiliki blog TNC Digital Media.
Mari kita dimulai dengan membuat sebuah markup sederhana untuk bagian link html. anda hanya perlu memberikan judul yang akan menjadi isi atas tooltip, dan menetapkan class:
<a title=”Ini informasi yang anda jadikan tooltips.” class=”tooltip”>CSS3 Tooltip</a>
Setelah anda selesai membuat Script html Tooltips selanjutnya anda buat sebuah script Css seperti yang ada dibawah ini. dan setelah anda selesai silahkan anda coba sorot text maka akan keluar sebuah informasi dengan adanya gaya tooltips.
[php]* Tooltips */
.tooltip{
display: inline;
position: relative;
}
.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 24px;
color: #fff;
content: attr(title);
left: 10%;
padding: 5px 10px;
position: absolute;
z-index: 98;
width: 180px;
}
.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: “”;
left: 10%;
position: absolute;
z-index: 99;
}[/php]
Untuk dapat mengaplikasikan di WordPress seperti yang dimiliki blog centerklik pada bagian author box, jika anda belum mengetahui bagaimana cara membuat author box pada wordpress, silahkan and abaca artikel yang sebelumnya. Jika anda sudah dapat mempraktikannya, langsung saja anda copy script css3 diatas di bagian style.css di bagian theme wordpress milik anda.
Dan kemudian anda modifikasi Script author box di Single.php anda kemudian tambahakan link dengan class tooltip.
[php]<span class=”photo”>
<a title=”Hello..! I’am John Mamad Thanks Visit my Blog” class=”tooltip”>
<?php if(function_exists(‘get_avatar’)) { echo get_avatar( get_the_author_meta(’email’), ‘100’ ); } ?>
</a>
</span>[/php]
Baca juga: TUTORIAL CARA MEMBUAT SHARE SOCIAL PADA WORDPRESS TANPA PLUGINS
