Cara Membuat Efect Page Flip dengan Javasript CSS3 Pojok Pada Blog Tertekuk / Terlipat dengan Mudah dan Cepat Terbaru Post 2012 unik
Hello, teman-teman.
Ada yang seru nih, untuk menambah daya tarik blog anda dan membuat blog anda semakin menarik.
Mau tahu-?
Ada yang seru nih, untuk menambah daya tarik blog anda dan membuat blog anda semakin menarik.
Mau tahu-?
Niiiih…
Effect Page Flip pada blog.
Hanya pengetahuan Page Flip adalah effect pada pojok sebuah blog/web, menjadi seperti kertas yang tertekuk atau berlipat, dan akan terbuka jika didekati oleh Cursor Mouse.
Untuk contohnya lihat gambar diatas :
Hanya pengetahuan Page Flip adalah effect pada pojok sebuah blog/web, menjadi seperti kertas yang tertekuk atau berlipat, dan akan terbuka jika didekati oleh Cursor Mouse.
Untuk contohnya lihat gambar diatas :
Gimana-? Menarik bukan.
Mari kita coba.
Langkah-langkah membuat Page Flip cukup mudah kami terangkan dalam postingan kali ini.
Mari kita coba.
Langkah-langkah membuat Page Flip cukup mudah kami terangkan dalam postingan kali ini.
Buat temen-temen yang tertarik, berikut ini adalah langkah-langkah pembuatannya :
1. Login ke blogger.
2. Kemudian menjuju Rancangan => Edit HTML
3. Cari code ]]></b:skin>, cara cepat tekan CTRL+F pada keyboard
3. Cari code ]]></b:skin>, cara cepat tekan CTRL+F pada keyboard
4. Copy code CSS dibawah ini
#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/AVvXsEigFGyQVZ9_rNrsw6ImxSEd2Xt8l-x34vhruHjvKPAew50Zyh4JwDNUr1I-FvAIyybZL3qHoucH6VJQ6uDBJ_Frj2SgoYDcteo0C9HjwcN392x71S_75dznk7_ki1wbiJKDQbh-kRy5UrQ/s1600/large-cuss.jpg) no-repeat right top; text-indent:-9999px }
#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/AVvXsEigFGyQVZ9_rNrsw6ImxSEd2Xt8l-x34vhruHjvKPAew50Zyh4JwDNUr1I-FvAIyybZL3qHoucH6VJQ6uDBJ_Frj2SgoYDcteo0C9HjwcN392x71S_75dznk7_ki1wbiJKDQbh-kRy5UrQ/s1600/large-cuss.jpg) no-repeat right top; text-indent:-9999px }
=> Anda dapat mengubah URL gambar diatas dengan URL gambar milik anda.
5. Cari code </head>, gunaka cara cepat seperti tadi.
6. Copy code javascript yang ada disini, silahkan download codenya, Cepat Kok. Cuma 10 Kb
Untuk mendownload code KLIK DISINI
6. Copy code javascript yang ada disini, silahkan download codenya, Cepat Kok. Cuma 10 Kb
Untuk mendownload code KLIK DISINI
-> Setelah selesai, copy semua codenya.
7. Lalu pastekan code tersebut diatas code </head>
8. Cari kembali code <body> , gunakan cara cepat seperti tadi.
9. Copy code dibawah ini
10. Pastekan dibawah code <body>
7. Lalu pastekan code tersebut diatas code </head>
8. Cari kembali code <body> , gunakan cara cepat seperti tadi.
9. Copy code dibawah ini
10. Pastekan dibawah code <body>
<div id='pageflip'>
<a href='http://feeds.feedburner.com/co/vlpg' target='_blank'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigFGyQVZ9_rNrsw6ImxSEd2Xt8l-x34vhruHjvKPAew50Zyh4JwDNUr1I-FvAIyybZL3qHoucH6VJQ6uDBJ_Frj2SgoYDcteo0C9HjwcN392x71S_75dznk7_ki1wbiJKDQbh-kRy5UrQ/s1600/large-cuss.jpg'/>
<span class='msg_block'/>
</a>
</div>
<a href='http://feeds.feedburner.com/co/vlpg' target='_blank'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigFGyQVZ9_rNrsw6ImxSEd2Xt8l-x34vhruHjvKPAew50Zyh4JwDNUr1I-FvAIyybZL3qHoucH6VJQ6uDBJ_Frj2SgoYDcteo0C9HjwcN392x71S_75dznk7_ki1wbiJKDQbh-kRy5UrQ/s1600/large-cuss.jpg'/>
<span class='msg_block'/>
</a>
</div>
=> And adapt mengubah URL gambar dengan URL gambar yang anda miliki.
=> Untuk mencoba apakah berhasil silahkan Save Template atau Pratinjau Terlebih Dahulu
=> Untuk mencoba apakah berhasil silahkan Save Template atau Pratinjau Terlebih Dahulu
Keterangan :
- Ganti tulisan yang berwarna merah dengan alamat yang akan anda tuju.
- Tulisan yang berwarna hijau adalah alamat url dari gambar pageflip, coba di klik untuk mengetahui gambar yang dimaksud.
Selesai……
Hehehe…. :D
Semoga bermanfaat, hanya ini yang dapat kami berikan untuk saat ini.
Gunakan dengan bijak ilmu yang kita ketahui.
(Artikel Dilindungi)
Sertakan alamat blog ini jika mengcopy paste. Hak Cipta Dilindungi
Terima Kasih
Rafi Orilya Groups
by Rafi Aldiansyah Asikin
Hehehe…. :D
Semoga bermanfaat, hanya ini yang dapat kami berikan untuk saat ini.
Gunakan dengan bijak ilmu yang kita ketahui.
(Artikel Dilindungi)
Sertakan alamat blog ini jika mengcopy paste. Hak Cipta Dilindungi
Terima Kasih
Rafi Orilya Groups
by Rafi Aldiansyah Asikin
Ijin coba bang :D
BalasHapus