Apa gunanya desain tampilan Komentar Blogger seperti Facebook? Karena, Facebook adalah media sosial terpopuler di dunia. Dipastikan, blogger adalah facebooker juga, dan mayoritas pembaca juga memiliki akun Facebook.
Dengan menmbuat kotak Komentar Blogger seperti Facebook, maka blog --khususnya kolom komentar-- akan memenuhi kaidah User Experience (UX) sehingga blog kita User Friendly juga.
Ini penampakan Komentar Blogger seperti Facebook. Demonya ada di kotak komentar di bawah tiap posting blog demo template Start Liner ini.
1. Template > Edit HTML
2. Tambahkan kode CSS Kolom Komentar berikut ini di atas kode ]]></b:skin> atau </style>
/* CSS Komentar Blogspot - Tema Facebook */ .comments {font:normal 12px/14px "Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important;color:rgb(51,51,51);} .comments .comments-content a {color:#3B5998 !important;} .comments h2, .comments h3, .comments h4 { font-family:"Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important; font-size:16px;} .comments .comments-content .comment { margin:0 0 0; padding:10px 0px 10px 0px; border-top:1px solid #e9e9e9; border-left:none; } .comments .comment .comment-header, .comments .comment .comment-actions, .comments .comment .comment-actions a, .comments .comment .comment-thread.inline-thread, .comments .comment .continue {margin:0 0 0; padding:0 0 0; border:none; background:transparent;} .comments .comment .comment-header {margin-bottom:4px;} .comments .comment .comment-header .datetime a {color:#808080 !important;} .comments .comment .comment-actions a {padding-right:5px;} .comments .thread-toggle .thread-arrow {width:7px; height:7px; padding-right:4px} .comments .comment .avatar-image-container, .comments .comment .avatar-image-container img { width:50px; height:50px; max-width:none; max-height:none; border:none; padding:0; margin:0; outline:none; } .comments .comment .comment-block {margin:0 0 0 60px !important;} .comments .comment .comment-thread.inline-thread {margin:7px 0 0 22px;} .comments .comment .comment-thread.inline-thread ol {margin:7px 0 10px !important;} .comments .comment .comment-thread.inline-thread .comment { background-color:#EDEFF4; padding:5px 5px 0; margin:1px 0 0; border:none; border-bottom:1px solid #D2D9E7; } .comments .comment .comment-thread.inline-thread .comment .avatar-image-container, .comments .comment .comment-thread.inline-thread .comment .avatar-image-container img {width:32px;height:32px;} .comments .comment .comment-thread.inline-thread .comment .comment-block { margin:0 0 0 40px !important;} .comments .comment .comment-content {text-align:left;} .comments .comments-content .icon.blog-author { width:16px; height:16px; display:inline-block; vertical-align:top; background:transparent url('/favicon.ico') no-repeat 50% 50%;} .comments .comment .comment-thread.inline-thread .comment:last-child { border-left:2px solid #A8B2CE !important; }
3. Save Template!
Demikian Cara Membuat Komentar Blogger Seperti Facebook.*
No comments:
Post a Comment
No SPAM, Please....!