4 Langkah Mudah Membuat Footer Gambar 4 Kolom

loading...

Selamat datang di The Royal Moringa. Pada kesempatan kali ini, saya akan berbagi informasi dengan anda mengenai cara membuat footer gambar 4 kolom setelah sebelumnya saya membahas cara membuat footer widget 3 kolom. Footer gambar ini nantinya akan terletak di bagian bawah halaman blog anda. Footer gambar ini berfungsi untuk menginformasikan pembaca mengenai informasi terbaru atau terpopuler di blog anda dalam bentuk gambar saja tanpa disertai judul ataupun teks hyperlink yang berada di depan gambar. Selain itu, anda juga bisa menggunakan footer gambar untuk mempromosikan suatu barang atau dapat dijadikan tempat iklan. Jika anda sering mengunjungi situs penjualan tiket pesawat, hotel, maupun travel tertentu pasti anda akan menjumpai promo dalam bentuk gambar semacam ini. Berikut adalah beberapa tahapan untuk membuat footer gambar 4 kolom.

1. Log in ke akun blog anda > Pada dashboard pilih menu Theme

2. Pada menu Theme pilih Edit HTML > Cari kode "]]></b:skin>" > Copy dan paste kode CSS berikut tepat diatas "]]></b:skin>"

                                        #footer-widgets-container{ } #footer-widgets{ background:#fbf9f4; padding:20px 0 0; border-top:3px solid #ede8dd } .footer-widget-box{ width:280px; float:left; margin-right:5px } .footer-widget-box-last{ } #footer-widgets .widget-container{ color:#111010; border: none; padding: 0; background: none; } #footer-widgets .widget-container a{ color:#111010; text-decoration:none } #footer-widgets .widget-container a:hover{ color:#f49f09; text-decoration:none } #footer-widgets .widget ul{ list-style-type:none; list-style:none; margin:0px; padding:0px; } #footer-widgets .widget ul li{ padding:0 0 6px; margin:0 0 6px; } .footersec { } .footersec .widget{ margin:0 0 15px 0; padding:0; color:#111010; font-size:13px; } .footersec ul{ } .footersec ul li{ } @media only screen (max-width:768px){ .footer-widget-box { width: 100%; float: none; padding: 10px; margin: 0px; } #footer { height:auto; } } #marginrv{ width:1135px; margin:auto }

3. Setelah itu cari <!-- end content-wrapper -->, biasanya terletak di bagian bawah setelah postingan > Copy dan paste kode HTML berikut tepat di bawah tag tersebut

                                        <div id="marginrv"> <div class='clear'/> <div id='footer-widgets-container'> <div class='clearfix' id='footer-widgets'> <div class='footer-widget-box'> <ul class='widget-container'> <li style="list-style:none"> <b:section class='footersec' id='footersec1' showaddelement='yes'> <b:widget id='HTML51' locked='false' title='Footer Section 1 Title' type='HTML'> <b:includable id='main'> <div class='widget-content'> <img src="URL GAMBAR ANDA" width="280px" height="400px"> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget> </b:section> </li> </ul> </div> <div class='footer-widget-box'> <ul class='widget-container'> <li style="list-style:none"> <b:section class='footersec' id='footersec2' showaddelement='yes'> <b:widget id='HTML52' locked='false' title='Footer Section 2 Title' type='HTML'> <b:includable id='main'> <div class='widget-content'> <img src="URL GAMBAR ANDA" width="280px" height="400px"> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget> </b:section> </li> </ul> </div> <div class='footer-widget-box'> <ul class='widget-container'> <li style="list-style:none"> <b:section class='footersec' id='footersec3' showaddelement='yes'> <b:widget id='HTML53' locked='false' title='Footer Section 3 Title' type='HTML'> <b:includable id='main'> <div class='widget-content'> <img src="URL GAMBAR ANDA" width="280px" height="400px"> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget> </b:section> </li> </ul> </div> <div class='footer-widget-box'> <ul class='widget-container'> <li style="list-style:none"> <b:section class='footersec' id='footersec3' showaddelement='yes'> <b:widget id='HTML54' locked='false' title='Footer Section 4 Title' type='HTML'> <b:includable id='main'> <div class='widget-content'> <img src="URL GAMBAR ANDA" width="280px" height="400px"> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget> </b:section> </li> </ul> </div> </div> </div> </div>

4. Jangan lupa mengisikan URL GAMBAR ANDA  & mengganti judul masing-masing section > Save Theme

Untuk memperoleh hasil gambar yang optimal, disarankan anda menggunakan gambar berukuran 280x400. Jika anda menggunakan gambar yang berukuran lebar lebih dari 280px maka otomatis 4 gambar tersebut tidak bisa berada dalam satu baris yang sama seperti pada contoh. Sedangkan untuk tingginya tidak menjadi masalah. Demikian tutorial untuk membuat footer gambar 4 kolom di website. Jika ada yang belum jelas boleh ditanyakan. Selamat mencoba!

loading...