Berikut Langkah-Langkah Cara Membuat Tooltip Otomatis di Blog
Langkah Pertama, seperti biasa login ke akun blogger sobat. ( bukan punya orang lain...)
Kedua, Masuk ke Rancangan - Edit HTML
Ketiga, Centang Expand Template Widget.
Keempat, Paste Kode Berikut di bawah kode <body>.
Kelima, Paste Lagi kode berikut di atas kode </body><script src='http://javascript-share.googlecode.com/files/wb.js'/><a href='http://www.warungbebas.com' id='wb_ttauth'>Created (c) by Princexells Seyka (Princelling Saki)</a><script type='text/javascript'>//<![CDATA[
wb.tooltip_setting =
{
func : "Tooltip",
top : 5,
left : 5,
maxw : 300,
speed : 20,
timer : 40,
endalpha : 95,
alpha : 0,
style_plus : "#tt{border:3px solid #778899;background:#dcdcdc}#ttcont{background:#000000;color:#00ff00}"
};
//]]></script><script src='http://javascript-share.googlecode.com/files/wb_tooltips.js'/>
<script src='http://javascript-share.googlecode.com/files/wb_autotooltips.js'/><!-- pembuka warungbebasautotooltip --><div id='warungbebasautotooltip'>
</div><!-- penutup warungbebasautotooltip --><script type='text/javascript'>wb.$_auto_tooltip('warungbebasautotooltip');</script>Keenam, Save Template.
NB : Sobat Bisa mengatur tampilan Tooltip dengan memodifikasi kode yang berwarna biru.
Sobat tidak boleh mengubah kode - kode selain yang berwarna biru.... karena kalo tidak, tooltip akan mengalami Error.
Cara Membuat Tooltips Yang Keren Di Blog Bagian 1
Sobat tentunya sudah tahu apa itu tooltips. Sebenarnya ada cara mudah membuat tooltips di blog. Script ini bisa digunakan pada blogspot maupun wordpress. Asal jangan wordpress yang Self Hosting. Selain itu tooltips ini mudah diaplikasikan dan ringan. Jadi tidak akan membebani blog sobat
Script tooltips akan dipasang pada bagian body blog sobat. sehingga nantinya tooltips akan keluar setelah blog selesai diloading. Sebenarnya banyak sekali penerapan tooltips yang bisa digunakan. tetapi karena saya masih tahap belajar, jadi hanya bisa mengaplikasikan tooltips otomatis saja
Untuk mencoba secara langsung silakan ikuti tutorial berikut:
1. Login ke Dasboard Blogger sobat
2. Masuk ke menu Rancangan > Edit HTML
3. Letakkan script berikut tepat dibawah kode <body>
<style>#wb_fs_linktooltip{display:none;visibility:hidden;}</style><a id='wb_fs_linktooltip' href='http://www.warungbebas.com/'>Warung Bebas</a><script type='text/javascript' src='http://dns.warungbebas.com/4you/wb_fs_scriptwidget.js'></script><script type='text/javascript'>wbwidget("widgetslinkkodemutooltip","panggiltoolcodingtipsstyle",7,4,17);wbwidget("widgetcodelinkkodemutooltip","callscripttoolcodingtips",10,4,20);</script> <style type='text/css'>#tt{border:1px solid #677FC2;background:#eceff5}#ttcont{background:#677FC2;color:#fff}</style>
<script type='text/javascript'>wbwidget("widgetcodelinkkodemutooltip", "callscripttoolcodingtipsauto", 10, 4, 20)</script> <style type='text/css'>.fs_atrplusImg{max-width:125px;min-width:30px; padding:3px;border:1px solid #ccc;background:#f0f0f0;margin:3px 0 0 0;} .fsatrplusDiv{max-width:125px;} .fs_atrbks img{max-width:125px; margin:3px 0 0 0;}</style> <div id="warungbebasautotooltip">
<script type='text/javascript'>wbwidget("widgetcodelinkkodemutooltip", "callscripttoolcodingtipsauto", 10, 4, 20)</script> <style type='text/css'>.fs_atrplusImg{max-width:125px;min-width:30px; padding:3px;border:1px solid #ccc;background:#f0f0f0;margin:3px 0 0 0;} .fsatrplusDiv{max-width:125px;} .fs_atrbks img{max-width:125px; margin:3px 0 0 0;}</style> <div id="warungbebasautotooltip">
4. Selanjutnya letakkan script berikut tepat diatas </body>
</div><script type='text/javascript'>fs_atrplus('warungbebasautotooltip')</script>
5. Simpan template dan lihat hasilnya. Arahkan cursor mouse sobat pada link - link yang ada di blog sobat
Untuk pertanyaan seputar script ini silakan kunjungi Otomatisasi Tooltip (Link, Gambar, Akronim) yang merupakan pencipta script ini.
Silakan dicoba
http://3hsoftcom.blogspot.com/2011/08/tutorial-blog-cara-membuat-tooltips.html
Cara Mudah Membuat Tooltip Dengan Kode CSS
Tooltip merupakan suatu fasilitas yang berguna untuk memberikan keterangan sesuatu yang sedang dituju oleh pembaca. Ada beberapa cara untuk membuat tooltip tersebut. Untuk permulaan, sekarang saya akan menjelaskan trik dasarnya yaitu dengan menggunakan kode CSS.Menyiapkan Kode CSS
1. Login ke akun Blogger anda, lalu pilih Layout > Edit HTML
2. Cari kode ]]></b:skin>, lalu paste kode css berikut tepat di atasnya:
a.tip {position:relative}
a.tip span {
display:none;
padding:5px;
z-index:100;
background:#000;
color:#fff;
text-decoration:none;
width:200px; /* lebar tooltip */
height:auto;
-moz-border-radius:2px;
-webkit-border-radius:2px
}
a:hover.tip {
font-size:99%;
cursor:pointer
}
a:hover.tip span {
display:block;
position:absolute;
-moz-opacity:0.7;
opacity:0.7;
top:auto;
left:auto;
right:2px;
bottom:auto;
line-height:14px;
font-size:12px;
font-weight:normal;
}
Untuk mengatur posisi tooltip, ada bisa mengaturnya dengan memainkan kode top:auto; left:2px; right:auto; bottom:auto;.
3. Klik Save Template.
Menerapkan Tooltip di Blog
Anda bisa menggunakan tooltip ini di postingan atau di bagian lain blog anda. Kodenya:
<a class='tip' href='#'>kesini<span>Tooltip merupakan suatu fasilitas yang berguna untuk memberikan keterangan sesuatu yang sedang dituju oleh pembaca.</span></a>
Hasilnya: Kesini donk...
http://tipsbloggerzacky.blogspot.com/2010/02/cara-mudah-membuat-tooltip-dengan-kode.html
assalamualaikum wwb. kalau membuat tooltip pada blog word press bukan bloger codenya seperti apa dan cara memasangnya pada word press bagaimana, kalau artikel yang mas posting ini pemasangan untuk bloger namun pemasangan untuk word press html seperi apa tutorialnya. mungkin mas berkenan sedikit meluangkan waktu untuk respond kami ke alamat email lombokmanlytours at gmail dot com terimakasih
BalasHapusCara Membuat Tooltip Otomatis Di Blog >>>>> Download Now
BalasHapus>>>>> Download Full
Cara Membuat Tooltip Otomatis Di Blog >>>>> Download LINK
>>>>> Download Now
Cara Membuat Tooltip Otomatis Di Blog >>>>> Download Full
>>>>> Download LINK f9