Cara Membuat Widget Footer 3 Kolom di Blog

Cara Membuat Widget Footer 3 Kolom di Blog
Cara memasang menu widget footer 3 kolom di blog,-  Bagi anda sebagai pemilik sebuah blog pasti tahu apa yang dimaksud dengan widget, widget sendiri istilah pada struktur tata letak pada blog yang berplatform blogger. dengan widget ini kita dengan mudah menambah berbagai macam fitur template serta menambah kode HTML/Java Script pihak ketiga. letak penambahan widget pada suatu blog tergantung dari letak widget yang berada pada tata letak template yang digunakan.

Tak jarang pemilik blog yang ingin menambah widget pada bagian tertentu pada blognya mencari cara agar bisa membuat sebuah tempat widget seperti yang di inginkan. mungkin yang banyak dicari adalah memasang sebuah menu widget pada bagian footer. kebanyakan widget di bagian footer ini banyak dipakai oleh situs/blog bergaya magazine atau berita. nah oleh karena itu banyak blogger lain yang ingin sekali memasang widget di bagian footer blog mereka.

Cara Membuat Widget Footer 3 Kolom di Blog

Widget dibagian footer sendiri yang pasti tidak cuman satu melainkan ada beberapa sekaligus, seperti yang paling banyak 3 kolom hingga 4 kolom. Nah buat anda yang ingin sekali membuat widget di bagian footer dengan menu widget 3 kolom bisa mengikuti cara yang saya berikan dibawah ini, Berikut tutorialnya.

Cara Memasang Widget Footer 3 Kolom di Blog

1. Pertama silahkan masuk ke Blogger.

2. Kemudian masuk ke menu Template - Edit HTML

3. Setelah itu cari kode ]]></b:skin> untuk mempermudah gunakan (Ctrl+F), Jika sudah ketemu copy kode CSS dibawah ini lalu paste tepat diatas kode tersebut.

/* Footer 3 Coloum by Espada Blog
----------------------------------- */
#footer-wrapper{width:100%}
#footer-wrapper .left{float:left;width:34%}
#footer-wrapper .center{float:left;width:34%}
#footer-wrapper .right{float:right;width:32%}
#footer-wrapper{background:#242424;;background-repeat:repeat-x;background-position:top center;overflow:hidden;margin:0 auto;
padding:20px 15px 0;color:#dddddd;border-top:5px solid #07ACEC}
#footer-wrapper .left{float:left;width:34%}
#footer-wrapper .center{float:left;width:34%}
#footer-wrapper .right{float:right;width:32%}
#footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 15px 15px 0;clear:both}
#footer-wrapper .right .widget{margin:0 0 15px 0;clear:both}
#footer-wrapper h2{margin:0 0 10px 0;padding:0 0 5px;border-bottom:3px solid #555;text-transform:uppercase:none;position:relative;color:#eeeeee}
#footer-wrapper ul,#footer-wrapper ol{list-style:none;margin:0 0 0 0;padding:0 0 0 0}
#footer-wrapper li{margin:5px 0;padding:0 0 0 0}
#footer-wrapper a{color:#dddddd}
#footer-wrapper a:hover{color:#ffffff}
#footer-wrapper h2:before {content:"";position:absolute;left:0;width:180px;height:2px;
background:#07ACEC;bottom:-2px}

4. Langkah selanjutnya adalah memunculkan widget pada footer caranya silahkan copy kode dibawah ini dan paste tepat diatas kode <footer>

<!-- Footer Widget 3 Coloum Start-->
<footer id="footer-wrapper">
  <b:section class='left section' id='left' preferred='yes'>
    </b:section>
  <b:section class='center section' id='center' preferred='yes'>
    </b:section>
  <b:section class='right section' id='right' preferred='yes'>
    </b:section>
</footer>
<!-- Footer Widget 3 Coloum End -->

5. Sebenarnya pada proses ini footer 3 kolom sudah muncul dan siap digunakan, namun untuk lebih responsive serta pada tambilam mobile tidak berantakan silahkan tambahkan kode CSS Media Screen dibawah ini tepat diatas </style>.

@media screen and (max-width:768px){
#footer-wrapper .left{float:none;width:100%}
#footer-wrapper .center{float:none;width:100%}
#footer-wrapper .right{float:none;width:100%}
#footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 0 15px;clear:both}
}

6. Terakhir simpan template dan lihat hasilnya.

Dengan begitu anda sudah bisa memasang widget pada footer di tata letak dan lihat hasilnya, sekian tips blog yang dapat saya bagikan dan selamat mencoba.
Cara Membuat Widget Footer 3 Kolom di Blog

Tweet

Subscribe to receive free email updates: