Cara Membuat Kotak Komentar Blog Keren

Tutorial Belajar Blog - Cara Membuat kotak Komentar Keren,Pengunjung Tutorial Blog | Tips BLog Kali  ini saya ingin membuat postingan tentang membuat Kotak Komentar Blog .Sebelum nya saya tertarik dengan komentar blogmate om-dayz sempat bingung bagaimana membuat kotak komentar, akan tetapi dengan usaha akhirnya bisa juga walapun sedikit berbeda. 
Ini Priview nya

  • Login ke akun blogger dan masuk ke Edit HTML
  • Untuk berjaga-jaga, ada  baiknya jika kita backup dulu template kita, siapa tau ada kesalahan yang tak terduga
  • Centang "Expand Widget HTML" ( bila perlu )
 Kemudian copy semua kode berikut ini tanpa terkecuali agar berhasil di atas code ]]></b:skin> 
/*------------- START tutorialbelajarblogger.blogspot.com Threaded Comments  ------------*/
.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
font-size: 12px;
margin-bottom: 16px;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .comment .comment-actions a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .comment .comment-actions a:hover {
text-decoration: none; background:#fff; border:1px solid #5AB1E2;
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 40px;   font-size:12px; background:#EBF5FE;
}
.comments .comments-content .comment {
  margin-bottom:16px;
  padding-bottom:8px;

}
.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:#2D5E7B; font-size:14px; font-weight: bold;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 {
color: #999999;
float: right;
font-size: 11px;
text-decoration: none;
}
.comments .comments-content,
.comments .comments-content .comment-content {
  margin:0 0 8px;
}

.comment-header {background-color: #F4F4F4;
    border: thin solid #E6E6E6;
    margin-bottom: 5px;
    padding: 5px;
}
.comments .comments-content .comment-content {
  text-align:none;
}
.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 .continue {
  cursor: pointer;
}
.comments .continue a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.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,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;
}
.comments .avatar-image-container {background-image: url("http://img846.imageshack.us/img846/7357/unled1oww.jpg");background-position: center center;background-repeat: no-repeat;float: left;width: 36px;max-height: 36px;margin: 0;outline: 1px solid #FFFFFF;padding: 3px;vertical-align: middle;overflow: hidden;
border: 1px solid #DDDDDD;}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
}

/* Responsive styles. */
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {
    margin-left: 0;
  }
}
/*--------- End tutorialbelajarblogger.blogspot.com Blogger Threaded Comments  ----------*/
  • Kemudian simpan dan lihat hasilnya….! Semoga sesuai keinginan ya…! Kalau gak berhasil, wah keterlaluan, Cuma copas script doank gak bisa… :D hehehe :P #LOl
nah biar tampilan nya menjadi lebih menarik seperti Thread komentar saya, anda bisa tambah code CSS berikut, letakkan  di bawah ]]></b:skin> 
<style type='text/css'>
        
/*Start Modif kotak Komentar*/
.comments .comments-content .icon.blog-author{
background-repeat:no-repeat;background-image:url(http://img2.blogblog.com/img/icon18_edit_allbkg.gif);
}
.comments .comments-content .datetime a{float:right;
}
.comments .comments-content .comment:last-child,.comments .comments-content .comment-thread ol li{font:14px Verdana;color:#fff;background:rgba(0,0,0,.5);padding:5px;margin:2px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;box-shadow:inset 0 0 30px #fff;-moz-box-shadow:inset 0 0 30px #fff;-webkit-box-shadow:inset 0 0 30px #fff;
}
.comment-actions a{
background:#dad6cf;-moz-border-radius:2px;border-radius:2px;-webkit-border-radius:2px;font:12px Verdana;padding:4px;margin:5px;height:16px;border:1px solid #c1c1c1;
}
.comments .comment .comment-actions a:hover,.comments .continue a:hover{
text-decoration:none;background:#ab9e9e;border:1px solid #5AB1E2;
}
.avatar-image-container{
-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;border:4px inset #000;
}
.comments .continue a{display:inline-block;border:1px solid #C4C4C4;text-align:center;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background:#000;font:14px Verdana;color:#fff;padding:2px 8px;margin-right:10px;
}
.deleted-comment{color:gray;font-style:italic;
}
/*End Modif kotak Komentar*/
</style>

OK selesai, coba lihat bagaimana tampilan komentar anda…!
Jangan Lupa tinggalkan Komentar sobat2 ya...

77   komentar

Anonim mengatakan... 10 Maret 2013 pukul 00.27
bang saya minta kotak komentar yang ada di blog ini donk bang kayanya keren
Reply Delete
bagaimana sudah sukses mencoba tips blog nya
Reply Delete
Gimana bro,kalau yang sudah ada kotak commentnya,apa perlu di hapus dulu atau langsung kopas yang ini,,,Terimakasih sob
Reply Delete
ehhehe ... ikut koment akh... bysanya si di hapus dulu, untuk lebih maksimal nya supaya tidak tabrakan css nya
Reply Delete
Anonim mengatakan... 15 Maret 2013 pukul 23.11
kunjunagnnya mas
di tunggu kunjunagn baliknyaa :D
Reply Delete
mantap gan,,sukses nih di blog ane
visit balik yah !
salam blogger
Reply Delete
Terimakasih mas maaf kemaren ngak saya taro sumbernya di blog saya tapi udah saya edit silahkan mampir lagi mas
http://imrontrik.blogspot.com
Reply Delete
makasih kawan, kotak komentarnya sekarang lebih keren... :D ^_^
Reply Delete
di blog ku koq gk ada perubahan to gan.,.,?
Reply Delete
mungkin ada ad double kode css gan
Reply Delete
izin praktek ya om oktri :)
Reply Delete
makasih gan...
. mampir di blog saya http://indonesiaanonymous.blogspot.com <--- blogger pemula :D
.
Reply Delete
thanks sob,,,,,,,,, sangat membantu
Reply Delete
Palasu ang mah kalapia
Reply Delete
Kunjungannya Sobb

