Cara Membuat Kotak Komentar Blog Menjadi Menarik

Tutorial Belajar Blog - Cara Membuat kotak Komentar Keren Blog Menjadi Menarik,Pengunjung Tutorial Blog | Tips BLog Kali  ini melanjutkan postingan sebelumnya Cara Membuat Kotak Komentar Blog Keren, merupakan request dari teman blogger aguz. Kronolologi Komentar ini Sebelum nya saya tertarik dengan komentar blogmate om-dayz sempat bingung bagaimana membuat kotak komentar, akan tetapi dengan usaha akhirnya bisa juga.
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> 

/* CSS Komentar */
#form-wrapper {margin-top:20px;}
#comments{overflow:hidden;}
.comments {clear: both;padding: 20px 30px 30px;margin: 10px 0px;background: none repeat scroll 0% 0% rgb(34, 34, 34);    border: 1px solid rgb(51, 51, 51);box-shadow: 0px 0px 3px black inset;color: white;}
#comments h4{display:block;padding:5px;line-height:30px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4{background:rgba(255, 0, 0, 0.2); text-align:center;}
#comments h4,.comments .user a{font-size:14px}
#comments h4{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:20px;width: 0px;height: 0px;border-style: solid;
border-width: 10px 7.5px 0 7.5px;border-color: rgba(255, 0, 0, 0.2) transparent transparent transparent;line-height:0}
h4#comment-post-message {display:none}
#comments .avatar-image-container img {border: 0px none; padding: 0px;box-shadow: none;border-radius: 30px;-webkit-border-radius:30px;-moz-border-radius:30px;}
.comments .comments-content .datetime { float: right; font-size: 10px; margin-right:4px}
.comments .comments-content .comment:first-child {padding-top: 0px;}
.comments .thread-toggle { display: none;}
.comments .comment .comment-actions a {padding: 2px 10px;background: rgb(51, 51, 51);border: 1px solid rgb(70, 70, 70);position: absolute;box-shadow: 0px 1px 2px black;color:rgb(230, 230, 230);-webkit-transition: all .05s linear;-moz-transition: all .05s linear;-o-transition: all .05s linear;transition: all .05s linear;}
.comments .comment .comment-actions a:hover {background: none repeat scroll 0% 0% rgb(40, 40, 40);border: 1px solid rgb(51, 51, 51);text-decoration: none;box-shadow: 0px 0px 1px black;}
.comment-thread{color:rgb(230, 230, 230); font-size:13px;}
.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: rgb(230, 230, 230);font-weight: bold;font-size: 13px;text-shadow: 1px 1px rgb(0, 0, 0);}
.comments .avatar-image-container, .comments .avatar-image-container img {width: 45px;max-width: 100%;height: 45px;    max-height: 100%;margin: 0px 0px 3px;vertical-align: middle;border: 1px solid rgb(51, 51, 51);padding: 4px;box-shadow: 0px 1px 2px black;background-color: transparent;background-clip: content-box;transition: all 0.5s ease-out 0s;border-radius: 30px 0px 0px 30px;-webkit-border-radius:30px 0px 0px 30px;-moz-border-radius:30px 0px 0px 30px;overflow:hidden;}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:58px}
.comments .comment-block{ border: 1px solid rgb(51, 51, 51);padding: 6px;background: none repeat scroll 0% 0% rgb(40, 40, 40);box-shadow: 0px 1px 2px black;position: relative;    transition: all 1s ease-out 0s;}
.comments .comments-content .comment-header {margin: 2px 0px 0px; padding: 5px 10px 7px; border: 1px solid rgb(65, 65, 65);background-color: rgb(51, 51, 51); word-wrap: break-word; }
.comments .comments-content .comment-content {margin: 2px 0px 10px; padding: 5px 10px 7px; border: 1px solid rgb(65, 65, 65);background-color: rgb(51, 51, 51); word-wrap: break-word; }
.comments .comments-content .comment{margin:20px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .comment-thread {margin: 20px 0px;}
.comments .comments-content .icon.blog-author{display:block;  width:0;  height:0;  border:13px solid transparent;  border-right-color:rgba(255, 0, 0, 0.1);  position:absolute;  right:-1px;  bottom:4px;animation:author-icon .9s infinite;-moz-animation:author-icon .9s infinite; -webkit-animation:author-icon .9s infinite; }
.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 rgb(20, 20, 20);background: none repeat scroll 0% 0% transparent;box-shadow: -1px 0px 0px rgb(51, 51, 51);}
.comments .comment-thread.inline-thread .comment{width:auto}
.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, .comments .comments-content .loadmore a {background: none repeat scroll 0% 0% rgb(40, 40, 40);
font-size: 16px;font-weight: normal;color: rgb(255, 255, 255);padding: 10px 0px;text-align: center;box-shadow: 0px 1px 2px black;
text-transform: capitalize;text-shadow: 1px 1px rgb(0, 0, 0);-webkit-transition: all 0.26s ease-out 0s;-moz-transition: all 0.26s ease-out 0s;-o-transition: all 0.26s ease-out 0s;transition: all 0.26s ease-out 0s;border: 1px solid rgb(59, 59, 59);}
.comments .continue a:hover, .comments .comments-content .loadmore a:hover{box-shadow: 0px 0px 1px black;}
.comments .continue a:active, .comments .comments-content .loadmore a:active{box-shadow: none;background:rgb(70, 70, 70);}
.comments .comments-content .loadmore {margin-top:0px;}
.comment .continue{display:none}
#comment-editor{width:103%!important;}
.comment-form{width:100%;max-width:100%;margin-top:20px;}

