Membuat Kotak Komentar Thread Keren di Blogger

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Otahx623LLuqAlJoS_djQTMTfznDmtW7IUBBCNv651mbEb-ef5Gk9EpoqqmREX6DKeU90eSmVFSBAVI-TIjhRLboCo6joUXi-3VWsIxA_n9XsWj8r37xewLBEFZJD4U5VGAocDU4XH1l/s0/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...:

Tutor Blogger

• Cara Membuat Scroll pada Label Blog
• Daftar Social Bookmark Indonesia | Tutor Blogger
• Cara Mendapatkan PageRank Dari Google
• Penyebab Link in Alexa Tidak Bertambah atau No Data
• Perbedaan Menjiplak dan Meng-Copas di Blogger
• Membuat Scroll Pada Kotak Komentar Blog
• Widget Penting yang harus ada di Blogger.
• Cara Cepat dan Mudah Mengetahui Blog Dofollow Atau Nofollow
• Tips Mendapat Backlink Berkualitas Permanent.
• Penyebab Jumlah Pelanggan Feedburner Naik-Turun
• Membuat Recent Coment avatar di Blogger
• Membuat Random Post di Blogger.
• Pentingnya Blogwalking | Tips SEO
• Di Halaman Awal/Home Blog Hanya Muncul 1 Postingan.
• Cara Scan Blog dari Virus atau Malware
• Memasang Meta tag Otomatis di setiap halaman Blog.
• Cara Membuat Link Sumber Otomatis ketika Artikel Blog di Copas.
• Berkomentar Bisa Dapat Backlink Untuk Optimasi SEO
• Membuat Thread Balas/Reply Komentar Blogger.
• Cara Membuat artikel Terkait dengan Scroll di bawah postingan Blog.
• Cara Membuat Tombol Shared (Daun) keren di Blog.
• Cara Menampilkan Navbar Blog secara Auto Hidden.
• Cara Membuat Box Followers Twitter di Blog.
• Cara Merubah Tulisan Posting Baru, Beranda, Posting Lama dengan Gambar.