MEMBUAT POJOK KANAN ATAS BLOG MELIPAT
halo sahabat evanzip....wah sudah lama banget evanzip nga update postingan blog,maklum sob sibuk cari sesuap nasi dan segudang berlian....:^_^ baik sobat evanzip, Tutorial kali ini evanzip akan menjelaskan cara memasang pojok kanan atas blog melipat yang sebelum nya evanzip sudah jelaskan cara pasang screen saver Blog dengancss3.mungkin sobat evanzip penasarankan seperti apa pojok kanan atas Blog bisa melipat???? evanzip akan jelasakan dulu cara kerja nya ,sobat cukup arahkan kursor mouse sobat tepat di pojok kanan atas maka secara otomatis blog kita akan ter buka/terlipat kalau sobat masih penasaran silahkan sobat lihat dulu demonya:
contoh gambar
evanzip sarankan untuk sobat blogger bisa bergabung dengan member HTC seperti blog evanzip untuk script nya sobat tinggal copas script berikut:
Pasang Logo Page Feel HTC ( Layar Menggulung Pada Blog Anda, Tidak Berat
Saya Yang Jamin Namun Mempercantik Blog ini Juga Memperkuat Rasa
Persatuan Dan Persahabatan Antar Bloggers )
Pasang Kodenya Di Bawah ini di atas kode </head> :
<SCRIPT type='text/javascript'>var tujuan ='http://ojelhtc.blogspot.com/'</SCRIPT><SCRIPT src='http://ojel88.googlecode.com/files/fellhtc.js' type='text/javascript'></SCRIPT>
Pasang Kodenya Di Bawah ini di atas kode </head> :
<SCRIPT type='text/javascript'>var tujuan ='http://ojelhtc.blogspot.com/'</SCRIPT><SCRIPT src='http://ojel88.googlecode.com/files/fellhtc.js' type='text/javascript'></SCRIPT>
dan kalau sobat mau tampilan gambar yang lain silahkan ikuti langkah langkah berikut ini:
- Login ke blogger dengan ID anda.
- Klik Tata Letak.
- 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>
#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/AVvXsEhkUpV2TrEoEvPQYROvLaGPRz9-jBwCNMIKbjCc7TH0OGzbRY5b77uiJ76_y0uLuAzxOigvTIrKVIddWKvMII3ADzZ6MirsKYTtRx1UU3LkAqplqJIK6KW8-EB6QLp2rcPCEVthfS0tWM84/) 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/AVvXsEhkUpV2TrEoEvPQYROvLaGPRz9-jBwCNMIKbjCc7TH0OGzbRY5b77uiJ76_y0uLuAzxOigvTIrKVIddWKvMII3ADzZ6MirsKYTtRx1UU3LkAqplqJIK6KW8-EB6QLp2rcPCEVthfS0tWM84/) no-repeat right top;
text-indent: -9999px;
}
8. 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/AVvXsEg6bJy2xd0LAwMw1U0CWDYOm6_TqbKTih-qeN1sBjdCuSdbtNml3uL5NFCTHuSFQGJBzo6NKTCrE2VVMYbQcljX0d-hkr-4f-kj_30FYo5EUgSI6YbMBrIaZBclcu8HfVhnAaJo-ivFDNpD/'/>
<span class='msg_block'/>
</a>
</div>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6bJy2xd0LAwMw1U0CWDYOm6_TqbKTih-qeN1sBjdCuSdbtNml3uL5NFCTHuSFQGJBzo6NKTCrE2VVMYbQcljX0d-hkr-4f-kj_30FYo5EUgSI6YbMBrIaZBclcu8HfVhnAaJo-ivFDNpD/'/>
<span class='msg_block'/>
</a>
</div>
9. Anda bisa mengganti warna merah dengan Link yang anda inginkan. Saran saya Link RSS atau link berlangganan.
10 Simpan template.
- 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/AVvXsEhkUpV2TrEoEvPQYROvLaGPRz9-jBwCNMIKbjCc7TH0OGzbRY5b77uiJ76_y0uLuAzxOigvTIrKVIddWKvMII3ADzZ6MirsKYTtRx1UU3LkAqplqJIK6KW8-EB6QLp2rcPCEVthfS0tWM84/) no-repeat right top;text-indent: -9999px;}
SELAMAT MENCOBA SEMOGA BERHASIL
Kritik Dan Saran Sobat Sangat Membantu evanzip Dalam Menulis Artikel Pada Tutorial Berikutnya