Latest Movie :

Threaded Comment styles dengan CSS

Nah pasti kalian udah pada tau tentang Threaded Comment Blogger yang baru baru ini diluncurkan .

Tentunya ini memberi kesan decak kagun kepada pengguna blogger. dengan adanya Threaded Comment jadi komentar lebih agak keren dibanding yang standar dulu. Tapi tadi setelah nemu salah satu Blogger Prayag Verma dan menemukan arsip keren bin ajaib tentang Prayag Verma dan sudah saya terapkan pada blog ini, liat bagian bawah dan test dengan komentar kalian :


  • Masuk ke Blogger
  • Rancangan - Edit Html - Centang Expand Widget Template.
  • Kemudian letakkan kode berikut ini diatas kode ]]></b:skin>


.comment-content{white-space: pre-wrap;width: 95%;word-wrap: break-word;}
.comments .comments-content .comment {background: white;position: relative;border-radius: 0px 100px 120px;padding:5px;}
span.comment-actions, .continue {width:120px;background: #F1F1F1;border-radius: 20px 20px;text-align:center;font-weight:bold;text-decoration:none !important;}
span.comment-actions:hover, .continue:hover {background: #EBDDE2;text-decoration:none !important;}
.secondary-text{padding: 6px 12px 6px;text-decoration:none !important;}
.comments .comment .comment-actions a:hover{text-decoration:none !important;}
.comment-replies span div ol div li span {display:none !important;}
.comments .thread-toggle {background: #F3F3F3;border-radius: 20px;padding: 6px 12px 6px;font-weight: bold;}
.comments .thread-toggle:hover {background: #EBDDE2;}
.comments .comment-block {padding: 11px !important;margin-left: 48px;position: relative;left: 60px;background:#F1F1F1;border-radius: 10px;width: 400px;}
.comments .avatar-image-container img {overflow:visible !important;width:40px !important;}
.comments .avatar-image-container {width:40px !important;background: #F1F1F1;padding: 5px;border-radius: 100px;}
.avatar-image-container img,.avatar-image-container a img, .avatar-image-container {border-radius:20px;position:relative;height:40px;width:40px;background-clip:padding-box;}
.comments .avatar-image-container {max-height:50px !important;}
.comments .comments-content .comment-header {width: 450px;background:#F1F1F1;position: relative;left: -73px;}
.comments .comments-content .user {font-style: normal;font-weight: bold;position: relative;left: 80px;}
.comments .comments-content .datetime {position: absolute;left: 270px;}
.comment-thread ol div.continue {display:none !important;}

Save Template dan lihat hasilnya.

Sekian dulu ya tutorial Threaded Comment styles dengan CSS.

+ komentar + 1 komentar

21 Mei 2012 pukul 07.41

tes

Posting Komentar

Segera Laporkan apabila sobat menemukan Broken link (link rusak) atau ingin request dan bertanya, dengan meninggalkan pesan di bawah ini,dan Blog ini sudah DoFollow, namun tetap jaga kesopanan dengan tidak melakukan komentar spam yach... Trims. by UT2A-DOWN.NET

 
Support Themes: Chrome 9+ | Firfox 10+ | Resolution 1280x800.
Copyright © 2010-2012. UTta Tutorial - All Rights Reserved.
Created by Creating Website Published by aKaUTta'
Powered by Blogger Id.