Combine Show Hide Sidebar with Tooltips

Hai sobat Blogger setia !!! gak terasa yach ternyata Pada bulan Juni ini google sudah mengupdate PageRank blog kita semua, Alhammdallah PG saya tidak beranjak turun, dan masih tetap nonkrong di posisi 3. 

Bagaimana dengan sobat semua ? Bagi yang naik selamat yach !! pertahankan dan raih yang terbaik dibanding yang sebelumnya !! Lalu, untuk sobatku yang PG nya turun atau masih belum juga naik jangan berkecil hati. Karena tujuan kita blogging bukan untuk mendapat PG belaka, tujuan terbaik untuk ngeblog adalah untuk saling share dan bersilaturahmi !!!

Ok, Pada postingan saya sebelumnya tentang Membuat Show Hide Widget dan Membuat ToolTips Pada Sebuah Objek  tentu sobat sudah tahu, lalu terlintas dipikiran saya bagaimana cara mempercantik blog dengan memanfaatkan 2 tutorial tersebut (Membuat Show Hide Widget dan Membuat ToolTips Pada Sebuah Objek).
Ya, caranya yaitu menggabungkan fungsi keduanya !!!!!

Ok sebagai previewnya :

Pada Preview disamping terlihat pada sidebar berjudul Chatting (Yang merupakan objek tooltips) dalam keadaan tertutup. (Sebelum di Klik pointer)



Lalu setelah di klik .....

Kotak Chatting (Yang merupakan isi dari sidebar charring) langsung terbuka.


 Atau sobat dapat melihatnya secara langsung di ICT-Smansa's Blog.


Bagaimana ?
menarik bukan ?
Ok langsung ajha kita peraktekkan !!!

1. Login pada Blogger
2. Masuk ke bagian Layout, 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 di bawah ini, dan paste dibawah Setelah kode

<script src='http://khamardos.googlecode.com/files/tooltips-red.js' type='text/javascript'/>

<script src='http://khamardos.googlecode.com/files/show%20hide.js' type='text/javascript'/>

Note : Pada kode yang saya beri warna merah dapat anda gantu juga dengan kode warna tooltips yang lainnya. (Lihat pada Membuat ToolTips Pada Sebuah Objek).

4. Selanjutnya, Klik Simpan.

5. Lalu kita beranjak ke Elemen Laman . Klik Add Widget Lalu HTML/JAVASCRIPT.
    Coba anda pahami penggunaan script dibawah ini, jika sudah paham copy script yang anda buat tersebut !!!

<div title="header=[:: Judul Tooltips ::] body=[:: Click Here to Open ::]">

<h2><a href="#" onclick="show_hide('DIV_ID_NYA'); return false"><div title="">JUDUL SIDEBAR YANG AKAN TAMPIL</div></a></h2>
<div id="DIV_ID_NYA" style="display: none;">

Isi dengan kode html atau file-file anda !

</div></div>

Contoh Penggunaan  :

<div title="header=[:: Buku Tamu ::] body=[:: Click Here to Open Chatting ::]"> <h2><a href="#" onclick="show_hide('Cbox'); return false"><div title="">Chatting</div></a></h2>
<div id="Cbox" style="display: none;">

<!-- BEGIN CBOX - www.cbox.ws - v001 -->

<div id="cboxdiv" style="text-align: center; line-height: 0">

<div><iframe frameborder="0" width="100%" height="305" src="http://www4.cbox.ws/box/?boxid=3848515&boxtag=m5f7r0&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#FF2F14 1px solid;" id="cboxmain"></iframe></div>

<div><iframe frameborder="0" width="100%" height="75" src="http://www4.cbox.ws/box/?boxid=3848515&boxtag=m5f7r0&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#FF2F14 1px solid;border-top:0px" id="cboxform"></iframe></div>

</div>

<!-- END CBOX -->

</div></div>

Note : Paste Script yang sudah di buat pada bagian konten, sedangkan judulnya dibiarkan kosong !!

6. Lalu Klik Simpan .

Selamat Mencoba Sobat, Jika Ada masalah silahkan kontak saya di komentar !!!

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

Artikel Lainnya :

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
• Memasang Sticky Tooltips Di Blogspot
• 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
• 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

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
• Memasang Sticky Tooltips Di Blogspot
• 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+