ingin membuat newticker seperti di bawah ini silahkan lihat di sini

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

2 komentar :

  1. nice pak.. bisa ni aku coba,,, ditunggu info selanjutnya...

    ReplyDelete

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

Back to top