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

86   komentar

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
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
Anonim mengatakan... 15 Mei 2013 21.20
Produk dijamin asli
TILLA SHOP : Barang yang Kami Tawarkan Semuanya Barang Asli Original Garansi Resmi Distributor dan Garansi TAM .
Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
BERMINAT HUB-SMS:0896-9198-6275 ATAU KLIK WEBSET RESMI KAMI http://tilla-shop.blogspot.com/
BlackBerry>Samsung>Nokia>Apple>Acer>Dell>Nikon>DLL

Dijual

Ready Stock !
BlackBerry 9380 Orlando - Black
Rp.900.000,-

Ready Stock !
BlackBerry Curve 8520 Gemini
Rp.500.000,-

Ready Stock !
BlackBerry Bold 9780 Onyx 2
Rp.800.000,-

Ready Stock !
Blackberry Curve 9320
Rp.700.000,-

Ready Stock !
Samsung Galaxy Tab 2 (7.0)
Rp. 1.000.000

Ready Stock !
Samsung Galaxy Nexus I9250 - Titanium Si
Rp.1.500.000,-

Ready Stock !
Samsung Galaxy Note N7000 - Pink
Rp.1.700.000

Ready Stock !
Samsung Galaxy Y S5360 GSM - Pure White
Rp.500.000,-

Ready Stock !
Nokia Lumia 800 - Matt Black
Rp.1.700.000,-

Ready Stock !
Nokia Lumia-710-white
Rp. 900.000,-

Ready Stock !
Nokia C2-06 Touch & Type - Dual GSM
Rp.450.000,-

Ready Stock !
Nokia Lumia 710 - Black
Rp. 900.000,-

Ready Stock !
Apple iPhone 4S 16GB (dari XL) - Black
Rp.1.200.000,-

Ready Stock !
Apple iPhone 4S 16GB (dari Telkomsel)
Rp.1.200.000,-

Ready Stock !
Apple iPod Touch 4 Gen 8GB
Rp.700.000

Ready Stock !
APPLE iPod Nano 8GB - Pink
Rp.500.000,-

Ready Stock !
Acer Aspire 4752-2332G50Mn Core i3 Win7 Home
Rp 1.300.000

Ready Stock !
Acer Aspire S3-951-2364G34iss
Rp. 1.200.000,-

Ready Stock !
Acer Aspire 5951G Core i7 2630 Win 7
Rp. 2.500.000,-

Ready Stock !
Acer Aspire 4755G Core i5 2430 Win 7 Home Premium Green
Rp. 2.500.000,-

Ready Stock !
Nikon D7000 kit 18-105mm
Rp.1.700.000

Ready Stock !
Nikon D90 Kit 18-105mm Vr
Rp 1.300.000

Ready Stock !
Nikon Coolpix L 120 Red
Rp. 900.000

Ready Stock !
Nikon Coolpix P 500 Black
Rp 1.000.000
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 sob
www.duniagame.info
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
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
bikin blog berat gk tuh ??
Reply Delete
terimakasih triknya gan,, sangat bermanfaat gan,,
Reply Delete
visit back om :D

http://xantikon.blogspot.com :D
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
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
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
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
TOKO ONLINE RESMI TERPERCAYA 100% BEBAS RESIKO BEBAS PENIPUAN MELAYANI PARTAI GROSIR DAN ECERAN PROMO TERMURAH BANTING HARGA TERPERCAYA DI DELIMA PONSEL:HUB/SMS:0852-4004-4475 PIN BB:5B3C6CE6
website:http://delima-ponsel.blogspot.com
Ready Stock ! Apple iphone 5 32GB Rp.2.000.000,-
Ready Stock ! Apple iPhone 5S 32GB Rp.2.500.000,-
Ready Stock ! Apple iPhone 6 plus 32gb Rp.3.500.000,-
Ready Stock ! Samsung Galaxy S5 Rp.1.700.000
Ready Stock ! Samsung Galaxy S6 edge 32GB PutihRp.2.700.000
Ready Stock! Samsung Galaxy S4 I9500 Putih Rp.1.200.000
Ready Stock ! Samsung Galaxy Note 3 putih Rp.1.700.000
Ready Stock ! Samsung Galaxy Note 4 Gold Rp.2.000.000,-
Ready Stock ! Samsung Galaxy A3 A300H 16GB Rp.1.200.000
Ready Stock ! Samsung Galaxy A5 A500F Silver Rp.1.500.000,-
Ready Stock ! Samsung Galaxy E5 E500H Putih Rp.1.200.000
Ready Stock ! Samsung Galaxy E7 Rp. 1.300.000,-
Ready Stock ! Apple iPhone 4S 16GB- BlackRp.1.200.000,-
Ready Stock ! Apple iPhone 4 16GB Rp.1.200.000,-
Ready Stock !Samsung Galaxy Grand Prime Rp.800.000
Ready Stock ! Asus Zenfone 2 ZE551ML RAM 4 Rp.1.500.000
Reply Delete
ikut nongkrong ah gan
http://tokorestu.com/kategori-produk/dompet-kulit/
Reply Delete
gada perubahan gan
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