Mengedit Comment Box Jadi Lebih Bagus #3

Hallooooo, PilaDers n' PilaFers! selamat berlibur buat kalian, yak! hari ini lagi boring. sakit nih kaki kemaren habis jatuh dari tangga. Daripada diem melulu, ya ngepost tuto aja, deh! hehehe ... Mengedit Comment Box Jadi Lebih Bagus #2 adalah yang akan kita bahas.




  • Login to blogger >> template >> edit html
  • CTRL+F dan cari kode
/*Posts

  • Pasti dibawah kode itu ada garis putus-putusnya, kan? Nah! dibawah kode itu, pastekan kode komenbox nya di bawah garis putus-putus
  • Atau lihat gambar
  • Save
Eh iya. kalo itu untuk denim template. Kalau simple, bisa dilihat di step kedua
SIMPLE TMPLT

  • Edit Html
  • CTRL+F dan cari kode
/*Comments

  • Disitu pasti juga ada garis putus-putusnya. Nah, dibawah kode /*comments dan garis putus-putus, paste kan kode comment box nya. 
  • Save!
This is code here
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}
h4#comment-post-message {
background: #CEE3F6;
border: 3px solid #A9D0F5;
color: #A9D0F5;
font-size: 11px;
font-family: Happy Monkey;
}
.comments h3 {
background: url(http://4.bp.blogspot.com/-KazfuvyFk0o/VOmIjhGtIuI/AAAAAAAACQM/iXFKI3VxLr8/s1600/polkadlblu.gif);
line-height:2em;
text-transform:uppercase;
color:#A9D0F5;
font-weight:normal;
font-family:Short Stack;
margin:0 0 20px 0;
font-size:16px;
padding:0 0 0 0;
text-align:center;
}
h4#comment-post-message{
background: #CEE3F6;
border: 3px solid #A9D0F5;
color: #A9D0F5;
font-size: 11px;
font-family: Happy Monkey;
}
.comments{
clear:both;
font-family:Short Stack;
margin-top:10px;
margin-bottom:0
}
.comments .comments-content{
font-size:13px;
font-family:Short Stack;
margin-bottom:8px
}
.comments .comment .comment-actions a{
background:#A9D0F5;
color:#fff;
font-size:10px;
font-family:Short Stack;
line-height:15px;
padding:8px 0px;
-moz-border-radius:5px;
border-radius:5px;
text-align:center;
font-weight:bold;
position:relative;
margin-right:10px;
border:1px solid #FFFFFF;
padding:10px 15px
}
.comments .comment .comment-actions a:hover{
text-decoration:none;
background:#CEE3F6;
border:1px dashed #FFFFFF;
}
.comments .comments-content .comment-thread ol{
text-align:left;
margin:13px 0;
padding:0
}
.comments .comments-content .comment-replies{
margin-top:8px;
margin-left:70px
}
.comments .thread-toggle {
margin-bottom:10px;
}
.comments .comment-thread.inline-thread .comment{
margin:0px 0px 5px 38%;
}
.comments .comment-thread.inline-thread .comment:last-child{
margin:0px 0px 5px 38%
}
.comment .comment-thread.inline-thread .comment:nth-child(6) {
margin:0px 0px 5px 38%;
}
.comment .comment-thread.inline-thread .comment:nth-child(5) {
margin:0px 0px 5px 30%;
}
.comment .comment-thread.inline-thread .comment:nth-child(4) {
margin:0px 0px 5px 24%;
}
.comment .comment-thread.inline-thread .comment:nth-child(3) {
margin:0px 0px 5px 16%;
}
.comment .comment-thread.inline-thread .comment:nth-child(2) {
margin:0px 0px 5px 8%;
}
.comment .comment-thread.inline-thread .comment:nth-child(1) {
margin:0px 0px 5px 0;
}
.comments .comments-content .comment{
margin-bottom:6px;
padding:0
}
.comments .comments-content .comment:first-child{
padding:0;
margin:0
}
.comments .comments-content .comment:last-child{
padding:0;
margin:0
}
.comments .comments-content .user{
font-weight:bold;
margin:0
}
.comments .comments-content .icon.blog-author{
position:absolute;
top:2px;
right:2px;
margin:0;
background-image: url("http://i4.photobucket.com/albums/y135/dani_leal_/minigifs/86.gif");
width:47px;
height:23px;
}
.datetime{ background:#fff; padding:8px; float:right; border-radius:30px; font:10px; margin-top:0px; box-shadow:0px 0px 4px 4px #CEE3F6;}
.comments .comments-content .comment-header{
margin:0 0 .60em;
padding: 5px 5px 5px 5px;
background: url(http://i.imgur.com/tDtge.png) repeat top left;
border-radius: 25px;
box-shadow:0px 0px 4px 4px #CEE3F6;
border:2px dashed #FFFFFF;
text-align:center;
}
.comments .comments-content .comment-content{
text-align:left;
margin:0;
font-family:Short Stack;
font-size:12px;
background:#CEE3F6; padding:13px; border-radius:10px; color:#666; transition: all 0.2s ease-out;
}
.comments .comments-content .comment-content:hover{
background:#FFFFFF;
transition: all 0.2s ease-out;
box-shadow:0px 0px 2px 4px #FFF;
}
.comments .comments-content .owner-actions{
border:1px solid #ccc;
}
.comments .comments-replybox{
height:250px;
max-width:100%
}
.comments .comment-replybox-single{
padding:0;
margin:8px 0;
margin-left:70px
}
.comments .comment-replybox-thread{
margin:8px 0 0 0;
padding:0;
}
.comments .thread-toggle{
cursor:pointer;
padding:0;
margin:0;
display:block
}
.comments .continue a{
background:#A9D0F5;
color:#444;
border-radius:6px;
font-size:10px;
line-height:15px;
padding:8px 0px;
text-align:center;
font-weight:bold;
position:relative;
margin:0;
padding:5px 10px;
display:block;
}
.comments .continue a:hover{
background:#CEE3F6;
}
.comments .continue a:active{
top:2px;left:2px
}
.comments .comments-content .loadmore{
border:1px solid #e8e8e8;
cursor:pointer;
height:30px;
max-height:30px;
margin-top:8px;
}
.comments .comments-content .loadmore.loaded{
max-height:30px;
opacity:.3;
overflow:hidden
}
.comments .comments-content .loadmore a{
padding:0;
display:block;
line-height:30px;
text-align:center
}
.comments .comments-content .loadmore a:hover{
border:1px solid #d9d9d9;
}
.comments .thread-chrome.thread-collapsed{
display:none
}
.comments .thread-toggle .thread-arrow{
display:inline-block;
height:6px;
width:7px;
overflow:visible;
margin:0.3em;
padding-right:4px
}
.comments .thread-toggle{
display:inline-block
}
.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 {
background:#A9D0F5;
border-radius:50%;
float:left;
padding:5px;
}
.avatar-image-container img{ -webkit-transition: all 0.8s ease-out; -moz-transition: all 0.8s ease-out; transition: all 0.8s ease-out; border-radius:50%;}
.avatar-image-container img:hover{ border-radius:50%; transform: rotate(360deg) ; -webkit-transform: rotate(360deg) ; -moz-transform: rotate(360deg) ; -o-transform: rotate(360deg) ; -ms-transform: rotate(360deg) ;}
.comments .comment-block{
position:relative;
background:url(http://4.bp.blogspot.com/-KazfuvyFk0o/VOmIjhGtIuI/AAAAAAAACQM/iXFKI3VxLr8/s1600/polkadlblu.gif);
padding:20px;
margin-left:70px;
border:1px #A9D0F5;
border-radius: 20px;
border-style:dashed;
transition: all 0.2s ease-out;
}
.comments .comment-block:hover{ transition: all 0.2s ease-out;}
.comments .comment-block:before {
content:"";
width:0px;
height:0px;
position:absolute;
right:100%;
top:15px;
border-width:10px;
border-style:solid;
border-color:transparent #A9D0F5 transparent transparent;
display:block;
}
Reposted by : Via Blue World


1 comment:

1 ) Berikan komentar yang baik

2 ) Jangan pernah berkata kasar, jorok, dan menyakiti perasaan orang lain

3 ) Jangan sampai bikin gaduh di kotak comment

4 ) Blog ini secara otomatis memilah mana yang komen spam (termasuk yang menawarkan produk-produk seperti produk diet, dll). Jadi, hati-hati komennya

Related Posts Plugin for WordPress, Blogger...