Membuat Show hide Widget

bagi-bagi tutorial yuukk !!!

Ok.
bagi yang belum tahu apa itu showhide :
show : Muncul
hide : Sembunyi
wkwkwkkwwkwkwk.....

fungsi dari showhide ini adalah selain untuk mempercantik halaman page blog kita, tapi juga berguna untuk menghemat halaman blog kita ...

baiklah, mari kita mulai tutotialnya...

langkah pertama adalah menginjeksi kan sebuah Js yang berfungsi sebagai Action, adapun Js tersebut adalah

function show_hide(the_box) {
if (document.getElementById(the_box)) {
if (document.getElementById(the_box).style.display == 'none') {
document.getElementById(the_box).style.display = 'block';
}
else {
document.getElementById(the_box).style.display = 'none';
}
}
}

injeksikan file js tersebut ke webhosting kepercayaan anda...
Simpan dengan nama SHOWHIDE.JS

setelah itu...
dari Dasbor -> Tata Letak -> Edit HTML

masukkan kode ini di atas kode : <![CDATA[/*

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

Isi http://khamardos.googlecode.com/files/show%20hide.js dengan url js SHOWHIDE.js yang baru anda hosting...

setelah itu klik Simpan Templete ...

Langkah kedua,
Dasbor -> Tata Letak
bila anda ingin menyisipkan kode pada box baru, klik add widget ...
lalu klik Javascript/Html
Kosongkan bagian Judulnya, dan masukkan file dibawah ini pada isi dari widget tersebut !!!

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


Isi dengan kode html atau file-file anda !


</div>

contah penggunaan !!!

<h2><a href="#" onclick="show_hide('LINK'); return false"><div title="">LINK SAYA</div></a></h2>
<div id="LINK" style="display: none;">


<font face="Times New Roman" color="red" size="4">Link Me :</font><br/>Semua saling membutuhkan.<br/>
Begitu juga saya, tolong masukkan link saya pada situs anda.
<br/><br/>
<center><a href="http://khamardos.co.cc/" target="_blank"><img border="0" alt="Mufied Blog" width="180" src="http://i655.photobucket.com/albums/uu271/spantibelspku/blog/logo.png" height="80"/></a></center><br/>Copy This Link :<br/><form action="" name="form1" method="post"><textarea onmouseout="hideddrivetip()" onclick="select_all();" ;="" readonly="readonly" onmouseover="ddrivetip('Terima kasih atas bantuannya.<br>Press Ctrl + C','#000000')" cols="20" rows="3" name="type"><a href="http://khamardos.co.cc/" target="_blank"><img border="0" alt="mufied's Blog" width="180px" src="http://i655.photobucket.com/albums/uu271/spantibelspku/blog/logo.png" height="80px"/></a></textarea>
</form>


</div>

Lalu klik simpan, Silahkan liat hasilnya diblog anda !!!


Info from Ojanz and Coco_nk4l

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
• 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

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+