Pada Postingan Ini kita akan belajar unutk menambah animasi pada sebuah box widged di blog anda banyak sekali animasi animasi yang ditawarkan oleh blog untuk lebih memperindah tampilan blog kita tetapi pada tutorial ini kita cukup menyelimuti widged kita dengan sebuah box indah dengan animasi wanrna yang brubah rubah secara otomatis nah sebagai contohnya disini saya akan membuatmenerapkanya pada widged Recent_Coment seperti yang terlihat diatas.....
untuk lebih jelasnya silahkan agan simak langkah langkah penerapannya dibawah ini....
Masuk blog anda
pilih menu template/edit html
kemudian carilah kode ]]></b:skin> gunakan ctrl + f untuk memudahlkan langkah anda
jika sudah ketemu letakan kode dibawah ini tepat diatas tag ]]></b:skin>
.bgboxgandaluar {
margin: 20px auto;
padding: 5px;
width: 350px;
border: 2px solid #999;
border-radius: 10x;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-transition: all 1.5s ease-in;
-moz-transition: all 1.5s ease-in;
-webkit-transition: all 1.5s ease-in;
background: #888;
opacity: 0.6;
filter: alpha(opacity=60); /* for IE */
}
.bgboxgandaluar:hover {
box-shadow: 1px 1px 18px #000;
-moz-box-shadow: 1px 1px 18px #000;
-webkit-box-shadow: 1px 1px 18px #000;
background: red url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgFadeBlackV411H1.gif) bottom left repeat;
border: 2px solid #43b1fd;
opacity: 1.0;
filter: alpha(opacity=100); /* for IE */
}
.bgboxgandadalam {
background: #111;
border: 1px solid #666;
padding: 15px 10px;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
-o-transition: all 2.5s ease-in-out;
-moz-transition: all 2.5s ease-in-out;
-webkit-transition: all 2.5s ease-in-out;
color: #eee;
}
.bgboxgandadalam:hover {
background: #000099 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgGradRedBlackH1V300.gif) top left repeat;
border: 1px solid #777;
border-radius: 30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
box-shadow: 1px 1px 8px #fff;
-moz-box-shadow: 1px 1px 8px #fff;
-webkit-box-shadow: 1px 1px 8px #fff;
}
Silahkan Sesuaikan Ukuran Boxnya Dengan mengganti kode yang berwarna merah diatas
Setelah itu simpan tempalate anda..
Nah untuk menerapkan efek tersebut tentulah membutuhkan sebuah kode pemanggil
silahkan letakan kode pemanggil dibawah ini pada widged yang ingin diberi efek animasi..
<div class="bgboxgandaluar">
<div class="bgboxgandadalam">
Letakan kode yang ingin diberi efek disini !
</div>
</div>
Saya kira penjelasan tentang Box Animasinya sudah cukup jelas tinggal digunakan saja gan...
selamat mencoba box animasinya semoga bermanfaat untuk kita semua....
