Cara Menambah 3 Kolom Space Widget Pada Footer Blog

Cara Menambah 3 Kolom Space Widget Pada Footer Blog
Widget atau gadget pada Blog adalah salah satu elemen penting dalam blog yag berguna untuk menambah elemen-elemen seperti popular post, untuk kotak iklan PPC, dan elemen lainnya untuk mempercantik halaman blog. Seperti saya, space widget saya gunakan untuk menambah kan beberapa elemen HTML. Namun, tidak jarang di temui template yang tidak memiliki widget pada footer atau di bawah postingan. Untuk itu, kali ini www.netomaniak.com akan membagikan tutorial tentang Cara menambahkan 2 space widget baru pada template blogger.

Berikut langkah mudah cara membuat 3 kolom space widget baru di pada footer pada template blogger:

1. Silahka login ke akun blogger anda, dan pilih salah satu blog anda.

2. Sekarang, masuk ke menu Template dan Klik Edit HTML. Sebelumnya, silahkan backup dahulu template anda, untuk menjaga-jaga jika ada kesalahan.

3. Setelah masuk ke lembar kerja EDIT HTML template anda, silahkan cari ]]></b:skin> . Dan silahkan Copy paste kode di bawah ini tepat di atas kode ]]></b:skin>

/* -----   LOWER SECTION  NETOMANIAK ----- */
#lower {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#333434;
}
#lower-wrapper {
       margin:auto;
       padding: 20px 0px 20px 0px;
       width: 100%;
}
#lowerbar-wrapper {
     border:1px solid #DEDEDE;
       background:#fff;
       float: left;
       margin: 0px 5px auto;
       padding-bottom: 20px;
       width: 32%;
       text-align: justify;
       font-size:100%;
       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;
       color:#0084ce;
        text-transform:uppercase;
      font: bold 14px Arial, Tahoma, Verdana;
       border-bottom:3px solid #0084ce;
}
.lowerbar ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}
.lowerbar li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom: 1px dotted #ccc;
}

ket: silahkan kreasikan sendiri warna dan jenis font yang cocok dengan template anda.

4. Setelah itu Cari kode  <div id='footer-wrapper'>dan copy paste kode dibawah ini tepat di atas kode tersebut. Setiap kode pada template beda-beda, bisa jadi <div id='footer-wrapper'> ataupun <div id='footer-wrap'> ataupun <div id='creditpic'>, intinya copy paste kode di bawah ini di atas footer anda.

<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 style='clear: both;'/></div> </div>

 5. Setelah itu, klik Simpan Template.

Tutorial menambahkan template sudah selesai, sekarang silahkan coba masuk ke menu Tata Letak/ Layout dan refresh terlebih dahulu browser anda. Jika berhasil, maka akan muncul 3 space widget baru di bawah seperti gambar dibawah ini:

Setelah itu, silahkan anda tambahkan gadget baru sesuai keinginan anda.

Itu dia tutorial tentang Cara Menambah/Membuat 3 Kolom Space Widget Baru Pada Footer Blog.  Semoga berguna bagi semuai teman blogger di seluruh dunia. Jika ada pertanyaan atau kesalahan silahkan berkomentar di bawah ini.