Tuesday, December 18, 2012

Bagikan :

Tweet

Membuat Widget Daftar Isi Tersembunyi |

Sebelumnya saya pernah posting wacana Membuat Daftar Isi Blog, pada tutorial kali ini daftar isi tersebut akan kita pasang pada widget di sidebar blog dengan mode Show Hide.

Buat yang ingin mencobanya, silakan ikuti tutorial berikut :

1. Login ke blogger, klik Design/Rancangan > Page Element/Elemen Halaman.
   
2. Klik Add a Gadget, pilih HTML/Java Script
   
3. Lalu masukkan aba-aba berikut :
   <div class="widget-content">
   <div><div style="margin: 5px;"><div class="normalfont" style="margin-bottom: 2px;"><input 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;TUTUP&#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;Daftar Isi&#39;; }" value="Daftar Isi" style="margin: 0px; padding: 5px; width: 100%; font-size: 11px; background: none repeat scroll 0% 0% blue; border-top-left-radius: 15px; border-bottom-right-radius: 15px;" type="button" /></div><div class="alt2"><div style="display: none;"><div style="text-align: justify; padding: 2px;"><center><blink><h3>Daftar Isi</h3></blink></center><div style="overflow: auto; width: 270px; height: 200px; padding: 10px; border: 1px solid rgb(238, 238, 238);">
   
   <script src="http://post-xml.googlecode.com/files/feeds-labels.js"></script><script src="http://alamatblog.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
   </script>
   
   </div></div></div></div></div></div></div>
   Keterangan :
   blue : warna background, silakan ganti sesuai impian Anda.
   width: 270px; height: 200px; : Ukuran lebar dan tinggi widget, sesuaikan dengan sidebar Anda.
   alamatblog.com : Ganti dengan alamat blog Sobat.
   Widget diatas daftar isi menurut label, untuk Daftar Isi Berdasarkan Tanggal berikut kodenya :
   <div class="widget-content">
   <div><div style="margin: 5px;"><div class="normalfont" style="margin-bottom: 2px;"><input 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;TUTUP&#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;Daftar Isi&#39;; }" value="Daftar Isi" style="margin: 0px; padding: 5px; width: 100%; font-size: 11px; background: none repeat scroll 0% 0% blue; border-top-left-radius: 15px; border-bottom-right-radius: 15px;" type="button" /></div><div class="alt2"><div style="display: none;"><div style="text-align: justify; padding: 2px;"><center><blink><h3>Daftar Isi</h3></blink></center><div style="overflow: auto; width: 270px; height: 200px; padding: 10px; border: 1px solid rgb(238, 238, 238);">
   
   <script src="http://post-xml.googlecode.com/files/feed-dates.js"> </script><script src="http://alamatblog.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"> </script>
   
   </div></div></div></div></div></div></div>
4. Lalu klik Save.
   
   akhirnya akan menyerupai ini, silakan di klik.
   Daftar Isi

   • Judul Postingan
   • Judul Postingan
   • Judul Postingan
   • Judul Postingan
   • Dan Seterusnya

Sekian tutorial wacana Membuat Widget Daftar Isi Tersembunyi.

Tag : Tutorial Blogspot, Widget / Gadget