Terbaru: Optimasi URL Blog | 10 Tips Mempercepat Blog Load | 30 Strategi SEO | 15 Rahasia Menulis Konten

Ad 468 X 60

Thursday, June 6, 2013

Cara Memasang Widget Footer Multi Kolom di Blogger - Tampilan Menarik

multi kolom blogger
Saya sebelumnya telah berbagi tutorial tentang cara menambahkan widget footer 3 kolom di blog dengan mudah, dan hari ini saya akan berbagi tutorial memasang widget footer multi kolom yang canggih di blog. Widget ini dapat menjadi 3 kolom, empat kolom, atau banyak kolom tergantung yang Anda inginkan. Selanjutnya widget footer ini memiliki beberapa efek CSS yang ditambahkan ke dalamnya yang membuatnya lebih baik. Marilah ikuti serangkaian langkah mudah berikut ini untuk memasangnya.

Cara Menambahkan Widget Multi Kolom di Blogger!
Pertama-tama kita akan menambahkan kode CSS dalam template blogger Anda dan kemudian tambahkan kode HTML-nya. Jadi tanpa membuang banyak waktu mari kita langsung menuju langkah-langkahnya.
  • Login dulu ke akun Blogger Anda
  • Klik Tab Template (pada menu drop down)
  • Backup dulu template Anda bila perlu
  • Klik Edit HTML
  • Carilah kode ]]></b:skin> (gunakan Ctrl + F untuk memudahkan pencarian)

  • Kemudian letakkan kode berikut ini di bawah kode ]]></b:skin>
/*----- GNR MULTI COLUMN FOOTER WIDGET -----*/
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333333;
}
#lower-wrapper {
background:#333333;
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
border:0;
}
#lowerbar-wrapper {
background:#333333;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 23%;
text-align: justify;
color:#ddd;
font: bold 12px Arial, Tahoma, Verdana;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
border:0;
color:#ddd;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-left: 0 !important;
padding: 6px;
border-bottom: 1px solid #222;
border-top: 1px solid #444;
list-style-type: none;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}

  • Kemudian cari kode </body> dan paste kode berikut ini tepat di atas kode </body>
<div id='lower'>
<div id='lower-wrapper'>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>

<div style='clear: both;'/>
</div> </div>

  • Simpan Template Anda dan selesai

Sekarang Anda masuk ke Tab Layout dan tambahkan widget Anda yang baru di Footer yang telah Anda buat seperti gambar ini.

Anda dapat mengamati bahwa ada empat kolom secara default dan Anda dapat menambahkan atau mengurangi jumlah kolom vertikal dengan mengikuti langkah-langkah di bawah ini:

Cara Kostumisasi Widget!
Saya akan membahasnya secara sederhana. Saya pikir untuk warna dan ukuran keseluruhan sudah tepat. Satu-satunya hal yang perlu Anda sesuaikan dengan Template Anda adalah lebar widget dan jumlah kolom vertikal.
  • Untuk mengurangi atau menambah lebar keseluruhan widget, Anda tinggal perlu mengubah width: 960px;
  • Jika Anda ingin mengurangi jumlah widget menjadi tiga, maka cukup hapus bagian kode ini:

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>

  • Jika Anda ingin menambahkan ekstra kolom, maka tambahkan kode berikut di atas kode <div style='clear: both;'/>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar#' preferred='yes'>
</b:section>
</div>

Ingat bahwa lowerbar# adalah mengacu pada jumlah kolom. Jadi jika Anda ingin menambahkan kolom kelima maka cukup mengganti lowerbar# menjadi lowerbar5.

Setelah Anda menambahkan kolom kelima maka ingatlah untuk mengubah width: 23%; menjadi width: 17%;.

Anda ulangi langkah 3 untuk memperbanyak jumlah kolom yang Anda inginkan. Tapi 3, 4, dan 5 kolom itu adalah standar. Jika lebih dari itu maka akan terlihat jelek, jadi pertimbangkan itu.

Semoga artikel ini bermanfaat bagi Anda dan jangan lupa untuk membagikan ini dengan teman-teman Anda jika Anda menyukainya. Terimakasih.

Author: Balaputra
Balaputra adalah seorang mahasiswa yang melakukan aktivitas blogging hanya untuk menghabiskan waktu luang.

28 comments:

  1. salam, mantap artikel nya. kunjungan rutin boss. SBY (Salam Blogger Ya) kata mas Eddy Wijaya.

    Blog ini sudah saya review di alexa boss, tolong review balik ya.

    ReplyDelete
    Replies
    1. Salam blogger kawan,,,
      Terimakasih kunjungannya. . . .

      Blog Anda juga sudah sy review kawan, terimakasih sudah review blog saya..
      ^^

      Delete
  2. aduh, tadi saya coba kok g' berhasil ya sob,,,
    minta penjelasannya ya sob, thankz....

    ReplyDelete
    Replies
    1. Ukurannya jangan lupa dirubah sob agar tidak berantakan jadinya, disesuaikan sama template...

      Delete
  3. Tutorial yang singkat namun padat, alhamdulillah bisa saya pahami.

    ReplyDelete
    Replies
    1. Syukurlah jika tulisan saya mudah dipahami..

      Delete
  4. code htmlnya panjang juga Gan...!!!! sudah cukup detail dan lengkap tinggal mempraktekkan aja, makasih atas petunjuknya.

    ReplyDelete
  5. Postingan tentang cara memasang widget footer multi kolom sangat bagus dan menarik untuk dibaca. Saya suka mengunjungi blog ini.

    ReplyDelete
    Replies
    1. Terimakasih,jangan bosan untuk berkunjung lagi kawan..

      Delete
  6. oky gan... langsung di praktikkan :)

    ReplyDelete
  7. makasih gan ane butuh banget ni gan matur nuwon gan..

    ReplyDelete
  8. keren blognya,
    sukses selalu.

    KUNBALnya, ugl-kreatif.blogspot.com

    ReplyDelete
  9. Replies
    1. Silahkan kawan,,jangan lupa untuk memodifikasi artikelnya jgn sampai sama persis....

      Delete
  10. mantap gan
    mampir ya ardiyaajicandra.blogspot.com

    ReplyDelete
  11. malam gan....tutorialnya cakep, tapi saya sudah coba kok tampilan css nya terlihat diatas header blog saya? Mohon pencerahan.....http://webdesignpemula.blogspot.com

    ReplyDelete
  12. gan, ko jadinya ada tulisan kode2 itu di atas blog saya, saya rasa saya melakukan dengan benar. mohon pencerahannya!

    ReplyDelete
  13. makasi gan.... langsung praktek

    ReplyDelete

Terimakasih telah berkenan mengunjungi dan meninggalkan komentar di blog ini. Tanggapan Anda selalu kami hargai.