CARA MEMBUAT TOOLTIPS DI BLOG...

...Banyak cara untuk memperkeren tampilan blog kita.. membuat perbedaan dengan blog lainnya... ini akan menjadikan blog kita mempunyai ciri khas tersendiri... salah satunya ialah dengan menambahkan efek tooltips di blog.. dimana pada saat di mouseover pada tautan URL (saya fokuskan di tautan saja) akan muncul pop-up Tooltips yang keren...

...Tooltips yang saya bahas ini merupakan hasil ekperimen saya dalam beberapa hari terakhir ini ...dari source code yang saya dapatkan via Mbah Google... Saya telah mencoba berbagai cara & kode untuk membuat Tooltips versi saya sendiri.. dan berhasil dengan ToolTips yang :
1. Gambar background yang bisa diganti-ganti...
2. Efek transparansi yang bisa diubah-ubah.. atau bisa juga tanpa transparansi...
3. Tidak memberatkan blog.. karena tidak memakai javascript (.js)...
4. Font-text nya bisa diganti-ganti...

...Ini Contoh Tooltips untuk di Postingan.. coba kalian MouseOver Link di bawah ini :

JOIN

KLIK JOIN JIKA ADA INGIN BERGABUNG DENGAN SAYA

..tapi tooltips ini masih belum sempurna... jadi harap maklum ya.. silahkan sobat blogger sekalian memperbaruinya menjadi lebih baik lagi...

...Oke.. langsung saja kita mulai Sharing Knowledge- nya , pahami langkah-berikut ini ;

A. Kode tooltips untuk di ditempatkan di dalam Kode HTML Template Blog...
1. Login ke Blogger > Rancangan > Edit HTML ...lalu Copy kode ToolTips dibawah ini...

li.sfhover .tooltips, li:hover .tooltips {
display:block;
}
.tooltips {
margin:6px 6px 0 6px;
padding:15px 10px 15px;
position:absolute;
width:250px; >
display:none;
background:url(http://sites.google.com/site/ecaknyo/blog/image-ecaknyo-1/yellowsoftbgtooltips.PNG) bottom repeat-x;
opacity: 0.8;filter:alpha(opacity=80);zoom:1;
border:1px solid #FFFFFF;
-moz-border-radius:10px;
}
.tooltips {
margin-top:-50px;
margin-left:-290px;
}
.tooltips:hover {
display:none!important;
}
.tooltips p {
font-size:12px;
font-family:Rockwell;
font-weight:bold;
color: #0060C8;
text-align:center;
margin:0 15px 0 0;
}

2. Cari kode berikut ini.. ]]></b:skin> ..dan Paste -kan kode tadi diatasnya... Seperti contoh dibawah ini...

li.sfhover .tooltips, li:hover .tooltips {
display:block;
}
.tooltips {
margin:6px 6px 0 6px;
padding:15px 10px 15px;
position:absolute;
width:250px;
display:none;
background:url(http://sites.google.com/site/ecaknyo/blog/image-ecaknyo-1/yellowsoftbgtooltips.PNG) bottom repeat-x;
opacity: 0.8;filter:alpha(opacity=80);zoom:1;
border:1px solid #FFFFFF;
-moz-border-radius:10px;
}
.tooltips {
margin-top:-50px;
margin-left:-290px;
}
.tooltips:hover {
display:none!important;
}
.tooltips p {
font-size:12px;
font-family:Rockwell;
font-weight:bold;
color: #0060C8;
text-align:center;
margin:0 15px 0 0;
}

]]></b:skin>

Ket :

background:url(http://sites.google.com/site/ecaknyo/blog/image-ecaknyo-1/yellowsoftbgtooltips.PNG) = Gantilah dengan URL gambar background kamu sendiri.. tetapi usahakan ukuran gambarnya disesuaikan... silahkan ganti yang berwarna biru...

border:1px solid #FFFFFF; = Untuk mengatur ketebalan dari garis border ToolTipnya.. disini saya memakai 1px dengan warna border putih.. silahkan ganti yang berwarna biru...

-moz-border-radius: = Ini untuk memberi efek Lingkaran pada siku gambar tooltips.. semakin besar nilainya maka hasilnya akan semakin berbentuk lingkaran... jadi biarkan saja default 10px..

opacity: 0.8;filter:alpha(opacity=80);zoom:1; > angka berwarna biru ini untuk mengatur tingkat Transparansi ToolTips... aturlah sesuka kalian...

margin-top:-50px; = Untuk mengatur posisi Tinggi rendahnya Tooltips... ubah angka yang warna biru...
margin-left:-290px; = Untuk mengatur posisi ke kiri-kanannya Tooltips... ubah angka yang warna biru...

font-family:Rockwell; = Kata yang berwarna biru ini ubahlah dengan font yang sesuai dengan keinginan kalian...

..Dan Seterusnya... silahkan kalian Modifikasi sendiri ya... banyak jika harus dijelaskan satu-persatu.. capek ngetiknya.. :)) ..saya yakin kalian mengerti kode-kode sisanya... ;)

3. Jika telah selesai.. Simpan Template Blog...


B. Kode untuk memanggil tooltips pop-up (Muncul)...
1. Perhatikan kode untuk memanggil tooltips ini atau kode agar membuat tooltips -nya berfungsi..

<li><a href="http://.....URL yang berkaitan dengan ToolTips...." > Judul URL yang berkaitan dengan ToolTips </a><div class="tooltips"><p> Kata-kata untuk ditampilkan pada Pop-up ToolTips</p></div></li>

Ket :
> Yang saya warnai merah adalah kode terpenting.. jadi jika kalian terlupa memasukannya makan tooltips-nya tidak akan berfungsi...

...Ini Contoh Pengunaannya... yang saya gunakan pada widget HTML/Javascripts.. (bisa juga kamu gunakan pada postingan loh..)...

<li><img src="http://i466.photobucket.com/albums/rr22/wong284/arrow_DOWNLOAD.gif" /><a href="http://www.ziddu.com/downloadlink/7138173/FarmFrenzy2.rar" > GaMe Farm Frenzy 2</a><div class="TOLtip"><p>Permainan uji ketangkasan dalam mengelola lahan Pertanian...</p></div></li>

...Contoh ToolTips Nyatanya ada di Blog saya ini.. Coba kalian MouseOver Isi Menu pada Bagian Free DownLoad di sebelah kanan Blog ini.. seperti gambar dibawah ini... :)


Note :
> Sebaiknya Kemunculan Pop-Up Tooltip-nya kalian atur munculnya dibawah Link/gambar tautan.. agar Tooltips ini bisa digunakan di seluruh area dalam blog kamu (di widget sebelah kiri/kanan atau di postingan atau di header/footer)...
> Kode Tooltips ini saya atur sedemikian rupa agar tampilannya sesuai dengan keinginan saya dan tema blog saya... makanya belum tentu akan cocok dengan blog lainnya... jadi silahkan kalian utak-atik sendiri sekreatif mungkin agar sesuai dengan tema blog/ keinginan kalian...

... Tooltips yang Simple...

Artikel Terkait di Bawah posting