l

Kamis, 29 Maret 2012

Membuat Gulungan di Sudut Blog

Aksesoris blog di butuhkan bagi setiap blog yang masih aktif, aksesoris blog dapat memperindah dan mempercantik tampilan blog kita agar pengunjung betah mengunjungi blog kita berkali - kali. Namun jika terlalu banyak aksesoris mengakibatkan blog menjadi lola' (loading lama) dan pengunjung enggan untuk mampir ke blog kita lagi, kebanyakan pengunjung blog menutup blog yang dikunjungi nya sebelum semua kode pada blog yang dikunjunginya karena terlalu lama loadingnya. Maka dari itu, kita harus pintar memilih aksesoris yang cocok untuk blog kita, bukan semua aksesoris di masukan di blog kita.

Pernah kalian melihat blog yang sudutnya mempunyai gulungan-gulungan aneh ? Nah.. kali ini kita akan membahas gimana cara Membuat Gulungan di Sudut Blog, kalau belum pernah lihat cek ke situs Radar Banyuwangi. Gimana ? Tertarik dan cocok untuk di blog kalian ? Ikuti langkah di bawah berikut

Login ke Blogger
Klik Design > Edit HTML > centang 'Expand Widget Template'
Pasang kode berikut di atas kode ]]></b:skin>

#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(http://kon.tl/deopra) no-repeat right top;

text-indent: -9999px;

}

#Ganti kode yang berwarna hijau dengan link kode gambar (300px x 300 px) yang kalian inginkan
#Bisa juga diganti dengan gambar dengan link berikut http://kon.tl/deopr
Kemudian pasang lagi kode berikut di bawah kode <b:skin><![CDATA[ atau <b:skin><![CDATA[/*

<script src='http://trikblogger.googlecode.com/files/script_lipat_halaman_trikblogger.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>
Selanjutnya pasang kode berikut di bawah kode <body>

<div id='pageflip'>
<a href='http://dopind.blogspot.com/' target='_blank'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDyyWmkvoqvsc7ZgDVcps99yt_P3BOOwDzocXs-h4kVIwAtnezBGB5RxOqeUlV4brHOTtRMXvGTyGu8wLXn5QXPqBRgk1prH8IbL01iS_c5zmnZFnPuv0jXOcAL1ib3C-rOvU6UnIl2hfx/'/>
<span class='msg_block'/>
</a>
</div>

#Ganti kode yang berwarna putih dengan alamat blog atau link yang kalian ingin pasang
Terakhir klik 'Save Template' dan tinggal lihat hasilnya seperti apa ^^