Cara membuat tombol show hide pada blog

Pasang Iklan Disini :

Cara memasang tombol SHOW HIDE pada blogspot, berikut ini akan saya sampaikan cara-caranya. Tutorial ini saya dapatkan dari hackerzpro.blogspot.com dan http://zuazz.blogspot.com nah silakan anda ikuti cara-cara berikut ini,, Bagi teman-teman yang ingin memasang tombol show hide di blog / postingan, caranya gampang banget nih. Teman-teman hanya perlu mengcopy paste kode HTML di bawah ini:

<div><div style="margin-bottom: 2px;"><b><small>Klik show untuk melihat</small></b>

<input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"></div>

<div style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;">

Masukkan tulisanmu di sini

</div></div></div>

Entri melalui HTML Jangan melalui Compose seperti tanda panah pada gambar di bawah:

Lalu paste code di atas dan jangan lupa mengganti kata yang digaris tengah yang berwarna merah dengan kata atau kode yang ingin teman-teman masukkan. Teman-teman juga bisa mengganti kata yang berwarna biru dengan kata yang diinginkan.

Masukkan kode di atas ke dalam postingan atau di sidebar blog teman-teman, maka hasilnya bisa dilihat di bawah ini.

Klik show untuk melihat

Masukkan tulisanmu di sini

Selamat mencoba, www.riyanghifar.com .!!!Silahkan copas tapi mohon link sumber tetap di cantumkan.!!

<div style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7lboGu9Vk5mrfDCJ1GycGh7F6lfLRlmf-IQ3H0GsfW8iCMNAcGPsqggyyPJdIcxAFvNII8To-aLFFpxYi1J5ID_ObQUZA8Wfbt5fJysmvg_XyY32LlWa1f-1QRgOJP3qaM3kfcZIClA/s1600/images.jpeg" /></div>
Cara memasang tombol SHOW HIDE pada blogspot, berikut ini akan saya sampaikan cara-caranya. Tutorial ini saya dapatkan dari <a href="http://hackerzpro.blogspot.com/" rel="nofollow" target="_blank">hackerzpro.blogspot.com</a> dan <a href="http://zuazz.blogspot.com/" rel="nofollow" target="_blank">http://zuazz.blogspot.com</a> nah silakan anda ikuti cara-cara berikut ini,,

Bagi teman-teman yang ingin memasang tombol show hide di blog / postingan, caranya gampang banget nih. Teman-teman hanya perlu mengcopy paste kode HTML di bawah ini:<br />
<br />
<div style="border: 2px solid #f80505; height: 100px; overflow: auto; padding: 10px; width: 600px;">
<div style="text-align: center;">
</div>
<div style="text-align: center;">
&lt;div&gt;&lt;div style="margin-bottom: 2px;"&gt;&lt;b&gt;&lt;small&gt;<b style="color: cyan;">Klik show untuk melihat</b>&lt;/small&gt;&lt;/b&gt;</div>
<div style="text-align: center;">
&lt;input value="Show" style="margin: 0px; padding: 0px; width: 60px;
font-size: 10px;" 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 = 'Hide'; } else {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
 = 'none'; this.innerText = ''; this.value = 'Show'; }"
