Cara menempatkan sajian widget footer 3 kolom di blog,- Bagi anda sebagai pemilik sebuah blog niscaya tahu apa yg dimaksud dengan widget, widget sendiri istilah pada struktur tata letak pada blog yg berplatform blogger. dengan widget ini kita dengan gampang menambah banyak sekali macam fitur template serta menambah arahan HTML/Java Script pihak ketiga. letak penambahan widget pada suatu blog tergantung dari letak widget yg berada pada tata letak template yg digunakan.
Tak jarang pemilik blog yg ingin menambah widget pada bab tertentu pada blognya mencari cara biar sanggup menciptakan sebuah daerah widget menyerupai yg di inginkan. mungkin yg banyak dicari ialah menempatkan sebuah sajian widget pada bab footer. kebanyakan widget di bab footer ini banyak digunakan oleh situs/blog bergaya magazine atau berita. nah oleh alasannya ialah itu banyak blogger lain yg ingin sekali menempatkan widget di bab footer blog mereka.
Widget disektor footer sendiri yg niscaya tidak cuman satu melainkan ada beberapa sekaligus, menyerupai yg paling banyak 3 kolom sampai 4 kolom. Nah buat anda yg ingin sekali menciptakan widget di bab footer dengan sajian widget 3 kolom sanggup mengikuti cara yg 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 arahan CSS dibawah ini kemudian paste sempurna diatas arahan 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 arahan dibawah ini serta paste sempurna diatas arahan <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 serta siap digunakan, namun untuk lebih responsive serta pada tambilam mobile tidak awut-awutan silahkan tambahkan arahan 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 serta lihat hasilnya.
Dengan begitu anda sudah sanggup menempatkan widget pada footer di tata letak serta lihat hasilnya, sekian tips blog yg sanggup aku bagikan serta selamat mencoba.