Tutorial Pasang Tumbol Spoiler Di Blog

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(&#39;div&#39;)[&#39;show&#39;].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;show&#39;].style.display = &#39;&#39;; this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;hide&#39;].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Hide Spoiler!&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;show&#39;].style.display = &#39;none&#39;; this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;hide&#39;].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Show Spoiler!&#39;; }" />
<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(&#39;div&#39;)[&#39;show&#39;].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;show&#39;].style.display = &#39;&#39;; this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;hide&#39;].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Hide Spoiler!&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;show&#39;].style.display = &#39;none&#39;; this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[&#39;hide&#39;].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Show Spoiler!&#39;; }" />
<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... ^_^

1 ulasan:

Komen Terbaru