Membuat Halaman Blog Terlipat
19.21 | 
Diposting oleh
Gabriela Eden |
Teman2, disini saya mau berbagi ilmu mengenai bagaimana membuat halaman blog bisa terlipat... caranya mudah aja kok, tinggal ikutin aja ya langkah2 di bawah ini:
<b:skin><![CDATA[
Dan letakkan kode berikut tepat di atasnya:
<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>
]]></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/AVvXsEjBAKfYX8uAd1mu2CxPM2HYrH3jd0oDEVBCCgxylELEVdcODv1sZznc3YxfKJMN6wMhwD4XuZb3HLQEhnVSQQBajMqKgp9sqglyBQqjNyp5cekqfMEIucXo84bp7R6oP02Naj7eyrt3oddL/) no-repeat right top;
text-indent: -9999px;
}
<body>
Dan lettakkan kode berikut 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/AVvXsEjnAbo_6GBKQr3V5GggeqpBld3OV9rzmqo2A-oS40-fPQBDUUTC0KOBfHFMYV0VGZaIN9SAUNK5doQ73rm592VWtw7bWY-fW3lBhIMIIPljla2PGxNvaPdaAM-NSx1GI5575GuilGh8Wlyz/" />
<span class="msg_block">
</span></a></div>
Keterangan : - tulisan yang berwarna merah dapat temen2 ganti untuk mengubah gambar dinding
1. Login ke blogger >> Tata Letak/Rancangan >> Edit HTML >> Expand widget template
2. Cari kode :
<b:skin><![CDATA[
Dan letakkan kode berikut tepat di atasnya:
<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>
3. 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/AVvXsEjBAKfYX8uAd1mu2CxPM2HYrH3jd0oDEVBCCgxylELEVdcODv1sZznc3YxfKJMN6wMhwD4XuZb3HLQEhnVSQQBajMqKgp9sqglyBQqjNyp5cekqfMEIucXo84bp7R6oP02Naj7eyrt3oddL/) no-repeat right top;
text-indent: -9999px;
}
4. Cari kode :
<body>
Dan lettakkan kode berikut 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/AVvXsEjnAbo_6GBKQr3V5GggeqpBld3OV9rzmqo2A-oS40-fPQBDUUTC0KOBfHFMYV0VGZaIN9SAUNK5doQ73rm592VWtw7bWY-fW3lBhIMIIPljla2PGxNvaPdaAM-NSx1GI5575GuilGh8Wlyz/" />
<span class="msg_block">
</span></a></div>
5. Simpan hasil kerjaan teman2.
Keterangan : - tulisan yang berwarna merah dapat temen2 ganti untuk mengubah gambar dinding
- tulisan yang berwarna biru dapat temen2 ganti dengan link tujuan yang temen2
inginkan
Sukses!
inginkan
Label:
Ilmu Blog
Langganan:
Posting Komentar (Atom)
0 komentar:
Posting Komentar