Cara Membuat Efek Lipatan Kertas Di Blog
Mungkin sobat blogger sudah sering melihat efek lipatan kertas ketika sedang menjelajah website ataupun blogwalking, namun masih bingung tentang cara pemasangannya di blog... nah kebetulan jika ya berarti sobat telah mendarat dengan tepat karena pada postingan artikel ini akan membahas cara pemasangan efek lipatan kertas untuk digunakan di blog. Oke sob jika tertarik untuk mencoba memasang efek lipatan kertas ini monggo disimak tutorialnya...
Contoh :
Cara Pemasangan :
- Login ke
blog sobat... - Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates", seperti gambar dibawah ini.
- Cari kode ]]></b:skin> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di atas kode ]]></b:skin> tersebut.
#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://lh3.googleusercontent.com/-BFy8oqoYLgM/T048MJSYmpI/AAAAAAAABO0/RHVBBWIoeSY/s288/Facebook-logo.png)
no-repeat right top;
text-indent: -9999px;
}
- Keterangan :- Kode yang berwarna biru merupakan URL Link Gambar.
- Cari kode </Head> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di atas kode </Head> tersebut.
<script src='http://monozcore-project.googlecode.com/files/script%20page%20peel.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> - Cari kode <Body> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di bawah kode <Body> tersebut.
<div id='pageflip'>
<a href='http://facebook.com' target='_blank'>
<img alt='' src='http://lh4.googleusercontent.com/-E4pceRFNDIE/T047Qpmfo5I/AAAAAAAABOs/2QTA5duAUg0/s800/sc-page-peel.png'/>
<span class='msg_block'/>
</a>
</div>
- Keterangan :- Kode yang berwarna merah merupakan URL Link yang akan dituju.
- Kode yang berwarna biru merupakan URL Link gambar kertas.
- Klik "Save" dan lihat hasilnya...
FB Users (
 Print
|
   |
8 Comments
:))
:)]
;))
;;)
:D
;)
:p
:((
:)
:(
:X
=((
:-o
:-/
:-*
:|
8-}
~x(
:-t
b-(
:-L
x(
=))
:a:
:b:
:c:
:d:
:e:
:f:
:g:
:h:
:i:
:j:
:ka:
:kb:
:kc:
:kd:
:ke:
:kf:
:kg:
:kh:
:ki:
:kj:
:kk:
:kl:
:km:
:kn:
:km:
:ko:
blogdash
Blog Internet
Browser Information
Blog Script 
Contact
Paid to Click
RSS Feeds
Horoscope
Set as Homepage
Google Translator
Picasa Web Album
SMS Gratis
Info Telepon
Info Listrik
Laporan Cuaca
IDR Exchange Rate
Info Lalu Lintas
SEO + PageRank Tools
Email
Facebook
Twitter
Google+1
Google Chrome
Safari
Opera
Internet Explorer
March 23, 2012 at 3:38 AM
waah,boleh juga nih kang,makasih banyak ya kang :)
March 29, 2012 at 3:53 PM
mantap template blognya sob, keren abis
May 29, 2012 at 2:21 PM
amazing :D
June 27, 2012 at 12:17 AM
:X
July 28, 2012 at 9:32 PM
follow yha blog gua, udah tag follow tu blog anda...hhee..terima kasih.. www.putragerald.co.cc
September 12, 2012 at 3:48 AM
sangat bagus ni mas, mau coba dulu..Trima kasih tutorialnya....
October 18, 2012 at 5:02 AM
gan,, kalo cara ngebuatnya di pojok kiri atas gimana??
November 4, 2012 at 5:59 PM
Tankhs please here "athif23.blogspot.com"