ဒီနားေလးကေန စလုပ္မယ္သယ္ရင္းတို႔ေရ
Template>>>Blogger Dashboard >>> Design > >>Edit HTML.ဒီကုတ္ေလးအရင္ရွာပါ]]></b:skin> ေတြ႔ရင္အဲကုတ္ေလးအထက္ကေနဒီေအာက္ကကုတ္ေလးေတြထည့္ေပးလိုက္ပါ
/* START EasySlider By helperblogger.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 helperblogger.com */ေနာက္တဆင့္က်န္ေသးတယ္ေနာ္
Edit HTML ထဲမွာပဲ </body> အဲဒါေလးကိုထပ္၇ွာပါေတြ႔ရင္ေအာက္ကုတ္ေလးေတြကိုbody>ဆိုတဲ့စာရဲ႔ေနာက္ကထည့္ေပးလိုက္ပါ<!-- Start easy content slider by helperblogger.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 helperblogger.com -->
save your template.ကိုနိပ္ျပီးအဆံုးသပ္လိုက္ပါသယ္၇င္းေ၇ LAYOUTadd a gadget ကိုနိပ္ျပီး
html/javascript ထဲမွာဒီကုတ္ေလးထည့္ျပီးsaveလိုက္တာနဲ႔သယ္ရင္းတို႔႔popular posts ေလးေတြ အဆင္ေျပသြားပါျပီ
<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> <!-- replace with your web address (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>က်ေနာ့္ဘေလာ့မွာသယ္ရင္းတို့ေတြ႔ျမင္တဲ့အတိုင္းပါပဲ က်ေနာ္ေတြ႔တာေလးမွ်ေဝေပးလိုက္တာပါ သူငယ္ခ်င္းအားလံုးအဆင္ေျပပါေစ
No comments:
Post a Comment