5 Cara Ampuh Agar Tidak Menjadi Seorang Spammer

Sebagian dari para blogger memperbolehkan para pembaca meninggalkan komentar disitusnya. Selain untuk memeriahkan suasana blog, saling bertukar komentar juga biasa digunakan untuk perkenalan lebih dekat antara pembaca dengan penulis. Dengan berkomentar, pembaca dapat menanyakan sesuatu yang dibahas si penulis. Entah itu berupa kata-kata yang kurang dimengerti maupun masih kurang memahami isi dari artikel si penulis. Namun, Ada sebagian blogger pula yang memberi komentar hanya untuk mendapatkan backlink semata.  Artinya mereka hanya mengincar trafik kunjungan balik ke situs mereka. Dan biasanya mereka inilah para "tersangka" penyebar spam di komentar.

Apa Itu Komentar Spam

Sebelumnya kita juga harus mengetahui apa itu Komentar Spam. Komentar Spam adalah suatu kegiatan berkomentar yang dilakukan oleh seorang blogger dengan memasukkan suatu link mati atau hidup (biasanya link web-nya sendiri) di dalam komentarnya, berkomentar tidak nyambung ke postingan, berkomentar dengan kata-kata yang sama secara berkali-kali, menyalahgunakan fitur Name/URL maupun berkomentar dengan kata yang sedikit sekali. 

Cara Menghindari Menjadi Pengomentar Spam

Apakah selama ini kita cenderung sebagai spammer dalam berkomentar ? Mari kita baca beberapa tips di bawah ini untuk menghindari kita menjadi seorang Spammer :

1. Hindari Memasukkan Link Di Komentar

Salah satu ciri dari spammer adalah seringnya memasukkan link hidup maupun mati di dalam komentarnya sendiri. Usahakan untuk tidak memasukkan link hidup atau mati di dalam berkomentar. Apalagi berkomentarnya hanya sedikit kemudian memasukkan link blog kalian di dalam kotak komentar dan itu bisa dilaporkan sebagai spam ! Bahkan lebih parah lagi beberapa blogger hanya meninggalkan link blognya saja di kotak komentar tanpa mengomentari isi postingannya sama sekali !

2. Berkomentar Sesuai Postingan

Seorang pengomentar yang baik haruslah nyambung antara hal yang dibicarakan dengan hal yang dikomentari. Jangan berkomentar dengan hal yang tidak nyambung dan membaca judulnya saja tanpa membaca keseluruhan postingan. Bacalah beberapa kaliamat yang disampaikan si penulis, kemudian komentari tentang postingan tersebut sesuai yang dibicarakan. Bukankah jika ingin dihargai oleh orang lain harus menghargai orang lain terlebih dahulu ?

3. Hindari Komentar yang Terlampau Sedikit

Selain faktor komentar nyeleneh diatas, komentar-komentar yang sedikit juga bisa dianggap spam oleh si pengelola blog yang kita komentari. Well, Saya akui saya sendiri pun saat memulai dunia blog sering berkomentar dengan kata-kata yang sedikit. Maksudnya adalaah kata-kata seperti "Nice post, Nice Gan, Nice Share, Like It, Love It, Pertamaax, Keduaaxx, Kunjung Balik yaaa, Visit mee okey, dan saudara-saudaranya". Komentar yang seperti itu bisa dianggap spam. Bahkan si penulis akan merasa tidak dihargai sama sekali jika si pengomentar hanya berkomentar dengan kata-kata seperti itu. Jadi, hindarilah berkomentar seperti diatas, ingat apa rasanya jika kalian sudah mengetik sekian jam dan berharap mendapatkan kritik serta saran yang membangun namun kenyataannya mendapatkan kata-kata seperti diatas ? 

4. Berkomentar yang Memancing Percakapan Antar Pembaca