Kemudian simpan dan lihat hasilnya….!Semoga sesuai keinginan ya…! Kalau gak berhasil, wah keterlaluan, Cuma copas script doank gak bisa… :D hehehe

Selamat mencoba dan semoga bermanfaat..

67   komentar

bang ko saya malah jeleq bang http://aguzcreative.blogspot.com/2013/03/template-blog-simple-clean-blue-seo.html?showComment=1363005355193#c2288260879160500905
Reply Delete
ngga ada gambarnya bang malah jelq http://aguzcreative.blogspot.com/
Reply Delete
coba hapus css komentar sebelumnya dahulu supaya css yang baru tampil
]]> saya kayak gni bg........]]>...]]> ( cman yg titik tiga t posisi.a pas di tngah2 kurung yg runcing ke runcing.a itu bg ),, gmna cara.a bg??? tlong di bantu
Delete
Reply Delete
yang di hapus css yang di atas bukan
Reply Delete
mkasud nya css dari template blog nya mas dulu... baru di pasang css yang baru ini
Reply Delete
bagus sekali gan. saya mau tanya, avatarnya itu ngebentuk bulatkan, yang di agan backgroun wrna putihnya tidak ada, ko di saya ada terlihat yah, jd jelek klo diliat. cara memperbaikinya gmana gan?? bisa dilihat di sini contohnya: http://panjinasrullah.blogspot.com/2012/12/shalat-musafir-bag-1.html
Reply Delete
mungkin ada coding css avatar laen x gan
Reply Delete
Hmm gtu ya gan. mungkin harus d hapus dulu ya css komentar yang bawaan template.
Reply Delete
aduh gan...punya saya kok sukses berat ya... hehehehe
ane tunggu kunbalnya gan sambil lihat hasil kotak komentarnya ane....

www.chibifansub.blogspot.com

