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 :
-
Login ke blogger, klik Design/Rancangan > Page Element/Elemen Halaman.
-
Klik Add a Gadget, pilih HTML/Java Script
- 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('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Daftar Isi'; }" 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&alt=json-in-script&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('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Daftar Isi'; }" 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&alt=json-in-script&callback=loadtoc"> </script>
</div></div></div></div></div></div></div> - Lalu klik Save.hasilnya akan seperti ini, silakan di klik.
Wah,, daftar isinya unik,,, jadi pengen nyoba.. thank's gank udh berbagi... Blognya kreen...
ReplyDeletekunjungi blogku jg yah..
http://edynlaskar09.blogspot.com
Oya, gank... klo blh ngasi masukn... komentarnya dikasi avatar dong spaya lebih smangt komentrnya,,, hehe..
ReplyDelete..makasih mas bro.. tutorialnya bermanfaat..
ReplyDelete
ReplyDeletekereen infonya :)
ReplyDeletesukses terus gan ditunggu artikel selanjutnya
ReplyDeletemenarik infonya gan :")
kok hasilnya kosong , pas di save cuma muncul Dafta isi aja sob
ReplyDeletesangat menarik sekali infonya :)
ReplyDeleteThanks infonya sangat bermanfaat sekali buat saya, di tunggu ea artikel selanjutnya :D
ReplyDeleteMantappppp infonya gan thankas ea :D
ReplyDeleteterima kasih banyak atas imformasinya ini sangat bermanfaat khususnya untuk saya pribadi, sukses ya gan..
ReplyDeletekereen bangettt sok artikelnya thanks infonya...
ReplyDelete
ReplyDeletethanks ea, kerennn bangettt infonya.... sukses selalu ea sob
thanks infonya gan,,,
ReplyDeleteNot Work Gan,...
ReplyDeletePembelian obat denature bisa invite pin bbm kami : 7968ab6b
ReplyDeletePembelian obat denature bisa invite pin bbm kami : 7968ab6b
ReplyDeleteshijun 7.2
ReplyDeletenba jerseys
louis vuitton outlet
louis vuitton outlet
christian louboutin outlet
louis vuitton purses
celine bags
louis vuitton handbags
coach outlet
christian louboutin shoes
lebron james shoes 2015
louboutin
jordan shoes
michael kors handbags
christian louboutin outlet
coach factory outlet
gucci outlet
hollister clothing store
michael kors outlet
abercrombie kids
hollister kids
louis vuitton
p90x
insanity dvd sale
concord 11
chanel handbags
concord 11s
jordan 6s
nfl jerseys
michael kors outlet
gucci
louis vuitton purses
burberry handbags
lv handbags
pandora bracelets
cheap ray bans
michael kors outlet online
toms shoes outlet
coach outlet online
michael kors outlet
jordan 13 retro
scarymazegames.co
ReplyDeleteMineblocks.net
scarymazegames.co
ReplyDeleteMineblocks.net
Your Blog all Post information is very unique and good for reader because when i have read your blog looks very impressive for me. I want to say thanks to you. Most importantly I have bookmark your site for future updates.I’m just waiting for your next update to come as I like all your posts
ReplyDeleteslitheriounblocked.net slitherioprivateservers.com Clickerheroes2.co