Cute Comment Box

Ini khusus untuk designer template saja ya. Yang classic aku belum post, wokey?

Step by step : 1. Dashboard > Template > Edit HTML 2. Cari kode /* Comments 3. Ada garis-garis putus di bawahnya kan? Nah, dibawahnya lagi pasti ada kode-kode. Hapus semuanya sampai kode /* Widgets ya! Hingga :

[my blueworld blog]

Klik atau seret ke new tab untuk melihat ukuran sebenarnya ya. 4. Nah, kemudian di bawah kode /* Comments dan garis-garisnya, paste kode ini :

.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVWh_3wDrECp68XIjDGWrExDXe7V-TuQJ8ntzLaT21FuvcQCHhTNuHdNJmHn0AqeOzMl4nlAa118htz0eg6h4crkdjFeT75qZ-MoSIlMPFFBopO9R_0rT5VvSfhynuy-NGvvvrrnzRXuDM/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVWh_3wDrECp68XIjDGWrExDXe7V-TuQJ8ntzLaT21FuvcQCHhTNuHdNJmHn0AqeOzMl4nlAa118htz0eg6h4crkdjFeT75qZ-MoSIlMPFFBopO9R_0rT5VvSfhynuy-NGvvvrrnzRXuDM/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;
}

5. Pratinjau dulu ya. Nanti kalau hasilnya bagus, baru boleh di save. Takutnya nanti rusak. Oce?