Membuat Kotak Komentar Thread Keren di Blogger

Written By Hanif Aghar on Minggu, 22 Juli 2012 | 4:17 PM

Sore ini saya akan Memberikan Sedikit Tutorial Cara membuat Kotak Komentar Thread Keren di  Blogger. Sebelumnya saya Juga sudah Pernah Mempostingkan Mengenai Cara Membuat Thread Balas/Reply Komentar Blogger. Namun Thread balas itu terasa sangat Simpel dan bisa di bilang Kurang menarik. Oleh karena itu Kali ini saya Akan Memberikan sedikit Tutorial Cara Membuatnya Tampil keren dan Menarik.

Nah Sebelumnya silahkan Sobat Buat Kotak Komentar Blog Sobat dengan Thread Balas/Reply dulu,  barulah setelah itu sobat membuatnya tampil keren dan menarik. Ok langsung saja Silahkan Sobat Ikuti langkah" di Bawah ini... :

1. Masuk Blogger.com

2. Pilih Template "Sebelumnya Backup dulu Template Blog Sobat".

3. Klik Edit HTML->>Jangan lupa Ceklis "Expand Widget Templates".

4. Cari Kode ]]></b:skin> "Tekan tombol Ctrl+F untuk mempermudah pencarian".

5. Pastekan Kode di Bawah ini Tepat diatas kode ]]></b:skin>.

.comments {clear: both;margin-top: 10px;margin-bottom: 0px;line-height: 1em;} .comments .comments-content {font-size: 12px;margin-bottom: 16px;font-family: Verdana;font-weight: normal;text-align:left;line-height: 1.4em;} .comment-actions a { background: #c1c1c1; background: -moz-linear-gradient(top, #c1c1c1 0%, #dedede 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c1c1c1), color-stop(100%,#dedede)); background: -webkit-linear-gradient(top, #c1c1c1 0%,#dedede 100%); background: -o-linear-gradient(top, #c1c1c1 0%,#dedede 100%); background: -ms-linear-gradient(top, #c1c1c1 0%,#dedede 100%); background: linear-gradient(top, #c1c1c1 0%,#dedede 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c1c1c1', endColorstr='#dedede',GradientType=0 ); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; padding:2px 5px !important; margin-right:10px; border:1px solid #c1c1c1; color:#666666; -webkit-box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); } .comment-actions a:hover { background: #c9c9c9; background: -moz-linear-gradient(top, #c9c9c9 0%, #dedede 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c9c9c9), color-stop(100%,#dedede)); background: -webkit-linear-gradient(top, #c9c9c9 0%,#dedede 100%); background: -o-linear-gradient(top, #c9c9c9 0%,#dedede 100%); background: -ms-linear-gradient(top, #c9c9c9 0%,#dedede 100%); background: linear-gradient(top, #c9c9c9 0%,#dedede 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9c9c9', endColorstr='#dedede',GradientType=0 ); text-decoration:none !important; } .comments .continue a:active, .comments .comment .comment-actions a:active {position: relative;top:1px;background: -webkit-gradient(linear, left top, left bottom, from(#0066FF), to(#0099CC));background: -moz-linear-gradient(top, #0066FF, #0099CC);filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0066FF', endColorstr='#0099CC');} .comments .comments-content .comment-thread ol {background:#fafafa url(http://1.bp.blogspot.com/-jGP3J4Fky6I/TpA0m36hZbI/AAAAAAAABsw/H4LZeglYNVI/s000/header-shadow.png) top repeat-x;margin:10px auto 0;margin:10px 0;padding:5px 10px;border-top:1px solid #cccccc;border-left:3px solid #069;border-bottom:1px solid #cccccc;border-right:1px solid #cccccc;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;box-shadow: 0 1px 0 #FFF inset, 0 1px 0 #FFF;-moz-box-shadow: 0 1px 0 #FFF inset, 0 1px 0 #FFF;-webkit-box-shadow: 0 1px 0 #FFF inset, 0 1px 0 #FFF;} .comments .comments-content .inline-thread {padding: 0.5em 1em 0 1em;} .comments .comments-content .comment-thread {margin: 8px 0px 0px 0px;} .comments .comments-content .comment-thread:empty {display: none;} .comments .comments-content .comment-replies {margin-top: 1em;margin-left: 40px; font-size:12px;} .comments .comments-content .comment {padding-bottom:8px;margin-bottom: 0px} .comments .comments-content .comment:first-child {padding-top:16px;} .comments .comments-content .comment:last-child {border-bottom:0;padding-bottom:0;} .comments .comments-content .comment-body {position:relative;} .comments .comments-content .user {font-style:normal;font-weight:bold;} .comments .comments-content .user a {color: #444;} .comments .comments-content .user a:hover {text-decoration: none;color: #555;} .comments .comments-content .icon.blog-author {width: 18px;height: 18px;display: inline-block;margin: 0 0 -4px 6px;} .comments .comments-content .datetime {margin-left:6px;color: #999;font-style: italic;font-size: 11px;float: right;} .comments .comments-content .comment-content {font-family: Arial, sans-serif;font-size: 12.5px;line-height: 19px;} .comments .comments-content .comment-content {font-family: Arial, sans-serif;font-size: 12.5px;line-height: 19px;text-align:none;margin: 15px 0 15px;} .comments .comments-content .owner-actions {position:absolute;right:0;top:0;} .comments .comments-replybox {border: none;height: 250px;width: 100%;} .comments .comment-replybox-single {margin-top: 5px;margin-left: 48px;} .comments .comment-replybox-thread {margin-top: 5px;} .comments .comments-content .loadmore a {display: block;padding: 10px 16px;text-align: center;} .comments .thread-toggle {cursor: pointer;display: inline-block;} .comments .comments-content .loadmore {cursor: pointer;max-height: 3em;margin-top: 3em;} .comments .comments-content .loadmore.loaded {max-height: 0px;opacity: 0;overflow: hidden;} .comments .thread-chrome.thread-collapsed {display: none;} .comments .thread-toggle {display: inline-block;} .comments .thread-toggle .thread-arrow {display: inline-block;height: 6px;width: 7px;overflow: visible;margin: 0.3em;padding-right: 4px;} .comments .thread-expanded .thread-arrow {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;} .comments .thread-collapsed .thread-arrow {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;} .comments .avatar-image-container{-webkit-box-shadow:1px 1px 0 rgba(0, 0, 0, 0.100),3px 3px 0 rgba(255, 255, 255, 1.0), 4px 4px 0 rgba(0, 0, 0, 0.125),6px 6px 0 rgba(255, 255, 255, 1.0),7px 7px 0 rgba(0, 0, 0, 0.150),9px 9px 0 rgba(255, 255, 255, 1.0),10px 10px 0 rgba(0, 0, 0, 0.175); -moz-box-shadow:1px 1px 0 rgba(0, 0, 0, 0.100),3px 3px 0 rgba(255, 255, 255, 1.0),4px 4px 0 rgba(0, 0, 0, 0.125),6px 6px 0 rgba(255, 255, 255, 1.0),7px 7px 0 rgba(0, 0, 0, 0.150),9px 9px 0 rgba(255, 255, 255, 1.0),10px 10px 0 rgba(0, 0, 0, 0.175); box-shadow:1px 1px 0 rgba(0, 0, 0, 0.100),3px 3px 0 rgba(255, 255, 255, 1.0),4px 4px 0 rgba(0, 0, 0, 0.125),6px 6px 0 rgba(255, 255, 255, 1.0),7px 7px 0 rgba(0, 0, 0, 0.150),9px 9px 0 rgba(255, 255, 255, 1.0),10px 10px 0 rgba(0, 0, 0, 0.175);-moz-transition:-moz-transform 0.5s ease 0s;} .comments .avatar-image-container :hover {-moz-transform:rotate(7deg);-o-transform:rotate(7deg);-webkit-transform:rotate(7deg);-ms-transform:rotate(15deg);} .comments .comment-block {margin-left: 48px;position: relative;padding: 15px 20px 15px 20px;background: #F7F7F7;border: 1px solid #E4E4E4;overflow: hidden;border-radius: 4px;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-image: initial;}

6. Simpan/Save dan Lihat Hasilnya.

Untuk Contoh Mungkin Sobat Bisa Lihat Kotak Komentar Thread yang saya Gunakan.., dan Silahkan Tinggalkan Komentar, Kritik serta Saran Sobat di Kotak Komentar saya. Ok mungkin Hanya itu yang bisa saya Sampaikan kali ini, lebih dan kurangnya Mohon dimaafkan. Selamat Mencoba dan Semoga Bermanfaat. :)


