CSS Komentar Reply Blogger Desain Facebook

Posted: 14 Jan 2012 05:04 PM PST

Membuat Thread Comment/Repy Comment Bergaya Facebook. Pagi ini posting sederhana, memenuhi permintaan teman-teman yang menginginkan komentar reply di blognya lebih sylish. Saya sendiri lebih suka menggunakan gaya facebook yang simple dengan warna soft yang tidak membuat mata lelah. (Tapi, bagi custom template mesti baca dulu artikel berikut: Aktifkan Thread Comments di Custom Template)

Berikut ini saya bagikan kodenya. Silahkan login ke Blogger, masuk ke Template, pilih edit HTML (jika ada pesan, hanya untuk tingkat lanjut, PD aja klik Lanjutkan!) dan jangan lupa centang Expand Template Widget.

Berikut ini adalah CSSnya:

.comments {
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
}
.comments .comments-content {
font-size: 13px;
}
.comments .comment .comment-actions a {
padding-top: 5px;padding-right: 5px;font: 11px/1.4 "lucida grande",tahoma,verdana,arial,sans-serif;padding-top: 3px;
}
.comments .comment .comment-actions a:hover {

}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: left;
}
.comments .comments-content .inline-thread {
padding: 5px 0 5px 5px;
}
.comments .comments-content .comment-thread {
margin: 0 0 -12px;
}
.comments .comments-content .comment-thread:empty {
display: none;
}
.comments .comments-content .comment-replies {
margin-top: -4px;
margin-left: 36px;
}
.comments .comments-content .comment {
margin-bottom:0px;
}
.comments .comments-content .comment:first-child {
padding-top:2px;
}
.comments .comments-content .comment:last-child {
border-bottom:0;
padding-bottom:0;
}
.comments .comments-content .comment-body {
position:relative;
}
.comments .comments-content .user {
font-style:normal;
font-weight:bold;
}
.comments .comments-content .icon.blog-author {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCe0DXhrpKwi4ZprijKierzT1SBirf3pXbudkF2TZeTjFK1esSxSmBI8-Um296kavyGKgicfgpXgaFxoGz__IebMT9mROgmuNX_0ecVr-OkKUuaqrNy6SeG_K57CBKGP-mhQql7juYad1_/s1600/ba4d2fdd496c0a318c2b4fc18874390b_extra_animated_favicon.gif") repeat scroll 0 0 transparent;display: inline-block;height: 15px;margin: 0 0 -4px 6px;width: 15px;
border: 1px solid #3B5998;}
.comments .comments-content .datetime {
margin-left:6px;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
margin:0 0 5px;
color: #555555;font-family: "lucida grande",tahoma,verdana,arial,sans-serif;font-size: 11px;
}
.comments .comments-content .comment-content {
text-align:justify;
}
.comments .comments-content .owner-actions {
position:absolute;
right:0;
top:0;
}
.comments .comments-replybox {
border: none;
height: 250px;
width: 100%;
}
.comments .comment-replybox-single {
margin-top: 5px;
margin-left: 48px;
}
.comments .comment-replybox-thread {
margin-top: 5px;
}
.comments .comments-content .loadmore a {
display: block;
padding: 10px 16px;
text-align: center;
}
.comments .thread-toggle {
cursor: pointer;
display: inline-block;
}
.comments .continue {
background: none repeat scroll 0 0 #EDEFF4;cursor: pointer;padding: 3px;text-align: right;
}
.comments .continue a {
font-weight: normal
}
.comments .comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
max-height: 0px;
opacity: 0;
overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
display: none;
}
.comments .thread-toggle {
background: none repeat scroll 0 0 #EDEFF4;isplay: inline-block;padding-bottom: 3px;width: 100%;
}
.comments .thread-toggle .thread-arrow {
display: inline-block;
height: 6px;
width: 7px;
overflow: visible;
margin: 0.3em;
padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
float: left;margin: 5px;max-height: 36px;overflow: hidden;position: absolute;width: 36px;z-index: 1000;
}
.comments .avatar-image-container img {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjw74b5X1FiFxgMJw0xD0DYrB3OTGlwUp7IrXQm2hmU4SfvP-scqI8lf9iUgXt05yxQcsUls8d89ovFN_PWP8eTy6-Db-tsMIPQrrZGeXslQLAIERjhaBNunIJxDgySID0aksz294QYu9k5/s1600/avatar.png");height: 35px;width: 35px;}
.comments {
position: relative;
}
.comment-block {
    position: relative;
background: none repeat scroll 0 0 #EDEFF4;
    padding: 5px;
padding-left:50px;
}

/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
    margin-left: 0;
}
}

Cari kode berikut https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCe0DXhrpKwi4ZprijKierzT1SBirf3pXbudkF2TZeTjFK1esSxSmBI8-Um296kavyGKgicfgpXgaFxoGz__IebMT9mROgmuNX_0ecVr-OkKUuaqrNy6SeG_K57CBKGP-mhQql7juYad1_/s1600/ba4d2fdd496c0a318c2b4fc18874390b_extra_animated_favicon.gif, kemudian ganti dengan alamat gambar Anda (itu gambar saya, kalau ndak diganti ntar eksis melulu deh...). Dan silahkan modifikasi CSS ini sesuai keinginan Anda, seperti lebar dan warnanya. Semoga bermanfaat ya....

Article Information:
Deskripsi: Menerapakan gaya facebook pada sistem komentar baru Blogger (Threaded Comments)

Modifikasi Tanda Author di Komentar Reply Blogger

Posted: 14 Jan 2012 06:18 AM PST

Merubah Gambar Pensil Author - Seperti kita tahu bawaha blogger baru saja meluncurkan fitur terbarunya, yakni: Blogger Thread Comments. Nah, pada sistem komentar itu secara otomatis di antara nama author dan tanggal akan ada lambang pensil, yang menandakan bahwa itu komentar si penulis.

Kita bise iseng atau bahkan membuat lebih cantik kolom komentar kita dengan mengganti icon pensil

tersebut menjadi gambar sesuai keinginan kita. Anda hanya perlu menambahkan css background pada css berikut. (Jangan lupa centang expand template widget)

.comments .comments-content .icon.blog-author {
background: url("http://alamatgambaranda.gif");
}

yang berwarna merah adalah tambahan kodenya. Silahkan ganti alamat gambar sesuai yang Anda inginkan.

Tambahan:
- Anda bisa menambahkan gambar bergerak berekstensi.gif sehingga lebih meanrik seperti di blog ini

. SAya menggunakan jasa pembuatan favicon generator seperti pada artikel: Membuat Favicon dengan Scroll Text. Save imagenya ke komputer, kemudian upload ulang karena hasil favicon di penyedia tersebut hanya bersifat sementara.
- Standartnya ukuran kotak author itu 18 x 18, sedangkan favicon berukuran 16 x 16. Silahkan rubah px-nya agar sesuai. Letaknya masih sama seperti CSS sebelumnya:

.comments .comments-content .icon.blog-author {
height: 16px; width: 16px;
}

Anda bisa memasang gambar yang lebih besar dengan menyesuaikan ukuran kotak author yang lebih besar lagi. Semoga bermanfaat. Sharing is Caring...

Article Information:
Modifikasi gambar pensil author sesuai keinginan Anda agar lebih menarik dan komentar author atau penulis lebih terlihat berbeda

KARANGLO BLOGSPOT.COM

Minggu, 15 Januari 2012

CSS Komentar Reply Blogger Desain Facebook - THEMASDOYOK.COM

CSS Komentar Reply Blogger Desain Facebook - THEMASDOYOK.COM

Tidak ada komentar:

Posting Komentar