ဒီေန႔တင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့ညာဘက္ေဒါင့္မွာ(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
အခုစာဖတ္သူၾကည့္ေနတဲ့ ပုိ့(စ္) ေလးမွာ ဘယ္လုိထင္ျမင္ခ်က္ရွိလဲ? စာဖတ္သူရဲ့ထင္ျမင္ခ်က္ကုိ ဤေနရာေလးမွာ ေရးခ်ၾကည့္ပါလား။..~!!!