erikcheaterz.blogspot.com/
Reply Delete
bg kotak komentarnya kerenn,,
yeeee sukses juga akhirnya sa ngehias kotak comment sya bg

bgi2 trik ngehias blog yg lain dong bg???

kunjungi n follow yaa bg ^_^
Reply Delete
gak bisa gan ..mohon pencerahannya -_- malah kotak komentar saya ngilang =(
Reply Delete
kereeen kotak komentarnya =))
Reply Delete
blog dan postingan yg keren nih, sy udah coba gan, tapi kenapa kotak komentarnya tdk muncul otomatis seperti punya agan? munculnya tetap pesan 1 komentar. untuk melihatnya harus diklik dulu. mohon kunjungannya di : ict-smkpertiwi-bogor.blogspot.com . terima kasih
Reply Delete
Blog ane masih perawan boss blom ane jamah htmlnya. Ane lgi keliling cari ilmu nih buat ngerombak blog ane. Thank boss semoga ilmu kmu banyak yg terapin.
Reply Delete
keren om, ditunggu kunjunganya
Reply Delete
keren abis gan
qieem.blogspot.com
Reply Delete
Kumpulan Film2 terbaru cuma ada di Waroeng-Adenia FREE MUSIC,MOVIE, TV ONLINE, GAME ONLINE & CHAT ROOM klik aja link berikut http://adf.ly/dIi6i
Reply Delete
Gan kok gk bsa ditemuin ya ]]> nya not found ada cara lain gk?
Reply Delete
Sore sob...yuk liat koleksi film terbaru Di WaroengAdenia yang berjudul
1. DENDAM ARWAH REL BINTARO
2. 3 CEWEK PETUALANG
3. KERETA SETAN MANGGARAI

Silahkan Klik http://waroeng-adenia.96.lt/ FREE MUSIC, MOVIE, TV ONLINE, GAME ONLINE & CHAT ROOM
Reply Delete
mmmmmm.... boleh jugaaaa,,,, kren2....
Reply Delete
sip jadi pengen nyoba gan...
Reply Delete
sudah dicoba, tidak muncul...malah bloger saya muncul HTML BANYAK
Reply Delete
kenapa di blog saya tidak bisa berubah ya
Reply Delete
mantap om saya tunggu kunjungannya
http://tutorialblogmantap.blogspot.com/
Thanks Atas Infonya
Reply Delete
Anonim mengatakan... 4 Juni 2014 pukul 14.19
waduh koq gak berubah nich gan,, coba mampir dechhh
Reply Delete
Terima Kasih gan Bisa
Reply Delete
Ga berhasil gan ..
Hadeh ..
Salam kenal ya ..
Reply Delete
Anonim mengatakan... 9 Juli 2014 pukul 00.47
bikin blog berat gk tuh ??
Reply Delete
terimakasih triknya gan,, sangat bermanfaat gan,,
Reply Delete
ditunggu kunbal nya di muhammadinikhsaan.blogspot.com
Reply Delete
makasih banget sob, sangat berguna u/newbie seperti saya ?
Reply Delete
keren gan tips nya mohon kunjungan baliknya di blog saya tentang pariwisata indonesia timur
http://bumi-jargaria.blogspot.com/
Reply Delete
ane gak bisa gan,, kkkkkk copas saja masih belum nampak,, hihihihih g mana nih gan,, solusinya ? kotak komentar ane acak acakan thanks
Reply Delete
Gan masih gak bisa gan,, coba mampir deh gan ke lapak ane http://pakrusjaya.blogspot.com
Reply Delete
mas gimana kalau tak ada ]]>
Reply Delete
Anonim mengatakan... 19 Oktober 2014 pukul 14.22
thank gan..dah ane terapin di blog ane...
di tunggu kungkernya gan...
http://windubuntu.blogspot.com/
Reply Delete
Wow cukup menarik ya haha :D Keren ^_^

