Membuat feeds Gaya Sobekan kertas "Page Flip"

Dari dulu aku bosen dengan stlyle yang di tawarkan dari feeds. pasti bentuknya seperti itu itu aja, kayak nggak kreatif. sebenernya sekedar iseng cari style feeds yang bagus. dan pada akhirnya membuat kombinasi style aja. ini ada sedikit trick bagaimana membuat style sobekan(seperti sobekan kertas) yang berguna sebagai wadah feeds. model style berupa sobekan sering dinamai dengan “page flip”. untuk demonya dapat di lihat di sebelah kanan atas blog ini. bila anda tertarik dengan bentuk yang seperti itu , maka ikuti langkah-langkah di bawah ini..

  1. login bloger
  2. download template anda
  3. Pilih edit html
  4. centang expand template widget
  5. cari kode atau tekan crtl+f3 dan cari <![CDATA
  6. lalu copas script di bawah ini
  7. $(document).ready(function(){
    //Page Flip on hover
    $("#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);
    });
    });

  8. paste di atas <![CDATA
  9. lalu cari kode ]]>
  10. dan kopas kode di bawah ini dan letakkan di atas  ]]>
  11. #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://img222.imageshack.us/img222/9213/subscribe.png) no-repeat right top;
    }
  12. lalu cari kode dan letakkan kode di bawah ini tepat di atasnya
  13. <a href='

    http://feeds2.feedburner.com/namafeedkamu&#8217;>

  14. simpan template dan lihat hasilnya
keteranganhttp://feeds2.feedburner.com/namafeedkamu” 
ganti dengan alamat feeds kamu
untuk mengatur letak silahkan edit sendiri pada kode yang saya kasih warna
 
biru. 
atur sendiri ketinggiannya dan selamat mencoba

2 thoughts on “Membuat feeds Gaya Sobekan kertas "Page Flip"

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s