BLOG RANGGA

 Banyak nya pengunjung dari sebuah blog adalah impian para pemilik web/blog , selain dengan menggunakan trik Seo dan artikel yang berbobot para blogger ada juga yang merubah tampilan blog nya dengan tampilan yang menarik , salah satu nya dengan cara merubah tampilan bawaan blog dengan tidak mengurangi kode HTML template dari  bawaan blog , contoh nya bisa dengan merubah kotak komentar bawaan pada blog seperti pada contoh gambar di samping  . sebelum nya saya juga telah berbagi tentang " Cara Pasang Widget Recent Coment Buat Blog " widget komentar tanpa merubah kode HTML pada template blog , pada postingan tampilan bawaan blog yang akan di ubah menjadi berbeda dan menarik.
Bagaimana kah "Cara Merubah Komentar Bawaan Blog Lebih Menarik" ?

• Login dengan account blog yang sudah terdaftar.

• Lalu pilih template pada dasbor blog.

• Edit HTML.

• Pilih lanjutkan.

• Centang dulu Expand Template Widget

• Cari kode`]]></b:skin> dengan menggunakan Ctrl + F pada keyboard

• Letakan kode di bawah ini tepat diatas kode ]]></b:skin> .

.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
  font-size: 13px;
  }
.comments .comment .comment-actions a {
  padding-top: 5px;padding-right: 5px;font: 11px/1.4 &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif;padding-top: 3px;
}
.comments .comment .comment-actions a:hover {
 
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: left;
}
.comments .comments-content .inline-thread {
  padding: 5px 0 5px 5px;
}
.comments .comments-content .comment-thread {
  margin: 0 0 -12px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: -4px;
  margin-left: 36px;
}
.comments .comments-content .comment {
  margin-bottom:0px;
}
.comments .comments-content .comment:first-child {
  padding-top:2px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}
.comments .comments-content .icon.blog-author {
    background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-p5Z8-VyXgaQ6pSYlDs95TLBGL6Xg8fLWVOoi8-fa7Uo_StPvb2AZa3Y7dOu1yCop3mxUf1Ylu9AVhvowj_GBpGNF0-tFS9tVjw9pCRjMTpQrPW_QEOEdDmUjwuuLktD37lY053agICRN/s1600/ba4d2fdd496c0a318c2b4fc18874390b_extra_animated_favicon.gif&quot;) repeat scroll 0 0 transparent;display: inline-block;height: 15px;margin: 0 0 -4px 6px;width: 15px;
border: 1px solid #3B5998;}
.comments .comments-content .datetime {
  margin-left:6px;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
  margin:0 0 5px;
color: #555555;font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif;font-size: 11px;
}
.comments .comments-content .comment-content {
  text-align:justify;
}
.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 {
  background: none repeat scroll 0 0 #EDEFF4;cursor: pointer;padding: 3px;text-align: right;
}
.comments .continue a {
 font-weight: normal
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  background: none repeat scroll 0 0 #EDEFF4;isplay: inline-block;padding-bottom: 3px;width: 100%;
}
.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(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
  float: left;margin: 5px;max-height: 36px;overflow: hidden;position: absolute;width: 36px;z-index: 1000;
}
.comments .avatar-image-container img {
  background-image: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwTpTfPiM48awIvmQu_HBjB5acDr_D_sqLOAE5ZrMF9UyB6tMbxfPwmhPQrnBrI0qY4xUUXhxoZV1iv1sH4_cmYx2xIQbPKrZdsUks97n2PnbOQjoHddHfwG4Z9Uq_dstS9tshTqoq6Fc6/s1600/avatar.png&quot;);height: 35px;width: 35px;}
.comments {
  position: relative;
}
.comment-block {
    position: relative;
background: none repeat scroll 0 0 #EDEFF4;
    padding: 5px;
padding-left:50px;
}

/* Responsive styles. */
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {
    margin-left: 0;
  }
}

• Simpan kode tersebut untuk melihat hasilnya pada kotak komentar pada blog .

Semoga berhasil dan jangan lupa komentar nya ya...!!

---

---