Trick n Tips Blogger | Widget Blogger | Template Blogger

Cara Membuat Kolom Footer Widget

by Irsyad Aslam , at 3/20/2013 , has 12 komentar
Anda mungkin sudah melihat Kolom ini disetiap anda kunjungi pada setiap blog. dengan Widget yang diletakan pada Kolom Footer ini dan Kolom ini terdapat Di bawah Posting.

Kolom Footer Widget berfungsi sama dengan sidebar yaitu untuk meletakan sebuah widget dimana anda dapat meletakan widget apapun yang bisa anda pasang. Widget yang ini biasa anda taruh Widget yang tidak terlalu penting untuk dipasang, Seperti Widget, Recent Comment, dan lain-lain. atau Widget yang dipasang terlalu penuh yang dipasang pada Sidebar.

Widget Footer ini Berisi tiga Kolom Widget dimana anda bisa menaruh sebanyak mungkin widget yang bisa dipasang. Dan bagaimana cara untuk memasangnya?, Terlebih Dahulu Anda Back Up (Cadangkan) dulu Template Anda. Setelah itu, Ikuti cara berikut untuk memasangnya:


  • Silahkan Login Ke Blogger Anda.
  • Setelah itu, Klik Menu Template, --> Klik Tombol Edit HTML.
  • Cari Kode ]]></b:skin> ,dengan menekan CTRL+F atau dengan F3.
  • Masukan Kode Berikut ini diatas kode ]]></b:skin> :
/* ----- YBB Footer ----- */
#footer {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#ffffff;
}
#footer-wrapper {
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
}
#footerbar-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;
}
.footerbar {margin: 0; padding: 0;}
.footerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.footerbar 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;
}
.footerbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}
.footerbar li {
margin: 0px 0px 2px 0px;
padding: 0px 0px 1px 0px;
border-bottom: 1px dotted #ccc;
}

Ketarangan:
  1. Kode Yang Berwarna Merah adalah Warna Dari Background Footer, Jika ingin diganti, ganti dengan kode warna 6 digit
  2. Kode Yang Berwarna Kuning adalah Lebar Dari Kolom Footer, Ganti Dengan Lebar yang sesuai dengan Lebar Blog anda.
  3. Kode Yang Berwarna Biru adalah Ketebalan dari garis pembatas dan warna dari pembatas.
  4. Kode Yang Berwarna Orange adalah Warna Dari Judul Widget, Ganti Dengan Warna yang ingin anda inginkan.
  5. Kode Yang Berwarna Hijau adalah Font (Tulisan) Ukuran, Dan Jenis Font.
  6. Kode Yang Berwarna Biru Muda adalah Warna Ketebalan, Dan Ketebalan dari Garis Pembatas Judul.
  7. Dan Jika Anda ingin Menghapus Pembatas Footer, Hapus Kode border:1px solid #DEDEDE; .

  • Setelah itu, Cari kode </body> dengan menekan CTRL+F atau dengan F3.
  • Masukan Kode Berikut ini diatas kode </body> :
<div id='footer'>
<div id='footer-wrapper'>
<div id='footerbar-wrapper'>
<b:section class='footerbar' id='footerbar1' preferred='yes'>
</b:section>
</div>
<div id='footerbar-wrapper'>
<b:section class='footerbar' id='footerbar2' preferred='yes'>
</b:section>
</div>
<div id='footerbar-wrapper'>
<b:section class='footerbar' id='footerbar3' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>
  • Lalu, Klik Tombol Simpan Template.


Selamat Mencoba,
Salam Sukses,




Your-BelajarBLOG
Irsyad Aslam
About
Cara Membuat Kolom Footer Widget - written by Irsyad Aslam , published at 3/20/2013, categorized as Widget . And has 12 komentar
12 komentar Add a comment
gan, ada artikel cara merusak blog gak ? jenuh nih..(oxO)
Waduh,
Gak Ada Tuh,
Ada Juga Dihapus Blognya :^D^:,
Delete
Reply Delete
Waktu saya coba footer tampil tapi tidak teratur, apa mungkin tergantug sa templatenya jg ya boss...
Coba Lihat Demonya di link http://demoblogybb.blogspot.com/ Untuk Melihat Lebih Jelas Tampilan Dari Footer ini.
Dan Coba Ulang Tutorial Simpan Kode <div id='footer'>
............;
........;
............;
</div> </div> Dibawah Kode Berikut (dalam Template Super SEO):

<!-- Sidebar End -->

<div style='clear:both;'/>
</div>
<!-- Main End -->

Semoga Berhasil,
Salam Sukses,


Your-BelajarBLOG
Delete
Reply Delete
Bener Bener Makasih Banget Bro..
Sukses Buat Blognya..:) :)
Ok Sip,
Makasih.,

Salam Sukses,
Your-BelajarBLOG
Delete
Reply Delete
ko ane gagal ya gan?
Mungkin Karena Penempatan Kode Yang Tidak Benar,
Coba Ulangi Toturial Diatas, Dan Simpan Kode
<div id='footer'>
............;
........;
............;
</div> </div>

Dibawah Kode Berikut (Kode template Super SEO) :

<!-- Sidebar End -->

<div style='clear:both;'/>
</div>
<!-- Main End -->

Semoga Berhasil,
Salam Sukses,


Your-BelajarBLOG
Delete
Reply Delete
mantap bro langsung saya coba nih
Reply Delete
mampir juga disni gan http://sonytutorial.blogspot.com/
Reply Delete

Catatan:

• Dilarang Menaruh Link Aktif
• Dilarang Nyepan/Promosi Di Komentar
• Dilarang Berkata Tidak Sopan
• Untuk Menyisipkan Kode, Gunakan Tag <i rel="code">... KODE ...</i>
• Untuk Menyisipkan Kode Panjang, Gunakan Tag <i rel="pre">... KODE ...</i>
• Untuk Menyisipkan Catatan, Gunakan [catatan].. TEKS ...[/catatan]
• Untuk Menyisipkan Gambar, Gunakan [img]URL GAMBAR[/img]

Sebelum Menyisipkan Kode Harap Konversi Kode Sebelum Menuliskan Di Komentar

Bck
Cancel Reply

Followers

Komentar Terbaru

Copyright ©2013 Your-BelajarBLOG by
Theme designed by Damzaky - Published by Proyek-Template
Powered by Blogger