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...: