22 Jul 2011

Memasang Pageflip

Yang dimaksud Pageflip adalah gambar yang misalkan kita dekatkan mouse ke gambar tersebut, maka akan berubah menjadi besar atau flip. Untuk lebih jelasnya berikut saya berikan tutorialnya :
  • Setelah login ke blogger, langsung saja tuju Edit HTML.
  • Letakkan kode css berikut ini sebelum kode ]]></b:skin>
    #pageflip { position: relative }
    #pageflip img { border:none; width:50px; height:52px; z-index:99; position: absolute; right:0; top:0; -ms-interpolation-mode:bicubic }
    #pageflip .msg_block { width:50px; height:50px; position:absolute; right:0; top:0;
    background:url(http://lh5.ggpht.com/_7Y9pl24WpQY/S1sO-qUjmxI/AAAAAAAACwU/DrjPrO1XXaU/page%20flip_thumb%5B1%5D.png) no-repeat right top; text-indent:-9999px }
  • Copy semua kode script yang ada disini dan kemudian letakkan sebelum kode </head>
  • Kemudian letakkan kode berikut ini tepat setelah kode <body>
    <div id='pageflip'>
    <a href='http://feeds.feedburner.com/MyBloggerThemes' target='_blank'&gt;
    <img src='http://lh6.ggpht.com/_7Y9pl24WpQY/S1sO3NyCTSI/AAAAAAAACwM/6DxgJaTzsdc/page%20flip%20image_thumb%5B1%5D.png'/>
    <span class='msg_block'/>
    </a>
    </div>
  • Simpan Template.
Keterangan :
Ganti tulisan yang berwarna merah dengan ID feedburner sobat.
Tulisan yang berwarna biru adalah alamat url dari gambar pageflip, coba di klik untuk mengetahui gambar yang dimaksud.

Silahkan sobat kreasikan sendiri gambarnya dan jika ingin membuat pageflip dengan tujuan halaman yang lain sobat tinggal ganti kode :
<a href='http://feeds.feedburner.com/blog-zone' target='_blank'>
dengan alamat url yang lain, misalnya alamat url untuk mengajak pengunjung blog menjadi referral sobat dalam suatu bisnis online yang sobat ikuti.

Jika Sobat masih terkendala, silahkan tinggalkan komentar..
Dapatkan Update Artikel RSS feed yang bermanfaat dari Saya, atau ikuti Saya di Twitter.
Email address:

0 komentar:

Posting Komentar