Sekilas Isu Trik Menciptakan Widget Footer 3 Kolom Di Blog

Cara memasang sajian widget footer 3 kolom di blog,-  Bagi anda sebagai pemilik sebuah blog niscaya tahu apa yang dimaksud dengan widget, widget sendiri istilah pada struktur tata letak pada blog yang berplatform blogger. dengan widget ini kita dengan gampang menambah aneka macam macam fitur template serta menambah isyarat 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 penggalan tertentu pada blognya mencari cara semoga sanggup menciptakan sebuah daerah widget menyerupai yang di inginkan. mungkin yang banyak dicari ialah memasang sebuah sajian widget pada penggalan footer. kebanyakan widget di penggalan footer ini banyak digunakan oleh situs/blog bergaya magazine atau berita. nah oleh sebab itu banyak blogger lain yang ingin sekali memasang widget di penggalan footer blog mereka.

Widget dibagian footer sendiri yang niscaya tidak cuman satu melainkan ada beberapa sekaligus, menyerupai yang paling banyak 3 kolom sampai 4 kolom. Nah buat anda yang ingin sekali menciptakan widget di penggalan footer dengan sajian widget 3 kolom sanggup mengikuti cara yang aku berikan dibawah ini, Berikut tutorialnya.

Cara Memasang Widget Footer 3 Kolom di Blog

1. Pertama silahkan masuk ke Blogger.

2. Kemudian masuk ke sajian Template - Edit HTML

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

/* Footer 3 Coloum by
----------------------------------- */
#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 ialah memunculkan widget pada footer caranya silahkan copy isyarat dibawah ini dan paste sempurna diatas isyarat <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 acak-acakan silahkan tambahkan isyarat CSS Media Screen dibawah ini sempurna 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 sanggup memasang widget pada footer di tata letak dan lihat hasilnya, sekian tips blog yang sanggup aku bagikan dan selamat mencoba.