Saturday, 26 January 2013

Cara Membuat Show-Hide Comment Pada Blog

Cara Membuat Show-Hide Comment Pada Blog - Ya, kali ini saya akan berbagi Cara Membuat Show-Hide Comment Pada Blog , bagaimana cara kerjanya? cara kerjanya itu misalkan di Blog kita tidak muncul comment tetapi ada teks bacaan seperti Buka Komentar / Tutup Komentar, sebenarnya teks itu bisa diganti dengan teks yang anda mau, nah setelah anda klik Buka Komentar, maka komentar pun akan muncul kebawah dengan perlahan.

Contoh :

Show Hide Comment XC-Blog
Langsung aja saya beritahu caranya :
Pertama" Login di www.blogger.com
Kemudian Kamu buka Template > Edit HTML dan Centang "Expand Template Widget"
kalau sudah, kamu letakkan code dibawah ini tepat diatas kode ]]></b:skin>
a.openpanel{display:block;width:auto;height:auto;text-align:center;font-weight:bold;font-size:15px;line-height:30px;background:#660000;border:3px solid #990000;border-top:0px;-webkit-transition:all .15s ease-in-out;-webkit-transform-origin:50% 1px;position:relative}
a.openpanel.active{background-color:#660000}
a.openpanel em {width:0px;height:0px;display:block;position:absolute;top:15px; right:15px;border:6px solid transparent;border-top-color:white;}
a.openpanel.active em {top:6px;border color:#222222;}
div.paneline {height:0px;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;}
div.hompiPanel {padding:10px 20px 20px;margin:0px 0px !important;}

Jika sudah, kemudian kamu masukan lagi code dibawah ini tepat diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var panelSelector = '#comments',
openPanelText = "Tampilkan Komentar",
closePanelText = "Tutup Komentar",
slideDownPanelSpeed = 600,
slideUpPanelSpeed = 400;
//]]>
</script>
<script type='text/javascript'>
</script>
<script src='https://lioneldandy.googlecode.com/files/show-hide-comment.js' type='text/javascript'/>
Setelah itu Save Template.
Selesai.

Pengertian :

kode pertama yaitu CSS, jika ingin mengubah tampilannya bisa anda ganti sendiri cssnya.
Sekian dari saya, semoga artikel ini bisa bermanfaat untuk anda.
Terimakasih.

Seorang pelajar yang ingin berkreatifitas di dunia blogging dan yang selalu ingin membuat kreatifitas yang lebih baru.

40 komentar

Ini bukannya yang di DTE itu ya ? --"

thankz ya sob atas tutor nya
http://greenz-blogger.blogspot.com/

Hasilnya kyk blog agan ya?
Wah keren juga nih ^^

ok sama" sob, thx juga dah berkunjung hehe

Oh...kgk tau dte ye ? kgk jadi deh.

DTE Masa Gag Tau Sih --"

Nih Linknya: www.dte.web.id
Lihat,, Ane Aja Belajar Di Situ

owh,maav ane ga tau, jrng belajar disitu, ane belajar di w3school doank :v wkkwkwk
thx kk dah ngasih tau :v

Nice Artikel ny
Id-cyb3r.blogspot.com

Nice Info dan Keren Pula
visit baack:
http://didil-cyber.blogspot.com

terimakasih kk :)
ok saya visback

Terima kasih infonya, meskipun saya udah tau cara ini dari dulu , hehe

coba ah,, ngetest.. :D

come back..

tapi di pasang di tempalte ane kok gk bisa ya kk

@Z-T Blog : silahkan sob hehehhee (y)
@Bondowoso Community : gabisa nya kenapa kk ???

Nice tutor nya sob
iizin praktek ye,
commentback
http://ryuugakure.blogspot.com/

Nice tutor
follow + comment balik yah sob : gkp-inside.blogspot.com

Koq aq gg berhasil ya kk??
udh keluar sih tombolnya,,,tpi gg ada reaksi setelah klik tombolnya kk...

nice inpoh sob...
#commentback http://altecdz.blogspot.com/

@Candra : DL -_-
@Patuih : thx sob hehehe... :)

mksih infonya,.,
visit ya http://farhanbreaker.blogspot.com/

Ijin coba gan :)

komenback

rpl-yes.blogspot.com

Keren gan infonya... ane praktekin. Sukses buat blog anda juga


Setiyono
www.jayabhaya.com

Yogyakarta

Alhamdulillah bisa di blog ane, dan sedikit editan supaya nyocokkin ama templat blog ane, terima kasih banyak gan

visit back, OK
http://www.xyraclius.com/

@Lukman : ok bro... selamat
@Setiyono : ok thanks bro atas dukungannya :)
@Nabil : Oke :)
@Bfc : ok silahkan :)

Nice share bro .
Ijin pake yee :D
coment+visit back : http://infoterupdatedanterbaru.blogspot.com

Catatan :
- Dilarang Menggunakan Link Aktif / Live Link
- Dilarang Promosi Iklan
- Dilarang Nyepam
- Untuk Menyisipkan Kode, Gunakan tag <i rel='code'> Taruh Kode Disini </i>
- Untuk Menyisipkan Kode Panjang, Gunakan tag <i rel='pre'> Taruh kode panjang disini </i>
- Untuk Menyisipkan Catatan, Gunakan <b rel='quote> Taruh Catatan disini </b>
- Untuk Menyisipkan Gambar, Gunakan <i rel="'image> URL Gambar </i>
- Untuk Menyisipkan Youtube, Gunakan <i rel='youtube'> URL Youtube </i>

Sebelum menyisipkan kode silahkan gunakan Tools Konversi Kode.
Caranya tinggal klik tombol "Konversi Kode" yang berada di Form Komentar.
EmoticonEmoticon