Optimalkan Feedburner Dengan Memasang Pageflip

contoh pageflip Menjawab pertanyaan sobat Taufik pada komentarnya di postingan elegant style template, yang menanyakan cara membuat gambar di pojok kanan atas seperti kertas di lipat dan memasang feedburner di dalamnya. Mungkin maksudnya adalah cara membuat pageflip, semoga benar perkiraan saya.

Dan kebetulan saya belum pernah buat postingan ini, tidak ada salahnya kita bahas sama-sama, walaupun tutorial ini sudah basi dan usang. Buat yang belum tau apa itu pageflip, bisa melihat contoh demonya disini.

Gambar hidup yang dipojok kanan atas itulah yang disebut pageflip, jika disorot dengan mouse akan terbuka dan jika di klik akan menuju ke halaman yang dimaksud. Dan halaman yang dimaksud tersebut adalah feed kita yang sudah kita daftarkan di feedburner. Dibawah ini adalah 2 gambar yang akan kita gunakan untuk membuat pageflip.

page flip image page flip

Sebelumnya saya mohon maaf jika saya mengambil gambar pageflip ini tanpa seijin yang empunya. Karena saya sendiri tidak tau persis siapa yang mempunyai hak paten atas gambar pageflip ini, dan saya mengambilnya lewat search engine. Begitu saya lihat, sangat banyak gambar yang sama sehingga saya tidak tau dan tidak bisa mencantumkan sumber pemilik gambar yang asli.

Buat sobat blogger, ini tutorialnya semoga bermanfaat :

  • 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'>
    <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 :
  1. Ganti tulisan yang berwarna merah dengan ID feedburner sobat.
  2. 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.

Semoga tutorial ini bisa bermanfaat, selamat mencoba !

Berlangganan artikel terbaru via Email
Artikel Lainnya :

12 comments

24 Januari 2010 06.09

Pertamax.. Nice tutor sob. Saya pertama belum ngerti buat gituan Tapi sekarang jadi ngerti dikit. Makasi.

24 Januari 2010 06.12

Mantab infonya. Makasi ya.

24 Januari 2010 07.47

iyah sama-sama, jgn lupa mampir terus ke blog ini yah...awas ojo lali

24 Januari 2010 17.26

haha ada2 aja nih si beben, makasih ben !

info menarik nih bagi pebisnis online...

4 September 2010 01.17

ane cobain gan. sukses sih tapi pas step terakhir hasilnya posisi gambar jika codenya ditaruh setelah body berada terlalu dibawah. pertanyaan bagaimana agar gambar feednya berada di atas/posisi yg kita inginkan.thanks

16 September 2010 07.14

bol jug (boleh juga)

13 November 2010 11.35

info yang bermanfaat bagi para blogger, terus berinovasi di dunia blogger, di tunggu info yang lebih gresss

22 November 2010 13.11

bos saya cari kode body diblogger koq gak ada??? gmn caranya bos??? terimakasih

6 Maret 2011 23.42

ajib dah tips ini..thaks dah share

26 Maret 2011 20.30

makasih bang infonya

23 Juli 2012 16.20

wah caranya simple sekali ya,,mudah dan jelas..makasih,, bikin blog lebih keren nih,,,mantap

Poskan Komentar

Reader Community

Recent Comments