Selamat datang di Kios-Tutorial

Cara Membuat Kolom Diatas Footer

Thursday, June 18, 20154komentar

Cara menambah widget - Selamat malam blogger mania. Template blog adalah salah satu pendukung agar sebuah blog disukai oleh google maupun para pengunjung. Tak jarang para blogger rela berjam-jam untuk membuat atau mengedit template agar terlihat bagus dimata google maupun pengunjung. Jika kita sudah paham dengan kode script yang ada didalam template mungkin tidak terlalu susah. Yang bikin repot jika kita tidak paham kode-kode tersebut, seperti saya contohnya. Karena minimnya pengetahuan tentang kode script, saya mungkin bisa 2 hari bahkan lebih untuk mengedit suatu template agar terlihat bagus.

Pernah suatu ketika saya mengganti template salah satu blog, kemudian saya coba utak-atik dengan menambahkan atau mengurangi bagian-bagian yang tidak pas menurut saya. Waktu itu saya butuh 2 hari untuk menyelesaikannya, dan harus rela tidak update artikel gara-gara sibuk ngurusin template. Hasil akhirnya memang cukup bagus buat saya yang notabene awam dengan kode script. Setelah beberapa hari berjalan, saya baru sadar kalau template tersebut tidak ada kolom widget diatas footer. Bagi saya kolom  tersebut sangat penting, karena saya sudah terbiasa meletakkan elemen-elemen informasi pada bagian tersebut.

Akhirnya saya meluncur ke tempat mbah google untuk mencari solusi. Ternyata buanyak sekali artikel-artikel yang membahas tentang menambah kolom diatas footer ini. Beberapa kali mencoba hasilnya template blog saya malah ancur. Sampai pada akhirnya saya menemukan script yang cocok buat ditempatkan pada template blog saya. Jika anda saat ini sedang mengalami kasus seperti diatas, mungkin artikel ini bisa menjadikan solusi buat template blog anda. Langsung saja simak langkah-langkahnya dibawah ini !
Cara Membuat Kolom Diatas Footer
Cara Membuat Kolom Diatas Footer
sebelum ditambah kolom
Cara Membuat Kolom Diatas Footer
setelah ditambah kolom

Membuat 3 Kolom Diatas Footer

1. Login ke akun blog anda
2. Pilih bagian Template, lalu klik Edit HTML
3.Cari kode berikut ]]></b:skin> dengan CTRL+F
4. Setelah ketemu, copy dan paste kode dibawah ini tepat di atas kode ]]></b:skin>
/* -----   3 KOLOM FOOTER   ----- */
#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;
}
5. Lalu cari kode </body> dan copy kode dibawah ini lalu paste tepat diatas </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>
6. Pratinjau Template
7. Lalu save template anda

Keterangan tulisan warna merah di atas :
  • #333434 = warna background dasar dari widget
  • 960px = lebar template, silahkan disesuaikan dengan lebar template anda
  • #fff = warna widget
  • 32% = lebar masing-masing kolom widget
  • #0084ce = warna judul pada widget yang anda tambahkan nanti
  • bold 14px Arial, Tahoma, Verdana = untuk mengganti ukuran dan jenis font
  • 3px solid #0084ce = untuk merubah ukuran dan warna garis yang ada di bawah judul widget
  • 1px dotted #ccc = untuk merubah ukuran, warna, dan model border yang ada dibawah link
Anda bisa berkreasi dengan mengganti tulisan warna merah di atas untuk disesuaikan dengan warna dan tema template blog anda. Sekian artikel dari saya, semoga bermanfaat buat kita semua.
Share this article :

+ komentar + 4 komentar

July 27, 2015 at 4:58 PM

saya simpen dulu scriptnya mas,biar nanti mudah bila mau memasang kolom diatas footer.
makasih telah berbagi

July 27, 2015 at 9:27 PM

@yanto cungkup
silahkan mas @yanto ...
terima kasih sudah tersesat di mari :D

July 27, 2015 at 11:47 PM

@Master Tutorngeblog buat saya memang untuk menambah persahabatan mas.sisanya buat nambah uang jajan :D

July 28, 2015 at 8:11 PM

@yanto cungkup

tp blog ini aneh mas hahahah . . .
pada statistik blog, penayangan bisa mencapai puluhan bahkan sampai ratusan...

tp di histat pengunjung kosong >.<

Post a Comment

- Maaf, komentar LINK AKTIV / IKLAN akan saya HAPUS
- Komentar sara / spam akan saya hapus
- Jika ada link gambar yang mati laporkan disini
- Berkomentarlah dengan bijak sesuai dengan artikel
- Komentar anda merupakan undangan buat saya

 
Support : Cara Gampang | Creating Website | Johny Template | Mas Templatea | Pusat Promosi
Copyright © 2013. Tutorial Tips & Trik - All Rights Reserved
Template Created by Creating Website Re-Design by Kios
Proudly powered by Blogger