Nah ini juga salah satu tips yang baik guna menjadi pengomentar yang baik. Mengajak berinteraksi antar pembaca maupun dengan penulis blognya. Namun interaksinya saling bertukar pikiran bukan saling hujatan. Sang penulis tentu akan merasa senang jika ada seorang pengomentar seperti ini. Karena akan membuat blognya lebih "hidup". Pengomentar seperti ini juga akan di sukai oleh para blogger lainnya. Efeknya adalah blog yang di komentari oleh blogger seperti ini tidak akan segan-segan untuk memberikan komentar balik di blognya dengan kritik serta saran yang membangun.

5. Berkomentar yang Memberi Manfaat

Berusahalah memberi komentar yang memberi manfaat terhadap pembaca lain dan penulis. Misalnya jika ada kesalahan penulisan dalam artikel maka dia mengingatkan kepada si penulis, atau dia memberikan suatu pengalamannya kepada pembaca lain. Maksudnya begini, pernah saya menemukan trik mendaftar google adsense, dan di dalam komentarnya tersebut beberapa orang yang sudah berhasil mendaftar adsense akan sharing pengalamannya melalui kotak komentar yang ada. Dan ini akan sangat bermanfaat bagi saya yang ingin mendaftar adsense sehingga mendapatkan tips tambahan.

Kesimpulan

Sangatlah mudah untuk menjadi pengomentar yang baik. Kalau kita melakukan hal yang baik kepada blogger lainnya tentu akan memberikan hal yang baik pula bagi kita. Mudah-mudaha artikel diatas bermanfaat untuk para pembaca serta admin sendiri. So, mulai saat ini ayoo jadilah pengomentar yang baik :)

Read more »

Cara Membuat Threaded Comment Untuk Blogger

Di era sekarang blogger sudah menghadirkan fitur threaded comments atau reply comments seperti wordpress. Dengan menggunakan fitur ini tentunya akan membuat berbalas komentar antar pengunjung blog dengan si admin menjadi lebih mudah dan simpel. Tampilannya pun terlihat lebih menarik dan cantik apabila ditambahkan beberapa kode CSS. Namun yang saya bagikan kali ini adalah untuk membuat tampilan default-nya saja tanpa memakai CSS.

1. Threaded Comment untuk Template Bawaan Blogger

Untuk menampilkan threaded comment ini ada bermacam cara. Nah kalau untuk template bawaan dari blogger, kita tidak perlu susah-susah untuk mengutak-atik kode HTML/Javascript yang meribetkan. Cukup dengan kamu ikuti saja langkah di bawah ini :

1. Login ke Blogger.com

2. Klik Setelan --> Pilih Pos dan Komentar --> Pastikan "Lokasi Komentar" kamu "Tersemat".

3. Setelah itu, klik "Lainnya" --> Di dalam "Bolehkan Umpan Blog ?" kamu pilih "Penuh". Seperti yang terlihat di gambar di bawah ini :

4. Sekarang klik simpan.

2. Threaded Comment untuk Template yang Bukan Bawaan Blogger

Dan untuk template yang custom atau bukan bawaan atau hasil dari download template, biasanya tidak bisa memakai trik diatas. Namun kamu harus mengutak-atik beberapa kode Javascript. Tenang saja, caranya mudah kok dan tidak sampai 5 menit deh untuk melakukaknnya hehe. Lihat caranya di bawah ini.

1. Login ke Blogger

2. Back Up template kamu terlebih dahulu, Lihat caranya di bawah ini

• Untuk Antarmuka Blog yang lama klik disini
• Untuk Antarmuka Blog yang Baru klik disini

3. Masih di bagian Template, sekarang kamu klik Edit HTML --> Pilih Lanjutkan

4. Selanjutnya kamu cari kode

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

Nantinya kamu akan menemukan 4 buah kode

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

Ganti keempat kode tersebut dengan kode di bawah ini.

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

Ingat ! harus ganti keempat-empatnya.

5. Simpan template dan sekarang kkamu sudah memiliki threaded comment sendiri. Oh iya, untuk cara ini hanya tampilan biasa saja, kalau mau yang lebih cantik kamu bisa gunakan beberapa trik CSS agar tampilan komentar kamu menarik dan canti. Mungkin kamu bisa melihatnya di label Comments yang ada di blog ini. Untuk Hasilnya sendiri, bisa kamu lihat pada gambar yang paling atas.

