Cara Memasang Widget Footer Multi Kolom di Blog - Tampilan Menarik

 

 kali 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.