Sabtu, 09 Maret 2013

Membuat Efek Kertas Menggulung Di Sudut Blog

Selamat malam sobat motivasi bisnis online… Dalam kolom tutorial kali ini saya mau berbagi tips cara membuat efek kertas menggulung atau sudut kertas melipat pada sebuag blog. Efek ini sebenarnya cukup menarik dan kelihatan sangat bagus. Namun tidak semua template anda cocok di buat tampilan efek gulungan kertas ini. Sebab jika template blog anda tidak sesuai, justeru akan menjadikan blog kita tidak enak di pandang. 

Namun bagi anda yang ingin hanya sekedar mencoba untuk mempraktekkan cara membuat efek kertas yang seolah-olah hampir tergulung ini, tidak ada salahnya untuk mencoba tips ini. 

Jadi langsung aja ya ke tutorial cara membuat efek kertas menggulung di sudut blog.  Silahkan ikuti panduan di bawah ini :

1.    Login ke Blogger
2.    Klik Design > Edit HTML > centang 'Expand Widget Template'
3.    Pasang kode berikut di atas kode ]]></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://4.bp.blogspot.com/-gDfCaIOzAcU/UTts5Hb9YiI/AAAAAAAABNY/MVy5ZYMrf8Y/s1600/efek-kertas-melipat-menggulung.jpg) no-repeat right top;
text-indent: -9999px;
}

#Ganti kode yang berwarna hijau dengan link kode gambar (300px x 300 px) yang kalian inginkan

4.    Kemudian pasang lagi kode berikut di bawah kode <b:skin><![CDATA[ atau <b:skin><![CDATA[/*

<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>
5.    Selanjutnya pasang kode berikut di bawah kode <body>

<div id='pageflip'>
<a href='http://anasqu.blogspot.com/' target='_blank'>
<img alt='' src='http://lh3.ggpht.com/_RVpTV2JOOxA/S8iu2CHC7SI/AAAAAAAACys/nYe088a8tkc/gambar_kelipat.png'/>
<span class='msg_block'/>
</a>
</div>

#Ganti kode yang berwarna merah dengan alamat blog atau link yang kalian ingin pasang
6.    Terakhir klik 'Save Template' dan tinggal lihat hasilnya seperti apa ^^

Demikian, semoga bisa membantu.. Dan mudah-mudahan anda berhasil membuat efek lipatan kertas atau kertas yang terlihat seolah-olah akan menggulung ini. Kalau berhasil jangan lupa untuk klik LIKE Fan Page Facebook anasqu yang ada di sebelah kanan blog ini.

Selamat mencoba.. Wassalam..
Artikel Terkait

0 komentar:

Posting Komentar

Silahkan Komentar Dengan Etika Dunia Online. Untuk Mendapatkan Backlink, Tinggalkan link anda di Menu Tukar Link