Baca Juga yang ini Sob...:

18 komentar:

  1. kalo Ada Contohhnya pasti lebjhhseru dehh sob

    BalasHapus
  2. Untuk template yg saya pake bisa gak yach?
    Saya coba dulu dah. Makasih tipsnya.

    Happy blogging

    BalasHapus
  3. @Geledeg : hmmm.., Thanks sarannya Sob..

    @Hacc : iy Sob Coba dulu saja, "Selamat Mencoba & Semoga Berhasil Sob".

    BalasHapus
  4. sob, thanks tutorialnya, ane coba dan berhasil, coba cek dibagian komentar...
    http://zlems-creative.blogspot.com/p/buat-banner-flash.html

    BalasHapus
  5. kang... ajarin saya buat yang seperti ini kang, threaded yang bisa discrool gini.... serius.. ym ya : ibnu_rahmadi(at)rocketmail.com

    BalasHapus
    Balasan
    1. Okeh Siap.., Silahkan Baca Artikel saya yang ini :

      http://optimus-software.blogspot.com/2012/07/membuat-scroll-pada-kotak-komentar-blog.html

      Thanks For Comment Kang... :)

      Hapus
  6. bagus juga neh gan .... kapan" pengen dah q bikin begini, tq tutorx

    @http://www.agclothing.web.id

    BalasHapus
  7. cara ea ap ea ko px q ko g iza g ad tombol balasnya

    BalasHapus
  8. Alhamdulillah gan, makasih banyak infonya. akhirnya bisa juga setelah nyari2 di tempat lain. kalo disini simple banget, hahaha


    Kunjungi Kami: Sosio Prores

    BalasHapus
  9. Thanks Infonya sangat berguna

    BalasHapus

Silahkan Tulis Komentar, Kritik dan Saran Anda di Sini. Namun saya Mohon untuk tidak menggunakan komentar spam dan berkomentarlah yang sopan. Link aktif dari sumber lain yang ditulis pada kotak komentar akan saya Hapus. Terima kasih..

 
berita unik