Quotes
Laki-laki yang memperlakukan kekasihnya dengan lembut pasti dibesarkan oleh wanita yang berkelas. Orang tua yang kasar akan membesarkan anak yang kasar kepada pasangannya. Berkenalan dengan orang tua kekasih bukanlah tanda akan melamar, tapi untuk mengenal kualitas pendidik anaknya.

.:: Mario Teguh ::.
close
» » » Mengedit CSS Pada Tampilan Threaded Comments Blogger
13 Nov 2013

Mengedit CSS Pada Tampilan Threaded Comments Blogger

Unknown
CSS, Komentar
13 Nov 2013
Belum ada komentar
Mengedit CSS Pada Tampilan Threaded Comments Blogger - Bagi pengguna Threaded Comments Blogger tentunya Anda tahu kalau tampilan pada komentar baru ini sedikit dibilang kurang menarik ditambah tidak ada thumbnail gambar pada profile yang berkomentar, khususnya untuk pengguna Template Default Blogger (TDB). Untuk itu saya akan mengedit CSS-nya agar tampil lebih menarik.

Mengedit CSS Pada Tampilan Threaded Comments Blogger

Sebenarnya sudah banyak user Blogger yang menggunakan template hasil modifikasi sendiri dan sudah mulai menjauhi TDB, tentunya TDB dinilai kurang variatif dalam segi penampilan walau sebenarnya TDB lebih ramah SEO dan pasti responsive. Namun disini saya akan membahas seputar komentar Threaded Comments Blogger pada TDB maupun template hasil modifikasi, berikut tampilan demonya.

Tampilan sebelum diedit:

blogger threaded comments
Screenshot & source by: Blog Kang Ismet

Tampilan sesudah diedit:

blogger threaded comments
Screenshot & source by: Blog Kang Ismet
Tentu lebih menarik dan mempunyai kesan menawan dan elegan bagi siapa saja yang melihatnya.

Cari kode berikut:


<b:includable id='threaded_comment_css'>     
  <style>     
.comments {     
  clear: both;     
  margin-top: 10px;     
  margin-bottom: 0px;     
  line-height: 1em;     
}     
.comments .comments-content {     
  font-size: 13px;     
  margin-bottom: 16px;     
}     
.comments .comment .comment-actions a {     
  padding-top: 5px;     
  padding-right: 5px;     
}     
.comments .comment .comment-actions a:hover {     
  text-decoration: underline;     
}     
.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 {     
  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 {     
  width: 18px;     
  height: 18px;     
  display: inline-block;     
  margin: 0 0 -4px 6px;     
}     
.comments .comments-content .datetime {     
  margin-left:6px;     
}     
.comments .comments-content .comment-header,     
.comments .comments-content .comment-content {     
  margin:0 0 8px;     
}     
.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 {     
  cursor: pointer;     
}     
.comments .continue a {     
  display: block;     
  padding: 0.5em;     
  font-weight: bold;     
}     
.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 {     
  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(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;     
}     
.comments .thread-collapsed .thread-arrow {     
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;     
}     
.comments .avatar-image-container {     
  float: left;     
  width: 36px;     
  max-height: 36px;     
  overflow: hidden;     
}     
.comments .avatar-image-container img {     
  width: 36px;     
}     
.comments .comment-block {     
  margin-left: 48px;     
  position: relative;     
}/* Responsive styles. */   
@media screen and (max-device-width: 480px) {     
  .comments .comments-content .comment-replies {     
    margin-left: 0;     
  }     
}     
  </style>     
</b:includable>

Ganti semua kodenya dengan kode berikut:


<b:includable id='threaded_comment_css'>
<style>
/*------------- START Blogger Threaded Comments  -------------*/
.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
font-size: 12px;
margin-bottom: 16px;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .comment .comment-actions a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .comment .comment-actions a:hover {
text-decoration: none; background:#fff; border:1px solid #5AB1E2;
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.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: 40px;   font-size:12px; background:#EBF5FE;
}
.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 {
  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 .user a {
color:#2D5E7B; font-size:14px; font-weight: bold;text-decoration: none;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
color: #999999;
float: right;
font-size: 11px;
text-decoration: none;
}
.comments .comments-content,
.comments .comments-content .comment-content {
  margin:0 0 8px;
}
.comment-header {background-color: #F4F4F4;
    border: thin solid #E6E6E6;
    margin-bottom: 5px;
    padding: 5px;
}
.comments .comments-content .comment-content {
  text-align:none;
}
.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;
}
.comments .continue a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.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 {
  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,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {background-image: url("http://img846.imageshack.us/img846/7357/unled1oww.jpg");background-position: center center;background-repeat: no-repeat;float: left;width: 36px;max-height: 36px;margin: 0;outline: 1px solid #FFFFFF;padding: 3px;vertical-align: middle;overflow: hidden;
border: 1px solid #DDDDDD;}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
}
/* Responsive styles. */
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {
    margin-left: 0;
  }
}
/*------------- End of Blogger Threaded Comments  -------------*/
</style>
</b:includable>

Terakhir, SAVE template.

Bila tampilan CSS tidak sesuai dengan tampilan Threaded Comments Blogger Anda, silahkan Anda bisa edit sesuai keinginan..

Semoga Bermanfaat..

BERI KOMENTAR | KHUSUS PENGGUNA TERDAFTAR
Silahkan beri komentar Anda dengan bijak dan sesuai dengan topik (untuk komentar OOT sebaiknya di Forum Ngopi).

Batal
Terima kasih telah berkomentar
Langganan: Posting Komentar (Atom)
 
notifikasi
Tutup