Kelebihan 'Tutorial Pasang Tumbol Spoiler Di Blog' kali ini, memudahkan pengunjung membaca senarai entri yang ingin kita ketengahkan. Contoh boleh tengok di blog ini di sebelah kiri tombol "Klik Tutorial".Cara-caranya ikut step seperti di bawah:
1. Sign in akaun blogger
2. Dashboard > Design > Add A Gadget > Html / Javascript
3. Copy dan paste kod di bawah ini di Html / Javascript
<center><div id="spoiler"><div><input value="TAJUK SPOILER ANDA" style="width:88px ;font-size:12px;background-image: url(http://s.io.ua/img_aa/small/1120/96/11209689_0.jpg);-moz-border-radius: 10px; border-radius: 10px;margin:13px;padding:0px;border-style: 2px solid #ff9fcc;" type="button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Hide Spoiler!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show Spoiler!'; }" /><div id="show" style="display: none; background-color:transparent; background-repeat:repeat; margin: 0px;border-width:0px; padding:3px; width:90%"><div style="text-align: justify;"><div style="text-align: justify;"><div style="text-align: justify;"><img src="URL IMAGE" /><a href="URL TAJUK ENTRI 1" target="_blank">TAJUK ENTRI 1</a><br /><img src="URL IMAGE" /><a href="URL TAJUK ENTRI 2" target="_blank">TAJUK ENTRI 2</a><br /><img src="URL IMAGE" /><a href="URL TAJUK ENTRI 3" target="_blank">TAJUK ENTRI 3</a></center></div>
Contoh seperti di bawah:
<center><div id="spoiler"><div><input value="Klik Tutorial" style="width:88px ;font-size:12px;background-image: url(http://s.io.ua/img_aa/small/1120/96/11209689_0.jpg);-moz-border-radius: 10px; border-radius: 10px;margin:13px;padding:0px;border-style: 2px solid #ff9fcc;" type="button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Hide Spoiler!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show Spoiler!'; }" /><div id="show" style="display: none; background-color:transparent; background-repeat:repeat; margin: 0px;border-width:0px; padding:3px; width:90%"><div style="text-align: justify;"><div style="text-align: justify;"><div style="text-align: justify;"><img src="http://sl.glitter-graphics.net/pub/484/484784wlxjra5dy3.gif" /><a href="http://tutorialcantik.blogspot.com/2012/07/buang-attribution-powered-by-blogger.html" target="_blank">Buang Attribution (Powered by Blogger</a><br /><img src="http://sl.glitter-graphics.net/pub/484/484784wlxjra5dy3.gif" style="background-color: ;" /><a href="http://tutorialcantik.blogspot.com/2012/07/buat-kotak-icon-comel.html" target="_blank">Buat Kotak Icon Comel</a><br /><img src="http://sl.glitter-graphics.net/pub/484/484784wlxjra5dy3.gif" style="background-color: ;" /><a href="http://tutorialcantik.blogspot.com/2012/07/buat-kotak-tajuk-post-dan-tajuk-side-bar.html" target="_blank">Buat Kotak Tajuk Post dan Tajuk Side Bar</a></center></div>
Done! Mudahkan... ^_^
Tiada ulasan:
Catat Ulasan