Cara Membuat Widget 3 Kolom pada Footter

Cara Membuat Widget 3 Kolom pada Footter

3 Comments

Sebenarnya menggunakan template 2 kolom dengan right sidebar atau bar kana itu lebih menguntungkan. Pertama template ringan dan otomatis loading blog cepat, karena pada waktu loading komputer membacanya dari dasar template, header, left sidebar, right sidebar, halaman posting, lalu ke bagian footter. Cara membaca ini bila kita menggunakan template dengan sidebar kanan, maka ia langsung membaca dari header, right sidebar, halaman posting, lalu bagian footter. Berarti loadingnya sedikit cepat di banding kita menggunakan sidebar kanan atau sidebar kiri kanan. dapat difahami khan?

Namun banyak template yang mungkin di sukai dengan sidebar kanan tidak memiliki footter. Hal ini membuat kita sedikit repot untuk menempatkan atribut atau aksesoris blog, bisa jadi banyak memakan sidebar dan itu tentunya akan mengganggu sekali terhadap pandangan.Tapi jangan khawatir bro....ente dpat bikin widget di footter hanta dengan menambahkan Kode, dengan begitu anda sudah mempunyai footter yang siap menampung aksesoris blog anda. Bagaimana, anda tertarik....nih langkahnya sahabat

  • Silahkan login ke blog anda....ingat blog anda jangan blog tetangga ya.
  • Klik Tata Letak.
  • Pilih Edit HML.
  • Jangan di klik Expand Template Widget, karena nantinya akan membuat anda bingung.
  • Letakkan kode css berikut diatas kode ]]></b:skin>
/* --bottom --*/
#bottom{background:#fff; margin-top:10px auto; width:960px; overflow:hidden; font-size:12px; padding:10px}
#bottom h2{background:#000 url(http://lh5.ggpht.com/_7Y9pl24WpQY/Ss37F0ZA9kI/AAAAAAAAB2k/c_ySi8QZg20/header_thumb%5B2%5D.jpg) repeat-x; font-size:14pt; font-weight:400; text-align:center; font-style:normal; line-height:1.3em; color:#fff; padding:5px; margin-top:-10px; margin-left:-10px; margin-right:-10px}
#bottom ul{color:#333; margin:0; padding:0}
#bottom ul li{background:url(http://2.bp.blogspot.com/_7Y9pl24WpQY/SqkUYNZmPxI/AAAAAAAAA4U/se2boblD4-M/s320/b3.gif) no-repeat; list-style-type:none; border-bottom:1px dashed #CCC; margin:0 0 10px; padding:0 0 5px 20px}
#bottom ul li a:hover{margin:0px 0px 5px; padding:0px}
#bottomcenter{width:300px; float:left; margin-left:10px; background:#fff; padding:10px}
#bottomleft{width:280px; float:left; margin-left:10px; background:#fff; padding:10px}
#bottomright{width:280px; float:right; margin-left:10px; background:#fff; padding:10px}

  • Langkah selanjutnya cari kode </body>. Letakkan kode di bawah ini sebelum kode </body>

<b:section class='bottomleft' id='bottomleft' preferred='yes' showaddelement='yes'>
</b:section>
<b:section class='bottomcenter' id='bottomcenter' preferred='yes' showaddelement='yes'>
</b:section>
<b:section class='bottomright' id='bottomright' preferred='yes' showaddelement='yes'>

Simpan template dan lihat hasilnya.
Kalau cara ini belum berhasil, anda cari kode seperti di bawah ini.
<!-- end content-wrapper -->

    <div id='footer'>
<p>
Copyright &#169; <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>. All rights reserved.
<br/>Blogger template created by <a href='http://www.templatesblock.com/' target='_blank'>Templates Block</a><br/>
Wordpress theme by <a href='http://www.6x3print.info/' target='_blank'>Saroyama</a>
</p>
    </div>

  </div></div> <!-- end outer-wrapper -->
  • Cara pertama anda bisa meletakkannya sebelum kode berwarna biru. 
  • Cara kedua hapus semua kode berwarna merah lalu ganti dengan kode di atas tadi.

Sekarang anda sudah memiliki 3 widget di bagian footter secara horisontal. Ok....selamat mencoba dan Sukses Selalu.....yyyyyyuuuuuuuhhhhuuuuuuuuuuuuuuuuuuuu_________________



''keep spirits and do the best''
Mau belajar trick dan tips blogging lengkap dan mudah?... BACA DI SINI

About the Author

Blogonol adalah Blog - 0 atau blog kosong dengan konten tutorial blog, seo, widget, template gratis, dan blog info yang dikonsep secara sederhana untuk belajar membangun blog yang lebih baik.