Sabtu, 09 Maret 2013

- Add Comment

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkrLdELcpqtQTeovjZZR3ELVqn8Y76iVx0PWqKFUDg1uar-kdzyWUha8BfOKrUcJpfGll60f0tlARP7kXAdf08blkeBZMOI28vrLBGOgAi_G9Eqz4IMSZm97wiJ7g0gLtFy-ViuyyZjJQd/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhl9etTVLr837ghHSnQ1JO3l_13qFNMxGuMw0RDJUgA3kE2huP54L_CfyZyjEemR9y8Xp_hVboAj0rb7SvrIOyMTwYc_5rpyNREDfj3Wx8ILMH4TV_t15-buuTfU1Ob66XSMSWKVi49ypKa/'/>
<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..

Label:

blogefek kertas melipatkertas menggulungtutorial
Disclaimer: Gambar dan video artikel pada website ini terkadang berasal dari berbagai sumber media lain. Hak cipta sepenuhnya dipegang oleh sumber tersebut. Jika ada masalah terkait hal ini, Anda dapat menghubungi kami disini.
EVO

Ini akan berisi informasi tentang admin blog atau blog ini. Baik kebiasaan penulis blog, latar belakang pendidikan, apa saja yang ingin orang ketahui tentang penulis blog atau informasi terkait konten di blog ini. Agar blog terlihat lebih profesional.

Delivered by FeedBurner

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