kali ini saya akan memberikan info tentangcara membuat page peel atau flip efek di blog.... tepatnya di pojok kanan atas blog...
Nah ini tips udah lama bgt... tapi msh sedikit yang tau..
Ok langsung aja
- Buka Dashboard
- Pilih Template
- Edit HTML
- Centang Expand Template Widget
- Cari kode </head>
- Setelah itu masukka kode berikut di atas kode </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/AVvXsEiJ8Tx6evc0Wu7UhDr7c2vVx6oymZlqUJn7Ze8YGSdGL6ttCJDP6TMQuEeIFXHo9G5vDFROaBu-ODsqIqrOrAVdNr7-V1PWvFnhq70SlGNq3UYoLmxuAj4ofKJIiOFqP8Tb_Y7uLZlnkKHt/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>
- Setelah itu cari kode <body>
- Masukkan kode ini dibawah kode <body>
<div id='pageflip'><a href='http://feeds2.feedburner.com/feedsobat'> <img alt =''src = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA33TTwe5HYd8UsA7n1vfFPnN_6BtkXQF18p9g4vFtfvlLIPz4SoCCfywkRvd6TeJQBGP4Mm7WXuaefIprSDxKlYBFUFYN_p327Bz6xySgp1Ilp41-w4XUdGecox-SWXItFddqRydporGu/s1600/page_flip png'/></. a><div class='msg_block'> </ div></ Div>
- Lalu simpan deh
No comments:
Post a Comment