Chibi-Kun
Reply Delete
Bang supaya ada fitur balas nya gimana . kok udh di copy paste script lalu yg muncul hapus doang gk ada balasnya
Reply Delete
bang cara hapus css komentar sebelumnya gimana . Mohon pencerahan saya mohon abang nge posting caranya
Reply Delete
makasih banyak bang,ditunggu kunjungan baliknya
Reply Delete
cara gedeiinnya gimnan T_T
Reply Delete
horeee berhasil http://chabullz-famz.blogspot.com/
Reply Delete
Sukses juga gan, makasih tutorialnya... :-bd ^:D
Reply Delete
Misi gan kok ini saya gk ada buat balas(reply)??? :(
Reply Delete
siippp..mantap tutorialnya mas...
Reply Delete
Anonim mengatakan... 15 Mei 2013 21.18
Komentar ini telah dihapus oleh administrator blog.
Delete
salam kenal semua nya..kunjungi balik yea blog q
http://diari-teknisi.blogspot.com/
Reply Delete
waduh, koq malah backround komentarnya yang berubah warna jadi abu abu..??
Reply Delete
terimakasih atas infonya
ditunggu kunjungn baliknya ke > www.darmapoetra69.blogspot.com
Reply Delete
kok masih sama yg default?
Reply Delete
mantap banget nehh..
ijin pake mas brooo
Reply Delete
Komentar ini telah dihapus oleh administrator blog.
Delete
Komentar ini telah dihapus oleh pengarang.
Delete
gk muat kolom komentarnya :'(
Reply Delete
Keren, sudah saya coba dan berhasil!! horee!!!

lihat mas : http://3denda.blogspot.com/
Reply Delete
maaf sebelumnya...

izin copas gan... thanks.
Reply Delete
thanks atas infonya gan ...
sukses selalu yah ...

oh iya follow yah http://projectfamily42.blogspot.com/
Reply Delete
Gan, Request Back To Top Punya agan ini dong :D
Ditunggu postingan selanjutnya gan.. Thanks Uϑªh comment
Delete
Reply Delete
gan...koko yang aku gak bisa nulis komen juga, mohon pncerahannnya????punyaaccount fb gan, minta dong///
Reply Delete
bang, kenapa yang keluar cuma kotak kosong doang ya? http://adhiwirashare.blogspot.com mohon bantuannya
Reply Delete
Terima kasih gan.... atas ilmunya sangat membantu banget.... \o/
Reply Delete
makasi brow dan salam kenal
Reply Delete
makasih gan....mampir diblog ku ya & salam kenal
Reply Delete
Kenapa ya koq ga bisa tampil bagus di blog saya? padahal sudah dicopy semua kode diatas, mohon bantuannya,
ini blog saya: http://www.sakura21saa.com/2012/12/sebuah-kisah-tentang-guruku-1.html
Reply Delete
bg,,,,,,, kq gk ada perubahan bg???
Reply Delete
Komentar ini telah dihapus oleh pengarang.
Delete
thanks bt temn2 sudah berkomentar mf tidak bs bls satu2...
Reply Delete
Komentar ini telah dihapus oleh administrator blog.
Delete
makasih gan :D follow saya akaragas.blogspot.com
Reply Delete
bagus blognya :)
Reply Delete
ngga jadi gan hasil nya ? gimna tuh
Reply Delete
gan, disini ada tombol replynya gan ..
kok tempat aye gak ada gan ..
( http://berbagiilmu20.blogspot.com/2013/12/perangkat-jaringan-komputer.html )
Reply Delete
keren gan, patut dicoba
btw templatenya di share donk gan
Reply Delete
Ko ga ada tombol balasnya sob..???
Reply Delete
berhasil gan cuman ga ada tombol Reply atau balasan gitu ya
Reply Delete
akan ku coba ......???
mudah2an berhsil
Reply Delete
keren bos.. tapi bagi para bloger yang kebingungan dan tidak menemukan code ]]>
langsung aja ctr+F ketikan comment lalu ganti crip yg ada dg html di blog ini, saya coba degan cara ini bisa topmarkotop, kunjungan baliknya di : www.sofyan-ats.tk
Reply Delete
izin meniru gan :D
Reply Delete
nice share gan,,,
view back dong...
baru bikin blog dan belajar nih,,,pengen banyak temen nih,,,
http://www.fhamouy22.esy.es
Reply Delete
kunjungi blog saya gan.. di www2.spin4d.org
tampilan coment nya kren gak? gua copas dari blog ini.
Reply Delete
mau ganti backgroun nya gimana boss.. biar beda dikit sama yg disini..
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

Poskan Komentar

Cancel Reply