Buku Tamu

Wednesday, October 30, 2013

Mempercantik Kotak komentar di Blog

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.
 
you want to get a dollar ??  Click Here
 

Reactions:

0 comments:

Post a Comment