Langkah Mudah Membuat Footer Widget 3 Kolom

loading...

Selamat datang di The Royal Moringa. Pada kesempatan kali ini, saya akan berbagi informasi dengan anda mengenai cara membuat footer widget. Footer widget merupakan sebuah widget blog yang terletak di bagian bawah halaman blog anda. Widget ini berfungsi untuk membantu pembaca untuk menuju halaman maupun postingan di blog anda. Berikut adalah beberapa tahapan untuk membuat footer widget 3 kolom.

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

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:380px; float:left; margin-left:45px } .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 h2{ border-bottom:3px solid #f49f09; margin:0 0 10px; padding:10px 0 6px 2px; color:#555758; font-size:16px; line-height:16px; font-family:'Lucida Sans',sans-serif; font-weight:normal; text-decoration:none; text-transform:uppercase; } #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; } }

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 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' visible='true'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <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> </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' visible='true'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <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> </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' visible='true'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <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> </li> </ul> </div> </div> </div>

4. Anda bisa mengganti warna tampilan dan font tulisan pada widget ini sesuai dengan selera > Save Theme

Selamat, hari ini anda telah belajar mengenai langkah mudah membuat menu footer pada blog. Untuk mengedit HTML pada widget, anda tidak perlu kembali ke menu edit HTML tetapi widget ini dapat diedit melalui menu Layout pada dashboard blog anda. Terima kasih telah membaca!

loading...