Cara Membuat Show-Hidden Widget di Blogspot

Membuat show-hidden widget blog sangat diperlukan untuk mempercantik blog. Beberapa widget mungkin dapat kita tampilkan dalam box tersembuyi dan hanya akan terlihat ketika seorang pengunjung menginginkannya saja. 

Selain itu, diharapkan mampu memberi peluang blogger untuk memunculkan tampilan baru yang lebih indah. Dengan membuat "tombol" atau button yang bagus, Saya kira apa yang diharapkan pasti akan dapat diwujudkan. Berbagai bentuk button, baik berupa gambar biasa atau animasi, css3 button, teks dan box dengan shadow efects juga bisa kita pakai buat membuat tampilan berbeda. Bahkan sampeyan juga bisa memanfaatkan opacity effect untuk menambah daya tarik show-hidden box ini.

Dengan ini, kita tidak terlalu banyak mengambil tempat widget  sisanya masih dapat digunakan untuk keperluan apapun dan bagaimanapun.

Cara Membuat Show-Hidden Box di Widget Blogspot

Javascript 

<script type='text/javascript'>
  if(typeof(rnd) == 'undefined') var rnd = '';
  rnd = Math.floor(Math.random()*1000);
  rnd = 'id-' + rnd;
  document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;">');
  </script>
  <center>
  <div style="background:#b3c8ce url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY7JJX_GXi9Np0nLMVGwfCV1b0X0r75arU6i0h8OIplMNd5benbyy2NLWBjUmQPxgsYJiqUv2SpwYLTDPfuKsW0Gbyqd295j4le6Lj1jAc3YxV8mjloiztLT-V4r-rim75FVw3WXnIlQw/s320/Untitled-55-copy.gif) left top repeat-x;width:260px;padding:2px 0;">
  <p style="background:#98d6e5 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgBlueFadeV71H1.gif) left top repeat-x;font-size:14px;font-weight:bold;color:#012750;font-family:Tahoma;padding:4px;border:1px solid #333;margin:5px;">Judul/Nama Widget<br />
  <img src="http://i964.photobucket.com/albums/ae124/gubhugreyot/Mart10/template-GR/Show-HideH115V34.jpg" width="112" height="28" style="margin:2px auto;" /></p>
  <script type='text/javascript'>
  document.write('<div id="' + rnd + '" style="display:none;padding:8px;background:#e1eaf1;margin:0 5px 8px;">');
  </script>

Letakkan widget yang akan di sembunyikan di sini!

<script type='text/javascript'>
  document.write('<\/div>');
  </script>
  </div>
  </center>

Langkah menggunakan Show-Hidden Widget

1. Login to BloGGeR.
2. Setelah masuk di halaman Dasboard, KLIK link Design/Rancangan.
3. Design/Rancangan : KLIK Add Gadget/Tambah Gadget (box yang bergaris putus-putus).
4. KLIK HTML/Javascript.
5. Pastekan seluruh Javascript Show-Hidden dan kode HTML Widget yang akan dipasang.
6. KLIK SAVE/Simpan, kemudian lihat hasilnya dengan membuka blog.

Keterangan :

1. Ganti Teks yang bertuliskan Letakkan widget yang akan di sembunyikan di sini! dengan Kode HTML Widget yang akan di pasang.
2. Sebagai contoh, coba pasang kode HTML di bawah ini untuk menggantikan teks tersebut :
3. Ganti Judul/Nama Widget sesuai widget yang digunakan.
4. width:260px; merupakan lebar show hidden. Sampeyan dapat merubahnya sesuai ruang yang tersedia. Semakin kecil maka akan semakin sempit.

Referensi: Gubhugreyot

Ingin Berlangganan Artikel Terbaru ke email kamu? Masukan Email kamu disini:

Tidak tahu cara berlangganan? Klik disini

Related Post:

Triks Blog

• Membuat Artikel Terkait Dengan Scroll
• Cara Membuat Reply Komentar
• Cara Mensubmit Artikel ke Lintas Berita
• Cara Mendaftar di Lintas Berita
• Cara Menambahkan Headline News di Blog
• Membuat Menu dan Sub Menu Horizontal
• Cara Membuat Tag Cloud Animasi
• Cara Backup Templates
• Cara Membuat Background Pada Widget Blog
• Cara Membuat dan Mengganti Favicon di Blog
• Cara Membuat Pesan Pembuka dan Kotak Dialog
• Cara Membuat Javascript Image Loader for Blog
• Cara Membuat Artikel Terkait (Related Posts) Bergambar
• Cara Membuat Artikel Terkait (Related Posts)
• Modifikasi Tampilan Read more
• Cara Membuat Spoiler di Blog/Forum
• Cara Mengganti Style Font Blog
• Menghilangkan Icon Obeng dan Tang / Quick Edit di Blog

Blog

• Ribuan Backlink Gratis dari IMTalk
• Cara Memasang Tweetmeme di Setiap Postingan
• Cara Mendaftarkan Blog ke DMOZ
• Cara Membuat Short URL Google Plus
• Cara Daftar Google Plus (Google+)
• Google Update Pagerank Juli 2011
• Cara Menghapus dan Mengecek Broken Link Pada Blog
• Apa itu Google Plus (Google+) ?
• Tips Menghadapi Komentar Negatif
• Menambah Meta Tag Untuk Perkuat Postingan Kontes SEO
• Kontes SEO, Berbahaya!
• Pentingnya Menjawab Setiap Komentar di Blog
• Kenali Pengunjung Blog Anda
• 10 Artikel Terbaik Bulan Juni 2011
• Metode On Page dan Off Page SEO
• Cara Membuat Link Internal di Setiap Postingan
• Siapa Pengunjung Setia di Blog Anda?
• Tips Mendapatkan Pengunjung Setia di Blog
• Favicon Generate - Fitur Baru Blogger
• Cara Menambah Tombol Google +1
• DAW-XP Toolbar - Akses Cepat Menuju DAW-XP
• Cara Membuat Toolbar Alexa Sendiri
• Cara Memasang Alexa Widget
• Manfaat Alexa Toolbar
• Apa itu Alexa Rank?

Anda sedang membaca artikel tentang Cara Membuat Show-Hidden Widget di Blogspot dan anda bisa menemukan artikel Cara Membuat Show-Hidden Widget di Blogspot ini dengan url http://daw-xp.blogspot.com/2011/04/cara-membuat-show-hidden-widget-di.html, anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Show-Hidden Widget di Blogspot ini sangat bermanfaat bagi teman-teman anda, namun jangan lupa untuk meletakkan link Cara Membuat Show-Hidden Widget di Blogspot sumbernya.