Cara Membuat Threaded Comments Di Blogspot | Dengan Tampilan yang Menarik

Cara Membuat Threaded Comments Di Blogspot | Dengan Tampilan yang Menarik - Hallo sobat blogger. Kali ini saya ingin share Cara Membuat Threaded Comments Di Blogspot dengan Tampilan yang Menarik. Sebenarnya sudah banyak blogger-blogger yang memberikan tutorial Cara membuat threaded comment ini, dengan berbagai style. Nah, kali ini saya ingin memberikan tutorial cara membuat threaded comment dengan tampilan yang menarik dan cool. Demo bisa dilihat langsung di blog Kreativitas Ngeblog ini.



Bagaimana sobat? tertarik ingin memasangnya di blog? Ini dia caranya :

Pertama, sobat aktifkan dulu fitur threaded comment di blog sobat. Caranya dengan Edit HTML, terus cari kode berikut :

                             <b:include data='post' name='comments'/>

Kemudian ganti kode diatas dengan kode berikut :
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
Jika sobat sudah mengaktifkan fitur threaded comment, langkah ini bisa dilewati.

Catatan : Jika sobat menemukan 2 atau 3 kode <b:include data='post' name='comments'/>, ganti semuanya.

Lanjut. Cari kode ]]></b:skin> dan letakkan kode dibawah ini diatasnya :
.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;
}
.comments .continue a, .comments .comment .comment-actions a {
display:inline;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding: 2px 5px;
text-decoration: none;
text-shadow:0 1px 1px rgba(0,0,0,.3);
color:#FFF;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-right: 10px;

border: 1px solid #3079ED;
background: #0066FF;
background: -webkit-gradient(linear, left top, left bottom, from(#0099FF), to(#009999));
background: -moz-linear-gradient(top, #0099FF, #009999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&amp;amp;amp;amp;#39;#0099FF&amp;amp;amp;amp;#39;, endColorstr=&amp;amp;amp;amp;#39;#009999&amp;amp;amp;amp;#39;);

}
.comments .continue a:hover, .comments .comment .comment-actions a:hover {
  text-decoration: none;
background:#0099FF;
background: -webkit-gradient(linear, left top, left bottom, from(#009999), to(#0099FF));
background: -moz-linear-gradient(top, #009999, #0099FF);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&amp;amp;amp;amp;#39;#009999&amp;amp;amp;amp;#39;, endColorstr=&amp;amp;amp;amp;#39;#0099FF&amp;amp;amp;amp;#39;);
}

.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=&amp;amp;amp;amp;#39;#0066FF&amp;amp;amp;amp;#39;, endColorstr=&amp;amp;amp;amp;#39;#0099CC&amp;amp;amp;amp;#39;);
}

.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.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(&amp;amp;amp;amp;quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&amp;amp;amp;amp;quot;) no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url(&amp;amp;amp;amp;quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==&amp;amp;amp;amp;quot;) no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
  float: left;
  overflow: hidden;
}
.comments .avatar-image-container img {
  width: 36px;
}
.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;
}
Jika sudah, simpan template dan lihatlah hasilnya. ^_^
Lihat salah satu post sobat yang ada komentarnya, untuk melihat apakah tutorialnya berhasil atau tidak..

Jika terjadi masalah, silahkan berkomentar di bawah...

Let's Enjoy using the Awesome threaded comment..

Special thank to : hacktutors.info
Rating: 5 Description: Cara Membuat Threaded Comments Di Blogspot | Dengan Tampilan yang Menarik Reviewer: Angga Ari Wardana - Itemreviewed: Cara Membuat Threaded Comments Di Blogspot | Dengan Tampilan yang Menarik

Postingan populer dari blog ini

Biodata Ameri Ichinose | Foto Ameri Ichinose

Gambar
Biodata Ameri Ichinose | Foto Ameri Ichinose - Ameri Ichinose ,  wanita cantik asal Jepang ini menjadi bahan perbincangan di media jejaring sosial seperti Twitter dan Facebook. Nama Ameri Ichinose melejit di Pencarian Google. Masyarakat begitu ingin tahu siapa itu Ameri Ichinose ?  Apakah hubungan Ameri Ichinose dengan gelandang Manchester United Shinji Kagawa ? Ameri Ichinose Biodata Ameri Ichinose : Nama Asli : Kurisu Erika Misora Ayaka Nama Tenar : Ameri Ichinose Tempat Tanggal Lahir : Kanagawa, Jepang, 16 September 1987 Umur : 26 Tahun Profil Ameri Ichinose : Ameri Ichinose adalah aktor film dewasa asal jepang yang memulai debutnya di film dewasa sejak tahun 2006. Sudah banyak film yang dibintanginya. Ameri Ichinose sendiri sering bergonta - ganti nama dan julukan dalam setiap membintangi film dewasa tersebut. Apa yang menyebabkan Nama Ameri Inchinose melejit? : Nama Ameri Ichinose makin dikenal orang bukan karena pekerjaannya sebagai pemeran film dewasa, melainkan k...
Baca selengkapnya

Daftar Harga Laptop HP Hewlett-Packard | Spesifikasi Laptop HP Terbaru

Gambar
Daftar Harga Notebook HP Hewlett-Packard | Spesifikasi Laptop HP Terbaru - Pelajar di indonesia tentu sangat memerlukan laptop untuk menyelesaikan tugas-tugas sekolah atau tugas-tugas kuliah, karena itu saya akan share daftar harga Notebook Netbook HP Hewlett-Packard bagi sobat yang ingin membeli Laptop Hewlett-Packard . Daftar Netbook HP berikut tersusun dari HP mini berupa Notebook Mini sampai  sampai laptop yang berukuran 17 inch dengan kisaran harga mulai dari 2 jutaan sampai 17 jutaan. Berikut Daftar Harga Laptop Hewlett-Packard Terbaru Juli 2012 Daftar Harga dan Spesifikasi Laptop Hawlett-Packard Terbaru Juli 2012 HP Mini 110-4112TU - Black - Harga: Rp 2,716,000 Notebook Mini / Netbook / UMPC. Intel Atom N2600, 2GB DDR3, 320GB HDD, NIC, WiFi, Bluetooth, VGA Intel GMA 3600, Camera, 10.1" WSVGA, Non OS NOW With 6-cell battery HP 110-3516TU Mini - White - Harga: Rp 3,038,500 Notebook Mini / Netbook / UMPC. Intel Atom N570, 1GB DDR3, 320GB HDD, NIC, WiFi, Bluetooth, VGA Intel...
Baca selengkapnya

Daftar Harga Hp Sony Ericsson Bulan November 2012

Daftar Harga HP Sony ericsson november 2012  - Pada posting kali ini, kreativitasngeblog akan memberikan sebuah informasi mengenai daftar harga handphone bermerek Sony ericsson terupdate pada bulan november 2012, dan sebelum membeli atau mencari informasinya tidak salahnya untuk melihat ini :) ok berikut informasinya :  Daftar Harga Hp Sony Ericsson Bulan November 2012 TIPE SONY ERICSSON HARGA BARU HARGA BEKAS Sony Ericsson Xperia MT11i Neo V Rp 2.250.000 Rp 2.150.000 Sony Ericsson MT15i Xperia Neo Rp 2.985.000 Rp 2.350.000 Sony Ericsson WT19i Live with Walkman Rp 1.880.000 Rp 1.490.000 Sony Ericsson CK13i Txt Qwerty Rp 650.000 Rp 550.000 Sony Ericsson LT18i Xperia Arc S Rp 3.150.000 Rp 2.750.000 Sony Ericsson ST15i Xperia mini Rp 1.420.000 Rp 1.150.000 hardika.com, Sony Ericsson SK17i XPERIA Mini Pro Rp 1.680.000 Rp 1.250.000 Sony Ericsson ST18i Xperia Ray Rp 2.210.000 Rp 1.850.000 Sony Ericsson ST17i Xperia active Rp 2.525.000 Rp 1.950.000 Sony Ericsson CK15i Txt PRO Rp 920....
Baca selengkapnya