Cara Membuat Komentar Blog Seperti Facebook
 |
| Cara Membuat Komentar Blog Seperti Facebook |
TENLIBRARY - Cara Membuat Komentar Blog Seperti Facebook - Banyak sekali cara untuk memperindah atau mempercantik tampilan suatu blog. Dan kali ini, saya akan membagikan sebuah tutorial yang dapat mempercantik tampilan blog kamu yaitu cara membuat komentar blog seperti facebook. Demonya dapat kamu lihat pada gambar diatas, atau kamu juga dapat melihat di kolom komentar blog ini.
IKUTI LANGKAH-LANGKAH BERIKUT
- Login ke akun blogger kamu.
- Pilih menu dropdown, kemudian pilih menu Template.
- Pilih Edit HTML.
- Klik pada bagian kotak Edit HTML, kemudian tekan Ctrl+F pada keyboard. Setelah itu cari kode ]]><b:skin>.
- Kemudian copy/pastekan kode dibawah ini tepat diatas kode ]]><b:skin>.
/* CSS Komentar Blogspot - Tema Facebook
*/
.comments {
font:normal 11px/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;
}
*/
.comments {
font:normal 11px/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;
}
- Kemudian klik Simpan. Selesai.
Semoga bermanfaat ~
Kamu sedang membaca artikel tentang Cara Membuat Komentar Blog Seperti Facebook dan kamu bisa menemukan artikel Cara Membuat Komentar Blog Seperti Facebook ini dengan url http://tenlibrary.blogspot.com/2013/07/cara-membuat-komentar-blog-seperti.html. Kamu boleh menyebarluaskan atau mengcopy artikel Cara Membuat Komentar Blog Seperti Facebook ini jika memang bermanfaat bagi kamu,namun jangan lupa untuk mencantumkan link sumbernya. Terimakasih.
Jika kamu menyukai Artikel di blog ini, Silahkan
klik disini untuk berlangganan gratis via email, dengan begitu kamu akan mendapat kiriman artikel setiap ada artikel yang terbit di TENLIBRARY
kok kode ]]> di blog ane gk ada gan ? :( solusinya gan ?
BalasHapus