Home CSS Cara Membuat Widget Footer 3 Kolom di Blog

Cara Membuat Widget Footer 3 Kolom di Blog

by Erzed

Cara memasang menu widget footer 3 kolom di blog,-  Bagi anda sebagai pemilik sebuah blog pasti tahu apa yang dimaksud dengan widget, widget sendiri istilah pada struktur tata letak pada blog yang berplatform blogger. dengan widget ini kita dengan mudah menambah bermacam macam fitur template serta menambah kode 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 bagian tertentu pada blognya mencari cara agar dapat menciptakan sebuah tempat widget seperti yang di inginkan. cukup yang kaya dicari merupakan memasang sebuah menu widget pada bagian footer. kekayaan widget di bagian footer ini kaya dipakai oleh situs/blog bergaya magazine atau berita. nah oleh sebab itu kaya blogger lain yang ingin sekali memasang widget di bagian footer blog mereka.

Cara Membuat Widget Footer 3 Kolom di Blog 5

Widget dibagian footer sendiri yang pasti tak hanyan satu melainkan ada sedikit sekaligus, seperti yang paling kaya 3 kolom sampai kemudian 4 kolom. Nah buat anda yang ingin sekali menciptakan widget di bagian footer dengan menu widget 3 kolom dapat mengikuti cara yang admin berikan dibawah ini, Berikut tutorialnya.

Cara Memasang Widget Footer 3 Kolom di Blog

1. Pertama silahkan masuk ke Blogger.

2. Kemudian masuk ke menu Template – Edit HTML

3. Setelah itu cari kode ]]></b:skin> untuk mempermudah gunakan (Ctrl+F), Jika sudah ketemu copy kode CSS dibawah ini lalu paste tepat diatas kode 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 merupakan memunculkan widget pada footer caranya silahkan copy kode dibawah ini dan paste tepat 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. Sebenarnya pada proses ini footer 3 kolom sudah muncul dan siap digunakan, namun untuk lebih responsive serta pada tambilam mobile tak berantakan silahkan tambahkan kode CSS Media Screen dibawah ini 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. Terakhir simpan template dan lihat hasilnya.

Baca :  Cara Mengecek Kecepatan Loading Template Blog

Dengan begitu anda sudah dapat memasang widget pada footer di tata letak dan lihat hasilnya, sekian tips blog yang dapat admin bagikan dan selamat mencoba.

You may also like