Tips Dan Trik Membuat Widget Daftar Isi Tersembunyi- Blak Kotang - Sahabatku pembaca Setia Blakkotang, Saat ini anda sedang membaca pembahasan tentang Tips Dan Trik Membuat Widget Daftar Isi Tersembunyi- Blak Kotang , saya hanya seorang newbie yang berbagi, dan mudah mudahan artikel ini bisa membantu sahabat semua dan tentunya anda bisa memahami dan menerapkanya ,bila ada kekurangan atau kesalahan harap di maklumi dan di beri saran ya... .

Judul : Tips Dan Trik Membuat Widget Daftar Isi Tersembunyi- Blak Kotang
Membahas artikel tentang : Tips Dan Trik Membuat Widget Daftar Isi Tersembunyi- Blak Kotang

Tips Dan Trik Membuat Widget Daftar Isi Tersembunyi- Blak Kotang

Artikel Tutorial Blogspot, Artikel Widget / Gadget,

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.
   
2. Klik Add a Gadget, pilih HTML/Java Script
   
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.
   
   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.

Begitulah Pembahasan tentang artikel ini Tips Dan Trik Membuat Widget Daftar Isi Tersembunyi- Blak Kotang

Mungkin itu saja yang bisa saya jelaskan Tips Dan Trik Membuat Widget Daftar Isi Tersembunyi- Blak Kotang , Dan semoga artikel ini bisa sedikit membantu untuk para sahabat blakkotang .

Sahabat sedang membaca pembahasan tentang Tips Dan Trik Membuat Widget Daftar Isi Tersembunyi- Blak Kotang Pembahasan ini url permalinknya adalah http://blakkotang.blogspot.com/2011/12/tips-dan-trik-membuat-widget-daftar-isi.html Dan semoga pembahasan Mengenai Tips Dan Trik Membuat Widget Daftar Isi Tersembunyi- Blak Kotang , Bisa Membantu Dan semoga juga artikel ini bisa bermanfaat, dan bila arikel ini menurut sahabat blakkotang bermanfaat silahkan di bagikan kepada teman atau sahabat-sahabat lainya, terimakasih ,

ARTIKEL BERIKUTNYA :

.

Tweet