type="button"&gt;&lt;/div&gt;</div>
<div style="text-align: center;">
&lt;div style="border: 1px inset; margin: 0px; padding: 6px;"&gt;&lt;div style="display: none;"&gt;</div>
<div style="text-align: center;">
<b><strike style="color: red;">Masukkan tulisanmu di sini</strike></b></div>
<div style="text-align: center;">
&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;</div>
<span style="font-size: 100%;"><b></b></span></div>
<br />
Entri melalui HTML Jangan melalui Compose seperti tanda panah pada gambar di bawah:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3128QUq2iK5FZZYpHRTImAIdoeOzoDlV0EdqUI3T124em5_Usnp9eLf3jsUGxS0WgrNomtZQYKMx4sa01SDZZuhXYWyt-TEBz1PvcaXt5a4_tIB_IkjLmX0QG1iM0ixiZW-8knJMtGg/s1600/cara_posting.png" /></div>
<br />
Lalu paste code di atas dan jangan lupa mengganti kata yang digaris tengah yang berwarna<b style="color: red;"> merah</b> dengan kata atau kode yang ingin teman-teman masukkan. Teman-teman juga bisa mengganti kata yang berwarna<b style="color: cyan;"> biru</b> dengan kata yang diinginkan.<br />
<br />
Masukkan kode di atas ke dalam postingan atau di sidebar blog teman-teman, maka hasilnya bisa dilihat di bawah ini.<br />
<br />
<div>
<div style="margin-bottom: 2px;">
<b><small>Klik show untuk melihat</small></b>
<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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Masukkan tulisanmu di sini
</div>
</div>
</div>
<br />
Selamat mencoba, <a href="http://www.riyanghifar.com/">www.riyanghifar.com</a> .!!!Silahkan copas tapi mohon link sumber tetap di cantumkan.!!<br />
<br />
<div style="border: 2px solid #1107ba; height: 300px; overflow: auto; padding: 10px; width: 590px;">
<span style="font-size: 100%;">&lt;div style="text-align: justify;"&gt;<br />&lt;div class="separator" style="clear: both; text-align: center;"&gt;<br />&lt;img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7lboGu9Vk5mrfDCJ1GycGh7F6lfLRlmf-IQ3H0GsfW8iCMNAcGPsqggyyPJdIcxAFvNII8To-aLFFpxYi1J5ID_ObQUZA8Wfbt5fJysmvg_XyY32LlWa1f-1QRgOJP3qaM3kfcZIClA/s1600/images.jpeg" /&gt;&lt;/div&gt;<br />Cara memasang tombol SHOW HIDE pada blogspot, berikut ini akan saya sampaikan cara-caranya. Tutorial ini saya dapatkan dari &lt;a href="http://hackerzpro.blogspot.com/" rel="nofollow" target="_blank"&gt;hackerzpro.blogspot.com&lt;/a&gt; dan &lt;a href="http://zuazz.blogspot.com/" rel="nofollow" target="_blank"&gt;http://zuazz.blogspot.com&lt;/a&gt; nah silakan anda ikuti cara-cara berikut ini,,<br /><br />Bagi teman-teman yang ingin memasang tombol show hide di blog / postingan, caranya gampang banget nih. Teman-teman hanya perlu mengcopy paste kode HTML di bawah ini:&lt;br /&gt;<br />&lt;br /&gt;<br />&lt;div style="border: 2px solid #f80505; height: 100px; overflow: auto; padding: 10px; width: 600px;"&gt;<br />&lt;div style="text-align: center;"&gt;<br />&lt;/div&gt;<br />&lt;div style="text-align: center;"&gt;<br />&amp;lt;div&amp;gt;&amp;lt;div style="margin-bottom: 2px;"&amp;gt;&amp;lt;b&amp;gt;&amp;lt;small&amp;gt;&lt;b style="color: cyan;"&gt;Klik show untuk melihat&lt;/b&gt;&amp;lt;/small&amp;gt;&amp;lt;/b&amp;gt;&lt;/div&gt;<br />&lt;div style="text-align: center;"&gt;<br />&amp;lt;input value="Show" style="margin: 0px; padding: 0px; width: 60px; <br />font-size: 10px;" onclick="if <br />(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display<br />&nbsp;!= '') { <br />this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display<br />&nbsp;= ''; this.innerText = ''; this.value = 'Hide'; } else { <br />this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display<br />&nbsp;= 'none'; this.innerText = ''; this.value = 'Show'; }" <br />type="button"&amp;gt;&amp;lt;/div&amp;gt;&lt;/div&gt;<br />&lt;div style="text-align: center;"&gt;<br />&amp;lt;div style="border: 1px inset; margin: 0px; padding: 6px;"&amp;gt;&amp;lt;div style="display: none;"&amp;gt;&lt;/div&gt;<br />&lt;div style="text-align: center;"&gt;<br />&lt;b&gt;&lt;strike style="color: red;"&gt;Masukkan tulisanmu di sini&lt;/strike&gt;&lt;/b&gt;&lt;/div&gt;<br />&lt;div style="text-align: center;"&gt;<br />&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;&lt;/div&gt;<br />&lt;span style="font-size: 100%;"&gt;&lt;b&gt;&lt;/b&gt;&lt;/span&gt;&lt;/div&gt;<br />&lt;br /&gt;<br />Entri melalui HTML Jangan melalui Compose seperti tanda panah pada gambar di bawah:&lt;br /&gt;<br />&lt;br /&gt;<br />&lt;div class="separator" style="clear: both; text-align: center;"&gt;<br />&lt;img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3128QUq2iK5FZZYpHRTImAIdoeOzoDlV0EdqUI3T124em5_Usnp9eLf3jsUGxS0WgrNomtZQYKMx4sa01SDZZuhXYWyt-TEBz1PvcaXt5a4_tIB_IkjLmX0QG1iM0ixiZW-8knJMtGg/s1600/cara_posting.png" /&gt;&lt;/div&gt;<br />&lt;br /&gt;<br />Lalu paste code di atas dan jangan lupa mengganti kata yang digaris tengah yang berwarna&lt;b style="color: red;"&gt; merah&lt;/b&gt; dengan kata atau kode yang ingin teman-teman masukkan. Teman-teman juga bisa mengganti kata yang berwarna&lt;b style="color: cyan;"&gt; biru&lt;/b&gt; dengan kata yang diinginkan.&lt;br /&gt;<br />&lt;br /&gt;<br />Masukkan kode di atas ke dalam postingan atau di sidebar blog teman-teman, maka hasilnya bisa dilihat di bawah ini.&lt;br /&gt;<br />&lt;br /&gt;<br />&lt;div&gt;<br />&lt;div style="margin-bottom: 2px;"&gt;<br />&lt;b&gt;&lt;small&gt;Klik show untuk melihat&lt;/small&gt;&lt;/b&gt;<br />&lt;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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /&gt;&lt;/div&gt;<br />&lt;div style="border: 1px inset; margin: 0px; padding: 6px;"&gt;<br />&lt;div style="display: none;"&gt;<br />Masukkan tulisanmu di sini<br />&lt;/div&gt;<br />&lt;/div&gt;<br />&lt;/div&gt;<br />&lt;br /&gt;<br />Selamat mencoba, &lt;a href="http://www.riyanghifar.com/"&gt;www.riyanghifar.com&lt;/a&gt; .!!!Silahkan copas tapi mohon link sumber tetap di cantumkan.!!&lt;br /&gt;<br />&lt;br /&gt;</span><span style="font-size: 100%;"><b></b></span></div>
</div>

Share artikel ke: Facebook Twitter Google+ Linkedin Technorati Digg