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:

Blogger

• Cara Menghapus Komentar Spam Secara Otomatis
• Cara Membuat Blog Terindeks Google dengan Cepat
• 5 Kesalahan yang Dilakukan Oleh Blogger Pemula
• Mengembalikan Blog yang Sudah Dihapus, Bisakah ?
• Apa Itu Niche Blogging ?
• Daftar 60+ Forum Do-Follow Ber-PageRank Tinggi 2014
• Cara Menghindari Blog Dihapus Oleh Google
• Cara Memilih Nama Blog & Situs yang Ramah SEO
• Cara Mengembalikan Mood Blogging
• Mengapa Subscriber Feedburner Menjadi 0 ?
• 7 Tips SEO untuk Blogger
• 10 Tips Mantap Untuk Meningkatkan Trafik Organik
• 7 Trik Membuat Artikel Lama Menjadi Populer
• 7 Cara Mendapat Pengunjung Dengan Mudah
• Tutorial Blog dan SEO Terkena Malware ?
• Bagaimana Mengefektifkan Backlink Dalam SEO
• 8 Tips Membuat Loading Blog Lebih Cepat
• Cara Membuat Kotak Fanpage Facebook Hitam Putih
• Optimasi Gambar Untuk Dapatkan Pengunjung
• Cara Menghindari SEO yang Berlebihan
• 8 Tips Untuk Seorang Blogger Pemula
• Cara Mendapatkan Google Sitelink Dengan Cepat
• Cara Membuat dan Tips Pengaturan Meta Tag
• Cara Meningkatkan Ranking Alexa Dengan Cepat
• Cara Mengklaim Situs di Alexa

Posted in: Blogger