Read more »

Menambahkan Fitur "Like" Facebook di Kotak Komentar Blogger

Salah satu fitur yang disediakan facebook adalah fitur "like" yang biasanya digunakan untuk mengekspresikan rasa suka seseorang terhadap sesuatu. Nah pada tutorial kali ini saya akan membagikan bagaimana caranya menambahkan fitur "like" di kotak komentar blog. Untuk tampilannya sih kira2 seperti gambar diatas. Oke jika kamu tertarik untuk menambahkan fitur ini, bisa kamu ikuti tutor di bawah ini :

1. Masuk Blogger.com

2. Klik Template --> Edit HTML --> Klik "Lanjutkan" --> Klik Expand Template Widget. Oh iya sebelumnya kamu backup dulu template kamu ya.

3. Di kotak Edit HTML, kamu cari kode <h4 id='comment-post-message'><data:postCommentMsg/></h4> gunakan ctrl+f untuk memudahkan pencarian. Setelah itu, kamu salin kode di bawah ini.

<a href='http://www.hzndi.blogspot.com'><img alt='Tutorial Blog and SEO' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD_dirGif_T-EB1SePygnvtajxmlkSDJ-NB44EnykUEqllCp0_JS1fmKee3okRXMvl-yFAJZkMWtLbwdZuIcnp-ZCFyesUC4f8Vh4E0MiM7GlVZihuiYjUvIwr3q550sXbjYBjQABtcyTz/s1600/best+blogger+tips.png'/></a><br/><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

4. Setelah menyalin kode diatas, kamu letakkan kode yang sudah disalin tadi setelah kode <h4 id='comment-post-message'><data:postCommentMsg/></h4>. Yang nantinya jika sudah kamu taru kode yang disalin tadi, akan terlihat seperti di bawah ini.

<h4 id='comment-post-message'><data:postCommentMsg/></h4> <a href='http://www.hzndi.blogspot.com'><img alt='Tutorial Blog and SEO' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD_dirGif_T-EB1SePygnvtajxmlkSDJ-NB44EnykUEqllCp0_JS1fmKee3okRXMvl-yFAJZkMWtLbwdZuIcnp-ZCFyesUC4f8Vh4E0MiM7GlVZihuiYjUvIwr3q550sXbjYBjQABtcyTz/s1600/best+blogger+tips.png'/></a><br/><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

5. Simpan template kamu dan lihat hasilnya :) thanks to spiceupyourblog.com

Read more »

Menambahkan Gambar Amplop di Kotak Komentar

Pada tutorial kali ini, saya akan memberitahukan kepada para pembaca sekalian bagaimana caranya menambahkan gambar amplop di belakang kotak komentar kita. Fungsinya sih agar lebih menarik dan enak di pandang. Jadi blog kita tidak terkesan kaku. Langsung saja kamu lihat caranya di bawah ini.

1. Masuk ke Blogger.com dengan akun kamu.

2. Klik Template --> Edit HTML --> Ubahsuaikan --> Klik Tingkat Lanjut --> Pilih Tambahkan CSS dan kamu  masukkan salah satu kode di bawah ini. Oh iya, jangan lupa backup template kamu terlebih dahulu yah.

Kode 1

.comment-form {
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu5fS-JN-EKdQpMFmnBPysbNZb3BDcCMhriUgT3nPUPOFyDDuPMLIIn-t76TFCeql4rtGojg3V57tGyNRNsEZcBKRB0SLa1ctFPOU8p6kADJqLB6P5KDwK-EKIxgKSsvyJ-29U-oQkC3s/s1600/leave+reply+comment+background.jpg) no-repeat;
padding: 100px 5px 0px 25px;
}

Kode 2

#comment-form {
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu5fS-JN-EKdQpMFmnBPysbNZb3BDcCMhriUgT3nPUPOFyDDuPMLIIn-t76TFCeql4rtGojg3V57tGyNRNsEZcBKRB0SLa1ctFPOU8p6kADJqLB6P5KDwK-EKIxgKSsvyJ-29U-oQkC3s/s1600/leave+reply+comment+background.jpg) no-repeat;
padding: 100px 5px 0px 25px;
}

