Cara membuat Tombol Klik Show Untuk Melihat di Postingan Blog

<div dir="ltr" style="text-align: left;" trbidi="on"> <div style="text-align: justify;"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzHjhbCayy3D2RUxLzLnwuxTYIciVHpi8jQaEgA2HIjtuGxlMJoV2-yGiAXuOcOLV1e35wm1Tt9Bs3D8PMZg-YPPQUfRm5yYXC3laaFo3dT-GYXOyemgyE1IMpEIzHbKV3w5QwBZRfJHtb/s1600/logo.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Cara membuat Tombol Klik Show Untuk Melihat di Postingan Blog" border="0" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzHjhbCayy3D2RUxLzLnwuxTYIciVHpi8jQaEgA2HIjtuGxlMJoV2-yGiAXuOcOLV1e35wm1Tt9Bs3D8PMZg-YPPQUfRm5yYXC3laaFo3dT-GYXOyemgyE1IMpEIzHbKV3w5QwBZRfJHtb/s200/logo.png" title="Cara membuat Tombol Klik Show Untuk Melihat di Postingan Blog" width="200" /></a></div> <b>Cara membuat Tombol Klik Show Untuk Melihat di Postingan Blog</b> -  Kemarin ada salah satu teman blogger yang bertanya kepada saya lewat komentar spam<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif" /> pada salah satu blog saya yang tidak tampil diposting tentang <a href="http://all-trick-blog.blogspot.com/2012/03/cara-membuat-tombol-klik-show-untuk.html"><b>Cara membuat Tombol Klik Show Untuk Melihat di Postingan Blog</b></a>.<br /> <br /> Berikut ini akan saya sampaikan cara-caranya beserta keterangan gambar. Tutorial ini saya dapatkan dari <a href="http://hackerzpro.blogspot.com/"><b>hackerzpro.blogspot.com</b></a> nah silakan anda ikuti cara-cara berikut ini,,</div> <div style="text-align: justify;"> <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 /> <div style="text-align: center;"> <br /></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> <br /> Entri melalui HTML Jangan melalui Compose seperti tanda panah pada gambar di bawah:<br /> <br /> <div class="separator" style="clear: both; text-align: left;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHxc5JWjEdXfwMYNGq8gTjhNoZjfy2c3eMEkAli_OzlYh2_6NzpNrhPe4B3w9nQh_BqMUwmjeaLiwaz9AckL-T6rhimAVqo8eXMOhZ0zspSeMq47rbS89ZdZYwUxLdCDMADFHyXbhwG9Y/s1600/cara_posting.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHxc5JWjEdXfwMYNGq8gTjhNoZjfy2c3eMEkAli_OzlYh2_6NzpNrhPe4B3w9nQh_BqMUwmjeaLiwaz9AckL-T6rhimAVqo8eXMOhZ0zspSeMq47rbS89ZdZYwUxLdCDMADFHyXbhwG9Y/s1600/cara_posting.png" /></a></div> <div class="separator" style="clear: both; text-align: justify;"> </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 /> <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;"> <b><strike style="color: red;">Masukkan tulisanmu di sini</strike></b></div> </div> </div> <br /> <br /> Yang di atas adalah contoh sederhana tentang Cara membuat Tombol Klik Show Untuk Melihat di Postingan Blog, selanjutnya bisa teman-teman kembangkan sendiri.<br /> <br /> <br /> <i>Sumber : http://www.thecyber.co.cc </i> </div> </div>

Cara membuat Tombol Klik Show Untuk Melihat di Postingan Blog

Cara membuat Tombol Klik Show Untuk Melihat di Postingan Blog -  Kemarin ada salah satu teman blogger yang bertanya kepada saya lewat k...

Baca selengkapnya »

Tulisan Berjalan Di Buku Tamu CBOX

