Minggu, 12 Agustus 2012

Cara Membuat Tombol Show / Hide Di Blog

Ingin menampilkan tombol show/hide di blog kamu? apa itu tombol show/hide? Tombol Show/Hide adalah tombol yang berfungsi untuk menyembunyikan suatu teks, gambar, video dan lain - lain, kemudian dapat pula di munculkan kembali. Tombol Show/Hide ini juga sangat bermanfaat untuk merapihkan blog atau agar terlihat simple. Berikut adalah bagaiman cara membuat tombol show/hide di blog kamu.



  • Log in ke Blogger
  • Pilih Tata Letak  
  • Pilih Tambah Gadget 
  • Pilih HTML/Javascript.
  • Copy/paste kode di bawah ini.
<center><div style="margin: 3px;">  <div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 240px;" value="Open" onclick="if
(this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)
[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;)
{ this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)
[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;;
this.innerText = &#39;&#39;; this.value = &#39;Open&#39;; } else {
this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)
[1].getElementsByTagName(&#39;div&#39;)
[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;;
this.value = &#39;Close&#39;; }" type="button" />
</div>
<div style="border: 0px inset ;
margin: 0px; padding: 0px;" class="alt2">
<div style="display: none;">
<center><div style="overflow:auto;width:200px;height:200px;padding:10px;border:1px solid #000">


Disini kamu simpan filenya.


</center>
</div></center></div></div></div><br/>
</center>

  • Terakhir di Simpan. 

Keterangan lebih lanjut :
  • Kamu ganti teks yang berwarna hijau dengan teks sesuai keinginan.
  • Kamu ganti angka yang berwarna merah sesuai ukuran tombol button Show/Hide sesuai keinginan.
  • Kamu ganti angka yang berwarna biru dengan ukuran lebar dan tinggi border Tombol Show/Hide sesuai keinginan.

3 komentar:

mbogo.net mengatakan...

ini yang aku cari... izin coba bos.

eris mengatakan...

silahkan sob,,,,trim's

mbogo.net mengatakan...

follow back ya sob.. terima kasih.

Posting Komentar

Recent Post

Check Page Rank of your Web site pages instantly:

This page rank checking tool is powered by Page Rank Checker service

Statistik
PageRank Checking Icon
 
Copyright 2011 @ visitEris!
Design by Wordpress Manual | Bloggerized by Free Blogger Template and Blog Teacher | Powered by Blogger