3. Klik terapkan ke blog dan lihat hasilnya... Sangat mudah bukan ? thanks to Paul Crowe.

Read more »

Cara Menyembunyikan/Menampilkan Kotak Komentar di Blogger

Kesibukan yang ada tidak membuat saya menduakan blog saya tercinta hehe. Oke pada kesempatan kali ini saya akan membagikan sebuah tutorial tentang bagaimana caranya menyembunyikan kotak komentar pada blogger. Dengan menggunakan widget ini tentu saja akan mengehemat ruangan pada blog kamu sehingga tidak memerlukan raungan yang banyak. Lihat caranya di bawah ini :

1. Masuk ke Blogger.com

2. Klik Template --> Edit HTML --> Klik Lanjutkan --> Centang Expand Template Widget --> Cari kode <head> lalu kamu copas kode dibawah ini dan letakkan di bawah kode <head>. Oh iya jangan lupa kamu backup dahulu template blog kamu !

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.toggle_container&quot;).hide();
$(&quot;h3.trigger&quot;).click(function(){
$(this).toggleClass(&quot;active&quot;).next().slideToggle(&quot;slow&quot;);
});
});
 </script>

3. Setelah itu kamu cari lagi kode ]]></b:skin>, kamu salin lagi kode di bawah ini dan letakkan diatas kode ]]></b:skin>.

/*----- Comment Box by www.MybloggerTricks.com ----*/
h3.trigger {
background: url(http://mybloggertricks.googlecode.com/files/comment-boxbg.png) no-repeat;
height: 44px;
line-height: 46px;
width: 518px; border-radius:4px;
font-family:Arial;
font-size: 1.4em; font-weight: bold;
text-align:left;
color:#A1A1A1;
float: left;
cursor:pointer;
box-shadow: #333 0px 1px 3px;
padding:0 0 0 50px;
margin:10px 0px 10px 10px;
}
h3.active {
background-position: bottom left;
color:#ddd;
}
.toggle_container {
padding-left:10px;
overflow: hidden;
clear: both;
 }
/*----- share by www.hzndi.blogspot.com ----*/

NOTE :

- width: 518px adalah lebarnya, kamu bisa atur sesuka kamu

4. Kemudian kamu cari lagi kode <b:includable id='comment-form' var='post'>, lalu kamu copas lagi kode di bawah ini dan kamu taruh di bawah kode <b:includable id='comment-form' var='post'>.

<h3 class='trigger'>Click Here To add Comment</h3>
<div class='toggle_container'>
<div class='block'>

5. Cari lagi kode </b:includable> dan kamu copas kode di bawah ini dan diletakkan diatas kode </b:includable>.

<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='http://hzndi.blogspot.com' style='color:#CAC8C8;'><i>Tutorial Blog</i></a></p>
</div>
</div>

6. Simpan dan kamu lihat hasilnya,  thanks to mybloggertricks.com untuk kodenya :D

Read more »

Membuat Recent Comments dengan Avatar di Blogger

Di tutorial kali ini, saya akan membagikan cara bagaimana menampilkan pemberi komentar blog kamu tetapi dengan terlihat avatarnya. Ya kira-kira tampilannya seperti gambar diatas. Langsung saja, ke tutorialnya oke :

1. Masuk ke Blogger.com

2. Klik Tata Letak --> Tambah Gadget --> HTML/Javascript --> Masukkan kode HTML/Javascript di bawah ini kedalam kotak HTML/Javascript

<style type="text/css">
ul.w2b_recent_comments {
list-style: none;
margin: 0;
padding: 0;
}
.w2b_recent_comments li {
background: none !important;
margin: 0 0 6px !important;
padding: 0 0 6px 0 !important;
display: block;
clear: both;
overflow: hidden;
list-style: none;
}
.w2b_recent_comments li .avatarImage {
padding: 3px;
background: #fefefe;
-webkit-box-shadow: 0 1px 1px #ccc;
-moz-box-shadow: 0 1px 1px #ccc;
box-shadow: 0 1px 1px #ccc;
float: left;
margin: 0 6px 0 0;
position: relative;
overflow: hidden;
}
.avatarRound {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}
.w2b_recent_comments li img {
padding: 0px;
position: relative;
overflow: hidden;
display: block;
}
.w2b_recent_comments li span {
margin-top: 4px;
color: #666;
display: block;
font-size: 12px;
font-style: italic;
line-height: 1.4;
}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments  = 5,
showAvatar  = true,
avatarSize  = 40,
roundAvatar = true,
characters  = 40,
showMorelink = false,
moreLinktext = "More »",
defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<p style="display:none;">Widget By<a href="http://hzndi.blogspot.com/">Tutorial Blog</a></p>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://NAMA-BLOG-KAMU.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

NOTE :  

- numComments  = 5, adalah jumlah komentar yang akan ditampilkan

- Ganti  http://NAMA-BLOG-KAMU.blogspot.com dengan alamat web/blog kamu.

4. Simpan template.

Read more »

Membuat Gambar Default Untuk Pemberi Komentar Anonim

Di beberapa kesempatan saya telah memberikan beberapa cara tentang widget komentar. Kali ini saya akan memberikan cara bagaimana mengubah gambar default dari pemberi komentar anonim. biasanya pengunjung yang berkomentar menggunakan profil anonim tidak memiliki gambar, namun kali ini pengguna anonim akan memilik gambar sama seperti pemberi komentar yang menggunakan akun google dan lain2. Gambarnya pun bisa kamu tentukan sendiri loh ! bisa pakai foto kamu, atau yang lainnya. Langsung saja lihat caranya di bawah yah :

1. Masuk ke Blogger.com

2. Klik Template --> Edit HTML --> Cari kode ]]></b:skin>, kemudian kamu salin kode CSS di bawah ini.

