Membuat 3 Kolom Footer Pada Blog Secara Manual

 

Pernah kah kalian melihat sebuah blog dengan 3 kolom footer dibawahnya seperti tampilan blog diatas ? nah pada tutorial kali ini saya akan membahas bagaimana cara membuatnya di blogger. atau jika kamu males membuatnya, kamu bisa langsung download berbagai macam template di premiumbloggertemplates.com, disana templatenya juga mantep2 sob !. ikuti langkah2 dibawah ini :

1. Masuk ke Blogger.com

2. Klik Rancangan --> Edit HTML --> Centang Expand Widget Template. Oh iya jangan lupa di back up yah template blog kamu.

3. Cari kode ini ]]></b:skin> kemudian kamu copas kode dibawah ini dan letakan SEBELUM/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. Setelah itu cari lagi kode </body> , Copas lagi kode dibawah ini dan letakan DIATAS/SEBELUM kode </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 style='clear: both;'/>
</div> </div>

5. Simpan Template kamu dan Lihat hasilnya :D 

*Note : kamu bisa mengedit kode warna yang berwarna biru, dibawah ini adalah penjelasannya.

• background: # 333434; adalah latar belakang widget footer kamu ganti #333434 dengan kode warna yang kamu inginkan.
• width: 960px; ini adalah lebar widget. 
• background: # fff; dan width: 32%; adalah warna latar belakang dan lebar dari tiga kolom di mana widget ditambahkan. 
• color: # 0084ce; Ini adalah Warna Judul pos widget yang kamu tambahkan.
• font: bold 14px Arial, Tahoma, Verdana; adalah jenis font yang digunakan.
• border-bottom: 3px solid # 0084ce; Edit ini untuk mengubah ketebalan, gaya dan warna perbatasan yang muncul di bagian bawah Judul Pos.
• border-bottom: 1px dotted # ccc; Editing ini akan mengubah ukuran, gaya dan warna perbatasan yang muncul di bawah link. 

 

Postingan Terkait:

Posted in: Blogger