Posted by : Unknown Rabu, 17 November 2010

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

Description: Membuat Page Feel Efect Bloger Dengan JQuery
Rating: 4.5
Reviewer: Unknown
ItemReviewed: Membuat Page Feel Efect Bloger Dengan JQuery

Leave a Reply

Monggo Tinggalkan Jejak Kaks :)

Subscribe to Posts | Subscribe to Comments

Welcome to My Blog

Popular Post

Labels

Arsip Blog

Followers

- Copyright © 2013 shad0w-share | Designed by Johanes Djogan -