28 Juli 2013

Cara Mudah Mengubah Dan Modifikasi Kotak Komentar Blog

CARA MEMASANG MENU NAVIGASI KEREN PADA BLOG

1. Login ke blog Anda
2. Pilih Template lalu Click Edit Html(lebih baik copas html agan dinotepad kalo trjadi kesalahan bisa utk referensi)
3. Cari kode ]]></b:skin>
4. Copy & paste code CSS dibawah ini tepat diatas kode tadi :

#menunavigasi {float:left; background:#252525; width:auto; margin:0 auto; padding:0 auto;-moz-border-radius: 10px; border-radius:4px}
#menubar {width:100%}
#menubar,#menubar ul {list-style:none; margin:0; padding-left:10px}
#menubar a {display:block; text-decoration:none; font-size:12px; font-weight:Bold; color:#eee; border-right:1px solid #666; padding:8px 12px}
#menubar li {float:left; width:auto}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a {color:#fff}

Keterangan :
#252525 : Warna background menu navigasi
#eee : Warna font atau tulisan menu navigasi
#666 : Warna border samping kanan tulisan
#fff : Warna font atau tulisan saat di sorot kursor

Warna di atas bisa agan ganti sesuai warna kesukaan agan. Untuk melihat kode-kode warnanya silahkan lihat Daftar Kode Warna HTML

5. Kemudian cari kode <div id='content-wrapper'> dengan tekan ctrl+f
6. Copy-paste code berikut ini tepat dibawahnya :

<div id='menunavigasi'>
<ul id='menubar'>
<li><a href='http://liberty-aries.blogspot.com/search/label/Kesehatan'>Kesehatan</a></li>
<li><a href='#'>Mata</a></li>
<li><a href='#'>Jantung</a></li>
<li><a href='#'>Gigi</a></li>
<li><a href='#'>Psikologi+Konseling</a></li>
</ul>
<div style='clear:both;'/>
</div>
<div class='clear'/>
Keterangan:
- Ganti tulisan http://liberty-aries.blogspot.com/search/label/Kesehatan dengan alamat link milik agan yang ingin dimasukkan dalam menu.
- Ganti tulisan Mata,Jantung,Gigi dll dengan nama alamat link yang ingin dimasukkan.


7. Pratinjau, jika tidak ada kesalahan silahkan simpan template Anda.



Update to update, okey teman yang dibawah ini akan saya bahas mengenai komenar-komentar yang membuat banyak pengunjung merasa lambat bahwa komentarnya lama kali belum dibalas-balas. Untuk itu perlu saya buat kotak komentar serupa dengan Facebook agar dapat tersambung langsung dengan yang punya blog, dengan begitu juragan blog segera tahu bahwa blognya ada komentar. Maka dengan begitu komentar akan segera terjawab.



Siap, tak perlu panjang lebar smak pembahasan dibawah ini:

1. Silakan login dulu Ke Blogger.com
2. Pilih Template, lalu Klik Edit HTML yah..
3. Klik tanda panah hitam pada bagian <b:skin> ... ]]></b:skin>
4. Copy script yang ada dibawah artikel ini
5. Letakkan script tersebut diatas kode ]]></b:skin>
6. Simpan/Save Template, dan cek segera.

Jika ada perbedaan, berarti ada beberapa kode yang sama dari template bawaan anda sebelumnya.

.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;http://4.bp.blogspot.com/-fmympowbbb4/TxFQ-EpcrtI/AAAAAAAAEKg/85mQ6vkxZmY/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;http://3.bp.blogspot.com/-6lpI_S1LhEs/Tw-Q6eQ5oYI/AAAAAAAAEIo/CEvVB8ZwHO4/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;
  }
}


Liberty Aries

Tidak ada komentar:

Posting Komentar