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 :)

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.

Blogger
Disqus
Pilih Sistem Komentar Yang Kamu Suka

No comments