Download Now Download Themes Gratis WordPress Responsive!

Trik Membuat CSS3 Image Tooltip di WordPress

Tooltips adalah cara yang bagus untuk menampilkan informasi untuk pengunjung di website Anda dengan hanya melayang di atas gambar atau teks saat image atau text tersebut di sorot oleh mouse. Tooltips dapat digunakan, misalnya untuk memberikan keterangan untuk gambar, atau deskripsi yang lebih panjang untuk link, atau informasi yang berguna yang akan meningkatkan pengalaman pengguna dari situs Anda, tanpa mengganggu pada desain.

Tutorial Kali ini saya akan menunjukkan kepada Anda bagaimana untuk membuat tooltip sederhana menggunakan HTML dan CSS untuk menampilkan tag judul hyperlink Anda.Ā  dan nantinya akan di aplikasikan juga untuk website yang anda bangun dengan wordpress, sebagai contoh di Avatar logo author box seperti milik blog centerklik.

image tooltip wordpress css trik
Mari dimulai dengan membuat markup sederhana untuk link html. anda perlu memberikan judul yang akan menjadi isi tooltip, dan menetapkan class:

<a title="Ini informasi yang anda jadikan tooltips." class="tooltip">CSS3 Tooltip</a>

Setelah anda membuat Script html Tooltips sekarang anda buat script Css seperti dibawah ini. dan setelah selesai silahkan coba sorot text maka akan keluar informasi dengan gaya tooltips.

/* 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;
}

Untuk mengaplikasikan di WordPress seperti milik blog centerklik di bagian author box, jika anda belum tahu bagaimana membuat author box pada wordpress, silahkan baca disini. Jika anda sudah bisa langsung aja copy script css3 diatas di style.css di theme wordpress anda.

Dan kemudian modifikasi Script author box di Single.php anda tambahakan link dengan class tooltip.

<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>

Anda Terbantu artikel ini? Silahkan bergabung dengan centerklik di Twitter dan Google+.

Daftar isi Tutorial Wordpress Terlengkap Gratis
10 top hosting!

Register Now: TOP 10 Hosting

Dapatkan Hosting Murah dengan Kualitas Terbaik. For Serious Blogger! View Deals

Bluehost Hosting

$2.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

iPage Hosting

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

SiteGround Hosting

$3.45/Month Free Domain, Unlimited Space & Bandwidth Get Host

WebHostingPad

$1.99/Month Free Domain, Unlimited Space & Bandwidth Get Host

Hostgator

$3.95/Month Free Domain, Unlimited Space & Bandwidth Get Host

Must Read...!
Cara Edit Htaccess WordPress dengan WP Htaccess Editor

Tutorial Wordpress kali ini membahas tentang bagaimana mengedit htaccess dari admin wordpress anda tanpa...

12+ Desain Logo Band yang Keren dan Mengagumkan

Sebuah logo band besar dirancang dan tetap bertahan sampai saat ini. Saya memilih 12...

Close