Cara Menambah Tiga Widget Kolom Footer Pada Blog

Kesibukan ngontes tidak membuat madeputra.id lupa untuk berbagi trik blogger. Setelah kemarin menyajikan postingan Cara Menghilangkan Tulisan Diberdayakan Blogger, untuk itu di hari yang cerah ini admin kembali mencoba berbagi ilmu dan pengalaman tentang Tutorial Blog dan Widget yang mana tema kali ini adalah mengajak para pembaca untuk membuktikan trik Cara Menambah Tiga Widget Kolom Footer Pada Blog. Sebenarnya trik ini jarang sekali digunakan para blogger, mengingat banyaknya template gratisan beredar di google yang telah dilengkapi kolom footer 3 kolom ini. Namun yang namanya berbagi tidak lah ada penghalangnya, siapa tahu diantara pengunjung harian blog ini memang ada yang sedang membutuhkan triknya.

Cara Menambah Tiga Widget Kolom Footer Pada Blog

Baik lah, tanpa berpanjang lebar lagi, berikut langkah - langkah yang harus anda lalui :
1. Masuk ke Akun Blog anda.
2. Klik Template, lalu Edit HTML (disarankan untuk membackup template terlebih dahulu).
3. Cari kode ]]></b:skin> dengan bantuan Ctrl + F. Setelah kode tersebut ketemu, lalu letakkan kode script dibawah ini tepat diatas kode ]]></b:skin> tadi.

/* -----   LOWER SECTION   ----- */
#lower {
       margin:auto;
       padding: 0px 0px 10px 0px;
       width: 100%;
       background:#333434;
#lower-wrapper {
       margin:auto;
       padding: 20px 0px 20px 0px;
       width: 960px;
}
#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;
}

4. Kemudian cari pula kode </body> dan letakkan pula kode dibawah ini tepat diatas kode </body> tadi.

<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>

Keterangan :

  • background:#333434; Gantilah 6 digit kode warna pada bagian ini untuk mengubah warna background widget.
  • width: 960px; Ini adalah lebar widget. Jika Anda mau, Anda dapat menyesuaikan nilai ini agar lebarnya sesuai dengan lebar blog Anda.
  • background:#fff dan width: 32%; Ini adalah warna background dan lebar tiga kolom widget yang ditambahkan.
  • color:#0084ce; Ini adalah warna Title Heading
  • font: bold 14px Arial, Tahoma, Verdana; Edit bagian ini untuk mengganti ukuran font dan jenis font.
  • border-bottom: 3px solid # 0084ce; Edit bagian ini untuk mengubah ketebalan, style, dan warna border yang muncul di bagian bawah Title Heading.
  • border-bottom: 1px dotted # ccc; Edit bagian ini untuk mengubah ukuran, style, dan warna border yang muncul di bawah link.

5. Simpan Template dan lihat hasilnya.

Baiklah sob, cuma ini yang bisa saya paparkan. Jika ada yang kurang jelas atau triknya tidak berhasil silahkan tinggalkan komentar dibawah ini.
Previous
Next Post »
Terimakasih telah berkunjung dan memberikan komentar