Cara Merubah Tampilan Komentar Pada Blog Agar Terlihat Keren

Hmmm… Hampir pusing nih mikiran artikel apa lagi yang saya akan buat kali ini, karena sudah hampir 5 hari ana gak sempat posting-posting nih hufft, bisa-bisa pengunjung setia blog Juned al~Bughisy pada kabur nih gara-gara tidak ada artikel segar untuk dibaca lagi.

Tampilan komentar yang keren

Jadi pada kesempatan kali ini saya akan berusaha untuk membuat sebuah artikel yang kiranya dapat bermanfaat bagi sobat, terutama sobat blogger.

Pada postingan kali ini saya memberi judul Cara Merubah Tampilan Komentar Pada Blog Agar Terlihat Keren. Jadi yang saya akan share ke sobat ialah tentang bagaimana untuk merubah tampilan komentar pada blog sobat agar berbeda dengan tampilan standart yang diberikan oleh pihak blogger maupun penyedia template yang sobat gunakan saat ini.

Untuk mengubah tampilan komentar pada blog sobat ikuti langkah-langkah di bawah ini.

1. Login ke blogger atau klik disini»
2. Pilih Template » Edit Html » Lanjutkan.
3. Cari code di bawah ini. Tekan ctrl+F untuk mempermudah pencarian.

<b:includable id='threaded_comment_css'>

4. Dan di bawah code di atas ada code di bawah ini.

<style>
.comments {
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
}
.comments .comments-content {
font-size: 13px;
margin-bottom: 16px;
overflow: auto;
}
bla bla bla bla bla... panjang ke bawah
sampai kode..

</style>

5. Hapus code di atas yaitu code yang berada di bawah code <b:includable id='threaded_comment_css'>  kemudian ganti dengan code di bawah ini.

.comments {
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
}
.comments .comments-content {
font-size: 13px;
margin-bottom: 16px;
overflow: auto;
}
.comments .comment .comment-actions a {
float: right;
display: inline-block;
margin: 5px 0 0 5px;
padding: 1px 6px;
border: 1px solid;
color: black !important;
text-align: center;
text-decoration: none;
background: #DD0;
font: 11px/18px sans-serif;
border-color: transparent black black black;
}
.item-control {
display: inline;
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: left;
}
.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: 36px;
}
.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 {
padding-bottom: 0;
}
.comments .comments-content .comment-body {
position: relative;
}
.comments .comments-content .user {
font-size: 14px;
color: #666666 !important;
text-decoration: none;
}
/* Style Komentar Author */
.comments .comments-content .icon.blog-author {
display: inline-block;
margin: 0 0 -4px 6px;
position: absolute;
top: 0;
right: 0;
background-color: #39A;
width: 100%;
height: 100%;
z-index: -1;
}
/* AKhir style Komentar Author */
.comments .comments-content .datetime {
font-size: 10px;
color: #999;
text-decoration: none;
}
.comments .comments-content .datetime a {
float: right;
}
.comments .comments-content .comment-header {
margin: 0 0 8px;
border: thin solid #E6E6E6;
background-color: #dff0fa;
background-color: rgba(223, 240, 250,0.3);
padding: 5px;
}
.comments .comments-content .comment-content {
margin: 0 0 8px;
padding: 5px;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
background-color: rgba(244, 244, 244,0.5);
line-height: 21px;
}
.comments .comments-content .comment-content {
text-align: justify;
line-height: 1.5;
}
.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 .comment-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;
border: 1px solid #666;
color: #424242 !important;
text-align: center;
text-decoration: none;
display: inline-block;
font: normal 11px/18px sans-serif;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: rgb(196,191,39);
background: -webkit-linear-gradient(top, rgba(196,191,39,1) 0%, rgba(237,233,128,1) 100%);
background: -moz-linear-gradient(top, rgba(196,191,39,1) 0%, rgba(237,233,128,1) 100%);
background: -o-linear-gradient(top, rgba(196,191,39,1) 0%, rgba(237,233,128,1) 100%);
background: -ms-linear-gradient(top, rgba(196,191,39,1) 0%, rgba(237,233,128,1) 100%);
background: linear-gradient(top, rgba(196,191,39,1) 0%, rgba(237,233,128,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c4bf27', endColorstr='#ede980',GradientType=0 );
}
.comments .continue a {
display: block;
color: black;
padding: 2px 5px;
}
.comments .continue a:hover {
text-decoration: none !important;
background: #ccc;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));
background: -webkit-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);
background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);
background: -o-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);
background: -ms-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);
background: linear-gradient(center top,#eeeeee 20%,#cccccc 100%);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.comments .comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
max-height: 0px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
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,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url("data: image/png;
base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
float: left;
width: 36px;
max-height: 36px;
overflow: hidden;
padding: 0;
margin-left: 10px;
margin-top: 2px;
}
.comments .avatar-image-container img {
width: 36px;
}
img[src$="http://img1.blogblog.com/img/anon36.png"] {
display: none;
}
.comments .comment-block {
margin-left: 48px;
position: relative;
padding: 5px;
background: #68F;
border: 1px solid #E4E4E4;
z-index: 99;
}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}

6. Dan yang terakhir simpan template. Kemudian lihat hasilnya.

Bagaimana sobat, keren kan tutorial kali ini?? Semoga blog sobat terlihat semakin keren dan gagah dengan tampilan komentar yang keren setelah menggunakan tutorial di atas hehehe….

Selamat mencoba dan Happy Blogging…

20 komentar:

  1. wah keren nih kayaknya patut dicoba

    BalasHapus
  2. Coba dulu ahhh. . . . Semoga cocok sama template gue !!

    BalasHapus
  3. Silahkan di coba gan semoga bermanfaat..... :)

    BalasHapus
  4. @gilang: Terima kasih gan jangan lupa di share yach... :)

    BalasHapus
  5. izin coba gan..
    nice post

    mampir juga ke blog saya

    BalasHapus
  6. wah kayaknya bagus nih, ijin praktek bos :)

    BalasHapus
  7. izin coba gan... ditunggu kunbalnya :d

    BalasHapus
  8. Wah keren gan tampilannya...
    salam kenal, ayo tukar link dengan saya gan

    http://blog-medianet.blogspot.com/2014/09/ayo-tukar-link-gratis-bersama-masrolicom.html

    BalasHapus
    Balasan
    1. Oke gan silahkan pasang dulu link saya di blog agan

      Hapus
  9. :) :) :) :) :) :)
    berkunjung di blog saya juga ya: ariesz-smkn5bjm.blogspot.com

    BalasHapus
Catatan:
Untuk menyisipkan video, gunakan tag <i rel="youtube">URL YOUTUBE ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Untuk menyisipkan kode panjang, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!"

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah ini.

Konversi Kode di Sini!OOT

 
Design by Juned al~Bughisy Copyright © 2012 ~ 2013 Powered by Blogger
Back to Top