αီေαααα္ေαးαဲ့ αုိα(α
္)ေαးαေαာ့ αေαာ့αာαα္ေαါα့္αွာ(Page Peel/Flip Effect Using JQuery) ααဳိα္αဲ့ Social Widget ေαးေαြαα့္αα္း/αားαα္းေαးαါ။ αေαာ့ αုိ αွαွαα αားα်α္αူေαြα‘αြα္ α‘αုံးαα္αဲ့ Cond ေαးαါ။ ααဳိα္αΎααα္ αုိααα္းေαွ်ာ္αα့္ αားαါαα္။ ေα‘ာα္αွာ Demo αြားαΎαα့္αုိααေα‘ာα္ Link αဲα ααြ αုိα‘α္αဲ့ Cond ေαြαα္း ေαးαားαါαα္။
α။Sign In Blogger
α။ Template
α။ Edit HTMl
α။ Proceed
α ။ ေα‘ာα္α Cond ေαးαုိαွာαါ။Ctrl + F αုိαြဲαုိα္၍αွာαါ ၊ αွာααြα္αါαα္။
α။ ေαြααΏαီးαုိαα္ <head> αဲαေα‘ာα္αွာ ေα‘ာα္α Cond αုိ αα္αα့္ေαးαုိα္αါ။
α။ ေα‘ာα္α Cond αုိ αα္αွာαါ။
α။ ေαြααΏαီးαုိαα္ </head> αဲα α‘ေαααွာ ေα‘ာα္α Cond αα္αα့္ေαးαုိα္αါ။
α။ ေα‘ာα္α Cond αုိ αα္αွာαါ။
αα။ ေαြααΏαီးαုိαα္ <body> αဲα α‘ေαααွာ ေα‘ာα္α Cond αုိ αα္αα္းေαးαုိα္αါ။
αွα္α်α္။ ။ blogger template αုိ Originals(αူαα္း) α‘αုိα္းα‘αုံးျαဳαူေαြαေαာ့ <body αုိαΏαီးαာαွိαါαα္။ <body αုိαΏαီαွာαါ။ <body Cond αွα့္αα္αဲ့ Cond αα ္α ု αဲαα‘ေαααွာ αα့္ေαးααါαα္။
αα။ αα့္αΏαီးαα္ Save Template αုိ αုိα္ေαးαုိα္αါ။
αွα္α်α္။ ။ http://feeds.feedburner.com/Mrthangming ေααာαွာ αိαိ၏ α‘αα္ေျαာα္းαုိα αေα့αΎααါαဲα။
α။ Template
α။ Edit HTMl
α။ Proceed
α ။ ေα‘ာα္α Cond ေαးαုိαွာαါ။Ctrl + F αုိαြဲαုိα္၍αွာαါ ၊ αွာααြα္αါαα္။
<head>
α။ ေαြααΏαီးαုိαα္ <head> αဲαေα‘ာα္αွာ ေα‘ာα္α Cond αုိ αα္αα့္ေαးαုိα္αါ။
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
α။ ေα‘ာα္α Cond αုိ αα္αွာαါ။
</head>
α။ ေαြααΏαီးαုိαα္ </head> αဲα α‘ေαααွာ ေα‘ာα္α Cond αα္αα့္ေαးαုိα္αါ။
<style type='text/css'>
img { behavior: url(iepngfix.htc) }
#pageflip {
position: absolute;
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 .back-img {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;z-index:98;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu4MmneKASVjMuG_YXiV_0GQlqBouvdG7OFSJpuipd9FopQuXfjdDq7nVxYwpd-XAPEFrd58SorqC11wHeDL5HcVZ9uXiRdjQMHbOPX9r5-dZgm1AsFWvHP4XZFVBSUx10JFDgglz8WkeB/s400/MBT-RSS-FEED.gif) no-repeat right top #fff;
}
</style><a href='http://mrthangming.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifksGxs1vW-StQbKkHNedu6RsWoEAHiHTmCnPeGAgBCuWUw76NtOlLaqgprKclm8IUuNP_3fOY42oiOSaBhhhUutcle_lM0yRhG4lOPg7idtHferqSe460VbwB-BtstdEL9tJv61bmhec/s1600/1x1juice.png'/></a><script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$("#pageflip").hover(function() {
$("#pageflip img , .back-img").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".back-img").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});
});
</script>
α။ ေα‘ာα္α Cond αုိ αα္αွာαါ။
<body>
αα။ ေαြααΏαီးαုိαα္ <body> αဲα α‘ေαααွာ ေα‘ာα္α Cond αုိ αα္αα္းေαးαုိα္αါ။
αွα္α်α္။ ။ blogger template αုိ Originals(αူαα္း) α‘αုိα္းα‘αုံးျαဳαူေαြαေαာ့ <body αုိαΏαီးαာαွိαါαα္။ <body αုိαΏαီαွာαါ။ <body Cond αွα့္αα္αဲ့ Cond αα ္α ု αဲαα‘ေαααွာ αα့္ေαးααါαα္။
<div id='pageflip'> <a href=' http://feeds.feedburner.com/Mrthangming'><img alt='Mr ThangMing' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjByBh7NAGecqQE4dCRC6hQbKSS-_dLR8GpjXcuaTP9mbxA8AUxgt9R2PbTtLWUrafvrB-WebJSrHYPC92T3O8j1BGRmyphjMQS-f-5Jvz9YNhjHE6s4mXRAWKm9PofMBOHLr27m7wxNDXB/s1600/page_flip.png'/></a> <div class='back-img'/> </div>
αα။ αα့္αΏαီးαα္ Save Template αုိ αုိα္ေαးαုိα္αါ။
αွα္α်α္။ ။ http://feeds.feedburner.com/Mrthangming ေααာαွာ αိαိ၏ α‘αα္ေျαာα္းαုိα αေα့αΎααါαဲα။
Post a Comment Blogger Facebook
α‘αုα ာαα္αူαΎαα့္ေααဲ့ αုိ့(α ္) ေαးαွာ αα္αုိαα္ျαα္α်α္αွိαဲ? α ာαα္αူαဲ့αα္ျαα္α်α္αုိ α€ေααာေαးαွာ ေαးα်αΎαα့္αါαား။..~!!!