Monday, March 8, 2010

Optimalkan penampilan feedburner dengan pageflip

Dengan gambar di samping apakah sobat sudah paham apa yang sekarang mau kita buat?? "Optimalkan penampilan feedburner dengan pageflip", ya itulah dia, coba sobat baca tulisan yang tercantum dibalik lipatan kertas tersebut: "Subscribe VIA RSS", ada kan.. Nah natinya pengunjung bisa mengklik gambar tersebut untuk berlangganan artikel sobat.

Tampilan awalnya akan seperti ini:
pageflip2

Setelah sobat arahkan pointer mouse pada lipatan kecil pojok kanan, maka tampilannya akan terbuka seperti lipatan kertas:

pageflip2
Dan lihat lipatan kertas terbuka, dan muncul tulisan "subscribe VIA RSS", seperti ini tutorialnya:

1. Login di blog,
2. dashboard-layout-edit HTML
3. Letakkan code CSS di bawah, di atas code ]]></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?imgmax=800) no-repeat right top; text-indent:-9999px }
4. Sisipkan code <script src='http://rizatea.googlecode.com/files/pageflip-zoel.js' type='text/javascript'/>, di bawah code ]]></b:skin>
5. Letakkan code di bawah setelah code body

<div id='pageflip'>
<a href='http://feeds.feedburner.com/blog-zone' target='_blank'>
<img alt='' src='http://lh6.ggpht.com/_7Y9pl24WpQY/S1sO3NyCTSI/AAAAAAAACwM/6DxgJaTzsdc/page%20flip%20image_thumb%5B1%5D.png?imgmax=800'/>
<span class='msg_block'/>
</a>
</div>
6. save, selesai.

Keterangan : code yang berwarna merah menunjukan alamat si gambar, dan warna biru isi dengan ID feedburner sobat.

Gimana sudah jelaskan?? klo lom jelas kasih komen dong di bawah, klo uda jelas kasih komen juga deh,, he..

No comments:

Post a Comment