ingin membuat newticker seperti di bawah ini silahkan lihat di sini
Home » Blogging » Trick » Tutorial » Membuat feeds Gaya Sobekan kertas "Page Flip"

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 <b:skin><![CDATA
  6. lalu copas script di bawah ini
  7. <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>
  8. paste di atas <b:skin><![CDATA
  9. lalu cari kode ]]></b:skin>
  10. dan kopas kode di bawah ini dan letakkan di atas  ]]></b:skin>
  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 <body> dan letakkan kode di bawah ini tepat di atasnya <body>
  13. <div id='pageflip'>
    <a href='    http://feeds2.feedburner.com/namafeedkamu'>
    <img alt='' src='http://img224.imageshack.us/img224/8315/pageflip.png'/>
    <span class='msg_block'/>
    </a>
    </div>
  14. simpan template dan lihat hasilnya
keterangan "http://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

FOLLOW and JOIN to Get Update!

Social Media Widget SM Widgets




The Plick Updated at: 6:25 PM
The Plick - Laboratorium Inspiration

2 komentar :

Silahkan Comment dan Tinggalkan link, Blog Ini DoFollow sehingga anda mendapatkan backling dari blog ini. Terima Kasih

Back to top