Cara Merubah Tampilan Kotak Komentar Blog ~ IDAM BASHORI

Jumat, 20 April 2012

Cara Merubah Tampilan Kotak Komentar Blog

4/20/2012 11:47:00 PM IDAM BASHORI 5 comments

Cara Merubah Tampilan Kotak Komentar Blog - Merasa bosen dengan tampilan kotak komentar blog yang biasa dan kaku, sobat bisa mengantinya dengan tampilan kotak komentar yang bagus dan elegan. Berikut saya jelaskan bagaimana Cara Merubah Tampilan Kotak Komentar Blog yang bagus dan elegan. Tapi sebenarnya cara ini sudah banyak blog-blog lain yang udah menulis artikel tentang ini dan saya pun dapat kodenya copas dari blog tetangga. Tapi menurut saya gpp lah untuk melengkapi refrensi tutorial blog yang saya bagun.

Berikut ini akan saya jelaskan bagaimana cara memasangnya :

1. Login ke Akun Blogger sobat.

2. Pilih Menu Template.

3. Klik Edit HTML.

4. Centang Expand Template Widget.

5. Cari kode seperti ini ]]></b:skin> (gunakkan Ctrl+F untuk pencarian yang lebih cepat).

6. Copas kode dibawah 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 kode tepat diatas ]]></b:skin>

8. Save atau Simpan Template

Nah, kurang lebihnya seperti itu. Jika kode ini tidak berfungsi sebaiknya sobat baca artikel ini Cara Memperbaiki Komentar. Sampai disini dulu sobat artikel yang saya tulis.... Semoga bermanfaat!!! kritik dan saran sobat bisa sampaikan di kotak komentar.

Baca Juga Artikel Di Bawah Ini!!

Tutorial Blog