Panduan Cara Membuat Efek Lipatan Pada Halaman di Blog.Panduan blogger untuk blogger pemula.Panduan blogger yang akan menjelaskan,membahas serta membantu sobat blogger semua tentang "Panduan Cara Membuat Efek Lipatan Pada Halaman di Blog".Efek lipatan pada halaman di blog disebut juga "Page Peel Effect".Sebenarnya fungsi dari pembuatan efek lipatan ini hanya untuk membuat tampilan blog tersebut lebih unik dibanding blog lainnya.Dalam perkembangannya,efek lipatan ini dirasa sangat menarik.Sehingga efek lipatan ini banyak dipakai oleh blogger.Perlu diketahui,uniknya dari efek lipatan ini kalau sobat mengarahkan kursor mouse sobat di bagian pojok kanan atas halaman web tersebut, maka halaman tersebut akan kelipat atau kebuka, namun hanya sebagian kecil saja dan di dalamnya terdapat gambar (disesuaikan) yang biasanya kalau diklik akan diarahkan ke suatu halaman lain seperti halaman RSS blog ataupun bisa berupa halaman lainnya.
.
.
Dan untuk membuatnya,silahkan ikuti langkah-langkah seperti berikut ini :
1. Login ke Blogger
2. Klik Template
3. Klik Edit HTML
4. Klik Lanjutkan dan beri tanda centang pada tulisan "Expand Widget Template"
5. Cari kode <b:skin><![CDATA[
6. Copy dan Paste kode di bawah ini di atas kode <b:skin><![CDATA[
<script src='http://sites.google.com/site/software2iqbalinc/javascript/script_ditunjuk_ngelipet_t4belajarblogger.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({width: '307px',height: '319px'}, 500);
} , function() {
$("#pageflip img").stop()
.animate({width: '50px',height: '52px'}, 220);
$(".msg_block").stop()
.animate({width: '50px',height: '50px'}, 200);
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({width: '307px',height: '319px'}, 500);
} , function() {
$("#pageflip img").stop()
.animate({width: '50px',height: '52px'}, 220);
$(".msg_block").stop()
.animate({width: '50px',height: '50px'}, 200);
});
});
</script>
7. Lalu cari kode ]]></b:skin> dan letakkan kode berikut ini di atasnya
#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/AVvXsEhHMUTe729evhnZjF-fUmzWiYYDe_PEXMx0AfergvwBbRNjbmTaAZyqsP0KMXy_iWoRGzeWCbYbn70-bBhnhnMHHjiRi4fadi0GFeVSiNUVdKU3sp8WMAEeLPOVztgV_ApXGxqItTL2dNVz/) no-repeat right top;
text-indent: -9999px;
}
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/AVvXsEhHMUTe729evhnZjF-fUmzWiYYDe_PEXMx0AfergvwBbRNjbmTaAZyqsP0KMXy_iWoRGzeWCbYbn70-bBhnhnMHHjiRi4fadi0GFeVSiNUVdKU3sp8WMAEeLPOVztgV_ApXGxqItTL2dNVz/) no-repeat right top;
text-indent: -9999px;
}
8. Cari kode <body> dan letakkan kode berikut ini di bawahnya.
<div id='pageflip'>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=tutorialbloggingdiblogger' target='_blank'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimVZNyUfUbIBdKzZ83MS5M2SF6VzxGtbuz1O9q3ZJ39Z_gn0T5mfKsJWm6Ryami5zT3DBxUpt6KCbbfkLpQdkGvRNvI-jzqWaEC7Rzj-POWddOddOq4kUsDVMUdqadnWn39nYsSD5jc-bz/'/>
<span class='msg_block'/>
</a>
</div>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=tutorialbloggingdiblogger' target='_blank'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimVZNyUfUbIBdKzZ83MS5M2SF6VzxGtbuz1O9q3ZJ39Z_gn0T5mfKsJWm6Ryami5zT3DBxUpt6KCbbfkLpQdkGvRNvI-jzqWaEC7Rzj-POWddOddOq4kUsDVMUdqadnWn39nYsSD5jc-bz/'/>
<span class='msg_block'/>
</a>
</div>
*Keterangan : Silahkan ganti tulisan yang berwarna hijau dengan link yang sobat inginkan,misal link rss
9. Selamat Mencoba
Related Post:
Blogger
- Membuat Account Paypal
- Cara Menambah Link Alexa Anda
- Cara Meningkatkan Link In Alexa
- Color Code to Easier Your Customization
- Penghias Blog (Gadget/Widget BLOG)
- TIPS MEMBUAT FLOATING FACEBOOK LIKE BOX DI BLOGSPOT
- WIDGET MELAYANG/FLOATING FOLLOWER GOOGLE FRIEND CONNECT TWITTER DAN FACEBOOK LIKE BOX ( 3IN1 WIDGET)
- Panduan Belajar SEO Untuk Pemula
- Kamus Istilah Blogger Yang Wajib Dibaca
- Faster Black SEO Friendly Blogger Template
- Download Template
- Cara Membuat Blog Menjadi Dofollow
- Cara Berkomentar Di Blog Nofollow
- 1000 Trafik Social Bookmark Dofollow
- Blog Dofollow Indonesia 2011 | DoFollow Blogs List
- Tips Mendapatkan Backlink Gratis EDU Tanpa Jasa SEO
- Daftar List Backlink Blog EDU 2011 Auto Approve
- Daftar Blog Dofollow 2011 (Update Mei)
- Cara Mengetahui Halaman Isi Blog Dofollow ( Inner Page )
- Cara Mendapatkan Backlink Gratis Dari Google
- Backlink dari Followers | Backlink from Followers | Followers
- Backlink Gratis dan Berkualitas
- Backlink Dofollow With Commentluv
- 1000 Backlink Supaya Menang Kontes SEO
.jpg){kind=small}
.gif)
