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 Blogspot!
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.