Membuat Page Flip (Peel Page) di Blog

Page flip atau lebih dikenal dengan nama page peel adalah efek pada pojok sebuah web, seperti kertas yang tertekuk atau berlipat, dan akan terbuka jika didekati mouse. Buat yang temen-temen yang belum tahu 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.


Buat temen-temen yang tertarik, berikut ini adalah langkah-langkah pembuatannya :
  • Login ke blogger dengan akun anda.
  • Kemudian menuju Rancangan >>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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil6KahpZQqNvpjc9Q7cTQZhQH02dsr5jSJR5sWBULhASxgbtRb6aJZz4WB3F3u5BvLarDhmxZ7e7JxXA28kg9w2h9RLZudARh2SI-MlQT7x7LSlREVRnnCpO7U4sMQ5aDf4u9kKlL6lKU/s1600/large-cuss.jpg) no-repeat right top; text-indent:-9999px }
  • Lalu copy semua kode javacsript yang ada  disini dan letakkan diatas kode </head>
  • Cari kode <body> dengan menggunakan control f, letakkan kode di bawah ini tepat di bawahnya.
    <div id='pageflip'>
    <a href='http://feeds.feedburner.com/co/vlpg' target='_blank'>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil6KahpZQqNvpjc9Q7cTQZhQH02dsr5jSJR5sWBULhASxgbtRb6aJZz4WB3F3u5BvLarDhmxZ7e7JxXA28kg9w2h9RLZudARh2SI-MlQT7x7LSlREVRnnCpO7U4sMQ5aDf4u9kKlL6lKU/s1600/large-cuss.jpg'/>
    <span class='msg_block'/>
    </a>
    </div>
  • Simpan Template.
Keterangan :
  1. Ganti tulisan yang berwarna merah dengan ID feedburner sobat.
  2. Tulisan yang berwarna hijau adalah alamat url dari gambar pageflip, coba di klik untuk mengetahui gambar yang dimaksud.
Cara kedua yang lebih simple adalah dengan melatakkan kode di bawah ini tepat diatas tag </head>
<script src='https://sites.google.com/site/bangkolis/javascript/peel_maskolis.js' type='text/javascript'/>
Jika anda menggunakan cara kedua, untuk mengganti url feed RSS dan gambar bisa download script itu disini. Anda bisa ganti gambar sesuai dengan keinginan. Jika anda merasa kesulitan dalam membuatnya, isi kotak komentar yang ada di bawah. Selamat mencoba dan semoga bermanfaat.

Post a Comment