Memasang Flip In Page pada blogger

by on
Pernah aku membuat tampilan di blog aku ini menjadi Flip in ( seperti gambar di samping ), memang keren sih.... tapi sayangnya jika aku pakai flip in tersebut,
wiget I LOVE 7ruh kesayangan ku tertabrak (tumpang tindih) maka dari itu aku masih mendingan pasang wiget I LOVE 7ruh dari pada tampilan flip in itu,
langsung aja bagi kamu yang ingin membuat blog kamu jadi flip in seperti ini, akan aku kasih tau caranya. langsung ajah, ini caranya :

1. Login ke blogger >> Tata Letak >> Edit HTML >> Expand widget template


2. Cari kode
<b:skin><![CDATA[
dan letakkan kode berikut di atasnya:

<script src='http://7ruh.com/flip_in ' 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>

3. Lalu cari lagi kode
]]></b:skin>
Dan letakkan kode berikut tepat di atasnya:

#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpS6mLholGvX8NbC7OxRFX89kKNnqEXXcNJfliaVOXGy0U2XAh4thp9gVR1QZNiXB_Bzae0nkhnil7zQmSG8SJr2T9d3rZ_G8eu1PdEz-au7sh6TZf5rW3qQg-QWiXn04vqhJioohSFyE/s104/hbbvcvzxcbrengkol+pituruh.png) no-repeat right top;
text-indent: -9999px;
}

*Ganti link yang berwarna Ijo dengan Link gambar yang anda inginkan.

4. Cari kode
<body>
Dan lettakkan kode berikut di bawahnya:
<div id='pageflip'>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=tutorialbloggingdiblogger' target='_blank'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjJ-g-lZs6IFwJ5AhSGYLw1-L8B2I_G0HHs0LIMIbgFQBBqM8kpOM-tBYO1dCSHvgOo11PGGuVAyptlmJx-w3X5tdwnL-d-0zbTlM_dKcixGp5AQOyuj0_hWNnHMZd_sF2clcmd-uplm40/'/>
<span class='msg_block'/>
</a>
</div>


5. Simpan hasil kerjaan anda.

Semoga Bermanfaat...........
By on
Adbox