Jumat, 07 Desember 2012

Membuat Efek Sobekan Pada Blogger/Postingan

Posted by redeants putra On 22.46 No comments
Welcome to Sinau Bareng Redeants
Thanks before, cause you already in My site.


Now, we will studying about "how to the affect of tear". This use "JQUARY and CSS". What are you still confused about all this? Key maksut saya sekarang kita akan belajar tentang "bagaimana membuat efek sobekan. Ini menggunakan "Jquary dan CSS. Now, are you understand?


Key my friend, direct our practice..
1. Log in your blogger account
2. Next, Go in design menu.
3. Next, go in edit-htmL.
4. Search <b:skin><![CDATA[ 
5. If you are not found. You can press CTRL+F in your keyboard. And  write the last word.
6. Put the JQuary Script Code on code <b:skin><![CDATA[   :
--------------------------------------------------------------------------------------------------------------
<script src="%3Ca%20href=%22http://code.jquery.com/jquery-latest.js%22%3Ehttp://code.jquery.com/jquery-latest.js%3C/a%3E" type="text/javascript">
<script src='http://code.jquery.com/jquery-latest.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>

--------------------------------------------------------------------------------------------------------------


7. Then, put the CSS code below the above code ]]></b:skin>



Kode CSS
#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(http://img222.imageshack.us/img222/9213/subscribe.png)
no-repeat right top;
}

8. Put this code under tag <body>
-------------------------------------------------------------------------------------------------------------
<div id="pageflip">
<a href="http://feeds2.feedburner.com/namafeedkamu">
<img alt="" src="http://img224.imageshack.us/img224/8315/pageflip.png" />
<span class="msg_block">
</span></a></div>
</div>
--------------------------------------------------------------------------------------------------------------

Note:
Look at the above code. Change bold sentece according to you wishes.


Penulis




0 komentar:

Posting Komentar

    Pribadi

    Pribadi
    Ya, beginilah tampang saya jarak dekat.

    Pengikut