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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3G1gEpAi_F0bOjk2Ux8r1MpIqSzdwX6oFKN1wDx7trKbMzwLxYjk_AP_nXhtvLKZ7JTCJqhIN6-td4xxNmZH3i1xaKCOjbX9HZQcvQx6dEuUiBqDOI5XR2mAkiKhY9xyJtnWed7XUgm1T/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 = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtQiGqPJHf2MMLet4Xu83wej5vxTidL610_5zUoLw46poLE2R52962yWZgZeRvtO9oqfAqXxuglLXiWDIy3vANc3Ql-UAsNHXx4nmuk3rbBQS5C-96HdsuFwBqi2tpWtHf-Br5RVw8Nbva/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