1. Masuk Akun blogger.
2. Klik Rancangan --> Edit HTML --> Klik Expand Template Widget. Oh iya, di back up dulu templatenya ya sob.
3. Cari kode ini <b:include data='post' name='comments'/>, nanti kamu akan menemukan 2, 3 atau 4 kode yang seperti <b:include data='post' name='comments'/>.
4. Setelah Mendapat kode <b:include data='post' name='comments'/> kamu hapus dan kemudian kamu ganti ke-4 kode tersebut dengan kode dibawah ini (ganti empat-empatnya ! ingat !)
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
/* div untuk image admin */
.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==);
}
/* div untuk coment loadmore*/
.comments .comments-content .loadmore a {
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
}
.comments .continue {
border-top: 2px solid #cccccc;
}
/* div untuk bagian tanggal komentar*/
.comments .comments-content .datetime a{
float: right;
color: #069;
}
.comment-block .comment-footer a:link, a:visited {
color:#069;
}
.comments .avatar-image-container {
}
.comments .continue a{
color:#069;
}
/* div untuk body dari satu komentar */
#comments-block li, .comments .comments-content .comment-thread ol li, .comments .comments-content .comment:last-child {
background:#fafafa url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOlWfNjKbZEtXcrGyCKvIHP_5Ws65EF7fonEY_Jkzlz3PawrX6FHMa5ZA61QkK4uTxuR68-mJV9MtaZwLBwhRq0APzy45qROJ4u_9FhZgsn0GZO9qPtSGz0F6ha2sZD-3Uso8QPuszXpqn/s0/header-shadow.png) top repeat-x;margin:10px auto 0;
margin:10px 0;
padding:5px 10px;
border-top:1px solid #cccccc;
border-left:3px solid #069;
border-bottom:1px solid #cccccc;
border-right:1px solid #cccccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow: 0 1px 0 #FFF inset, 0 1px 0 #FFF;
-moz-box-shadow: 0 1px 0 #FFF inset, 0 1px 0 #FFF;
-webkit-box-shadow: 0 1px 0 #FFF inset, 0 1px 0 #FFF;
}
/* div untuk tombol balas dan hapus */
.comment-actions a {
background: #c1c1c1;
background: -moz-linear-gradient(top, #c1c1c1 0%, #dedede 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c1c1c1), color-stop(100%,#dedede)); background: -webkit-linear-gradient(top, #c1c1c1 0%,#dedede 100%); background: -o-linear-gradient(top, #c1c1c1 0%,#dedede 100%); background: -ms-linear-gradient(top, #c1c1c1 0%,#dedede 100%); background: linear-gradient(top, #c1c1c1 0%,#dedede 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c1c1c1', endColorstr='#dedede',GradientType=0 ); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; padding:2px 5px !important; margin-right:10px; border:1px solid #c1c1c1; color:#666666; -webkit-box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); -moz-box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); box-shadow: 2px 1px 1px -1px rgba(0, 0, 0, 0.1); }
.comment-actions a:hover { background: #c9c9c9; background: -moz-linear-gradient(top, #c9c9c9 0%, #dedede 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c9c9c9), color-stop(100%,#dedede)); background: -webkit-linear-gradient(top, #c9c9c9 0%,#dedede 100%); background: -o-linear-gradient(top, #c9c9c9 0%,#dedede 100%); background: -ms-linear-gradient(top, #c9c9c9 0%,#dedede 100%); background: linear-gradient(top, #c9c9c9 0%,#dedede 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9c9c9', endColorstr='#dedede',GradientType=0 ); text-decoration:none !important; }
/* div untuk wadah avatar */
.avatar-image-container {
border: 1px soli #ccc;
}
5. Simpan Template.
ini nich yang aku cari,thank infonya sob
ReplyDeletesip sob sama2 :)
Deletesip bang...tampilannya bagus bang... makasih inponya bang
ReplyDeleteoke bang sama2 :)
Deletewah boleh juga nih....simpen dlu ah...absen siang sob...
ReplyDeletesip sob, sama2 :D
DeleteIni dia yang saya butuhkan, dari dulu nyari tutorial ini..hehe, makasih ya.
ReplyDeleteoke neng sama2 senang bisa membantu :D
Deletetrik ini bisa bikin loading blog lemot gk sob?
ReplyDeleteengga kok sob, buktinya blog saya ringan saja tuh :)
Deletedi saya ga fungsi? mohon bimbingannya ^_^
ReplyDeletega berfungsi bagaimana sob ? mungkin ada yang kurang pas copy kodenya
DeleteTerima kasih sahabat atas berbagi ilmunya ini.
ReplyDeleteIjin follow 78 agar bisa belajar lebih banyak lagi disini sahabat.
sippp sob sama2 :)
Deletebermanfaat bgt nih sob tutorialnya, ijin aku save ya...
ReplyDeletesip sob sama2 :)
DeleteKebtulan udah pasang nih bang hhee
ReplyDeletekeep posting , salam dan suport dari duniasharing
sipp sob, sama2 :D
Deletesaya juga udah coba..
ReplyDeleteemanf keren banget tampilan reply comment nya ..
tq ya sob
sip sob sama2 :D
Delete