Efek tooltips adalah dimana pada saat di mouseover pada link url maka akan muncul pop-up tooltips, seperti di bagian top menu blog ini.
Namun tooltips ini masih belum sempurna, jadi harap maklum ya, silahkan sobat blogge memperbaruinya menjadi lebih baik lagi.
Langkah-langkah sbb :
1. Login ke blogger > rancangan > edit html, copy kode tooltips dibawah ini.
2. Ctrl F cari kode berikut ini ' ]]></b:skin> ' dan paste kode tadi diatasnya, seperti contoh dibawah ini.
background:url
Gantilah dengan gambar backgroundnya, ukuran gambarnya disesuaikan, ganti yang berwarna biru.
border:1px solid #FFFFFF;
Untuk mengatur ketebalan dari garis border tooltipnya.
-moz-border-radius:
Untuk memberi efek lingkaran pada siku tooltips.
opacity: 0.8;filter:alpha(opacity=80);zoom:1;
Untuk mengatur tingkat transparansi tooltips.
margin-top:-50px;
Untuk mengatur posisi tinggi rendahnya tooltips.
margin-left:-290px;
Untuk mengatur posisi ke kiri-kanannya tooltips.
font-family:Rockwell;
Ubahlah dengan font yang sesuai keinginan.
3. Simpan template blog.
4. Ini kode untuk memanggil tooltips ini atau kode agar membuat tooltipsnya berfungsi.
Contoh pengunaannya.
Contoh gambar.
Namun tooltips ini masih belum sempurna, jadi harap maklum ya, silahkan sobat blogge memperbaruinya menjadi lebih baik lagi.
Langkah-langkah sbb :
1. Login ke blogger > rancangan > edit html, 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;
}
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. Ctrl F cari kode berikut ini ' ]]></b:skin> ' dan paste 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.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>
background:url
Gantilah dengan gambar backgroundnya, ukuran gambarnya disesuaikan, ganti yang berwarna biru.
border:1px solid #FFFFFF;
Untuk mengatur ketebalan dari garis border tooltipnya.
-moz-border-radius:
Untuk memberi efek lingkaran pada siku tooltips.
opacity: 0.8;filter:alpha(opacity=80);zoom:1;
Untuk mengatur tingkat transparansi tooltips.
margin-top:-50px;
Untuk mengatur posisi tinggi rendahnya tooltips.
margin-left:-290px;
Untuk mengatur posisi ke kiri-kanannya tooltips.
font-family:Rockwell;
Ubahlah dengan font yang sesuai keinginan.
3. Simpan template blog.
4. Ini kode untuk memanggil tooltips ini atau kode agar membuat tooltipsnya 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>
Contoh pengunaannya.
<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="tooltips"><p>Permainan uji ketangkasan dalam mengelola lahan pertanian.</p></div></li>
Contoh gambar.
Selamat mencoba.
waw, mantap nih
ReplyDeletesaya pelajari dulu kang
Coretan Felix > silahkan saja gan... pahami dulu.. :)
ReplyDeletecontohnya yg gmn nih gan?? ada gambarnya ga??
ReplyDeleteBOOK ONLINE > contohnya ada di blog saya ini gan.. coba kamu mouseover pada Bagian isi konten dari Free Download.. :)
ReplyDeletewah makasih nih tipsnya..ntar ane coba...
ReplyDeleteManchester United Tech > silahkan dicoba2 gan.. :)
ReplyDeletewah bikin tambah menarik, ijin save ya
ReplyDeletethanks
mixedfresh > silahkan sj gan.. ;)
ReplyDeletemakin lengkap nh tutornya di sini...
ReplyDeletesilaturrahmi ne kawan
ReplyDeletebanner nya sdh aku pasang...
info balik ya..trims
etam grecek > saya usahakan update tutornya tiap minggu gan.. mudah2an bisa.. :)
ReplyDeleteodah etam > oke..thx..ntar wa mampir balik gan.. :)
wah mantab bang Andi ijin copy untuk dipelajari, salam
ReplyDeleteWarna Tulisan > Silahkan johnson.. pahami sj dulu.. :)
ReplyDeletewahh, mantap sob infonya..bisa saya coba nih
ReplyDeleteAZ COMSOFT > silahkan gan.. smoga berhasil :D
ReplyDeleteaku coba deh
ReplyDeleteReynaldi > siiip ;)
ReplyDeletesob nih artikel manfaat bnget yach ... btw txs ya .................. :D
ReplyDeletetrik yang jitu..menambah cantik tampilan blog..mau di coba dulu..
ReplyDeleteReynaldi > silahkan dicoba gan :)
ReplyDeletearchv3nture > kalo kita lebih kreatif malah akan lebih keren lgi tooltip-nya gan.. ;)
sipp deh tipzznya..
ReplyDeletedicoba ahhh.. :)
Lagi menyimak, abis itu lgs latihan ke tkp. Thanks bro, infonya mantaab :)
ReplyDeletenetworkblognya aq follow ya
gaelby > silahkan dipelajari & dipahami gan.. :)
ReplyDeleteSelamat sore sob..kunjungan sore nih,,,thanks masukannya yah
ReplyDeleteokok teman, mantab (pake B) tutornya.
ReplyDeleteterima kasih atas sharenya, bermanfaat bagi saya sebagai orang yang masih beLajar di dunia bLogging.
seLamat maLam dan seLamat istirahat aja, saLam sukses seLaLu.
Hamz > rajin2 mampir gan.. :)
ReplyDeleteom rame > thX (pake X gede) gan.. =))
menyapa pagi kawan
ReplyDeletebaru bangun ne habis begadang nonton PD tadi malam....
sukses slalu mat aktifitas ya
wah.., hasil experiment yang keren tuh master.., ijin nyimak and praktek yach :)) slam kenal master.. :D
ReplyDeletemantap gan,,
ReplyDeletekeren keren :D
Om Canel
odah etam > met aktivitas jg gan.. :D
ReplyDeleteNewbie > silahkan saja newbie.. ;)
Om Canel > silahkan dicoba gan... :)
Bagus juga ni sobat tooltipsnya...
ReplyDeletebikin link di articel kita berwarna warni...
biar pengunjung betah berlama-lamaan di blog kita.
salam blogger
wah ...kpn2 pengen cb nih...terima kasih infonya
ReplyDeletejaya > membuat blog kita berbeda (unik) gan.. :)
ReplyDeleteosi > kapan2 dicoba jg gkppa osi.. ;)
Aku pernah nyoba buat tooltip pke caranya oom, tapi kebanyakan css jadi lemot,
ReplyDeletetrims buat artikel
ReplyDeleteby http://mata-kuliah.co.cc/
Ka Damar > itu betul gan.. :)
ReplyDeleteAnonim > oke ..ntar wa mampir n bls komeng gan ;)
Mantabhhhh gan....;)
ReplyDeleteDownload Gratis > thx gan.. :D
ReplyDeletenice blog bro
ReplyDeleteMulti Info > makasih gan.. silahkan baca2 :)
ReplyDeletebung masih problem nda muncul toll nya
ReplyDeleteKRESEKpikiran > toll apanya gan ? bisa lebih spesifik lagi.. :)
ReplyDeleteinti nya saya uda coba sesuai dengan ptunjuk pak bos ... namun Pop-Up Tooltip-nya nda nongol...
ReplyDeletethanks atas infonya
ReplyDeleteKRESEKpikiran > sudah sesuai prosedur tutor..gk berfungsi yaa..?? heuum.. coba gw bisa liat widget template mu gan..
ReplyDeletejual beli liberty reserve > siip :)
Tutorial yang bagus gan....saya plajari dulu yah.....
ReplyDeleteSob, aku dah folbak yaaa. makasiii yaaa, tukaran link yuuuk :))
ReplyDeletehadi > silhkan dipelajari gan.. :)
ReplyDeletesemua butuh belajar > link sdh terpasang gan.. thx ya.. ;)
mantab dan bagus banget nich blognya, kunjungan balik ya bro di download ebook gratis
ReplyDeletekayanya anda seorang programer????
ReplyDelete@Download Ebook Gratis | cara-blog | kumpulan bisnis online:
ReplyDeleteTengkyu... :D ..woke ke TKP gan..
@Belajar Blogging:
ReplyDeletekok tw.. tpi itu dulu sewaktu masi coding Visual basic... skrg gk lagi..dah byk yg lupa script-nya..& trik2nya :D maklum dah mulai tuwir.. kekekkek
Mantap Bro mampir ke http://socialwap.co.tv dan gabung wap ku OKE=))
ReplyDelete=)) maaf emot kagax tampil
ReplyDelete@yanuar LK:
ReplyDeletesocial dalam konteks apa itu gan.. :)
@yanuar LK:
ReplyDeleteSCRIPT EMOT-nya gw ilangin gan..krn ngangu widget FOLower google gw.. :D
;))
ReplyDelete:))
ReplyDelete@Mufid:
ReplyDeletetesting emot ya..sory bro ..tpi script js emot-nya utk smentara wa del dulu..abisnya bentrok dg google follower..jd error.. :D
askum..!
ReplyDeletemakasi broo. atas artikelnya...
@architektur blogger:
ReplyDeleteya sob..sma2 silhkan dicoba.. :)
mantap bro.. artikelnya.. oh iya.. hampir lupa. makasi ya uda berkunjung di blog saya..
ReplyDeleteMantab Neh Gan, sekalian ijin follow ya...
ReplyDelete@Arsitektur Blogger:
ReplyDeletesm2 gan.. saling BW ya.. :)
@Lirik Video:
ReplyDeleteoke.. gw FOLLOW balik gan.. ;)
mantab gan ... langsung menuju TKP
ReplyDeletenice sharing teman...
ReplyDeletekeren gan jadi pengen nyoba juga nih, saya bookmark dulu aja , soalnya masih mau nglanjutin perjalanan (blogwalking)
ReplyDeletekeren gan...
ReplyDeletepertamax
gk bisa otomatis?
ReplyDeleteKok g di sertai contoh gambarnya mas... msh blm paham mas
ReplyDeletekok ane gak bisa ya mas??
ReplyDeletekunjungi = www.duniaq-duniamu.com ya gan...
keren euy.., tapi ko ga ada demonya om?
ReplyDelete