Cara membuat tombol show hide pada blog

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>

~~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

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="http://1.bp.blogspot.com/-gwbsu2mNPhA/UaBXiayFimI/AAAAAAAAAt8/GvriP1r0qME/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;">
<div><div style="margin-bottom: 2px;"><b><small><b style="color: cyan;">Klik show untuk melihat</b></small></b></div>
<div style="text-align: center;">
<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>
<div style="text-align: center;">
<div style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;"></div>
<div style="text-align: center;">
<b><strike style="color: red;">Masukkan tulisanmu di sini</strike></b></div>
<div style="text-align: center;">
</div></div></div></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="http://1.bp.blogspot.com/-rWjAhAqFJY0/UaBTbo8dNCI/AAAAAAAAAts/KBpCNGnrnL4/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%;"><div style="text-align: justify;"><br /><div class="separator" style="clear: both; text-align: center;"><br /><img border="0" src="http://1.bp.blogspot.com/-gwbsu2mNPhA/UaBXiayFimI/AAAAAAAAAt8/GvriP1r0qME/s1600/images.jpeg" /></div><br />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,,<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:<br /><br /><br /><br /><div style="border: 2px solid #f80505; height: 100px; overflow: auto; padding: 10px; width: 600px;"><br /><div style="text-align: center;"><br /></div><br /><div style="text-align: center;"><br />&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><br /><div style="text-align: center;"><br />&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 /> != '') { <br />this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display<br /> = ''; this.innerText = ''; this.value = 'Hide'; } else { <br />this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display<br /> = 'none'; this.innerText = ''; this.value = 'Show'; }" <br />type="button"&gt;&lt;/div&gt;</div><br /><div style="text-align: center;"><br />&lt;div style="border: 1px inset; margin: 0px; padding: 6px;"&gt;&lt;div style="display: none;"&gt;</div><br /><div style="text-align: center;"><br /><b><strike style="color: red;">Masukkan tulisanmu di sini</strike></b></div><br /><div style="text-align: center;"><br />&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;</div><br /><span style="font-size: 100%;"><b></b></span></div><br /><br /><br />Entri melalui HTML Jangan melalui Compose seperti tanda panah pada gambar di bawah:<br /><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><br /><img border="0" src="http://1.bp.blogspot.com/-rWjAhAqFJY0/UaBTbo8dNCI/AAAAAAAAAts/KBpCNGnrnL4/s1600/cara_posting.png" /></div><br /><br /><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 /><br /><br />Masukkan kode di atas ke dalam postingan atau di sidebar blog teman-teman, maka hasilnya bisa dilihat di bawah ini.<br /><br /><br /><br /><div><br /><div style="margin-bottom: 2px;"><br /><b><small>Klik show untuk melihat</small></b><br /><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><br /><div style="border: 1px inset; margin: 0px; padding: 6px;"><br /><div style="display: none;"><br />Masukkan tulisanmu di sini<br /></div><br /></div><br /></div><br /><br /><br />Selamat mencoba, <a href="http://www.riyanghifar.com/">www.riyanghifar.com</a> .!!!Silahkan copas tapi mohon link sumber tetap di cantumkan.!!<br /><br /><br /></span><span style="font-size: 100%;"><b></b></span></div>
</div>

Cara membuat tombol show hide pada blog

0 komentar:

Posting Komentar

Recent Comments

Arsip Blog