.avatar-image-container { background: url("LETAKKAN-URL-GAMBAR-KAMU") no-repeat scroll center center;}

NOTE : Ganti kode yang berwarna biru dengan alamat url gambar kamu

3.  Taruh kode tersebut diatas kode ]]></b:skin>.

4. Simpan Template, sangat mudah bukan ?

Read more »

Membuat Threaded Comment / Reply Comment Dengan CSS

Hari ini saya belum memperbaharui blog karena kesibukan yang sangat banyak heheh. Oke, langsung saja, pada postingan kali ini saya akan memberikan tutorial bagaimana caranya membuat membuat sebuah reply comment atau juga yang disebut threaded comment. Dengan menggunakan fitur ini, blog kamu pun akan lebih indah dan dalam membalas pesan juga lebih rapi. Di postingan yang lalu sebenarnya saya sudah membahasnya (klik disini) namun akan saya beritahu lagi threaded comment dengan tampilan yang berbeda. Ya kira-kira tampilannya seperti gambar yang ada diatas. Langsung saja lihat tutorialnya di bawah ini :

1. Masuk ke Akun blogger kamu.

2. Klik Template --> Edit HTML --> Cari kode ]]></b:skin>

3. Salin kode CSS di bawah ini dan letakkan diatas atau sebelum kode ]]></b:skin>

/* Start Comment Style Code http://www.spiceupyourblog.com */
.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px}
.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}

/* Start Comment Style Code http://www.hzndi.blogspot.com */
.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color:#424242 !important;text-align:center;text-decoration:none;background:#fede72;border:1px solid #fec648;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}
.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em;margin-left:40px;background:#fff}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.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:normal}
.comments .comments-content .user a{color:#0E6284;font-weight:normal;text-decoration:none}
.comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}
.comments .comments-content .datetime a{color:#0E6284;font-size:12px;float:right;text-decoration:none}
.comment-content{margin:0 0 8px;padding:0 5px}

/* Start Comment Style Code http://www.hzndi.blogspot.com */
.comment-header{font-size:18px;background-color:#f1f1f1;border-bottom:1px solid #e3e3e3;padding:5px}
.comments .comments-content .owner-actions{position:absolute;right:0;top:0}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{margin-top:0}
.comments .comment-replybox-single{margin-top:5px;margin-left:48px}
.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:0}
.comments .comments-content .loadmore.loaded{max-height:0;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,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}
.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent}
.avatar-image-container{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht8sRJegS09iRcCmCxRCNDFM53wHP2Tar4ldAPqWPWv-WyU4Q9OGOuZfyZ0FA7obsPHUjaekaYlZYZafi246-GSfUFAYjazYAufGVnkOzKO3W34qpWjDTkgQ67-zYdq3XKZYmZRDctkNs/s51/arrow.png) top right no-repeat;float:left;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important}
.comments .avatar-image-container img{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}
.comments .comment-block{margin-left:65px;position:relative;border:5px solid #e3e3e3;border-radius:8px}
@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}
/* End Comment Style Code http://www.spiceupyourblog.com */ 

