cbox

close
chat YM
Home » » Cara membuat Tombol Klik Show Untuk Melihat di Postingan Blog

Cara membuat Tombol Klik Show Untuk Melihat di Postingan Blog

den zuaz | 01.41 | 19comments
Kemarin ada salah satu teman blogger yang bertanya kepada saya lewat komentar spam yang tidak tampil diposting tentang Cara membuat Tombol Klik Show Untuk Melihat di Postingan Blog.

Berikut ini akan saya sampaikan cara-caranya beserta keterangan gambar. Tutorial ini saya dapatkan dari hackerzpro.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


Yang di atas adalah contoh sederhana tentang cara pembuatan tombol show hide di blog, selanjutnya bisa teman-teman kembangkan sendiri.


Sumber : http://www.thecyber.co.cc

Posted by : den zuaz - Author Zuaz'Z Creator™

Artikel Cara membuat Tombol Klik Show Untuk Melihat di Postingan Blog ini diposting oleh den zuaz . Terimakasih atas kunjungan Sobat serta kesediaan Sobat membaca artikel ini. Kritik dan saran dapat Sobat sampaikan melalui kotak komentar. Apabila Sobat berminat silakan copy paste artikel ini dan mohon untuk mencantumkan sumbernya dengan menyertakan script di bawah ini:

Hormat saya: den zuaz

Bagikan artikel ini sobat :
Pemberitahuan:
Mohon maaf apabila komentar Sobat dari Facebook tidak bisa saya jawab semua, dikarenakan sulit untuk memoderasi komentar dari Facebook, bila sobat ada pertanyaan yang ingin lansung saya jawab, silakan Sobat berkomentar dari id Blogger.
Komentar Sahabat
19 Komentar Sahabat

19 comments:

Rudy Hartono mengatakan...

silaturahmi sob

den zuaz mengatakan...

@_Rudy Hartono: Terima kasih telah bersilaturahmi Sobat,, ^_^

Argijoe mengatakan...

cara menambahkan sript nya gmn gan....ngetik postingan dl atau scripctnya dulu, belom paham saia, thx sebelumnya.

den zuaz mengatakan...

@_Argijoe: Coba lihat pada gambar di bawah kalimat "Entri melalui HTML Jangan melalui Compose"

pada saat sobat posting untuk memasukkan kode efek pada postingan klik saja HTML di pojok kiri atas,,

Argijoe mengatakan...

KALO PENGEN MASUKIN FOTO KE DALAM KOTAK SIDE/SHOW GMN GAN....??? THX SEBELUMNYA

Argijoe mengatakan...

hide/show

den zuaz mengatakan...

@_Argijoe: Tinggal masukkan URL gambarnya aja Sob,, tempatkan pada kalimat "Masukkan tulisanmu di sini"

cara masukkin URL gambarnya seperti ini:

(img src=" URL gambar") tanda dalam kurung ganti dengan tanda kurang dari= <, dan lebih dari= >.

Agustine Diaz mengatakan...

nahh... ini yang aq tanya kemaren...
makasih ya gan...
moga sukses slalu :)

Acho Bgi mengatakan...

Wah bagus tutornya tapi,kalau kode script yg di masukin,apa berfungsi tobol shownya,,???

Fandhy Bonthaink mengatakan...

infonya sangat bermanfaat... thanks....

http://f4ndhy.blogspot.com/2013/02/mengembalikang-postingan-di-blogspot.html

Oke-Reload mengatakan...

Mantap sekali, kawan. Minta izin praktiknya di blog-ku yang masih pemula: oke-reload.blogspot.com. Tolong beri pencerahan jika kode di atas tidak berfungsi di blog-ku.

Yami Khoerul mengatakan...

Thanks infonya gan..

Ahmad Kurniawan mengatakan...

akan saya terapkan di blog saya gann, thanks infonya,, kunjungi balik http://ankurniawan.blogspot.com/

muham fadhil mengatakan...

Thanks Gan Keren..... ^^

infobisabanget mengatakan...

Thanks for share...
Blogwalking ^_^

Muji Utomo mengatakan...

cara mengobati kanker
obat kanker denature
denature penipu
obat herbal kanker
obat tradisional kanker

Muji Utomo mengatakan...

obat kanker payudara asli
obat denature kanker
obat kanker asli
penipuan obat kanker
obat kanker hati

Muji Utomo mengatakan...

obat kanker payudara asli
obat denature kanker
obat kanker asli
penipuan obat kanker
obat kanker hati

Muji Utomo mengatakan...

obat kanker mata
penyakit kanker apa
obat herbal kanker payudara
denature indonesia asli
obat kanker alami

Luangkanlah Sedikit Waktu Sobat Untuk Memperindah Blog Ini Dengan Berkomentar,, (^_^)

PERINGATAN,,!!!
Bagi Sobat Yang ingin berkomentar, mohon sesuaikan dengan tema pada postingan, dan saya mohon untuk tidak mencantumkan link (URL) pada komentar karena akan saya anggap spam dan mohon maaf apabila saya hapus komentar Sobat,,!!!

Pilih Bahasa Sobat

English French German Spain Italian Dutch

Russian Portuguese Japanese Korean Arabic Chinese Simplified
Designed By: den zuaz

Baca Juga Artikel Lainya Ya

Tuker Link Banner Yook

Bagi Sahabat Blogger Yang Bersedia Untuk Bertukar Banner Dengan Blog Zuaz'Z Creator Silakan Copy Code Di Bawah Ini Untuk Dipasang Di Blog Sobat
Email: dideardana@gmail.com
Banner Zuaz'z
..::: Like this yoo :::..
..::: Award Dari Sahabat :::..

Friendship Award
Dwi Semakin Sukses

banner coa-coba
den zuaz

^_^ iklan kosong ^_^

 
Copyright © 2012. Zuaz'Z Creator™ - All Rights Reserved
..::: Template designed by den zuaz | Powered by Blogger | Thanks for visiting :::..