Dapatkan diskon: Template 50% hanya bulan ini! Beli sekarang! Harga diskon Template: 50% hanya bulan ini!

Cara Membuat 4 Kolom Menu Footer di Blogger

Cara Membuat 4 Kolom Menu Footer di Blogger Images @rian_seo
Cara Membuat 4 Kolom Menu Footer di Blogger

Mas bagaimana sih membuat 4 kolom footer seperti template yang mas gunakan ini? pertanyaan ini sering saya dapatkan lewat email, kususnya bagi blogger pendatang yang baru saja belajar membuat blog dan ingin menghias template mereka menjadi lebih keren.

Dalam halaman ini, kami akan membagikan trik tersebut untuk kamu yang ingin membuat 4 kolom wigdet yang berada dibagian bawah footer dan pastinya langkah ini hanya berlaku bagi pengguna blogspot saja ya.

Baca juga: Cara Membuat Posisi Gambar Pertama di Blog berada di atas Judul

Membuat 4 Kolom Footer Template


Tidak banyak yang akan kami jelaskan, kamu hanya perlu melakukan sedikit penyalinan kode HTML dan CSS yang akan kami sediakan dibawah ini.

Buka Blogger

Pilih Tema > Edit HTML

Kode HTML 4 Kolom Footer Blog

<aside id='widget-footer-container'>
<div id='widget-footer-wrapper'>
<b:section class='widget-footer' id='widget-footer1' preferred='yes'>
<b:widget id='HTML1' locked='false' title='Belanja' type='HTML'>
<b:widget-settings>
<b:widget-setting name='content'>&lt;ul&gt;
&lt;li&gt;&lt;a href=&#39;https://jdwordt.blogspot.com/p/cara-belanaj.html&#39; title=&#39;cara beli hijab&#39;&gt;Cara Belanja&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;#&#39;&gt;Program Pembayaran&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;#&#39;&gt;Pengembalian Dana&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;https://jdwordt.blogspot.com/p/gallery-hijab.html&#39; title=&#39;Gallery Hijab Murah&#39;&gt;Gallery Hijab&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;#&#39;&gt;Konfirmasi Transfer&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;#&#39;&gt;Cara Berjualan&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;#&#39;&gt;Daftar Official Store&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
<b:section class='widget-footer' id='widget-footer2' preferred='yes'>
<b:widget id='HTML2' locked='false' title='Layanan' type='HTML'>
<b:widget-settings>
<b:widget-setting name='content'>&lt;ul&gt;
&lt;li&gt;&lt;a href=&#39;#&#39;&gt;Status Order&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;https://jdwordt.blogspot.com/search/label/Artikel&#39;&gt;Tutorial Hijab&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;#&#39;&gt;Payment Methods&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;#&#39;&gt;Report Abuse&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;#&#39;&gt;Konfirmasi Transfer&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;#&#39;&gt;Cara Berjualan&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;#&#39;&gt;Pengembalian Ongkir&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
<b:section class='widget-footer' id='widget-footer3' preferred='yes'>
<b:widget id='HTML3' locked='false' title='Brand Top' type='HTML'>
<b:widget-settings>
<b:widget-setting name='content'>&lt;ul&gt;
&lt;li&gt;&lt;a href=&#39;#&#39;&gt;Adidas&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;#&#39;&gt;Alexabdre Chistie&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;#&#39;&gt;Billabong&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;#&#39;&gt;Persyaratan &amp; Ketentuan&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;#&#39;&gt;Alba&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;#&#39;&gt;Carvil&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;#&#39;&gt;Eyescream&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
<b:section class='widget-footer' id='widget-footer4' preferred='yes'>
<b:widget id='HTML13' locked='false' title='Tentang Kami' type='HTML'>
<b:widget-settings>
<b:widget-setting name='content'>&lt;ul&gt;
&lt;li&gt;&lt;a href=&#39;#&#39;&gt;About Us&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;#&#39;&gt;Affiliate Program&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;#&#39;&gt;Promosikan Brand&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;#&#39;&gt;Persyaratan &amp; Ketentuan&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;#&#39;&gt;Kebijakan Privasi&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;#&#39;&gt;Karir Kerja&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;#&#39;&gt;Our Technology&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;https://www.blogger.com/follow.g?blogID=5880249218780566273&#39;&gt;Blog&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>
</aside>
<div class='clear'/>
Letakan kode HTML diatas tepat di bawah kode <div id='footer-wrapper'>

Selanjutnya salin lagi kode CSS dibawah ini.
/* FOOTER WIDGET */
#widget-footer-container {
 background: #1a1a1a; /* WARNA LATAR MENU */ 
 padding: 0 30px;
 overflow: hidden;
 line-height: 1.6em;
}
#widget-footer-wrapper {
 margin: 0 auto;
 max-width: 1000px; /* LEBAR AREA MENU FOOTER */
 color: #fff;
}
#widget-footer-wrapper .widget {
 margin:70px 0;
}
#widget-footer-wrapper .widget a {
 color: rgba(255,255,255,.6); /* WARNA LINK FOOTER */
}
#widget-footer-wrapper .widget a:hover {
 color: #fff;
    text-decoration: underline;
}
#widget-footer-wrapper .widget ul, #widget-footer-wrapper .widget ol {
 list-style: none;
 margin: 0 0;
}
#widget-footer-wrapper .widget ul li:before, #widget-footer-wrapper .widget ol li:before {
    display:none;
}
#widget-footer-wrapper .widget ul li, #widget-footer-wrapper .widget ol li {
 font-size: 13px;
    font-weight: 300;
    border: 0;
 margin: 0.8em 0;
}
#widget-footer-wrapper h2 {
 font-size: 16px;
 font-weight: 500;
 text-transform: uppercase;
 margin-bottom: 30px;
}
#widget-footer1 {
 width: 26%; /* LEBAR KOLOM WIGDET 1 */
    float: left;
    padding-right: 20px;
    box-sizing: border-box;
}
#widget-footer2 {
 width: 26%; /* LEBAR KOLOM WIGDET 2 */
 float: left;
}
#widget-footer3 {
 width: 26%; /* LEBAR KOLOM WIGDET 3 */
 float: left;
 box-sizing: border-box;
}
#widget-footer4 {
    width: 22%; /* LEBAR KOLOM WIGDET 4 */
    float: right;
    padding-left: 35px;
    box-sizing: border-box;
}
#widget-footer-wrapper .list-label-widget-content ul li {
float:none;
line-height: 30px;
margin: 0;
width: 100%;
}
.list-label-widget-content ul li span {
float:right;
}
 Klik " SIMPAN "

Akhir Kata

Demikian informasi yang dapat kami sampaikan masalah pembuatan 4 kolom footer yang bisa kamu lakukan di template blogspot, Jika ada pertanyaan atau juga eror, harap laporkan lewat kolom komentar
Bagaimana reaksi Anda tentang artikel ini?
Previous article
Next article

Komentar (0)

Post a Comment

Kami memiliki kebijakan dalam berkomentar di blog ini :

- Dilarang promosi suatu barang
- Dilarang memasang link aktif di komentar
- Dilarang promosi iklan yang berbau judi, pornografi dan kekerasan
- Dilarang menulis komentar yang berisi sara atau cemuhan

Kebijakan komentar yang bisa Anda temukan selengkapnya disini

Dukungan :

Jika menyukai dengan artikel blog kami, silahkan subscribe blog ini

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Subscribe now

Signup now to my exclusive newsletter