Membuat Efek lipatan | effect mengelupas pada pojok template blogger

Sabtu, Oktober 29, 2011 Diposting oleh Unknown

Cara membuat efek mengelupas pada template
Mempercantik blogger dengan menambahkan Efek terkelupas pada pojokan template blogger anda.
Ikuti langkah mudah berikut :
  • Masuk ke Akun Blogger Anda
  • Pilih Tab Rancangan lalu klik Edit HTML
  • Cari Kode </head> dan letakan css dibawah ini sebelum kode </head>
<style type="text/css">
img { behavior: url(iepngfix.htc) }
#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSWtFMTR3d4LYYR29CNvNIcKd0StG0uMO__irJt0bt_tRQZImMgjIKqGJfLb1cm6N2jRgJJFngjc26rBwp1RBZwHSnwHc0hMRrX1Yf5aVlQguN8m-U7kgKhA2HZ8KRRhxYXhSgIczrFFb-/s320/Newspaper-Feed-icon.png) no-repeat right top;
}
</style>

<script src="http://yourjavascript.com/201011143287/Sitelearning-mengelupas.js" type="text/javascript"/>
<script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .msg_block&quot;).stop()
.animate({
width: &#39;307px&#39;,
height: &#39;319px&#39;
}, 500);
} , function() {
$(&quot;#pageflip img&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;52px&#39;
}, 220);
$(&quot;.msg_block&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;50px&#39;
}, 200);
});
});

</script>
  • Berikutnya, Cari kode ini <body>
  • Copas kode berikut setelah <body>
<div id='pageflip'>
<a href='http://www.sitelearning.net/feeds/posts/default'><img alt='Belajar bersama Sitelearning' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8JPVu5nwlAbySI_d6IokQ1FFRFdV9FDTsSc5gzJkX__7N3hv71BLDnf5vNnit2zLNYuy22wqylmUm4W4-DTv3Ox9Oj5oxgc_Ndgm8M158d9EkqZ-MCFmU_HMdGclW6BsBoCLpwQrWkEBK/s320/peel-image.png'/></a>
<div class='msg_block'></div>
</div>
  • Ganti URL Gmabar berwarna Pink dengan Url Gambar anda (128 x 128)
  • Ganti Link yang berwarna Merah dengan Url Feed anda.
  • Simpan template anda, dan Lihat hasilnya
Semoga Bermanfaat.. Salam Admin

Tag : Membuat effect mengelupas pada template | cara membuat efek lipatan pada blogger


Tags:


Share your views...

0 Respones to "Membuat Efek lipatan | effect mengelupas pada pojok template blogger"

Posting Komentar

Sebelum memberikan komentar, silahkan menjadi anggota sitelearning terlebih dahulu, Terimakasih

Langganan: Posting Komentar (Atom)
 

Langganan Artikel

Berlangganan posting Via Email:

Anggota Blog

FB Like