Kamis, 01 Maret 2012

Cara Membuat Page Flip pada Blog

Sekarang saya akan menjelaskan cara membuat page Flip. Fungsinya anda dapat membuat semacam share widget seperti subscribe, facebook, twitter dan lain sebagainya. Widget ini lumayan bagus dan akan mempercantik tampilan dengan atraktif jquerynya. Ok sekarang kita bahas bagaiman cara membuat Page Flip. Silahkan ikuti langkah berikut.


Log in ke blog anda

Klik Rancangan
    Klik Edit HTML
    Centang Expand Template Widget
    Masukkan lode berikut di atas kode </head>
<style type='text/css'>
img{behavior:url(iepngfix.htc)}
#pageflip{position:relative; right:0; top:0; float:right}
#pageflip img{width:50px; height:52px; z-index:99; position:absolute; right:0; top:0; -ms-interpolation-mode:bicubic}
#pageflip .msg_block{width:50px; height:50px; overflow:hidden; position:absolute; right:0; top:0; background:url(http://3.bp.blogspot.com/-jfuNewRfsfI/TilUOP2rKkI/AAAAAAAAAXE/5bJ3Ub5-_6w/s320/Newspaper-Feed-icon.png) no-repeat right top}
</style>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .msg_block&quot;).stop()
.animate({
width: &#39;307px&#39;,
height: &#39;319px&#39;
}, 500);
} , function() {
$(&quot;#pageflip img&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;52px&#39;
}, 220);
$(&quot;.msg_block&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;50px&#39;
}, 200);
});
});
</script>

Selanjutnya masukkan kode berikut di bawah kode <body>
<div id='pageflip'>
<a href='http://feeds2.feedburner.com/rahmancyber' target='_blank'><img alt='' src='http://1.bp.blogspot.com/-CZEkTfuhFlA/TilUn9JONKI/AAAAAAAAAXM/jLUA8BSX4Ck/s320/peel-image.png'/></a>
<div class='msg_block'/>
</div>

  • Alamat gambar pada kode merah adalah alamat gambar subscribe logo. Silahkan gantikode merah degan alamat gambar facebook atau twitter anda
  • Ganti juga kode biru dengan alamat facebook atau twitter anda
Selanjutnya klik Simpan Template dan lihat hasilnya
Salam Sukses!
  • Artikel ini di Unggah oleh: Admin Cahaya Semesta Multimedia

  • dengan Judul : Cara Membuat Page Flip pada Blog
  • Uploaded by: Cahaya Semesta Multimedia
  • Views:
  • Category:
  • Share

    0 komentar:

    Posting Komentar



    Selamat Datang di Website Resmi Cahaya Semesta Multimedia Semarang | Welcome to Official Website of Cahaya Semesta Multimedia Semarang

     

    Jam Kerja

    OUR SHOP/SERVICE Senin-Jum'at : 08.00-15.00

    Ikuti kami melalui Email

    Bilik Komunikasi

    Yahoo Messenger Pasar Sambilan

    Email : CahayaSemestaMultimedia@gmail.com
    Phone :
    085740902376
    Anda bisa menghubungi kami melalui media diatas, bila anda memiliki kritik dan saran atau pesan cepat, bisa melalui kotak pesan yang disediakan website ini.


    Copyright © Cahaya Semesta Multimedia | Main Page by TemplateIsm | Pasar Sambilan SME