Cara Membuat Widget 4 Kolom diatas Footer

Apa itu widget?

Blogger memiliki fitur bawaan yang sangat penting dalam pembuatan blog, fitur bawaan itu berupa widget atau biasa disebut juga Gadget. Widget ni merupakan kumpulan kode HTML atau javascript pada suatu blog. Biasanya widget dalam suatu blog berada dibagian Header, Sidebar atau Footer blog. Bentuk atau isis widget biasanya berupa gambar, video atau mungkin navigasi dll.

Kegunaan widget

Kegunaan widget yang paling utama tentu untuk menambah informasi navigasi blog dan untuk menambah / mempercantik tampilan suatu blog. Widget informasi biasanya berupa informasi pemilik blog, entah itu profil blogger atau profl social media, sedang untuk navigasi biasaya berupa tampilan postingan paling popular atau postingan paling terbaru dari blog tersebut.

Memasang widget

Memasang widget cukup mudah, untuk widget bawaan blogger kamu tinggal masuk ke Tata Letak pada dashboar blog , kemudian tambah gadget dan pilih widget mana yang ingin kamu pasang, berikut langkah tersebut.

1. Masuk ke blogger, pilih blog yang inin kamu tambahkan widget

2. Klik Menu 'Tata Letak' atau 'Layout'.

3. Klik Tambah Gadget

4. Kemudian Pilih Widget yang kamu ingin pasang, kemudian save.

Jika diatas merupakan cara memasang widget bawaan pada blogger, lalu bagaimana jika ingin memasang widget yang kita buat sendiri? Langkahnya hampir sama, namun hal perlu disiapkan terlebih dahulu yauit kode HTML /Javascript widget yang akan kita pasang. Jika sudah dipersiapkan ikuti langkah berikut;

1. Masuk ke blogger, pilih blog yang ingin kamu tambahkan widget

2. Klik Menu 'Tata Letak' atau 'Layout'.

3. Klik Tambah Gadget

4. Kemudian Pilih Widget HTML/Javascript, copypaste kode yang sudah dipersiapkan tadi ke dalam form widget HTML/Javascript.

5. Kemudian save.

Memasang Widget 4 Kolom diatas Footer

Apa maksud widget 4 kolom diatas footer? disini kita akan menambahkan widget baru / tempat widget baru diatas footer. Biasanya letak widget ini sudah ada, namun beberapa template tidak dipasang. Jadi untuk kamu yang ingin memasang atau mengganti widget tersebut silahkan ikuti tutorial berikut.

Untuk desain akhir widget yang akan dipasang bisa dilihat pada contoh gambar berikut.

Langkah pertama login ke blogger kemudian pilih blog yang akan kita pasang widget.

Pada dashboard blogger, pilih menu Tema/Template kemudian pilih Edit HTML

Kemudian copy kode berikut dan letakan diatas kode ]]></b:skin> atau </style>. untuk mempermudah pencarian gunakan Ctrl+F.

/* FOOTER WIDGET 4 Kolom */
#widget-footer-container {
 background: #262f3a;
 padding: 0 30px;
 overflow: hidden;
 line-height: 1.6em;
}
#widget-footer-wrapper {
 margin: 0 auto;
 max-width: 1000px;
 color: #fff;
}
#widget-footer-wrapper .widget {
 margin: 40px 0;
}
#widget-footer-wrapper .widget a {
 color: #ddd;
}
#widget-footer-wrapper .widget a:hover {
 color: #2ec4f2;
}
#widget-footer-wrapper .widget ul, #widget-footer-wrapper .widget ol {
 list-style: none;
 margin: 0 0;
}
#widget-footer-wrapper .widget ul li:before, #widget-footer-wrapper .widget ol li:before {
    display:none;
}
#widget-footer-wrapper .widget ul li, #widget-footer-wrapper .widget ol li {
 font-size: 14px;
    font-weight: 300;
    border: 0;
 margin: 0.3em 0;
}
#widget-footer-wrapper h2 {
 font-size: 15px;
 font-weight: 500;
 text-transform: uppercase;
 margin-bottom: 20px;
}
#widget-footer1 {
 width: 26%;
 float: left;
 padding-right: 20px;
 box-sizing: border-box;
}
#widget-footer2 {
 width: 26%;
 float: left;
}
#widget-footer3 {
 width: 26%;
 float: left;
 box-sizing: border-box;
}
#widget-footer4 {
 width: 22%;
 float: right;
 padding-left: 35px;
 box-sizing: border-box;
}

/* FOOTER */
#footer-container {
 background: #1d242e;
 padding: 20px 30px;
 overflow: hidden;
 color: #fff;
 font-size: 12px;
 text-align: center;
}
#footer-wrapper {
 max-width: 1000px;
 margin: 0 auto;
 overflow: hidden;
}
#footer-wrapper .footer-right {
 float: right;
}
#footer-wrapper .footer-left {
 float: left;
}
#footer-wrapper a {
 color: #fff;
}
#footer-wrapper a:hover {
 color: #ddd;
}

@media screen and (max-width:768px){
#widget-footer-container { padding: 0 20px; }
#widget-footer1 {float:none;width:100%;padding-right: 0;}
#widget-footer2 {float:none;width:100%;}
#widget-footer3 {float:none;width:100%;}
#widget-footer4 {float:none;width:100%; padding-left: 0px;}
#footer-container { padding: 20px 20px; }
}

Copy kode berikut ini, letakan dibawah <!-- sidebar wrapper end --> atau jika tidak ada letakan diatas widget footer <div id='footer-widget-container'>, atau sesuaiakn dengan kode template masing masing.

<aside id='widget-footer-container' itemscope='itemscope' itemtype='http://schema.org/WPFooter' role='contentinfo'>
    <div id='widget-footer-wrapper'>
    <b:section class='widget-footer' id='widget-footer1' preferred='yes'/>
    <b:section class='widget-footer' id='widget-footer2' preferred='yes'/>
    <b:section class='widget-footer' id='widget-footer3' preferred='yes'/>
    <b:section class='widget-footer' id='widget-footer4' preferred='yes'/>
    </div>
  </aside>
  <div class='clear'/>

Langkah diatas merupakan langkah untuk membuat kerangka widgetnya saja , sedangkan untuk memasang widget sama seperti langkah untuk memasang widget bawaan blogger.

Untuk merubah tampilan, silahkan ubah sesuaikan kode tersebut sesuikan dengan tampilan blog kamu. Sekian tutorial memasang widget 4 kolom diatas footer semoga bermanfaat, Terima kasih.

Share this post