အခုတင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့မွာ Popular Posts ေတြကုိ Slideshow ျဖင့္ ထည့္နည္း/လုပ္နည္းေလးပါ။ တခ်ဳိ႕ဘေလာ့ေတာေတာမ်ားမ်ားမွာ ဒီလုိ Posts Slideshow ေတြကုိ သိပ္အသုံးမျပဳၾကပါဘူးလုိ႔ ေျပာရင္မွားမယ္မထင္ပါဘူး။ မႀကဳိက္ၾကတာလာလုိ႔ေတာ့ မသိပါ။ ကဲကြာ ႀကဳိက္တဲ့ ဘေလာ့မိတ္ေဆြမ်ားရွိရင္ အသုံးျပဳနုိင္ေအာင္ ေအာက္မွာ Demo သြားၾကည့္လုိ႔ရေအာင္ Link နွင့္တကြ ထည့္နည္း/လုပ္နည္း နွင့္ လုိအပ္တဲ့ Cond ေတြကုိ လည္း ေပးထားပါတယ္။
၁။Sign In Blogger
၂။ Template
၃။ Edit HTMl
၄။ Proceed
၅။ ေအာက္က Cond ေလးကုိရွာပါ။Ctrl + F ကုိတြဲနုိပ္၍ရွာပါ ၊ ရွာရလြယ္ပါတယ္။
၆။ ေတြ႔ၿပီးဆုိရင္ </head> ရဲ႕ အေပၚမွာ ေအာက္က Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။
၇။ ေအာက္က Cond ကုိ ထပ္ရွာပါ။
၈။ ေတြ႕ၿပီးဆုိရင္ <b:section class='main' id='main' showaddelement='no'> ရဲ႕ ေအာက္မွာ ေအာက္က Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။
၉။ အားလုံးထည့္ ၿပီးရင္ Save Template ကုိ နုိပ္ေပးလုိက္ပါ။
၁။Sign In Blogger
၂။ Template
၃။ Edit HTMl
၄။ Proceed
၅။ ေအာက္က Cond ေလးကုိရွာပါ။Ctrl + F ကုိတြဲနုိပ္၍ရွာပါ ၊ ရွာရလြယ္ပါတယ္။
</head>
၆။ ေတြ႔ၿပီးဆုိရင္ </head> ရဲ႕ အေပၚမွာ ေအာက္က Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။
<style type='text/css'>
#gallery{position:relative;margin:0 35px 20px;width:500px;height:126px;background:#ffffff}
#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}
#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqdiRydHcgm2cTx-yRCYlcoJTWrkvwx50P_4f8J9QpVNOf6yNPs4d5f0cG35wTN1dLjM7YdZUyHVSZ5qSXNMs52npGvELkyKz_qTKa8M8kzdknmqvZDA2EWvCvlyaGykaDB0K8pWvl4Q0/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden}
#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}
#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}
</style>
<script src='http://mr-thangming.googlecode.com/files/popular.js' type='text/javascript'/>
<script src='http://mr-thangming.googlecode.com/files/popular-posts.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
stepcarousel.setup({
galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 12, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_ZecSEMSSJ_j4XvFr_VXzJyZF_1NVqMHdk7ege5FWT9WJ02lAUj26TZqDooxmLN-1rOzn0e8BTqppNNZW6AQbIbhDfDKH7EHIwJchMn-TwRwwTzLy38gTyx9O1wL1sjddtt_tJ_M9gbSB/s1600/back.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEL_erIU6Ltxzr9wRD47_iQ3SFC8LdzepC6F-IuQzko_Rwp8NW9UHTRFFQHXpFA9AiDTJLvfsPNJmgWbIDsujEEaMBTw-u7czRErGMinURuVrdEZdi33m9VFJ71wYAa4400p-F4RuxDULH/s1600/MRTHAN~1.PNG", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>
၇။ ေအာက္က Cond ကုိ ထပ္ရွာပါ။
<b:section class='main' id='main' showaddelement='no'>
၈။ ေတြ႕ၿပီးဆုိရင္ <b:section class='main' id='main' showaddelement='no'> ရဲ႕ ေအာက္မွာ ေအာက္က Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။
<b:widget id='PopularPosts7' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'>
<div id='gallery'>
<ul class='belt'>
<b:loop values='data:posts' var='post'>
<li class='panel'>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<div class='item-title'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
</div>
<div class='item-snippet'>
<data:post.snippet/>
</div>
</b:if>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>
<b:if cond='data:post.thumbnail'>
<img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMtdguVcyy90ql9pyfLTNsNTLy_LRO1TqwRDWu4extc7Mx1XUpx_UEDkwPprsOAzNk_ApfEz4zNSYX_Mz-fQfdqnmVEXqaSxLeCfKDLI7bd1enD8fYV0dl48uY7ZR7aBZierUMoQBpIYU/s1600/defaultimage.jpg'/>
</b:if>
</a>
</b:if>
</li>
</b:loop>
</ul>
</div></div></b:if>
</b:includable>
</b:widget>
၉။ အားလုံးထည့္ ၿပီးရင္ Save Template ကုိ နုိပ္ေပးလုိက္ပါ။
0 comments:
Post a Comment