Cara MUDAH Membuat Halaman Blog Melipat Secara Otomatis
Cara
MUDAH Membuat Halaman Blog Melipat Secara Otomatis | Tips Blogspot | Cara
Membuat Halaman Pojok Atas Melipat - Suatu ketika saya lagi ngenet tiba-tiba
saya menemukan suatu web yang unik tampilan halamannya. Uniknya tuh kalau kita
mengarahkan kursor mouse kita 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, Untuk membuat halaman blog melipat Berikut Caranya dengan
MUDAH Membuat Halaman Blog Melipat :
- Login ke blogger.
- Klik Rancangan - Klik Edit HTML.
- Klik Expand widget template.
- Cari kode <b:skin><![CDATA[
- Kalau sudah ketemu copy kode dibawah ini diatas 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>
- Lalu cari lagi kode ]]></b:skin> Dan letakkan kode berikut tepat 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/AVvXsEhtvdstVGa_PQ54wgXSSTHOfDHmkkfwQiZZm0_iZTAgMT70QsbXPcsf8mtG29gbAe70N1RKjF7A-s2vBE_1V6jXNz8FREnGFbVaCDL6X2KQKoDMeUw-gCU9eI3tEkcC9S7FfsiTrR-jJynw/) 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/AVvXsEhtvdstVGa_PQ54wgXSSTHOfDHmkkfwQiZZm0_iZTAgMT70QsbXPcsf8mtG29gbAe70N1RKjF7A-s2vBE_1V6jXNz8FREnGFbVaCDL6X2KQKoDMeUw-gCU9eI3tEkcC9S7FfsiTrR-jJynw/) no-repeat right top;
text-indent: -9999px;
}
- Lalu cari lagi kode <body> Dan letakkan kode berikut tepat di dibawahnya.
<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/AVvXsEiRlcu2ITiSFIik3pmC8w23hS_XRPC_SIZajTwG0Jsy35zSzksyPp_RIQ4UClCa-NNMhDwfGvhN59KzPbj02fhddNZpSli2WozLaysXL1eJLDHukRYQnauFsfIG8Ep7tOPlizB86-nII0iB/'/>
<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/AVvXsEiRlcu2ITiSFIik3pmC8w23hS_XRPC_SIZajTwG0Jsy35zSzksyPp_RIQ4UClCa-NNMhDwfGvhN59KzPbj02fhddNZpSli2WozLaysXL1eJLDHukRYQnauFsfIG8Ep7tOPlizB86-nII0iB/'/>
<span class='msg_block'/>
</a>
</div>
- Sobat bisa mengganti warna merah dengan Link yang sobat inginkan. Saran saya Link RSS atau link berlangganan.
- Simpan template - Selesei.
- Sekarang silahkan lihat blog,...
- Untuk mengganti gambar dinding, sobat bisa mengganti URL berikut :
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtvdstVGa_PQ54wgXSSTHOfDHmkkfwQiZZm0_iZTAgMT70QsbXPcsf8mtG29gbAe70N1RKjF7A-s2vBE_1V6jXNz8FREnGFbVaCDL6X2KQKoDMeUw-gCU9eI3tEkcC9S7FfsiTrR-jJynw/) no-repeat right top;
text-indent: -9999px;
}
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtvdstVGa_PQ54wgXSSTHOfDHmkkfwQiZZm0_iZTAgMT70QsbXPcsf8mtG29gbAe70N1RKjF7A-s2vBE_1V6jXNz8FREnGFbVaCDL6X2KQKoDMeUw-gCU9eI3tEkcC9S7FfsiTrR-jJynw/) no-repeat right top;
text-indent: -9999px;
}
Semoga tips Cara
MUDAH Membuat Halaman Blog Melipat Secara Otomatis | Tips Blogspot | Cara
Membuat Halaman Pojok Atas Melipat bisa bermanfaat dan bisa dimengerti oleh
para sobat blogger, jangan lupa tambahkan jaringan teman di Kolom Blog GRATIS (
follow up me ) dan semoga para sobat bisa terus memperluas ilmu gratis ini ke
semua teman - teman sobat,...
Selamat Mencoba Semoga Bermanfaat
0 Response