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.
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 :
- 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.
Semoga tutorial ini bisa bermanfaat, selamat mencoba !
.jpg)
Posting Komentar