Apakah sobat tau apa itu efek flip ? Sebenarnya ini adalah mainan lama, yah... sapatau masih ada yang membutuhkan, tak apa lah ya...Sobat mungkin telah banyak melihat dalam blog-blog lainnya hal yang seperti itu, dan tentunya dengan berbagai macam variasi yang berbeda-beda mungkin. pada hari ini kita akan belajar bagaimana cara membuat efek flip tersebut dengan sedikit menggunakan CSS dan Javascript...
Langkah - langkah untuk membuat efek flip pada blog
# Langkah 1 : login kedalam akun blogger sobat, arahkan ke Rancangan - Edit HTML
# Langkah 2 : Salin kode dibawah ini dan sisipkan sebelum tag </head>
<style type="text/css">img { behavior: url(iepngfix.htc) }#pageflip {position: relative;right: 0; top: 0;float: right;}#pageflip img {width: 50px; height: 52px;z-index: 99;position: absolute;right: 0; top: 0;-ms-interpolation-mode: bicubic;}#pageflip .msg_block {width: 50px; height: 50px;overflow: hidden;position: absolute;right: 0; top: 0;background: url(http://1.bp.blogspot.com/_1fRuBdlSpLw/TJUuu2naWxI/AAAAAAAAApQ/BjywNdEAEXg/S1600-R/Bogger+How+To+Tips.png) no-repeat right top;}</style><script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"/><script type='text/javascript'>$(document).ready(function(){//Page Flip on hover$("#pageflip").hover(function() {$("#pageflip img , .msg_block").stop().animate({width: '307px',height: '319px'}, 500);} , function() {$("#pageflip img").stop().animate({width: '50px',height: '52px'}, 220);$(".msg_block").stop().animate({width: '50px',height: '50px'}, 200);});});</script>Catatan : sobat dapat mengubah url gambar sesuai keinginan
# Langkah 3 : Copas kode dibawah ini dan tempatkan tepat setelah tag <body>
<div id='pageflip'><a href='http://feeds2.feedburner.com/feedsobat'> <img alt =''src = 'http://2.bp.blogspot.com/_1fRuBdlSpLw/TJcc3k62mWI/AAAAAAAAAps/uSj6nCe_CB4/s1600/page_flip png'/></. a><div class='msg_block'> </ div></ Div>Catatan : ganti yang berwarna merah dengan alamat feed sobat.
# Langkah 4 : Simpan template
dan sekarang lihat hasilnya...
Selamat mencoba :D
{ 0 komentar... Views All / Send Comment! }
Posting Komentar