Rabu, 13 Juli 2011

Cara Membuat Halaman Blog Melipat

Trik blogger kali ini share tentang cara membuat halaman blog melipat,dan uniknya bila kursor mouse berada dipojok halaman maka halaman tersebut akan melipat seperti contoh pada blog ini.

Pada Lipatan halaman ini bisa dipasang RSS FEED atau apa saja yang sobat ingin pasang di dalam lipatan ini.

Untuk membuat halaman blog seperti ini caranya sangat mudah, sobat penasaran mau membuatnya?

Mari ikuti langkah2 berikut:



1.     Login ke blogger >> Design >> Edit HTML >> Expand widget template


2.     Cari kode <b:skin><![CDATA[


Dan letakkan kode berikut di atasnya:



<script src='http://trikblogger.googlecode.com/files/script_lipat_halaman_trikblogger.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>


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(http://lh5.ggpht.com/_RVpTV2JOOxA/S8iu18jZiCI/AAAAAAAACyo/e0oaiHtbMf0/berlangganan_kelipat.png) no-repeat right top;
text-indent: -9999px;
}

4.     Cari kode <body>

Dan letakkan kode berikut di bawahnya:



<div id='pageflip'>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=TrikBlogger' target='_blank'>
<img alt='' src='http://lh3.ggpht.com/_RVpTV2JOOxA/S8iu2CHC7SI/AAAAAAAACys/nYe088a8tkc/gambar_kelipat.png'/>
<span class='msg_block'/>
</a>
</div>


Catatan ganti kode yang berwarna
merah dengan Link yang anda inginkan. Saran saya Link RSS atau
link berlangganan



5.     Kemudian simpan template sobat



Untuk mengganti gambar background URL yang berwarna
merah, sobat bisa mengganti dengan URL gambar yang sobat inginkan

Selesai sudah cara membuat halaman blog melipat dan lihat hasilnya bagaimana....baguskan?



Selamat mencoba


Sumber dari
http://t4belajarblogger.blogspot.com

Written by

We are Creative Blogger Theme Wavers which provides user friendly, effective and easy to use themes. Each support has free and providing HD support screen casting.

© 2013 ™Tutorial-Tutorial | Tips and Trik | Cheat-Cheat | Tips Ebook | Info-Info™. All rights resevered | Share on Blogger Template Free