4. Simpan template dan lihat hasilnya, thanks to spiceupyourblog :)

Read more »

Membuat Threaded Comment Dengan 3 Tampilan Warna Berbeda

Sekarang zamannya menggunakan threaded comment  pada blog loh ! tidak lengkap rasanya jika tidak menggunakan gadget  ini pada blog kita. Nah fitur yang saya dapatkan dari spiceupyourblog ini sangat berguna untuk membuat blog kamu lebih stylish dan enak dipandang. Langsung saja yah cara membuatnya bisa kamu lihat di bawah karena saya tahu kalian sudah tahu fungsi dari widget ini :) oh iya, ada 3 Warna berbeda loh yang bisa kamu coba sesuai keinginan kamu !

1. Masuk ke Akun Blogger kamu.

2. Lihat gambar di bawah ini untuk langkah selanjutnya :

3. Langkah ke 3 lihat gambar di bawah ini lagi yah :

 

4. Setelah klik Ubahsuaikan, Kamu pilih Tingkat Lanjut --> Tambahkan CSS seperti Gambar di bawah ini :

 

5. Masukkan Salah satu kode CSS di bawah ini yang kamu inginkan ke dalam kotak CSS.

a. Untuk Threaded Comment Berwarna Biru

/*Blogger Threaded Comments From http://www.spiceupyourblog.com*/

/* Repost by http://hzndi.blogspot.com*/
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#1e05d8}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #1e05d8;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#1e05d8}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTuP95g8-6mtf5-6JCNS_TO2pkFDbcI8753RJkCf-3eZlBp_c2RltakjNpVhiolvw_6ccZOkJn0GTfH9tMHyopO7HShFkLYV4FdxoKOLjDCsjQOq-tHdKo0_Qdt31beRnZ3Oh37nS_z9U/s320/picresized_1338990142_comment-author-blue.gif);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}

/* Repost by http://hzndi.blogspot.com*/
/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/

b. Untuk Thread Comment Berwarna Pink

/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/

/* Repost by http://hzndi.blogspot.com*/
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#d80556}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #d80556;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#d80556}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzqD1_axgqLrHhkDvMRhIISSt22Nx1tu03lq9YYmv2PnNtFzamcEpivztoS0iWSX-PBMo4zQGLGITet9s-ErzMQ9KcDlZHbds814jfxmUf7ipL3LS76B8kiUb2EIhEIkib9yRdeWzWMLc/s320/author-pink.png);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}

/* Repost by http://hzndi.blogspot.com*/
/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/

c. Untuk Threaded Comment  Berwarna Hijau

 

/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/

/* Repost by http://hzndi.blogspot.com*/
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#56d805}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #56d805;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#56d805}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWrZMqixqS4O3tePViaqQvWuAo6Cwgx-BRebp7TXl6IsbjV2eTxScT1YT9EtxhHEAXwLJidOT8tTgaHiKsyOiTEQ9UZm6wAXIo5M39mGVXi39ilzGXIR5dB6U8iL4xfebaFAq1jijMezA/s320/picresized_1338989738_comment-author-green.gif);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}

/* Repost by http://hzndi.blogspot.com*/
/*Blogger Threaded Comments Styles From http://www.spiceupyourblog.com*/

6. Klik Terapkan ke Blog dan lihat hasilnya :)

Read more »