Membuat Page Feel Efect Bloger Dengan JQuery

11/17/2010 Blogger JQuery Tips Trik Blog
Salam sobat blogger, di hari Rabu yang cerah ini tepat di Hari raya Idul Adha 1431 H. Saya akan posting satu buah tips yang bagus (menurut saya). Postingan kali ini saya ingin berbagi lagi kepada para sahabat semua tentang cara Membuat Page Feel Efect Blogger Dengan JQuery untuk Template Blogger. Apa yang dimaksud dengan Page Feel Efeck?? Mungkin sobat pernah mengunjungi suatu blog dan ketika kursor pointer menunjukan ke sudut kanan atas blog, tiba tiba halaman tersebut terlipat?? Itulah yang di sebut dengan Page Feel Efeck, untuk lebih jelasnya adalah seperti pada gambar di bawah ini :

Sebelum tersentuh pointer :



Ketika tersentuh pointer Sudut Halaman Blog terlipat seperti pada gambar berikut :



Nah gimana sahabat tertarik?? berikut langkah-langkah pembuatannya :

  1. Seperti biasa Login ke-bloger sobat
  2. Tataletak --->> Edit HTML
  3. Kemudian cari kode </head> kemudian letakkan kodoe di bawah ini tepat diatas kode tadi

  4. <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://www.wallheaven.com/subscribe.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>

  5. Sekarang tambahkan kode berikut setelah kode <body>

  6. <div id='pageflip'>
    <a href='http://feeds.feedburner.com/Indahnya-Berbagi'><img alt='' src=http://sites.google.com/site/amatullah83/gambar-untuk-tutorialku/page_flip.png'/></a>
    <div class='msg_block'></div>
    </div>


  7. Kemudian klik Simpan Template, Selesai

Mudah kan?? Selamat mencoba semoga berhasil dan bermanfaat.




KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI

Artikel Terkait

Previous
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

7 comments