Cara Membuat 3 Kolom Blog di Footer
JejakSeru.com - Kali ini saya akan membuat tutorial cara membuat 3 kolom blog di footer, tutorial ini saya buat untuk melanjutkan tutorial sebelumnya yang berjudul Cara Membuat Subscribe Box Ala Jejak Seru. Saya berharap tutorial cara membuat 3 kolom di footer ini bisa membantu teman-teman yang ingin membuat tampilan blog lebih menarik dan tentunya elegan.
Untuk membuat 3 kolom pada footer blog tidaklah begitu sulit, namun yang perlu diperhatikan adalah bagaimana cara kita membuat 3 kolom tersebut bisa sesuai dengan tampilan milik blog kita. Saya sangat menyarankan aga sebelum mengikuti tutorial ini kamu backup template sebelumnya dan berdoa supaya dimudahkan jalannya hehehe :)
Langkah 2 : Masuk ke Menu Template > Edit HTML.
Langkah 3 : Cari kode
Langkah 4 : Munculkan kode widget dengan cara meletakan kode di bawah ini tepat di atas kode
Langkah 5 : Cari kode
Langkah 6 : Simpan dan lihat hasilnya.
Jika dirasa bermanfaat silahkan share/bagikan ke temen-temen terdekat kamu dan jangan lupa like fanspage facebook kami dan follow twitter kami agar selalu dapat informasi bermanfaat dari kami.
Untuk membuat 3 kolom pada footer blog tidaklah begitu sulit, namun yang perlu diperhatikan adalah bagaimana cara kita membuat 3 kolom tersebut bisa sesuai dengan tampilan milik blog kita. Saya sangat menyarankan aga sebelum mengikuti tutorial ini kamu backup template sebelumnya dan berdoa supaya dimudahkan jalannya hehehe :)
Cara Membuat 3 Kolom Pada Footer Blog
Langkah 1 : Untuk memulai tutorial ini silahkan masuk ke blogger terlebih dahulu.Langkah 2 : Masuk ke Menu Template > Edit HTML.
Langkah 3 : Cari kode
]]></b:skin> untuk memudahkan silahkan gunakan tombol CTRL+F. Jika sudah, letakan kode CSS di bawah tepat di atasnya.
/* Footer 3 Coloum
----------------------------------- */
#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}
Langkah 4 : Munculkan kode widget dengan cara meletakan kode di bawah ini tepat di atas 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 -->
Langkah 5 : Cari kode
</style> yang umum untuk template dan letakan kode di bawah ini tepat diatasnya.
@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}
}
Langkah 6 : Simpan dan lihat hasilnya.
Jika dirasa bermanfaat silahkan share/bagikan ke temen-temen terdekat kamu dan jangan lupa like fanspage facebook kami dan follow twitter kami agar selalu dapat informasi bermanfaat dari kami.