Memasang Sticky Tooltips Di Blogspot

Hello Sobat Blogger, Apa kabar kalian semua, semoga dalam keadaan sehat wal'afiat selalu dech sob .... G terasa bulan Ramadhan udah dekat banget ni sob, untuk itu, saya beserta keluarga ingin mengucapkan segala permintaan maaf baik itu yang di sengaja maupun yang tidak disengaja, karena untuk menyambut bulan Ramadhan yang suci ini hendaklah disambut dengan hati yang suci.

Ok dech, langsung saja pada postingan saya kali ini, pada artikel sebelumnya saya juga pernah memberi tutorial tentang membuat Tooltips (baca : Membuat Tooltips Pada Sebuah Objek) dan Tutorial Penggabungan Tooltips (baca : Menggabungkan Tooltips dengan Show Hide Sidebar).

Nah, berbeda dengan tooltips sebelumnya, Sticky Tooltips dibuat semenarik mungkin (Seperti yang tampak pada gambar diatas). Jika masih belum jelas previewnya dapat sobat lihat di Demo Sticky Tooltips (Lihat pada bagian kanan bawah sidebar "sponsor").

Jika Sobat tertarik maka lakukan langkah dibawah ini :
1. Login pada Blogger
2. Masuk ke bagian Rancangan, kemudian ke bagian Edit HTML
    Back up Template dengan cara Mengklik : Download Template Lengkap
    Setelah itu, beri tanda cek pada Expand Widget Templates.
3. Copy Kode dibawah, Lalu Paste di Bawah kode ]]></b:skin>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://khamardos.googlecode.com/files/sticky.js' type='text/javascript'/>
<style type='text/css'>
.stickytooltip{
box-shadow: 5px 5px 8px #818181; /*shadow for CSS3 capable browsers.*/
-webkit-box-shadow: 5px 5px 8px #818181;
-moz-box-shadow: 5px 5px 8px #818181;
display:none;
position:absolute;
display:none;
border:5px solid black; /*Border around tooltip*/
background:white;
z-index:3000;
}


.stickytooltip .stickystatus{ /*Style for footer bar within tooltip*/
background:black;
color:white;
padding-top:5px;
text-align:center;
font:bold 11px Arial;
}
</style>

4. Lalu Save, Setelah disave menuju ke Elemen Laman.
5. Pilih Sidebar yang akan dipasang "Sticky Tooltips", Lalu Tambahkan HTML/JAVASCRIPT.
6. Copy dan Paste kode di bawah ke form HTML/JAVASCRIPT tersebut.

<p><li><a href="URL YANG SOBAT TUJU" data-tooltip="sticky1"target="_blank">NAMA SITUS</a></li></p>
<p><li><a href="URL YANG SOBAT TUJU" data-tooltip="sticky2"target="_blank">NAMA SITUS</a></li></p>

<!--HTML for the tooltips-->
<div id="mystickytooltip" class="stickytooltip">
<div style="padding:5px">

<div id="sticky1" class="atip" style="width:200px">
<img src="URL IMAGE SOBAT" /><br />
TEKS DISKRIPSI TOOLTIPS <b><a href="URL YANG SOBAT TUJU"target="_blank">NAMA SITUS</a></b>, TEKS DISKRIPSI TOOLTIPS
</div>

<div id="sticky2" class="atip" style="width:200px">
<img src="URL IMAGE SOBAT" /><br />
TEKS DISKRIPSI TOOLTIPS <b><a href="URL YANG SOBAT TUJU"target="_blank">NAMA SITUS</a></b>, TEKS DISKRIPSI TOOLTIPS
</div>

</div>

<div class="stickystatus"></div>
</div>

Note : Silahkan diedit keterangan diatas (Pada Kode)

7. Setelah semua selesai, Lalu Save dan lihat Hasilnya ...

Bagaimana ? berhasilkah ? Jika merasa kesulitan bisa hubungi saya melalui kotak komentar, Dan nitip sesuatu ni sob, Jika artikel ini bermanfaat bagi sobat, dan jika tidak keberatan jangan lupa memberikan +1 nya ya sob... Dan jangan lupa juga berbagi dengan kawan-kawanmu yang ada di Facebook dan Twitter.

.:: HAPPY BLOGGING SOBAT ::.

Bagikan Jika Artikel ini menarik, Diharapkan agar memberikannya kepada teman2 anda di Facebook

Artikel Lainnya :

Tip n Trik

• Menampilkan Akun Google Plus Di SERP Google
• Tips Mempersingkat Alamat URL Akun Google Plus
• Hubungkan Google Plus dengan Facebook | Twitter
• Menghubungkan Google Plus ke FB dan Twitter
• Twitteran Di Dashboard Akun Google Plus
• Cara Download Semua Album Foto di Facebook
• Tips Cara Mendapatkan Sitelink Google
• Membuat Sebuah Link Mengarah Ke Lebih 2 URL
• Show Hide Chatbox Efek Jquery di Sidebar Blog
• Maksud Pesan Error Saat Mengakses Internet
• Merubah Kotak Chat Facebook ke Versi Lama
• Memasang Simple Menu Navigasi Horizontal
• Memasang Floating Share Button
• Googlebot Access Blog Bermasalah
• Tag H1 Untuk Judul Postingan dan Judul Blog
• Mempercepat IDM Menggunakan IDM Optimizer
• Memasang Hidden Chatbox With Jquery Di Sidebar
• Memasang Hidden Chatbox Pada Sidebar Blog
• Tingkatkan Traffic Blog Lewat VLog | VIVANews
• Tampilan Halaman Label Hanya Judul Postingan
• Cara Transfer Foto Dari Facebook Ke Google+
• Tips SEO Terbaru di Tahun 2011
• Tutorial Membuat S3slider Images Show
• Akhirnya, Bisa Juga Join Ke Google+

Tutorial Blog

• Menampilkan / Menyembunyikan Sidebar Blog
• Membuat Sebuah Link Mengarah Ke Lebih 2 URL
• Show Hide Chatbox Efek Jquery di Sidebar Blog
• Memasang Simple Menu Navigasi Horizontal
• Memasang Floating Share Button
• Tag H1 Untuk Judul Postingan dan Judul Blog
• Memasang Hidden Chatbox With Jquery Di Sidebar
• Memasang Hidden Chatbox Pada Sidebar Blog
• Tampilan Halaman Label Hanya Judul Postingan
• Tutorial Membuat S3slider Images Show
• Memasang Tombol Google +1 di Blogspot
• Membuat Recent Post With Thumbnails
• Membuat Intro Page Pada Blogspot
• Membuat Tab View Pada Blogspot
• Kode Warna HTML
• Combine Show Hide Sidebar with Tooltips
• Navigasi Breadcrumb Pada Postingan Blog
• Membuat Tooltips Pada Sebuah Objek
• Membuat Menu Navigasi Dengan Tooltips
• Membuat Page Peel Effect Pada Blogger
• Related Post With Scrool Function
• Pesan Kamu Di Atas "Poskan Komentar's Box"
• Membuat Form Komentar Admin
• Membuat Rate Widget Pada Blog