Firstly, backup your template, because we will make many changes!
1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Check Expand Widget Templates
4. Then find this code : <b:skin><![CDATA
5. Copy the code below, and paste above <b:skin><![CDATA
<script src='http://sites.google.com/site/software2iqbalinc/javascript/script_ditunjuk
_ngelipet_t4belajarblogger.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#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>
_ngelipet_t4belajarblogger.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#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>
6. Find another code : ]]></b:skin>
7. Copy the code below, and paste above ]]></b:skin>
8. Spirit! This is the last! Find this code : <body>
9. After that, copy the code below and paste under <body>
*The blue text is the image of the paper
10. Then? Finish.. You can save now
7. Copy the code below, and paste above ]]></b:skin>
#pageflip {
position: relative;
}
#pageflip img {
border: none;
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(http://i164.photobucket.com/albums/u6/CeLiNe77/facebook
_Icon250.png)
no-repeat right top;
text-indent: -9999px;
}
*The green text is the image that will appearposition: relative;
}
#pageflip img {
border: none;
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(http://i164.photobucket.com/albums/u6/CeLiNe77/facebook
_Icon250.png)
no-repeat right top;
text-indent: -9999px;
}
8. Spirit! This is the last! Find this code : <body>
9. After that, copy the code below and paste under <body>
<div id='pageflip'>
<a href='http://facebook.com' target='_blank'>
<img alt='' src='http://experiencecomfortshopping.com/media/images
/sc-page-peel.png'/>
<span class='msg_block'/>
</a>
</div>
*The red text is the website that want open<a href='http://facebook.com' target='_blank'>
<img alt='' src='http://experiencecomfortshopping.com/media/images
/sc-page-peel.png'/>
<span class='msg_block'/>
</a>
</div>
*The blue text is the image of the paper
10. Then? Finish.. You can save now
0 comments:
Post a Comment