Cara Membuat Image Hover Widget 4 Kolom dengan 3D Flip Effect

loading...

Selamat datang di The Royal Moringa. Untuk kelanjutan dalam artikel sebelumnya, kali ini saya akan membahas bagaimana cara membuat image hover container 4 kolom dengan efek 3d flip. Prinsip pemasangan widget ini hampir sama seperti footer wrapper hanya saja pada widget ini akan diberikan efek animasi sehingga membuat tampilan menjadi lebih menarik. Masing-masing gambar bila disorot oleh pointer mouse maka akan memberikan efek animasi berupa gambar akan berputar 180° dan menampilkan teks keterangan mengenai gambar tersebut. Saat pointer mouse dijauhkan dari gambar maka gambar akan berputar kembali ke posisi semula. Nah, berikut ini adalah langkah-langkah menambahkan atau memasang widget image hover flip effect sebanyak 4 kolom di blog/website anda. Contoh tampilan gambarnya seperti ini.

1. Log in ke akun blog anda > Pada dashboard pilih Theme > Edit HTML > Copy dan paste kode script CSS berikut sebelum ]]></b:skin>

                                     *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .hrcontainer { width: 240px; height:240px; position: relative; -webkit-perspective: 800px; -moz-perspective: 800px; -o-perspective: 800px; perspective: 800px; } #box { width: 100%; height: 100%; -webkit-transition: -webkit-transform 1s; -moz-transition: -moz-transform 1s; -o-transition: -o-transform 1s; transition: transform 1s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .hrcontainer:hover #box { -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); transform: rotateY( 180deg ); } #box figure { width: 240px; height:240px; background-color:#009966; display: block; line-height: 18px; text-align: justify; font-weight: normal; font-size: 12px; position: absolute; color:#fff; font-family:Palatino Linotype; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } #box .back { -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); transform: rotateY( 180deg ); } #marginresponsive{ width:1140px; margin:auto; } #image-hover-container{ float:left } #hover-widgets{ background:transparent; padding:20px 0 0; } .hover-widget-box{ width:280px; float:left; margin-right:0.15em; margin-left:0.15em; } #hover-widgets .hover-container{ padding: 0 } #hover-widgets .widget ul{ list-style:none; margin:0; padding:0; } #hover-widgets .widget ul li{ padding:0 0 6px; margin:0 0 6px; } .hoversec{ } @media only screen (max-width:768px){ #marginresponsive{ width:480px; margin:auto; } .hover-widget-box { width: 210px; float: left; padding: 10px; margin: 0 0.2em 0 0.2em; } #image-hover-container{ float:left; width:480px; } } @media only screen (max-width:480px){ #marginresponsive{ width:250px; margin:auto; } .hover-widget-box { width: 230px; float: left; padding: 10px; } #image-hover-container{ float:left; width:250px; } }

2. Kemudian menuju bagian body dan carilah posisi dimana anda akan meletakkan widget ini apakah sebelum footer, sebelum new post, setelah slide show, dan lain sebagainya. Setelah itu copy dan paste kode script HTML berikut sesuai posisi yang telah anda tentukan tadi. Misal diletakkan sebelum footer maka pastekan kode tersebut sebelum atau di atas <div id="footer"> (nama id widget berbeda setiap template)

                                    <div id="marginresponsive"> <div style='clear'/> <div id='image-hover-container'> <div class='clearfix' id='hover-widgets'> <div class='hover-widget-box'> <ul class='hover-container'> <li style="list-style:none"> <b:section class='hoversec' id='hoversec1' showaddelement='yes'> <b:widget id='HTML15' locked='false' title='Judul 1' type='HTML'> <b:includable id='main'> <div class='widget-content'> <div class="hrcontainer"> <div id="box"> <figure class="front"><img src="URL GAMBAR ANDA"/></figure> <figure class="back"><h3 style="margin:3px"> TEKS ANDA DITULIS DISINI</h3> </figure> </div> </div> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget> </b:section> </li> </ul> </div> <div class='hover-widget-box'> <ul class='hover-container'> <li style="list-style:none"> <b:section class='hoversec' id='hoversec2' showaddelement='yes'> <b:widget id='HTML16' locked='false' title='Judul 2' type='HTML'> <b:includable id='main'> <div class='widget-content'> <div class="hrcontainer"> <div id="box"> <figure class="front"><img src="URL GAMBAR ANDA"/></figure> <figure class="back"><h3 style="margin:3px"> TEKS ANDA DITULIS DISINI</h3> </figure> </div> </div> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget> </b:section> </li> </ul> </div> <div class='hover-widget-box'> <ul class='hover-container'> <li style="list-style:none"> <b:section class='hoversec' id='hoversec3' showaddelement='yes'> <b:widget id='HTML17' locked='false' title='Judul 3' type='HTML'> <b:includable id='main'> <div class='widget-content'> <div class="hrcontainer"> <div id="box"> <figure class="front"><img src="URL GAMBAR ANDA"/></figure> <figure class="back"><h3 style="margin:3px"> TEKS ANDA DITULIS DISINI</h3> </figure> </div> </div> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget> </b:section> </li> </ul> </div> <div class='hover-widget-box'> <ul class='hover-container'> <li style="list-style:none"> <b:section class='hoversec' id='hoversec4' showaddelement='yes'> <b:widget id='HTML18' locked='false' title='Judul 4' type='HTML'> <b:includable id='main'> <div class='widget-content'> <div class="hrcontainer"> <div id="box"> <figure class="front"><img src="URL GAMBAR ANDA"/></figure> <figure class="back"><h3 style="margin:3px"> TEKS ANDA DITULIS DISINI</h3> </figure> </div> </div> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget> </b:section> </li> </ul> </div> </div> </div> </div>  

3. Ganti URL GAMBAR ANDA dan juga TEKS KETERANGAN sesuai dengan kebutuhan anda > Save Theme

Setelah memasang widget image hover ini anda dapat melakukan pengeditan melalui menu Layout baik untuk menambahkan teks maupun mengganti gambar dan judul widget. Pada kode script di atas pengaturan pada masing-masing gambar di setiap kolom dibuat berukuran persegi yaitu 240x240. Anda diperbolehkan untuk mengganti ukuran gambar (pastikan semua gambar berukuran sama) disertai dengan penyesuaian pada kode CSS yang ada karena pengubahan ukuran gambar dapat mengubah ukuran bagian belakang widget yang berisi teks keterangan.

Permasalahan yang mungkin muncul pada pemasangan widget ini adalah 'b:widget id should be unique' yang berarti nomor HTML tersebut telah anda gunakan sebelumnya jadi ganti dengan nomor lain seperti HTML76, HTML82, dll. Yang kedua widget footer anda mungkin tidak berada pada tempat yang semestinya (bergeser di sebelah widget image hover 4 kolom), solusinya adalah berikan height pada #marginresponsive disesuaikan ukuran gambar anda. 

Jika anda masih bingung dengan cara membuat image hover 4 kolom kali ini, silakan anda baca artikel kami mengenai dasar dalam pembuatan image hover 3d flip effect disini. Terima kasih telah membaca!

loading...