Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / CSS / Design Web / HTML

Cara Membuat 4 Kolom Menu Footer di Blogger

Oleh Temabanua Posting Komentar
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

Posting Komentar untuk "Cara Membuat 4 Kolom Menu Footer di Blogger"

Kami memiliki kebijakan dalam berkomentar di Blog ini :

— Dilarang promosi suatu barang
— Dilarang jika memasang link aktif di komentar
— Dilarang keras melakukan promosi iklan
— Dilarang menulis komentar yang berisi sara, bully atau cemuhan

NB :Komentar yang melanggar tidak akan ditampilkan

Kebijakan komentar yang bisa Anda temukan selengkapnya disini

Dukungan :

Jika menyukai dengan artikel blog kami, silahkan Ikuti blog ini