Cara Gampang Menciptakan Widget Footer Blog 4 Kolom
Menambahkan sajian footer akan menciptakan blog terlihat profesional. Dibawah ini akan di Jelaskan secara detil bagaimana cara menambahkan sajian footer di web anda
Kolom widget di footer menjadi animo di situs-situs berita. Lihah saja contohnya republika.co.id, detik.com, dan okezone.com, juga situs pro lainnya.
Nah, kalau template blog Anda tidak menyediakannya, ini ia cara menciptakan Widget Footer empat kolom di bab bawah blog Anda.Fungsi Widget Footer ini untuk menampilkan link-link penting, menyerupai link internal (menu, label, posting terbaru, komentar terbaru, dll) atau link eksternal (blog list).
Fungsi lainnya kolom di footer blog ini yaitu menjadi navigasi sajian menyerupai halnya navigasi blog yang biasa ada di bawah atau di atas logo (judul blog).
Dengan adanya Footer Widget ini, pengunjung gak perlu scroll ke atas lagi untuk melihat sajian apa saja yang disediakan blog kita. DEMO footer widget empat kolom dapat dilihat di footer blog yang ada pada template New Johny Wuss, juga di New Fastest Magz dan lainnya dan tentunya pada blog dewaplokis ini.
Cara ini awalnya aku lihat dari Arlinadesignz lalu aku terapkan di beberapa template yang aku uji coba dan kesudahannya memang sangat manis dan blog akan terlihat lebih professional
Cara Membuat Widget Footer Empat Kolom di Blog
1. Template > Edit HTML
2. Cari instruksi ]]></b:skin> dan Copas instruksi berikut ini di atasnya:
3. Cari instruksi </body> and Copas instruksi berikut ini di atasnya:
4. Save template!
Setelah itu klik "Layout" dan akan muncul Footer Widget gres menyerupai ini:
Untuk mengubah ukuran lebar ada di bab "width: 960px;"
Untuk mengurangi jumlah kolom/widgets menjadi 3 saja, hapus instruksi ini:
Untuk menambah jumlah kolom widget menjadi lebih dari empat, tambahkan instruksi di bawah ini
Kode lowerbar# yaitu jumlah kolom. Jadi, untuk menambahkan kolom kelima, ganti lowerbar# dengan lowerbar5.
Jika menambah kolom kelima, ubah width: 23%; menjadi width: 17%;
Itulah Cara Praktis Membuat Widget Footer Blog 4 Kolom bagi bloger pemula. Good Luck! Sumber https://dewaplokis.blogspot.com/
Kolom widget di footer menjadi animo di situs-situs berita. Lihah saja contohnya republika.co.id, detik.com, dan okezone.com, juga situs pro lainnya.
Nah, kalau template blog Anda tidak menyediakannya, ini ia cara menciptakan Widget Footer empat kolom di bab bawah blog Anda.Fungsi Widget Footer ini untuk menampilkan link-link penting, menyerupai link internal (menu, label, posting terbaru, komentar terbaru, dll) atau link eksternal (blog list).
Fungsi lainnya kolom di footer blog ini yaitu menjadi navigasi sajian menyerupai halnya navigasi blog yang biasa ada di bawah atau di atas logo (judul blog).
Dengan adanya Footer Widget ini, pengunjung gak perlu scroll ke atas lagi untuk melihat sajian apa saja yang disediakan blog kita. DEMO footer widget empat kolom dapat dilihat di footer blog yang ada pada template New Johny Wuss, juga di New Fastest Magz dan lainnya dan tentunya pada blog dewaplokis ini.
Cara ini awalnya aku lihat dari Arlinadesignz lalu aku terapkan di beberapa template yang aku uji coba dan kesudahannya memang sangat manis dan blog akan terlihat lebih professional
Cara Membuat Widget Footer Empat Kolom di Blog
1. Template > Edit HTML
2. Cari instruksi ]]></b:skin> dan Copas instruksi berikut ini di atasnya:
#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; // Sesuaikan dengan lebar blog Anda border:0; } #lowerbar-wrapper { background:#333333; float: left; margin: 0px 5px auto; padding-bottom: 20px; width: 23%; // Sesuaikan 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;}3. Cari instruksi </body> and Copas instruksi berikut ini di atasnya:
<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>4. Save template!
Setelah itu klik "Layout" dan akan muncul Footer Widget gres menyerupai ini:
Untuk mengubah ukuran lebar ada di bab "width: 960px;"
Untuk mengurangi jumlah kolom/widgets menjadi 3 saja, hapus instruksi ini:
<div id='lowerbar-wrapper'> <b:section class='lowerbar' id='lowerbar4' preferred='yes'> </b:section> </div> Untuk menambah jumlah kolom widget menjadi lebih dari empat, tambahkan instruksi di bawah ini
<div style='clear: both;'/> <div id='lowerbar-wrapper'> <b:section class='lowerbar' id='lowerbar#' preferred='yes'> </b:section></div>Kode lowerbar# yaitu jumlah kolom. Jadi, untuk menambahkan kolom kelima, ganti lowerbar# dengan lowerbar5.
Jika menambah kolom kelima, ubah width: 23%; menjadi width: 17%;
Itulah Cara Praktis Membuat Widget Footer Blog 4 Kolom bagi bloger pemula. Good Luck! Sumber https://dewaplokis.blogspot.com/