<div dir="ltr" style="text-align: left;" trbidi="on"> <div style="text-align: justify;"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbp1JbdZFGjPtATWDPZQRNfp3eT2PxbwTuQS6ZMHYsvgB1CDg0rfqWkEdCEuOvie-4V7JImIKcpasyLwiYqAPXKB5p6t7meYeuiyH9KJZGc6a75rhs_hps0pEdhCe93W6vU_Lia3S3WwO1/s1600/logo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Tulisan Berjalan Di Buku Tamu CBOX" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbp1JbdZFGjPtATWDPZQRNfp3eT2PxbwTuQS6ZMHYsvgB1CDg0rfqWkEdCEuOvie-4V7JImIKcpasyLwiYqAPXKB5p6t7meYeuiyH9KJZGc6a75rhs_hps0pEdhCe93W6vU_Lia3S3WwO1/s320/logo.png" title="Tulisan Berjalan Di Buku Tamu CBOX" width="320" /></a></div> <b>Tulisan Berjalan Di Buku Tamu CBOX </b>- Sedikit berbagi pengalaman pribadi lagi nih sob,, heheheheee,,, <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif" /></div> <div style="text-align: justify;"> pada saat melihat teman-teman blogger menulis di biku tamu CBOX saya kok bisa bergerak-gerak,, sedikit rasa penasaran dan mencoba dengan kode HTML,, tapi ternyata salah,, hehehe,, jadi malu nih sob,, <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif" /> maklumlah masih pemula,, dan akhirnya saya cari di mbah google dan akhinya ketemu juga nih,, setelah saya coba ternyata berhasil juga,, belajar dari kesalahan memang sangat bermanfaat walaupun agak malu juga ya sob,, <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif" /></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> Nah bagi sobat yang belum tahu bagaimana caranya biar tidak salah kayak saya disini saya berbagi sedikit ilmu. Diantaranya membuat tulisan berjalan, Berwarna, bergaris bawah, tebal dan lain sebagainya.</div> <div style="text-align: justify;"> Nah langsung saja kita bahas, untuk membuat tulisan pada CBOX lebih terlihat menarik silahkan ikuti langkah langkah berikut :</div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <b>1. Membuat Teks Berjalan di CBOX</b><br />    Apit kata-kata yang ingin dibuat berjalan dengan <b style="color: yellow;">[scroll]</b> dan<b> <span style="color: yellow;">[/scroll]</span></b><br />    Contoh: <b><span style="color: yellow;">[scroll]</span> Salam kenal <span style="color: yellow;">[/scroll] </span></b> hasilnya<br /> <br /> <marquee behavior="alternate"><b>Salam kenal</b></marquee><br /> <br /> <b>2. Membuat Teks Berukuran Besar</b><br />    Apit kata-kata yang ingin dicetak besar dengan <b style="color: yellow;">[big]</b> dan<b> <span style="color: yellow;">[/big]</span></b><br />    Contoh: <b><span style="color: yellow;">[big]</span> Salam kenal</b><b> <span style="color: yellow;">[/big]</span></b> hasilnya adalah <span style="font-size: large;"><b>Salam kenal</b></span><br /> <br /> <b>3. Membuat Teks Miring</b><br />    Apit kata-kata yang ingin dicetak miring dengan <b style="color: yellow;">[i]</b><span style="color: yellow;"> </span>dan <b style="color: yellow;">[/i]</b><br />    Contoh: <b><span style="color: yellow;">[i]</span> </b><b>Salam kenal</b><b> <span style="color: yellow;">[/i]</span></b> hasilnya <i><b>Salam kenal</b></i><br /> <br /> <b>4. Membuat Teks Tebal</b><br />    Apit kata-kata yang ingin dicetak tebal dengan <b style="color: yellow;">[b]</b><span style="color: yellow;"> </span>dan <b style="color: yellow;">[/b]</b><br />    Contoh: <b><span style="color: yellow;">[b]</span> </b><b>Salam kenal </b><b style="color: yellow;">[/b]</b> hasilnya adalah <b>Salam kenal</b><br /> <br /> <b>5. Membuat Teks Bergaris Bawah</b><br />    Apit kata-kata yang ingin digaris bawah dengan <b style="color: yellow;">[u]</b> dan <b style="color: yellow;">[/u]</b><br />    Contoh: <b style="color: yellow;">[u ]</b><b>Salam kenal </b><b style="color: yellow;">[/u]</b> hasilnya adalah <b>Salam kenal</b></div> <div style="text-align: justify;"> <br /> <b>6. Membuat Teks Bergaris Tengah</b><br />    Apit kata-kata yang ingin di garis tengah atau dicoret dengan <b style="color: yellow;">[s]</b> dan<b> <span style="color: yellow;">[/s]</span></b><br />    Contoh: <b><span style="color: yellow;">[s]</span> </b><b>Salam kenal </b><b><span style="color: yellow;">[/s]</span> </b>hasilnya adalah <strike><b>Salam kenal</b></strike><br /> <br /> <b>7. Membuat Tulisan Berukuran Kecil</b><br />    Apit kata-kata yang ingin dicetak kecil dengan<b> <span style="color: yellow;">[small]</span></b> dan <b style="color: yellow;">[/small]</b><br />    Contoh:<b> <span style="color: yellow;">[small]</span> Salam kenal <span style="color: yellow;">[/small]</span></b> dan hasilnya adalah <span style="font-size: xx-small;"><b>Salam kenal</b></span><br /> <br /> <b>8. Cara Membuat Tulisan Rata Tengah (Center)</b><br />    Apit kata-kata yang ingin dibuat rata tengah dengan <b style="color: yellow;">[center]</b> dan <b style="color: yellow;">[/center]</b><br />    Contoh: <b><span style="color: yellow;">[center]</span> </b><b>Salam kenal</b> <b style="color: yellow;">[/center]</b><br /> <br /> <b>9. Membuat Tulisan Berwarna</b><br />    Apit kata-kata yang ingin diberi warna dengan <b><span style="color: yellow;">[color=</span><u style="color: lime;">warna</u><span style="color: yellow;">]</span></b><span style="color: yellow;"> </span>dan<span style="color: yellow;"> </span><b style="color: yellow;">[/color]</b><br />    Contoh: <b style="color: yellow;">[color=red]</b><b> Salam kenal</b> <b style="color: yellow;">[/color]</b>  maka hasilnya adalah <b style="color: red;">Salam kenal</b><br /> <br /> <b>10. Cara Membuat Teks yang Ber Link</b><br />    Apit kata-kata yang ingin diberi link dengan <b><span style="color: yellow;">[url=</span><u style="color: lime;">alamaURL</u><span style="color: yellow;">]</span> </b>dan <b style="color: yellow;">[/url]</b><br />    Contoh: <b><span style="color: yellow;">[url=http://zuazz.blogspot.com/]</span> Zuaz'Z <span style="color: yellow;">[/url]</span></b> maka hasilnya adalah <a href="http://zuazz.blogspot.com/" target="_blank"><b>Zuaz'Z</b></a><br /> <br /> Selamat mencoba ya sob,, <img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif" /><br /> <br /> <i>Sumber: <u>http://www.thob.org </u></i></div> </div>

Tulisan Berjalan Di Buku Tamu CBOX

Tulisan Berjalan Di Buku Tamu CBOX - Sedikit berbagi pengalaman pribadi lagi nih sob,, heheheheee,,, pada saat melihat teman-teman blo...

Baca selengkapnya »