Tampilkan posting dengan label Css. Tampilkan semua posting
Tampilkan posting dengan label Css. Tampilkan semua posting

Membuat Footer Kolom Pada Template Blogger

Membuat Footer Kolom Pada Template. Menambahkan 4 kolom footer spesial untuk pengguna blogger template Bamz Style. Berhubung ada beberapa permintaan dari para pengguna template yang saya desain yang ingin menambahkan footer kolom (footer column), kali ini saya akan share cara membuat atau menambahkan 4 kolom pada template blogger tersebut.
Membuat Footer Kolom Pada Template Blogger

Cara Membuat atau menambah Footer kolom pada Template

  • Lahkah pertama login ke blog anda > Design > Edit HTML dan jangan lupa back up terlebih dahulu template yang anda gunakan
  • Setelah itu cari kode ]]></b:skin> dan paste kode Css berikut tepat di atas kode ]]></b:skin>

/*----- Colom Footer Bamz-----*/
#bamzlower { margin:auto; padding: 10px 0px 0px 0px; width: 100%; border-top:1px dotted;}
#bamzlower-wrapper { margin:auto;width: 860px; border:0; }
#bamzlowerbar-wrapper { float: left; margin: 0px 5px auto; padding-bottom: 5px; width: 23%;color:#333; font: 12px verdana,arial,Sans-erif;line-height: 1.6em; word-wrap: break-word; overflow: hidden; }
.bamzlowerbar {margin: 0; padding: 0;}
.bamzlowerbar .widget {margin: 0; padding: 10px 0px 0px 0px;}
.bamzlowerbar h2 { margin: 0px 0px 10px 0px;color:#333; text-transform:uppercase; font: bold 12px Arial, Tahoma, Verdana;
}
.bamzlowerbar ul { color:#333; margin: 0 auto; padding: 0; list-style-type: none; }
.bamzlowerbar li { display:block; color:#333; line-height: 1.6em; margin-left: 0 !important; padding: 4px;list-style-type: none; }
.bamzlowerbar li a { text-decoration:none; color: #333; }
.bamzlowerbar li a:hover { text-decoration:none; color:#000;}
.bamzlowerbar li:hover { display:block;}
/*----- End Colom Footer Bamz-----*/
  • Masih pada halaman Edit HTML, cari kode <div id='credits'>. Kalau sudah ketemu silahkan anda paste kode berikut tepat di atas kode <div id='credits'>
<!-- Kolom Footer By BamZ -->

<div id='bamzlower'>
<div id='bamzlower-wrapper'>
<div id='bamzlowerbar-wrapper'>
<b:section class='bamzlowerbar' id='bamzlowerbar1' preferred='yes'>
</b:section>
</div>
<div id='bamzlowerbar-wrapper'>
<b:section class='bamzlowerbar' id='bamzlowerbar2' preferred='yes'>
</b:section>
</div>
<div id='bamzlowerbar-wrapper'>
<b:section class='bamzlowerbar' id='bamzlowerbar3' preferred='yes'>
</b:section>
</div>
<div id='bamzlowerbar-wrapper'>
<b:section class='bamzlowerbar' id='bamzlowerbar4' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>
<!-- end Kolom footer Bawah -->
Nah sekarang simpan dan lihat hasilnya, atau anda preview dulu sebelum di simpan :D.

Bisakah cara membuat kolom ini digunakan untuk template lain?

Cara membuat footer kolom ini sebenarnya bisa di gunakan untuk semua template, cuma mungkin cara penempatannya yang berbeda karena setiap template memiliki elemen yang berbeda. Kalau anda ingin mencobanya, silahkan saja. Dan cara paling gampangnya adalah paste kode HTML (kode ke-2) di atas kode </body>.

Hasil yang anda buat ini nantinya akan sama seperti kolom footer pada blog ini. Kalau anda ingin menjadikannya 3 atau mungkin 2 kolom tentu saja bisa. Bagaimana cara membuat footer tersebut menjadi 3 kolom?

Cara merubah footer menjadi 3 kolom

Untuk menjadikannya 3 kolom anda hanya tinggal mengubah lebar kolomnya menjadi 32%. Lihat kodenya di bawah ini
# bamzlowerbar-wrapper { background:#333333; float: left; margin: 0px 5px auto; padding-bottom: 5px; width: 23%;color:#ddd; font: 12px verdana,arial,Sans-erif;line-height: 1.6em; word-wrap: break-word; overflow: hidden; }
Selanjutnya hapus kode

<div id='bamzlowerbar-wrapper'>
<b:section class='bamzlowerbar' id='bamzlowerbar4' preferred='yes'>
</b:section>
</div>
Simpan template dan jadilah 3 kolom Footer.

Jangan lupa berlangganan yah (Facebook, twitter, google plus atau mungkin di bookmark) dan dapatkan update-update seputar Tutorial blogger dan fitur template dari Blog Bamz hehehe :). Selamat mencoba dan semoga sukses!

Custom Design Css Threaded Comments

Custom Design Css Threaded Comments. Untuk mempercantik atau memper indah tampilan threaded comments yang merupakan fitur komentar baru dari blogger, saya akan sharing kode Css untuk threaded comments blogger tersebut. Sebelum anda menggunakan Css ini, tentunya harus mengaktifkan fitur Threaded Comments blogger terlebih dahulu. bagaimana mengaktifkan threaded comments? nah silahkan anda baca dulu artikel "Aktifkan thread comments blogger"

Custom Design Css Threaded Comments


Jika anda sudah mengaktifkan fitur thread comments blogger tersebut, sekarang tinggal mempercantik tampilannya. Apa yang harus anda lakukan?
  • Pertama login ke blog anda > Design > Edit Html > Expand Widget Templates. (jangan lupa backup template dulu, untuk menjaga hal yang tidak diinginkan)
  • Cari kode <b:includable id="threaded_comment_css">, kira kira semua kodenya seperti di bawah ini.
<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;
}
KARENA KEPANJANGAN, SAYA SINGKAT SAJA KODENYA,
.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>
  • Silahkan anda ganti semua kode tersebut dengan kode di bawah ini
<b:includable id='threaded_comment_css'>
  <style>
.comments {
  clear: both;
  marfin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
  font-size: 12px;
  margin-bottom: 16px;
font-family: Verdana;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .comment .comment-actions a {
background:#1F9EE5;
cursor:pointer;
color:#ffffff;
padding:2px 3px; margin-right:10px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:9px sans-serif; border:1px solid #1F9EE5;
}
.comments .comment .comment-actions a:hover {
  text-decoration: none; background:#5AB1E2; 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; border: 1px dotted #DDD;
}
.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 {
  background: url(https://lh3.googleusercontent.com/-ctEx0DiHeAg/Tx18GCChNSI/AAAAAAAAAE8/T7WMHl5RfHs/h80/icon_clock.gif) no-repeat;
  margin-left:6px;
padding-left:20px;
font-size:10px;
float:right;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
  margin:0 0 8px;
}
.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 .commdnt-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,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==&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>
  • Langkah terahir yaitu simpan template dan lihat hasilnya.
Anda tidak perlu bingung, pokoknya yang di ganti yaitu mulai dari <b:includable id="threaded_comment_css"> sampai </b:includable>

Jika anda tidak menemukan kode <b:includable id="threaded_comment_css">, maka gunakan kode di bawah ini dan paste di atas kode ]]></b:skin>



Custom Design Css Threaded Comments

Fitur baru blogger ini memang sangat menarik dan terlihat keren di bandingkan fitur komentar sebelumnya. Apalagi jika anda menggunakan Blogger template seo friendly Bamz Style yang saya desain, tentunya akan lebih mudah dalam pengeditan karena saya menggunakan template tersebut sebagai praktek terlebih dahulu :). Ok deh selamat mencoba tips custom design Css Threaded comments ini dan semoga sukses.
Posting Lama ►
 
Exit Di Like yah Sob!! Makasih