26 August 2012

Membuat Show-Hide Komentar

Do you want to share?

Do you like this story?

Indolaron kembali akan mencoba menulis artikel Tutorial Blog yakni Membuat Show-Hide Komentar pada blog. Sebenarnya tips ini sudah menjamur di blog-blog para Master,tapi berhubung saya baru menerapkan dan alhamdulillah berhasil,maka saya juga akan berbagi kepada Anda yang sedang mampir di blog sederhana ini. Tutorial ini saya tulis guna kita sesama newbie saling sharing dan berbagi informsai,dan bagi saya Tutorial ini untuk catatan online jika sewaktu-waktu kita membutuhkan.

Bentuk fisik dari Tutorial ini:'sliding' yang bisa sobat buka juga sobat tutup untuk menghemat tempat dan pastinya sudah berhasil saya terapkan.
Ini screenshot Tampilan awal sebelum di Klik:


Dan Ini screenshot Tampilan setelah di klik:


Saya rasa gak perlu panjang lebar saya jelaskan,jika Anda ingin mencoba silahkan baca dan terapkan.
Langkah Membuat Show-Hide Komentar
1. Silakan login ke akun Blogger Anda
2. Selanjutnya pilih Template - Edit HTML - Procced
3. Cari kode berikut </head> (Gunakan Ctrl+F)
4. Letakkan script berikut tepat diatas kode tadi:
<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='http://membuatgempar.net23.net/comment.js' type='text/javascript'/>
5. Setelah itu,cari kode ]]></b:skin>
6. Masukkkan code CSS berikut tepat diatasnya:
a.openpanel {display:block;width:620px;height:30px;padding:0px 0px;text-align:center;font-weight:bold;line-height:30px;background:#000;font-size:20px;font-family:Comic Sans MS;color:#0099FF;border:2px solid #0099FF;text-shadow:0 1px 0 #CCC;-moz-border-radius: 3px;-webkit-border-radius:3px;border-radius: 3px;-moz-box-shadow: 0 1px 3px #C6C6C6, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;-webkit-box-shadow: 0 1px 3px #C6C6C6, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;box-shadow: 0 1px 3px #C6C6C6, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;}
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 {background-color:#ffffff;}
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;}

Terakhir SAVE template
---SELAMAT MENCOBA---
VPAAE5Q29KU6

ARTIKEL TERKAIT :

27 komentar :

  1. wah blog jadi lebih rapi nie. kl komen banyak kl keliatan jelek :)

    ReplyDelete
  2. @Service AC Jogja
    Iya gan silahkan dipraktekkan Tutorial-nya & terima kasih telah mampir :-bd

    ReplyDelete
  3. wah, bermanfaat sekali nih infonya.
    izin nyimak terus sob, dan izin bookmark ya :D

    #semoga keselamatan selalu ada padamu

    ReplyDelete
  4. Pingin belajar buat ini tapi kayaknya sulit bagi saya

    ReplyDelete
  5. Iya sob lebih rapi..tapi saya lebih suka pake scroll aja..oia sob,,follow sukses,sialkan follow back yaa :-bd

    ReplyDelete
  6. Bagus nih infonya sob. thx ya

    tak lengkap bila kita tidak saling tukar link, bagaimana bila kita tukar link ?

    ReplyDelete
  7. Sudah saya coba sob, akan tetapi gimana tuh cara membuat efeknya pada tampilan destkop saja, dan show hide ini di non aktifkan pada tampilan ponsel?

    ReplyDelete
  8. Terima kasih pak udah saya coba dan berhasil
    www.topkoplo.blogspot.com

    ReplyDelete
  9. makasih gan....
    backlink yuk !!! ^_^

    ReplyDelete
  10. terimakasih atas tipsnya..........sangat membantu!!!!
    topcomit.blogspot.com

    ReplyDelete
  11. kerennn... jadi pingin pasang biar blogku makin rapi \o/

    ReplyDelete
  12. posts and your blog is very interesting article, I'll be back to see your blog posts and articles later .. thanks for the info

    ReplyDelete
  13. mantep gan ditunggu visitnya http://gastuwi.blogspot.com

    ReplyDelete
  14. .: TQ ilmunya kawan, sudah saya coba dan berhasil...^_^

    ReplyDelete
  15. kunjungi Blog ane gan dan folowback Di:
    http://www.gawsoti.blogspot.com/

    ReplyDelete
  16. keren pisan euy :D
    http://nandarious.blogspot.com

    ReplyDelete
  17. Kak , Berikan Solusi nya donk ...

    -Saya kan pasang SHOW/HIDE Pada Komentar Blog Saya ...

    tpi knpa ea smpe bsa berefek Kelaman Blog , Padahal Laman Blog Sya Tidak Diijinkan Beri Komentar , Tapi SHOW/Hide Nya ttep muncul ...

    beri solusi donk kak ?

    ReplyDelete
  18. owh,,kaya yang ini ya tampilannya.
    kalau mau komentarnya ada button balasan gimana ya?

    ReplyDelete
    Replies
    1. Mungkin yg anda maksud ini:
      http://indolaron.net/2011/11/cara-membuat-reply-komentar.html

      Delete
  19. Biar gak perlu nge scrool hahaha

    ReplyDelete
SILAHKAN TULIS KOMENTAR ANDA, DENGAN CATATAN :
* Komentator "Anonymous" tidak diprioritas-kan, jadi gunakan salah satu Profile untuk respon lebih cepat
* Jika anda tidak memiliki akun Google anda bisa gunakan Name/URL
   - isi Name dengan Nama Anda
   - isi URL dengan link/url profile Facebook Anda atau Twitter Anda atau yang lainnya
* Mohon jangan menyisipkan Link Hidup..!!!
* Please do not insert Live Links ....!!!

Advertisements

Advertisements

 

Membuat Show-Hide Komentar Oops ! | Error 404