Cara Menambahkan Widget Multi Kolom di Blogger!
Pertama-tama kita akan menambahkan instruksi CSS dalam template blogger Anda dan lalu tambahkan instruksi HTML-nya. Kaprikornus tanpa membuang banyak waktu mari kita pribadi menuju langkah-langkahnya.
- Login dulu ke akun Blogger Anda
- Klik Tab Template (pada sajian drop down)
- Backup dulu template Anda bila perlu
- Klik Edit HTML
- Carilah instruksi ]]></b:skin> (gunakan Ctrl + F untuk memudahkan pencarian)
- Kemudian letakkan instruksi 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 instruksi </body> dan paste instruksi berikut ini sempurna di atas instruksi </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 gres di Footer yang telah Anda buat menyerupai gambar ini.
Anda sanggup mengamati bahwa ada empat kolom secara default dan Anda sanggup 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 yaitu 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 bab instruksi ini:
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>
- Jika Anda ingin menambahkan ekstra kolom, maka tambahkan instruksi 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# yaitu mengacu pada jumlah kolom. Kaprikornus kalau 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 yaitu 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 kalau Anda menyukainya. Terimakasih.
0 komentar:
Posting Komentar