Chat_YukS

Sabtu, 23 April 2011

Membuat Efek Sobekan Pada Blogger

Welcome to The Families Of 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 comments:

Posting Komentar

RSS Feedwe are friend browadd me donkkkadd me donkkkadd me on LinKeDiNadd meFollow Us on Twitter!add me browbe your friendwe are friend browSend message Friend broSend message Friend bro