Menambahkan Widget 3 Kolom Responsive Di Template Emporio Blogger

pada tanggal

 

Widget 3 Kolom Footer
Tampilan Witged 3 Kolom Di Footer

Template Emporio blooger adalah salah satu template yang sangat mudah untuk digunakan oleh blogger pemula, disamping layout defaultnya saja sudah keren, konon lagi setelah dilakukan modifikasi di beberapa widget seperti Menambahkan Witged 3 Kolom Responsive di bagian footernya.

Gambar postingan di atas adalah hasil dari modifikasi (Edit HTML) di template emporio, yaitu dengan menambahkan kode CSS yang dirancang untuk menampilkan witged 3 kolom di bagian footer. Jika ada blogger yang sudah bisa melakukan modifikasi template emporio, seharusnya kamu juga bisa melakukannya.

Cara Menambahkan Witged 3 Koloom Di Bagian Footer  

Jika kamu tertarik untuk menambahkan witged 3 kolom dibagian footer blog kamu, silakan ikuti langkah-langkahnya sebagai Berikut:

  1. Login ke Blog Kamu,
  2. Di bagian dashboard, pilih Tema (Theme),
  3. Di bawah tulisan Custom (Diubah) ada tanda panah (segitiga) ke bawah, langsung di klik dan pilih: EDIT HTML,
  4. Cari Kode: ]]></b:skin>,
  5. Pastekan CSS di bawah ini sebelum kode: ]]></b:skin>
  6. Klik Simpan.

Kode CSS Witged 3 Kolom Di Bgaian Footer Template Emporio:

/* -- CSS Witged Footer 3 Coloum ---------------------------------------------------------- */
#footer-wrapper{width:97.5%}
#footer-wrapper .widget .title{
color: #0fffff; margin:0; text-align: center; padding: 0px 5px 10px 5px; border-bottom: 2px solid #000000; height: 30px;
}
#footer-wrapper .left{float:left;width:34%}
#footer-wrapper .center{float:left;width:34%}
#footer-wrapper .right{float:right;width:32%}
#footer-wrapper{background:#c5d1a6;;background-repeat:repeat-x;background-position:top center;overflow:hidden;margin:0 auto;
padding:20px 15px 0;color:#545454;border-top:4px solid #729c0B ;}
#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 #d2e89c;text-transform:uppercase:none;position:relative;color:#545454;}
#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:#0066ff;}
#footer-wrapper a:hover{color:#ff6600}
#footer-wrapper h2:before {content:"";position:absolute;left:0;width:180px;height:2px;
background:#0fffff;bottom:-2px; }
@media screen and (max-width:870px){
#footer-wrapper{width:90%}
#footer-wrapper .left{float:none;width:85%}
#footer-wrapper .center{float:none;width:80%}
#footer-wrapper .right{float:none;width:85%}
}
@media screen and (max-width:768px){
#footer-wrapper .left{float:none;width:95%}
#footer-wrapper .center{float:none;width:90%}
#footer-wrapper .right{float:none;width:95%}
#footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 0 15px;clear:both}

 

Keterangan :

  • Sebelum menambahkan CSS witged 3 kolom, cadangkan terlebih dahulu template kamu agar kamu bisa memulihkan ke tamplate awal jika proses yang kamu lakukan gagal.
  • Jika ada ukuran dan warna yang ingin disesuaikan, kamu masih bisa mengeditnya, atur saja menggunakan kode warna yang kamu sukai.

Kemudian pastekan kode pemanggil HTML berikut ini si 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 -->

Terakhir, klilk : SIMPAN

Demikian tips cara menambahkan witged 3 kolom di bagian footer template Emporio blogger ini kami bagikan, semoga tampilan blog kamu lebih keren dan ramai pengunjungnya.

NOTE: Diperbaharui tanggal 9/9/2025


Komentar

Posting Komentar