How To Add jQuery Popular Posts Slideshow Widget to Blogger

အခုတင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့မွာ Popular Posts ေတြကုိ Slideshow ျဖင့္ ထည့္နည္း/လုပ္နည္းေလးပါ။ တခ်ဳိ႕ဘေလာ့ေတာေတာမ်ားမ်ားမွာ ဒီလုိ Posts Slideshow ေတြကုိ သိပ္အသုံးမျပဳၾကပါဘူးလုိ႔ ေျပာရင္မွားမယ္မထင္ပါဘူး။ မႀကဳိက္ၾကတာလာလုိ႔ေတာ့ မသိပါ။ ကဲကြာ ႀကဳိက္တဲ့ ဘေလာ့မိတ္ေဆြမ်ားရွိရင္ အသုံးျပဳနုိင္ေအာင္ ေအာက္မွာ Demo သြားၾကည့္လုိ႔ရေအာင္ Link နွင့္တကြ ထည့္နည္း/လုပ္နည္း နွင့္ လုိအပ္တဲ့ Cond ေတြကုိ လည္း ေပးထားပါတယ္။

၁။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/AVvXsEhjjiDihXkJ4m6YkA2PYtYVm7Ar1KtfiWLtxFmJyDMNHbsmo3JVSnK6gZZxFXqfz5Bn9eDRTW2I8d067bHWtWMefVUDvMptZwyjLVVe6jPisTUgPQfK00A5W_JbL_owsMp5xMMf7Nc3PEU/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/AVvXsEjH4U9Kde9h5F-TFMM7ovNiWIKxngIDhN6VOEEP9efzukSQQxeuPfMTcd6DokQsbJ6Uuw0aWoslUcnXadv1GvTAeGSUgFK7D3poT-6-fN2oE_x0l4Soct8xor-dK7PG_p859n96V6bTqJfx/s1600/back.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3HQsDlPM4IrgyaV2lPXVJAoToOxAWGm9mdoF_gw5hp2jvy58BkIcv1ZdE5F12iEtwVFoYkVsVPErN29ZEhXPdPZTCSMy8qa_hRohCfTM6naiRwYBQ_9kqBfqwQQ8_KEkAiflv0DDBt0kb/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 == &quot;false&quot;'>

<b:if cond='data:showSnippets == &quot;false&quot;'>

<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/AVvXsEhwhcDS_2sfOla7rbdS_Tikcg9B9HquwleUzg6HeYfBNtgF_VzHO70W4r62iE6WmQpfrB1W_SLNyNjiJUsWUhj88F4VJZlh8IdYQFoSCkWfvfejAhyphenhyphenOWBb_ofsS8VYmTSM2Xv3KxTby4n0/s1600/defaultimage.jpg'/>

</b:if>

</a>

</b:if>

</li>

</b:loop>

</ul>

</div></div></b:if>

</b:includable>

</b:widget>

၉။ အားလုံးထည့္ ၿပီးရင္ Save Template ကုိ နုိပ္ေပးလုိက္ပါ။