Membuat Widget Daftar Isi Tersembunyi

Diposkan oleh Madie Zha on 31 December 2011 at 2:43 PM

Membuat Widget Daftar Isi Tersembunyi | Tutorial Blog

Membuat Widget Daftar Isi Tersembunyi | Tutorial Blog

Sebelumnya saya pernah posting tentang 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.
    Membuat Widget Daftar Isi Tersembunyi
  2. Klik Add a Gadget, pilih HTML/Java Script
    Membuat Widget Daftar Isi Tersembunyi
  3. Lalu masukkan kode 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 keinginan 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 berdasarkan 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.
    Membuat Widget Daftar Isi Tersembunyi
    hasilnya akan seperti ini, silakan di klik.

    Daftar Isi

    • Judul Postingan
    • Judul Postingan
    • Judul Postingan
    • Judul Postingan
    • Dan Seterusnya
Sekian tutorial tentang Membuat Widget Daftar Isi Tersembunyi.

.:. 18 komentar .:.Post a Comment

  1. Wah,, daftar isinya unik,,, jadi pengen nyoba.. thank's gank udh berbagi... Blognya kreen...

    kunjungi blogku jg yah..
    http://edynlaskar09.blogspot.com

    ReplyDelete
  2. Oya, gank... klo blh ngasi masukn... komentarnya dikasi avatar dong spaya lebih smangt komentrnya,,, hehe..

    ReplyDelete
  3. ..makasih mas bro.. tutorialnya bermanfaat..

    ReplyDelete

  4. sukses terus gan ditunggu artikel selanjutnya

    ReplyDelete
  5. kok hasilnya kosong , pas di save cuma muncul Dafta isi aja sob

    ReplyDelete
  6. sangat menarik sekali infonya :)

    ReplyDelete
  7. Thanks infonya sangat bermanfaat sekali buat saya, di tunggu ea artikel selanjutnya :D

    ReplyDelete
  8. Mantappppp infonya gan thankas ea :D

    ReplyDelete
  9. terima kasih banyak atas imformasinya ini sangat bermanfaat khususnya untuk saya pribadi, sukses ya gan..

    ReplyDelete
  10. kereen bangettt sok artikelnya thanks infonya...

    ReplyDelete


  11. thanks ea, kerennn bangettt infonya.... sukses selalu ea sob

    ReplyDelete
  12. Pembelian obat denature bisa invite pin bbm kami : 7968ab6b

    ReplyDelete
  13. Pembelian obat denature bisa invite pin bbm kami : 7968ab6b

    ReplyDelete

 
Alexa Certified Traffic Ranking for http://wadahtutorial.blogspot.com
Follow
back to top
Home
back to bottom