Tuesday, December 4, 2012

Cara Merubah Tampilan Kotak Komentar

Sebarkan Artikel ini di :
Bosen dengan tampilan kotak komentar di blog yang biasa aja? pengen menggantinya? Sobat bisa koq menggantinya dengan tampilan kotak komentar ya bisa di bilang baguslah,,hehe contohnya kayak kotak komentar yang ada di blog ini, OK.. berikut ini akan tak jelasin cara merubah tampilan Kotak Komentar pada blog agar lebih bagus donk.. hehe


Berikut cara menggantinya :
1. Log in ke blogger sobat
2. Pilih menu Template
3. Klik Edit HTML
4. Jangan lupa untuk mencentang Expand Template Widget
5. Cari kode ]]></b:skin> (gunakan CTRL + F untuk melakukan pencarian agar lebih cepat)
6. Kopas Kode di bawah ini :


.comments{display:block;background:#F2F2F2;padding:5px;} .comments .comment-block{position:relative;background:#FAFAFA;margin-left:45;padding:4px;text-align:left; border-bottom:1px solid #C5C5C5;box-shadow:1px 4px 1px #C7C7C7;-moz-box-shadow:1px 4px 1px #C7C7C7;-webkit-box-shadow:1px 4px 1px #C7C7C7;} .comments .comment-content{margin-top:0px;margin-right:0px;margin-bottom:0px;padding: 5px 10px 5px 5px;background:#eee;color:#333;text-decoration:none;font:normal normal 12px arial;font-style:italic;} .comments .avatar-image-container{ padding:1px; background:#FFFFFF; box-shadow:1px 2px 1px #555;-moz-box-shadow:1px 2px 1px #555;-webkit-box-shadow:1px 2px 1px #555; z-index:9999;} .comments .avatar-image-container :hover{padding:1px;background:#FFFFFF;box-shadow:1px 2px 1px #555;-moz-box-shadow:1px 2px 1px #555;-webkit-box-shadow:1px 2px 1px #555;opacity:0.6;z-index:9999;} .comments .comment-replies {display:block;position:relative;background:#E5E5E5;border-right:3px solid #fff;border-bottom:3px solid #fff;border-top:3px solid #ccc;border-left:3px solid #ccc;margin-left:55px; -moz-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;} .comments .comment-header {display:block;padding: 5px;background:#D8D8D8;border-bottom:1px solid #aaa;text-decoration:none;font:normal normal 12px Georgia,Serif} .comments .comments-content .icon.blog-author { background: url('https://lh3.googleusercontent.com/-8rCN71wXRuk/T1rm8TTPrTI/AAAAAAAABX0/54h4ZG_pDGE/h20/penulis.jpg') no-repeat;border: 1px solid #ddd;} .comments .comment-actions {display:block;padding: 5px;color:blue;background:#E5E5E5;border-top:1px solid #aaa;} .comments .comment-actions a{color:blue;text-decoration:none;font:normal normal 12px Georgia,Serif} .comments .comment-actions a:hover{color:#000;text-decoration:none;} .comments .comment-actions .item-control{display:none;}


7. Taruh Script tersebut tepat di atas kode ]]></b:skin>
8. Lalu jangan lupa Save template
9. Lihat dech hasilnya . . .hehe

Semoga bermanfaat Dan Semoga berhasil . . . .

2 comments:

  1. Thanks gan atas infonya, kunjungi dan follow back blog ane di: http://dzakishare.blogspot.com

    ReplyDelete