Rabu, Juni 06, 2012

0 Membuat Efek lipatan atau di sebut Robekan pada pojok template blogger

Diposting oleh Adi Vicar Danu Nuggroho di 07.45
Mempercantik blogger dengan menambahkan Efek robekan 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/AVvXsEgE8lc9fBmXQEsmQZMOuIwBFLSg_mVRgI1GYUJDPHhaG2R65lJ2BuaJWMAWpVT3JTCnDyKVGNZWxvw5oXKdvcZfSTInndnTj7MNS7bm0KRaNohmAk1FniwwUPOaUOCmXa8A5cfyapQ9P-we/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/AVvXsEjDxrKicdvvfHcCrBVpcESi78dW5IckhzC4vNhSzKalP03rQGmh7I9-k70NTdi6JIaQwXhp_B6f1WHyue07dPGa0KLzVczoURx0RwKrtJZ4J5_kknoYGaUmxSrhfbsccmJLA7tEeTydeu_B/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 Adi Vicar Danu Nuggroho

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)
 
Adi Vicar Danu Nuggroho | © 2011 by ZERO-NINE.NET | Designer Template by Utta Vifer & Blogger Template Uniqx