မိမိရဲ႕ Blog မွာ Recent Post ေတြကို Slide Show ေတြအေနနဲ႔ေဖာ္ျပခ်င္တဲ့သူေတြ
အတြက္ အဆင္ေျပ လိမ့္မယ္ ထင္ပါတယ္။ ကြၽန္ေတာ္လည္း ဒီေနရာ ကေနကူးယူ
ေဖာ္ျပျခင္းျဖစ္ပါတယ္။ ကဲ စလုပ္ၾကည့္လိုက္ရေအာင္ပါ။
အတြက္ အဆင္ေျပ လိမ့္မယ္ ထင္ပါတယ္။ ကြၽန္ေတာ္လည္း ဒီေနရာ ကေနကူးယူ
ေဖာ္ျပျခင္းျဖစ္ပါတယ္။ ကဲ စလုပ္ၾကည့္လိုက္ရေအာင္ပါ။
- ပထမဦးဆံုးသင့္ရဲ႕ Blog ကို၀င္လိုက္ပါ။ၿပီးရင္ Template > Edit HTML ကို၀င္ပါ။
- သင့္ ဘေလာ့ကေလးရဲ႕ မူလ Template ကို Backup လုပ္ဖို႔မေမ့ပါႏွင့္။
- ၿပီးရင္ Proceed ကိုႏွိပ္၊ Expand Widget Templates ကိုအမွန္ျခစ္ပါ။
- ၿပီးရင္ Ctrl+F ကိုႏွိပ္ၿပီး ]]></b:skin> ကိုရွာပါ။
- ေတြ႕ရင္ ]]></b:skin> ရဲ႕အေပၚေလးမွာ ေအာက္ပါေပးထားတဲ့ကုဒ္ေလးကူးထည့္ပါ။
- အဲဒါဆိုရင္ ပထမအဆင့္ၿပီးသြားပါၿပီ။
- height : နဲ႕ width : မွာ ကိုယ့္ Blog နဲ႕သင့္ေတာ္သေလာက္ထည့္ႏိုင္ပါတယ္။
/* START EasySlider By kgkinzinyaw.blogspot.com */
#slide-container {
height: 360px;
position: relative;
width: 480px;
}
#slider {
height: 360px;
left: 25px;
overflow-x: hidden;
overflow-y: hidden;
position: relative;
width: 480px;
font-family: calibri;
}
.slide-desc {
background: transparent url(http://i195.photobucket.com
/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;
color: #FFFFFF;
padding: 10px;
position: absolute;
right: 0px;
text-align: left;
top: 0;
width: 200px;
z-index: 99999;
}
.slide-desc h2 {
display: block;
}
.crosscol .widget-content {
position: relative;
}
#slider ul, #slider li,
#slider2 ul, #slider2 li {
margin: 0;
padding: 0;
list-style: none;
}
#slider2 {
margin-top: 1em;
}
#slider li, #slider2 li {
/*
define width and height of list item (slide)
entire slider area will adjust according
to the parameters provided here */ width: 480px; height: 360px; overflow: hidden; } #prevBtn, #nextBtn, #slider1next, #slider1prev { display: block; width: 30px; height: 77px; position: absolute; left: -30px; text-indent: -9999px; top: 71px; z-index: 1000; } #nextBtn, #slider1next { left: 520px !important; } #prevBtn, #nextBtn, #slider1next, #slider1prev { display: block; height: 77px; left: 0; position: absolute; top: 132px; width: 30px; z-index: 1000; } #prevBtn a, #nextBtn a, #slider1next a, #slider1prev a { display: block; position: relative; width: 30px; height: 77px; background: url(http://i195.photobucket.com /albums/z105/dantearaujo/prev.png) no-repeat 0 0; } #nextBtn a, #slider1next a { background: url(http://i195.photobucket.com /albums/z105/dantearaujo/next.png) no-repeat 0 0; } /* numeric controls */ ol#controls { margin: 1em 0; padding: 0; height: 28px; } ol#controls li { margin: 0 10px 0 0; padding: 0; float: left; list-style: none; height: 28px; line-height: 28px; } ol#controls li a { float: left; height: 28px; line-height: 28px; border: 1px solid #ccc; background: #DAF3F8; color: #555; padding: 0 10px; text-decoration: none; } ol#controls li.current a { background: #5DC9E1; color: #fff; } ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus { outline: none; } /* END EasySlider By
kgkinzinyaw.blogspot.com
*/
- ဒုတိယအဆင့္အေနနဲ႔ Ctrl+F ကိုႏွိပ္ၿပီး </body> ကိုရွာပါ။
- ေတြ႕ရင္ </body> ရဲ႕ေအာက္မွာ ေအာက္ကကုဒ္ေလးကိုကူးထည့္လိုက္ပါ။
- ကူးထည့္ၿပီးသြားရင္ Save template ကိုႏွိပ္ပါ။
<!-- Start easy content slider by kgkinzinyaw.blogspot.com -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
<script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
//]]>
</script>
<!-- End easy content slider by kgkinzinyaw.blogspot.com -->
- ေနာက္ဆံုးအေနနဲ႕ Layout ကိုႏွိပ္၊ Add a gagets ကိုႏွိပ္။
- ၿပီးရင္ HTML/Java scripts ကိုႏွိပ္။ၿပီးရင္ ေအာက္က ကုဒ္ကိုကူးထည့္ပါ။
<div id="slider">
<script style="text/javascript" src="http://code.helperblogger.com/easySlider.min.js"></script>
<script style="text/javascript">
var numposts_gal = 6;
var numchars_gal = 150;
var random_posts = false; // random posts
</script>
<!-- သင့္ဘေလာ့လိပ္စာထည့္ပါရန္ (marked with red color) -->
<script src="http://yourblog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>
- အဲဒီမွာ yourblog.blogspot.com ဆိုတဲ့ေနရာမွာ သင့္ဘေလာ့လိပ္စာထည့္ပါ။
- var numposts_gal = 6; ဆိုတဲ့ေနရာမွာ သင္ထည့္ခ်င္တဲ့ Post အေရအတြက္ထည့္ပါ။
ႏွိပ္လိုက္ပါ။
No comments:
Post a Comment