Cara Mudah Membuat Footer 3 Kolom Dilengkapi Slide Show

loading...

Selamat datang di The Royal Moringa. Pada postingan kali ini saya akan membagikan informasi mengenai langkah-langkah untuk membuat footer widget 3 kolom dimana salah satu kolom merupakan slideshow widget. Kolom pertama nanti akan berisi widget slideshow dimana widget ini dapat menampilkan gambar-gambar yang bergerak yang anda sukai seperti kumpulan foto keluarga, objek wisata terkenal, kuliner, event-event, atau menampilkan promo produk-produk tertentu sesuai dengan tema blog anda. Sedangkan kolom kedua dan ketiga dapat diisi cuplikan artikel yang terdiri dari judul artikel dan gambar yang dilengkapi hyperlink. Berikut contoh tampilannya.

Jika anda tertarik ingin membuatnya, berikut langkah-langkahnya.

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

2. Cari kode "]]></b:skin>" > copy dan paste kode script css berikut tepat di atas kode "]]></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. Pada bagian body cari <!-- end content-wrapper --> yang menandai berakhirnya bagian postingan > copy dan paste kode script html berikut 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='true' title='Judul Slide Show' type='HTML' version='1'> <b:widget-settings> <b:widget-setting name='content'><style> .slide { max-height:400px; width:100%; padding:1em; margin:1em auto; display:table; } .slide img{ margin:0; width:320px; height:240px; } #slideshow1, #slideshow2, #slideshow3, #slideshow4 { background:transparent; } </style> <script type="text/javascript"> function startSlides(start, end, delay) { setTimeout(slideshow(start,start,end, delay), delay); } function slideshow(frame, start, end, delay) { return (function() { $('#slideshow' + frame).fadeOut(); if (frame == end) { frame = start; } else { frame += 1; } setTimeout(function(){$('#slideshow' + frame ).fadeIn();}, 850); setTimeout(slideshow(frame, start, end, delay), delay + 850); }) } // usage: startSlides(first frame, end frame, delay time); startSlides(1, 4, 5000); </script> <div class="slide"> <div id="slideshow1"> <img src="URL GAMBAR ANDA"/> </div> <div id="slideshow2" style="display: none"> <img src="URL GAMBAR ANDA"/> </div> <div id="slideshow3" style="display: none"> <img src="URL GAMBAR ANDA"/> </div> <div id="slideshow4" style="display: none"> <img src="URL GAMBAR ANDA"/> </div> </div> </b:widget-setting> </b:widget-settings> <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='Judul Footer 1' type='HTML' version='1'> <b:widget-settings> <b:widget-setting name='content'/> </b:widget-settings> <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='Judul Footer 2' type='HTML' version='1'> <b:widget-settings> <b:widget-setting name='content'/> </b:widget-settings> <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. Silakan anda ganti URL GAMBAR ANDA untuk gambar yang akan ditampilkan pada slideshow dan judul pada setiap kolom > Save Theme

5. Kembali ke dashboard > Pilih Layout > disana akan tampak footer widget 3 kolom yang baru saja anda tambahkan > Silakan anda edit kolom kedua dan ketiga sesuai dengan kebutuhan anda > Save

Satu hal lagi yang perlu saya sampaikan, untuk menambahkan hyperlink baik pada gambar maupun teks dapat dilakukan melalui menu Layout yaitu dengan menambahkan kode <a href="URL HALAMAN"><img src="URL GAMBAR ANDA"></a> untuk gambar dan <a href="URL HALAMAN"><p>HYPERLINK TEXT</p></a> untuk teks. Ukuran gambar pada kolom kedua dan ketiga usahakan sama agar tampilan tampak lebih rapi. Jika anda tidak ingin menggunakan widget HTML/JavaScript pada kolom kedua dan ketiga, anda bisa menghapusnya pada menu Layout dan diganti dengan widget yang anda inginkan. Terima kasih telah membaca!

loading...