Cara Modivikasi Css Threaded Comments Blogspot

Cara Modivikasi Css Threaded Comments Blogspot

Untuk mempercantik atau memper indah tampilan threaded comments yang merupakan fitur komentar baru dari blogger, saya akan sharing kode Css untuk threaded comments blogger tersebut. Sebelum anda menggunakan Css ini, tentunya harus mengaktifkan fitur Threaded Comments blog terlebih dahulu. bagaimana mengaktifkan threaded comments? nah silahkan anda baca dulu artikel "Cara Mengaktifkan Threaded Comments Pada Blogspot"

Threaded comments2
Jika anda sudah mengaktifkan fitur thread comments blogger tersebut, sekarang tinggal mempercantik tampilannya sebagai berikut :

1. Login ke blog anda > Design > Edit Html > Expand Widget Templates. (jangan lupa backup template dulu, untuk menjaga hal yang tidak diinginkan).

2. Cari kode seperti berikut :
<b:includable id="threaded_comment_css">
<style>
.comments {
.......
.......
.......
.......
</style>
</b:includable>

3. Silahkan anda ganti semua kode tersebut dengan kode di bawah ini :
<b:includable id='threaded_comment_css'>
<style>
.comments {
clear: both;
marfin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
}
.comments .comments-content {
font-size: 12px;
margin-bottom: 16px;
font-family: Verdana;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .comment .comment-actions a {
background:#1F9EE5;
cursor:pointer;
color:#ffffff;
padding:2px 3px; margin-right:10px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:9px sans-serif; border:1px solid #1F9EE5;
}
.comments .comment .comment-actions a:hover {
text-decoration: none; background:#5AB1E2; border:1px solid #5AB1E2;
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: none;
}
.comments .comments-content .inline-thread {
padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
display: none;
}
.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 40px; font-size:12px; background:#EBF5FE; border: 1px dotted #DDD;
}
.comments .comments-content .comment {
margin-bottom:16px;
padding-bottom:8px;
}
.comments .comments-content .comment:first-child {
padding-top:16px;
}
.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 {
width: 18px;
height: 18px;
display: inline-block;
margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
background: url(https://lh3.googleusercontent.com/-ctEx0DiHeAg/Tx18GCChNSI/AAAAAAAAAE8/T7WMHl5RfHs/h80/icon_clock.gif) no-repeat;
margin-left:6px;
padding-left:20px;
font-size:10px;
float:right;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
margin:0 0 8px;
}
.comments .comments-content .comment-content {
text-align:none;
}
.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 .commdnt-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 {
cursor: pointer;
}
.comments .continue a {
display: block;
padding: 0.5em;
font-weight: bold;
}
.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 {
display: inline-block;
}
.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(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
float: left;
width: 36px;
max-height: 36px;
overflow: hidden;
}
.comments .avatar-image-container img {
width: 36px;
}
.comments .comment-block {
margin-left: 48px;
position: relative;
}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}
</style>
</b:includable>

4. Langkah terahir yaitu simpan template dan lihat hasilnya.

Jika anda tidak menemukan kode <b:includable id="threaded_comment_css">, maka gunakan kode di bawah ini dan paste di atas kode ]]></b:skin> :
.comments {clear: both;margin-top: 10px;margin-bottom: 0px;line-height: 1em;}
.comments .comments-content {font-size: 12px;margin-bottom: 16px;font-family: Verdana;font-weight: normal;text-align:left;line-height: 1.4em;}
.comments .comment .comment-actions a {background:#1F9EE5;cursor:pointer;color:#ffffff;padding:2px 3px; margin-right:10px;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;font:9px sans-serif; border:1px solid#1F9EE5;}
.comments .comment .comment-actions a:hover {text-decoration: none;background:#5AB1E2;border:1px solid #5AB1E2;}
.comments .comments-content .comment-thread ol {list-style-type: none;padding: 0;text-align:none;}
.comments .comments-content .inline-thread {padding: 0.5em 1em;}
.comments .comments-content .comment-thread {margin: 8px 0px;}
.comments .comments-content .comment-thread:empty {display: none;}
.comments .comments-bontent .comment-replies {margin-top: 1em;margin-left: 40px;font-size:12px;background:#EBF5FE; border: 1px dotted #DDD;}
.comments .comments-content .comment {margin-bottom:16px;padding-bottom:8px;}
.comments .comments-content .comment:first-child {padding-top:16px;}
.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 {width: 18px;height: 18px;display: inline-block;margin: 0 0 -4px 6px;}
.comments .comments-content .datetime {background: url(https://lh3.googleusercontent.com/-ctEx0DiHeAg/Tx18GCChNSI/AAAAAAAAAE8/T7WMHl5RfHs/h80/icon_clock.gif) no-repeat;margin-left:6px; padding-left:20px; font-size:10px; float:right;}
.comments .comments-content .comment-header, .comments .comments-content .comment-content { margin:0 0 8px;}
.comments .comments-content .comment-content {text-align:none;}
.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 .commdnt-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 {cursor: pointer;}
.comments .continue a {display: block;padding: 0.5em;font-weight: bold;}
.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 {display: inline-block;}
.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,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;}
.comments .thread-collapsed .thread-arrow {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;}
.comments .avatar-image-container {float: left;width: 36px;max-height: 36px;overflow: hidden;}
.comments .avatar-image-container img {width: 36px;}
.comments .comment-block {margin-left: 48px;position: relative;}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {.comments .comments-content .comment-replies {margin-left: 0;}}


Selamat mencoba, dan semoga berhasil !

+ komentar + 9 komentar

17 Maret 2012 22.09

wah tips blog yang menarik bang, n dengan cara semacam ini bisa mempercantik blog kita nich :)

waduh ......... efek untuk loading blog gimana Neng, Pengen nyoba Soalnya. Thanks Before

18 Maret 2012 13.27

wiw mantapp nih.. banyak yg nyari.. thx infonyah..

18 Maret 2012 20.48

Nice info gann ,, ijin nyimak sob,,,


sekalian blogwalking

20 Maret 2012 21.09

wah dri dlu blog ane g bisa dikasih ini sob..knapa y..??

20 Maret 2012 21.16

wah bnyak amat ni...takut tambah lemot...

20 Maret 2012 22.27

Balasan untuk : semua
jika melalui tips di atas Anda masih gagal, mungkin Anda belum mengaktifkan fungsi tread comment pada blog, coba baca caranya disini.

7 September 2012 19.25

iya kak, makasih !

13 April 2014 15.04

mantap-mantap. :)

Posting Komentar

 
Copyright © 2011. TSC - All Rights Reserved

Distributed By Free Blogger Templates | Lyrics | Songs.pk | Download Ringtones | HD Wallpapers For Mobile

Proudly powered by Blogger