အခုဟာကေတာ့ ကိုယ့္ဘေလာ့မွာ ကိုယ္တင္ေပးထားတဲ့ ပို႔စ္ေတြကို Image နဲ႔တင္ေပးထားၿပီးေတာ့ Auto ေရြ႕လ်ားေနမယ့္ Post Image Slider ေလး ျဖစ္ပါတယ္။ ပထမဆံုး Javascripts ဖိုင္ (၂)ဖိုင္ကို ေဒါင္းလုပ္ရယူပါ။ ၿပီးရင္ ကိုယ္ပိုင္ uploading တစ္ခုမွာ သြားတင္ထားပါ။ က်ေနာ္ေပးတဲ့ .js ဖိုင္ link ေတြကို ၀ိုင္းဆြဲၾကရင္ bandwidth မႏိုင္ျဖစ္သြားပါလိမ့္မယ္။ အဲဒါဆို ဒီ widget က အလုပ္လုပ္ေတာ့မွာ မဟုတ္ပါဘူး။
slider.js
jquery-1.2.6.min.js
အဲဒီ(၂)ဖိုင္ကို upload ျပန္တင္ၿပီးရင္ ေအာက္က code ေတြထဲမွာ အနီေရာင္ ျပထားတဲ့ ေနရာေတြကို အစားထိုးေပးပါ။
<script src='http://www.your_server_url/slider.js' type='text/javascript'/>
<script src='http://www.your_server_url/jquery-1.2.6.min.js' type='text/javascript'/>
<script type='text/javascript'>
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:6000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGw0mpuKLg13WP0JyMYRQ4tzDlYUX6y77NgNdObiHbXrG-KmviemayF2rTLTuXfpZ6FmR65eQSFkWaAkG4naNSqYavIJ6e3SL2Z8fHdUyY94dJ8qCI6vPYcNyaDDXgGRPEnWMqLvD3puU/s400/left.jpg', -48, 0], rightnav: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH2CpJheJKkuCDXcx6wEU9-ZQipSuMNq573CGKeH7mCvyjq2xSg1mjYrtrJe-rOuVn0qr6B7Z9ZYy-RMvQ_KnwxUlh5EC3NUSRXjYESDvM6LWEw874gwQ4xYeVMlVvsEqroruwvsFbBUI/s400/right.jpg', 0, 0]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['external'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>
Arrow ေနရာေတြ၊ Background ေနရာေတြမွာလည္း ကိုယ္ႀကိဳက္တဲ့အတိုင္း ျပင္ဆင္ႏိုင္ပါတယ္။ အားလံုးျပင္ၿပီးရင္ေတာ့ ထံုးစံအတိုင္း blogger.com ကို ၀င္ပါ။ Layout ထဲက Edit Html ကို သြားပါ။ Template ကိုေတာ့ Backup လုပ္ထားလိုက္ပါ။ ၿပီးမွ ကိုယ့္ေဒါသနဲ႔ကိုယ္ျဖစ္ေနမွာစိုးလို႔ပါ။ ၿပီးရင္ </head> ကို Ctrl+F နဲ႔ ရွာပါ။ ေတြ႔ရင္ အထက္က code ေတြကို </head> ရဲ႕အေပၚမွာ ထည့္ေပးပါ။
ေနာက္တဆင့္အေနနဲ႔ ]]></b:skin> ကို ရွာၿပီး ေအာက္ကေပးထားတဲ့ code ေတြကို သူရဲ႕အထက္မွာပဲ ထည့္ေပးလိုက္ပါ။
#myslides{
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfaVZ5ygNcgI9WbPSjngjVoJHibGDV13gfFqKXJ5MYWq7Mzl_Ih43tVjqQjopSsd6siTsEKsQ8jzCbAa6OTYL1LbMd4zLRCIkTZadBPchFVf-j0Z4p-fP_fA11WNBqham8YjILuya0VA/s1600/mslid.jpg) repeat-x;
width: 650px;
height:165px;
margin-bottom:5px;
}
.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 554px; /*Width of Carousel Viewer itself*/
height: 160px; /*Height should enough to fit largest content's height*/
margin: 0px 48px 5px 48px;
}
.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 20px 10px ; /*margin around each panel*/
width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#0e1829;
height:120px;
border:1px solid #1d2c44;
}
.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/
}
.stepcarousel .panel h2{
text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}
.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px 5px 5px; /*margin around each panel*/
padding:0px 0px;
}
အနီေရာင္နဲ႔ ျပထားတဲ့ေနရာမွာ ကိုယ္ဘေလာ့နဲ႔ ကိုက္ညီမယ့္ Image ထည့္ေပးျပင္ဆင္ႏိုင္ပါတယ္။ အားလံုးျပီးသြားရင္ေတာ့ Save ေပးလိုက္ပါ။
ၿပီးရင္ Layout ထဲက Page Element ကို ျပန္သြားပါ။ Add Page Widget ကိုႏွိပ္ပါ။ အဲဒီအထဲကမွ HTML/JavaScript ကိုေရြးပါ။ ၿပီးရင္အဲဒီအထဲကို ေအာက္က code ေတြကို ထည့္ေပးရပါမယ္။ ထည့္တဲ့အခါမွာလည္း အနီေရာင္ျပထားတဲ့ ေနရာေတြမွာ ကိုယ္ဘေလာ့မွာ တင္ထားတဲ့ လင့္ေတြနဲ႔ပံုေတြကို အစားထိုးေပးရပါမယ္။ ဒီ widget က ပို႔စ္အသစ္တင္တိုင္း လင့္နဲ႔ ပံုေတြကို အစားထိုးေပးရပါမယ္။ အားလံုးၿပီးသြားရင္ေတာ့ save လိုက္ေပါ့ဗ်ာ။ ၿပီးရင္ အဲဒီ widget ကို ပို႔စ္ ရဲ႕ အေပၚဆံုးမွာ ရွိေနေစဖို႔ အတြက္ ေနရာ ခ်ထားေပးရပါမယ္။ အားလံုးၿပီးသြားရင္ေတာ့ save ေပးလိုက္ပါ။
<div id="myslides">
<div id="mygallery" class="stepcarousel">
<div class="belt">
<!-- 1st Template -->
<div class="panel">
<a href="http://myanmarnetizen.blogspot.com/2009/12/gis-maps-and-atlases-on-agriculture-in.html" target="blank" title="gis"> <img width="170" alt="gis" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU9H75cJszKKT-WtRX8F9I_ql_rEECmZsXk9i6vvheHJXrtw3hyphenhyphenqrgpss6GoHoVnGhw4BTDeXVAF9JWdmOeYhx2g91zq7tR1ZjyLg8UnKjQIDorpg4f_uBrcfq_dNKxoig2LU9Pd3M1ak/s200/cd_disc180.gif" height="160"/> </a>
</div>
<!-- end code of 1st -->
<!-- 2nd Template -->
<div class="panel">
<a href="http://myanmarnetizen.blogspot.com/2009/11/gom-player.html" target="blank" title="gom"> <img width="170" alt="gom" src="http://1.bp.blogspot.com/_PCoYEurAJjY/Sw5OIyltAiI/AAAAAAAAAR0/fwFm8jHjZJU/s320/GOM.gif" height="160"/> </a>
</div>
<!-- end code of 2nd -->
<!-- 3rd Template -->
<div class="panel">
<a href="http://myanmarnetizen.blogspot.com/2009/11/comment.html" target="blank" title="comno"> <img width="160" alt="comno" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdQVkNyqcp_H3E5_eJ3_ROLwxiewV0LPBNmptZIdtgwvnURIvcjCET03YJ0FppKBtmigMZHvAmYkyHQbEzFACl4Pfxd-53zGmRPgy4dWkQpdfBXEXojvjAjuUf556YQCwo6cnwR0GaxbY/s320/numberingcomments.png" height="110"/> </a>
</div>
<!-- end code of 3rd -->
<!-- 4th Template -->
<div class="panel">
<a href="http://myanmarnetizen.blogspot.com/2009/11/comment-bubble-post.html" target="blank" title="comicon"> <img width="160" alt="comicon" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKSNodqxmt62lXrtqcxqlwlGQXW_SmPIwUwFj1SplNLnWOWFmKAs4eA6cFQnk69rydckgpmqdjk7EkCE1O6hyphenhyphen-7XYfwhowHIAHpBnoCLc_KCBTfHT98-sj9k6CnzoHjK70xKUlMVywwmo/s320/commentbubble.png" height="110"/> </a>
</div>
<!-- end code of 4th -->
</div></div></div>
အထက္က code ေတြကေတာ့ ပို႔စ္အသစ္တင္တိုင္း ျပန္ထည့္ထည့္ေပးဖို႔ လိုပါတယ္။ 4th Template မွာဆံုးထားေပမယ့္ ကိုယ္ထည့္ခ်င္သေလာက္ ထပ္ထည့္ေပးလို႔ ရပါတယ္။
ကဲဗ်ာ.. ဒါကေတာ့ ကိုယ္ဘေလာ့မွာ တင္ထားတဲ့ Post ေတြကို Image Slider အေနနဲ႔ ျပေပးတဲ့ Widget တစ္ခုပါ။ အားလံုး အဆင္ေျပမယ္ ထင္ပါတယ္။ အခုလို အစအဆံုး ဖတ္ေပးတဲ့အတြက္ ေက်းဇူးတင္ပါတယ္။
ၿပီးပါၿပီ ...
Post a Comment
အေပၚမွာ ေရးထားတာ နဲ႕ ပါတ္သက္လို႕ သင္ဘယ္လို ျမင္ပါသလဲ ေမးခ်င္တာ ေျပာခ်င္တာ တစ္ခုခုမ်ား ရွိခဲ့ရင္ ဒီေနရာမွာ ေျပာထားခဲ့ နိုင္ပါတယ္..။