Mampir ya gan :) http://newalfath.blogspot.com/
Reply Delete
Penjelasannya bagus dan detail menyertakan berbagai sumber yang terpercaya

Info untuk menghasilkan uang (memonetize) dari blog, website dan bisnis online bisa belajar dengan mengklik link di bawah ini

http://www.asianbrain.com/letter.html/903484
Reply Delete
artikel sangat bermanfaat.. Lanjutkan gan..


http://berandalpunk.blogspot.com/
Reply Delete
Keren Sob , Jangan Lupa Mampir ya http://trinityreaper.blogspot.com ^_^
Reply Delete
Anonim mengatakan... 2 Desember 2014 pukul 11.41
siip dah, keren (y)
Reply Delete
Terimakasih informasinya, kunjung balik ya agan :)
http://bit.ly/1adfGbW
Reply Delete
sip gan,,udah ane coba dan hasilnya keren..
kunjungan balik ya www.indramekatronika.blogspot.com
Reply Delete
Anonim mengatakan... 13 Juli 2015 pukul 19.44
Prediksi CAMBODIA 14/07/2015
AS 1 3 6
KOP 6 9 4
KEP 0 2 5
EKOR 3 4 6
CB 5
UPPSSS.. Utamakan prediksi sendiri ya bos..

Pasang togel via SMS & BBM TERPERCAYA!!
silahkan daftar di pin 274f56bc.
SYDNEY SINGAPORE HONGKONG NEPAL CAMBODIA FRANCE


https://www.facebook.com/pages/Joker4D/1450723068584179?ref=hl
Reply Delete
mantap tutorial nya brooo
Reply Delete
mantaaab
ajarin dong cara bikinnya
Reply Delete
thanks gan buat tips nya,,
sangat membantu ,, blog ane jadi keren,,
Reply Delete
Vimax Canada Original : Capsul pembesar dan pemanjang penis secara permanen

Reply Delete
mencoba memahami untuk dipraktekkan.
Salam Rahayu
Reply Delete
bang ko ga bisa ya, tampilan blog saya mlah jdi banyak tulisan ijonya,
mkasih
Reply Delete
ikut nongkrong ah gan
http://tokorestu.com/kategori-produk/dompet-kulit/
Reply Delete
Mas, kenapa di Blog saya tidak bisa tampil kolom komentarnya?
mohon pencerahannya Mas?
Atau dari temen-temen ada yang bisa menyelesaikan persoalan saya ini, bisa dikirim ke email saya, endinawaludin16@gmail.com.
Atau ini Blog jadul saya, https://endinawaludin.blogspot.co.id
Trima kasih
Reply Delete
Mas, kenapa di Blog saya tidak bisa tampil kolom komentarnya?
mohon pencerahannya Mas?
Atau dari temen-temen ada yang bisa menyelesaikan persoalan saya ini, bisa dikirim ke email saya, endinawaludin16@gmail.com.
Atau ini Blog jadul saya Cara Membuat Link aktif di Komentar Blog
Reply Delete
VIPQIUQIU99.COM AGEN JUDI DOMINO ONLINE TERPERCAYA DI INDONESIA

Kami VIPQIUQIU99 AGEN JUDI DOMINO ONLINE TERPERCAYA DI INDONESIA mengadakan SEO Kontes atau Kontes SEO yang akan di mulai pada tanggal 20 Januari 2017 - 20 Juni 2017, dengan Total Hadiah Rp. 35.000.000,- Ikuti dan Daftarkan diri Anda untuk memenangkan dan ikut menguji kemampuan SEO Anda. Siapkan website terbaik Anda untuk mengikuti kontes ini. Buktikan bahwa Anda adalah Ahli SEO disini. Saat yang tepat untuk mengetest kemampuan SEOAnda dengan tidak sia-sia, hadiah kontes ini adalah Rp 35.000.000,-

Tunggu apa lagi?
Kontes SEO ini akan menggunaka kata kunci (Keyword) VIPQIUQIU99.COM AGEN JUDI DOMINO ONLINE TERPERCAYA DI INDONESIA Jika Anda cukup percaya akan kemampuan SEO Anda, silahkan daftarkan web terbaik Anda SEKARANG JUGA! Dan menangkan hadiah pertama Rp. 10.000.000. Keputusan untuk Pemenang Akan di tentukan dengan aturan kontes SEO yang dapat dilihat di halaman ini.

Tunggu apa lagi? Ikuti kontes ini sekarang juga!

CONTACT US
- Phone : 85570931456
- PIN BB : 2B48B175
- SKYPE : VIPQIUQIU99
- FACEBOOK: VIPQIUQIU99
Reply Delete
Komentar ini telah dihapus oleh pengarang.
Delete

Posting Komentar

Cancel Reply