Minggu, 22 April 2018

Cara Membuat Footer 3 Kolom Responsive Sederhana

Cara Membuat Footer 3 Kolom Responsive Sederhana

Cara Membuat Footer 3 Kolom Responsive Sederhana
Cara Membuat Footer 3 Kolom Responsive Sederhana
Blog Mang Otep | Cara Membuat Footer 3 Kolom Responsive yang Mudah dan Sederhana - Untuk kita para blogger pasti tidak asing lagi dengan nama " Widget Footer" di Blog , widget sendiri biasa kita atur melalui platform blogger pada bagian tata letak. Berbagai macam widget ini kita bisa buat sendiri untuk mempercantik tampilan blog kita.

Beberapa template blog yang ditawarkan memang sudah banyak yang memakai Footer 3 Kolom Responsive untuk bagian paling bawah, pada umumnya bagian widget footer ini berisi feed blog kita yang di susun dalam satu label, tidak jarang pula yang memakai footer ini untuk menambahkan widget yang tidak bisa kita pakai pada bagian sidebar.

Untuk template yang belum memakai Footer 3 Kolom Responsive ini bisa kalian buat sendiri dengan tutorial bagaimana cara membuatnya, selain itu kalian bisa membuat footer ini sesuai keinginan kalian dengan desain CSS dan HTML yang sederhana. Blog Mang Otep akan memberikan artikel bagaimana cara membuat widget footer tersebut.

Cara Membuat Footer 3 Kolom Responsive Sederhana :

1. Masuk ke dalam blogger.com
2. Kemudian masuk ke menu Template >> Edit HTML. Jangan lupa untuk backup Template untuk berjaga - jaga bila terjadi error.
3. Carilah kode ]]></b:skin> untuk mempermudah gunakan (Ctrl+F), jika sudah ketemu copy kode CSS dibawah ini dan letakkan diatas kode tersebut.

/* -- Footer 3 Coloum by Mang Otep 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 berikutnya adalah untuk memanggil dan menampilkan widget pada footer, copy kode dibawah ini dan letakkan 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. Sampai disini kalian sudah bisa memakai widget tersebut, untuk membuatnya responsive maka perlu tambahan kode dibawah ini. CSS media Screen ini di letakkan 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. Simpan Template dan Lihatlah karya kalian.
Untuk pengaturan kode CSS bisa kalian atur sedemikan rupa dengan mengganti kode warna dan juga tampilan yang di inginkan. Sekian tips Blogging dari Blog Mang Otep tentang Cara Membuat Footer 3 Kolom Responsive Sederhana, semoga bermanfaat untuk anda.

Jika anda menyukai artikel dari blog ini silahkan klik like, share, and subscribe untuk mendapatkan artikel terbaru yang disediakan di Blog Mang Otep. Terimakasih banyak sudah berkunjung dan Salam Blogger.

sumber gambar : https://broggerku.blogspot.com/2018/01/cara-membuat-footer-tiga-kolom-responsive-keren.html
Sumber artikel : google.com

Disana Gunung Disini Gunung, Ditengahnya Pulau Jawa
Kamu Bingung Infonya Nanggung, Mending Visit Blog Mang Otep Aja

Load comments