Belajar bersama Sitelearning
Subscribe to RSS Feed
Follow our blog news on Twitter

Pages

Search
Posted by idoy at 13:58


 
Kali ini saya ingin berbagi tips mengenai bagaimana Cara mudah membuat efek lipatan di pojok blog-blogger-blogspot. Pasti dengan ini blog kita akan menjadi lebih menarik. Bagi temen-temen blogger yang suka dengan postingan saya ini bisa langsung ikuti langkah-langkahnya untuk membuat efek lipatan atau efek menggulung di pojok blog Saya.
 Berikut caranya :


1.Pastikan masuk di blogger.com dengan ID anda.
2.Masuk ke Rancangan dan kemudian klik edit html
3.Setelah itu cari kode </head> dan kemudian letakkan kode di bawah 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/AVvXsEjYdGChXbQfqEzEPiGEr8Q-EHV_TDICs0ZewT_zaJSYPvlMbki-HlDpkcONYRHsEo4KX-na7sAWHl8NtUcwtXwcRrcxTXjcLV5wa0NCYzg5IvsLx4Vju6-VnlQDkEQV-8lrC8TFxLNd849x/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>


4.Cari lagi kode <body>
5.Setelah ketemu copy kode dibawah ini dan letakkan setelah kode <body>


<div id='pageflip'>
<a href='http://www.dp-media.blogspot.com/feeds/posts/default'><img alt='Belajar bersama Sitelearning' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtQkmzYHE5jWJwIOzecy8oz7yMwWPAwyzslBDmOViq4FAleTVL9ZLjgwrLLlz_x_4IxFkbofoOCpRLThikyLFufIwaVB96b9q9-Fo9JMtlUJ1w9TSLgPoT6xf-cOW3Jr7Wk8aJOW7xqUCt/s320/peel-image.png'/></a>
<div class='msg_block'></div>
</div>

 6.Simpan template


Keterangan untuk tips di atas :
 * Warna merah ganti dengan url gambar anda (ukuran 128 x 128) dan warna biru ganti url feed anda.


Semoga postingan saya bermanfaat bagi anda semua. Jangan lupa komen ya kawan....
 
Sumber:http://dp-media.blogspot.com

Labels: