Mr ThangMing: Recent Posts

ဘေလာ့မွာ MTM ရဲ႕ Recent Post Slider ေလးသုံးခ်င္ရင္

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
ဒီေန႔ Online ေပၚက ဘေလာ့ မိတ္ေဆြမ်ားကုိ လက္ေဆာင္ေလးေပးခ်င္တဲ့ ဘေလာ့နည္း ပညာ ပုိ႔(စ္)ေလးကေတာ့ တစ္ခ်ဳိ႕ ဘေလာ့မိတ္ေဆြမ်ားက တင္ေပးပါလုိ႔ ေတာင္းဆုိေနၾကတဲ့ Recent Post Slider ေလးကုိ မ်ွေ၀ေပးလုိက္ပါတယ္။ ဘေလာ့မိတ္ေဆြမ်ားကလည္း ႀကဳိက္ၾကမယ္လုိ႔ ေမွ်ာ္လင့္ထားပါတယ္။ MTM ဘေလာ့ေလးကုိ အၿမဲလာေရာက္ အားေပးေနၾကတဲ့ Online ပရိသတ္မ်ားကုိ အခုတေလာ အလုပ္ေတြမ်ားေနလုိ႔ Posts မ်ား မတင္ေပးနုိင္တဲ့ အတြက္ ခြင့္လြတ္နာလည္းေပး ေစလုိပါတယ္ဗ်ာ။ ေနာက္ အားတဲ့အခ်ိန္ၾကရင္ Online ပရိသတ္မ်ားမွ ေမးထားတာေလးေတြကုိ အကုန္းလုံး ျပန္တင္ေပးသြားမွာပါ။<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-fmVZlexjEmU/UoZGHItQMEI/AAAAAAAAE5g/qr8ArZeCuJI/s1600/slider.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://1.bp.blogspot.com/-fmVZlexjEmU/UoZGHItQMEI/AAAAAAAAE5g/qr8ArZeCuJI/s1600/slider.gif" width="239" /></a></div>
<span style="font-size: x-large;"><a href="http://www.myanmarbloggingtip.tk/2013/09/samsung-galaxy-s4-font.html" target="_blank">Views Demo</a></span><br />
<br /></div>
၁။<a href="http://blogger.com/" target="_blank" title="Enter Blogger">Sign In Blogger</a>
<br />
<br />
၂။ Template<br />
<br />
၃။ Edit HTMl<br />
<br />
၄။ ေအာက္က Cond ကုိ ရွာပါ။ <kbd>Ctrl</kbd> နဲ႔ <kbd>F</kbd> ကုိတြဲနွိပ္၍ရွာပါ။ ရွာရတာ လြယ္ကူပါတယ္။<br />
<br />
<pre class="cpp" name="code">]]></b:skin>

</pre>
<br />
၅။ ေတြ႕ၿပီးဆုိရင္ ]]></b:skin> ရဲ႕အေပၚမွာ ေအာက္က ေပးထားတဲ့ Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။<br />
<br />
<pre class="cpp" name="code">/* Slider */

.sompret-wrapper {float:right; position: relative;}

.sompret { overflow: hidden; position: relative; width:320px; height:360px;}

.image_reel { position: absolute; top: 0; left: 0; }

.image_reel img {overflow: hidden;float: left;width:320px; height:auto;}

.paging {background:#B39CFF; border:1px solid #B39CFF;padding: 4px 0 2px; text-align: right;z-index: 100; }

.paging a { text-indent:-9999px; background:url(http://mr-thangming.ucoz.com/Images/slider_item.png) no-repeat center; width:10px; height:10px; display:inline-block;margin:3px; border:none; outline:none; }

.paging a.active { background:url(http://mr-thangming.ucoz.com/Images/slider_item_active.png) no-repeat center; border:none; outline:none;}

.paging a:hover {font-weight: bold; border:none; outline:none;}

.crott { width:320px; display: none; position:absolute;bottom: 0; left: 0; z-index: 101; background: url(http://mr-thangming.ucoz.com/Images/darkbg.png);padding:5px 10px;  }

.crott a{color: #FFFFFF;font: 18px Zawgyi-one }

.crott p{color: #FFFFFF;font: 14px Zawgyi-one;}

</pre>
<br />
၆။ ၿပီးရင္ ေအာက္က Cond ကုိ ထပ္ရွာပါ။<br />
<br />
<pre class="cpp" name="code"></head>

</pre>
<br />
၇။ ရွာလုိ႔ ေတြ႕ၿပီးဆုိရင္ </head> ရဲ႕ အေပၚမွာ ေအာက္က ေပးထားတဲ့ Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။<br />
<br />
<br />
<pre class="cpp" name="code"><link href='http://static.graddit.com/css/graddit.css' rel='stylesheet' type='text/css'/>

//<![CDATA[

jQuery(document).ready(function($){

<span class="Apple-tab-span" style="white-space: pre;"> </span>var stepInterval = 400;

var initialDelay = 200;

var fadeTime = 100;

var carouselID;

var i=1;

function myAfterCall() {

<span class="Apple-tab-span" style="white-space: pre;"> </span>$('.carouselProgress').width(0);

}

function myBeforeCall() {

<span class="Apple-tab-span" style="white-space: pre;"> </span>$('#sliderTimer-header .active').removeClass('active');

<span class="Apple-tab-span" style="white-space: pre;"> </span>startProgress();

<span class="Apple-tab-span" style="white-space: pre;"> </span>carouselID = $(this).attr('id').replace('mas-', '');

<span class="Apple-tab-span" style="white-space: pre;"> </span>startProgress(carouselID);

<span class="Apple-tab-span" style="white-space: pre;"> </span>$('#mas-head-'+carouselID).addClass('active');

}

function startProgress(carouselID){

<span class="Apple-tab-span" style="white-space: pre;"> </span>parentWidth = $('#mas-head-'+carouselID).width();

$('#mas-head-'+carouselID+' .carouselProgress').animate({width: parentWidth+"px"}, (stepInterval), 'linear');

}

$('.sliderTimer-item-header').live('click', function(a){

<span class="Apple-tab-span" style="white-space: pre;"> </span>var clicked = $(this);

<span class="Apple-tab-span" style="white-space: pre;"> </span>$('.sliderTimer-item-header').each(function(e){

<span class="Apple-tab-span" style="white-space: pre;">  </span>console.log(clicked.attr('id'));

<span class="Apple-tab-span" style="white-space: pre;">  </span>console.log($(this).attr('id'));

<span class="Apple-tab-span" style="white-space: pre;">  </span>if(clicked.attr('id')!=$(this).attr('id')){

<span class="Apple-tab-span" style="white-space: pre;">   </span>$(this).children('.carouselProgress').stop();

<span class="Apple-tab-span" style="white-space: pre;">  </span>}

<span class="Apple-tab-span" style="white-space: pre;"> </span>});

});

//$('.sliderTimer-item').hover(function(){}, function(){});

<span class="Apple-tab-span" style="white-space: pre;"> </span>$('#sliderTimer').cycle({

<span class="Apple-tab-span" style="white-space: pre;">  </span>delay: initialDelay,

<span class="Apple-tab-span" style="white-space: pre;">  </span>timeout: stepInterval,

<span class="Apple-tab-span" style="white-space: pre;">  </span>speed: fadeTime,

<span class="Apple-tab-span" style="white-space: pre;">  </span>after: myAfterCall,

<span class="Apple-tab-span" style="white-space: pre;">  </span>before: myBeforeCall,

<span class="Apple-tab-span" style="white-space: pre;">  </span>pager: '#sliderTimer-header',

<span class="Apple-tab-span" style="white-space: pre;">  </span>pause: true,

<span class="Apple-tab-span" style="white-space: pre;">  </span>pagerAnchorBuilder: function(idx, slide) {

<span class="Apple-tab-span" style="white-space: pre;">   </span>carouselID = slide.id.replace('mas-', '');

<span class="Apple-tab-span" style="white-space: pre;">   </span>carouselTitle = $(slide).attr('ref');

<span class="Apple-tab-span" style="white-space: pre;">   </span>if(i==1) {

<span class="Apple-tab-span" style="white-space: pre;">    </span>myClass="active"

<span class="Apple-tab-span" style="white-space: pre;">   </span>} else {

<span class="Apple-tab-span" style="white-space: pre;">    </span>myClass="";

<span class="Apple-tab-span" style="white-space: pre;">   </span>}

<span class="Apple-tab-span" style="white-space: pre;">   </span>i++;

<span class="Apple-tab-span" style="white-space: pre;">   </span>return '<li> \

<a href="#" class="sliderTimer-item-header '+myClass+'" id="mas-head-'+carouselID+'"> \

<div class="carouselProgress"></div> \

<span class="carouselHeaderContent">'+carouselTitle+'</span> \

<span class="carouselHeaderDecorator"></span> \

</a> \

</li>';

<span class="Apple-tab-span" style="white-space: pre;">  </span>}

<span class="Apple-tab-span" style="white-space: pre;"> </span>});

<span class="Apple-tab-span" style="white-space: pre;"> </span>//$('#sliderTimer-header:first-child').addClass('active');

<span class="Apple-tab-span" style="white-space: pre;"> </span>parentWidth = $('#sliderTimer-header .active .carouselProgress').width();

<span class="Apple-tab-span" style="white-space: pre;"> </span>$('#sliderTimer-header .active .carouselProgress').animate({width: parentWidth+"px"}, (stepInterval), 'linear');

});

//]]>

</script>

$(function() {$(&#39;.sompret-image&#39;).hover(function(){$(this).find(&#39;img&#39;).animate({top:&#39;260px&#39;,right:&#39;200px&#39;},{queue:false,duration:500});}, function(){$(this).find(&#39;img&#39;).animate({top:&#39;0px&#39;,right:&#39;0px&#39;},{queue:false,duration:500});});})

</script>

//<![CDATA[

jQuery(document).ready(function() {<span class="Apple-tab-span" style="white-space: pre;"> </span>

<span class="Apple-tab-span" style="white-space: pre;"> </span>//Set Default State of each portfolio piece

<span class="Apple-tab-span" style="white-space: pre;"> </span>$(".paging").show();

<span class="Apple-tab-span" style="white-space: pre;"> </span>$(".paging a:first").addClass("active");

<span class="Apple-tab-span" style="white-space: pre;"> </span>//Get size of images, how many there are, then determin the size of the image reel.

<span class="Apple-tab-span" style="white-space: pre;"> </span>var imageWidth = $(".sompret").width();

<span class="Apple-tab-span" style="white-space: pre;"> </span>var imageSum = $(".image_reel img").size();

<span class="Apple-tab-span" style="white-space: pre;"> </span>var imageReelWidth = imageWidth * imageSum;

<span class="Apple-tab-span" style="white-space: pre;"> </span>//Adjust the image reel to its new size

<span class="Apple-tab-span" style="white-space: pre;"> </span>$(".image_reel").css({'width' : imageReelWidth});

<span class="Apple-tab-span" style="white-space: pre;"> </span>//Paging + Slider Function

<span class="Apple-tab-span" style="white-space: pre;"> </span>rotate = function(){<span class="Apple-tab-span" style="white-space: pre;"> </span>

<span class="Apple-tab-span" style="white-space: pre;"> </span>    var triggerID = $active.attr("rel") - 1; //Get number of times to slide

<span class="Apple-tab-span" style="white-space: pre;"> </span>    var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

<span class="Apple-tab-span" style="white-space: pre;"> </span>    $(".paging a").removeClass('active'); //Remove all active class

<span class="Apple-tab-span" style="white-space: pre;"> </span>    $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

<span class="Apple-tab-span" style="white-space: pre;">  </span>$(".crott").stop(true,true).slideUp('slow');

<span class="Apple-tab-span" style="white-space: pre;">  </span>$(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");

<span class="Apple-tab-span" style="white-space: pre;"> </span>    //Slider Animation

<span class="Apple-tab-span" style="white-space: pre;"> </span>    $(".image_reel").animate({

<span class="Apple-tab-span" style="white-space: pre;"> </span>        left: -image_reelPosition

<span class="Apple-tab-span" style="white-space: pre;"> </span>    }, 500 );

<span class="Apple-tab-span" style="white-space: pre;"> </span>};

<span class="Apple-tab-span" style="white-space: pre;"> </span>//Rotation + Timing Event

<span class="Apple-tab-span" style="white-space: pre;"> </span>rotateSwitch = function(){<span class="Apple-tab-span" style="white-space: pre;"> </span>

<span class="Apple-tab-span" style="white-space: pre;"> </span>$(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");<span class="Apple-tab-span" style="white-space: pre;"> </span>

<span class="Apple-tab-span" style="white-space: pre;"> </span>    play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds

<span class="Apple-tab-span" style="white-space: pre;"> </span>        $active = $('.paging a.active').next();

<span class="Apple-tab-span" style="white-space: pre;"> </span>        if ( $active.length === 0) { //If paging reaches the end...

<span class="Apple-tab-span" style="white-space: pre;"> </span>            $active = $('.paging a:first'); //go back to first

<span class="Apple-tab-span" style="white-space: pre;"> </span>        }

<span class="Apple-tab-span" style="white-space: pre;"> </span>        rotate(); //Trigger the paging and slider function

<span class="Apple-tab-span" style="white-space: pre;"> </span>    }, 10000); //Timer speed in milliseconds (3 seconds)<span class="Apple-tab-span" style="white-space: pre;"> </span>

<span class="Apple-tab-span" style="white-space: pre;"> </span>};

<span class="Apple-tab-span" style="white-space: pre;"> </span>rotateSwitch(); //Run function on launch

//On Click

$(".paging a").click(function() {

$active = $(this); //Activate the clicked paging

//Reset Timer

clearInterval(play); //Stop the rotation

rotate(); //Trigger rotation immediately

rotateSwitch(); // Resume rotation

return false; //Prevent browser jump to link anchor

});

//]]>

</script>

//<![CDATA[

imgr = new Array();

imgr[0] = "http://mr-thangming.ucoz.com/Images/noimage.jpg";

showRandomImg = true;

aBold = true;

summaryPost = 100;

summaryPost1 = 100;

summaryTitle = 12;

numposts = 1;

numposts1 = 8;

//]]>

</script>

//<![CDATA[

function resizeThumb(el, from, to) {

$(el).each(function() {

$(this).attr({

'src': $(this).attr('src').replace('/s'+from+'-c/', '/s'+to+'-c/'),

'width': to, 'height': to

});

}

$(function() {

resizeThumb('#PopularPosts1 img', '72', '105');

});

//]]>

</script>

$(function() {

$(&#39;#comments p&#39;).find(&#39;a&#39;).remove();

});

</script>

</pre>
<br />
<br />
၈။ ေအာက္ပါ အဆင့္ကုိ ထပ္သြားပါ။<br />
<br />
ဒီေနရာမွာ ေတာ့ မိမိထည့္ခ်င္တဲ့ sidebar မွာ ထည့္ရပါမယ္။ ဘယ္ေနရာ ထည့္ရမယ္ဆုိတာ အတိအက် ေျပာလုိ႔မရပါဘူး။ ဘာျဖစ္လုိ႔လဲဆုိေတာ့ Template တစ္ခုနဲ႔တစ္ခု Sidbar အေနအထား မတူညီတာေၾကာင့္ပါ။ အနည္းစဆုံးေျပရမယ္ဆုိရင္။ <span style="background-color: magenta;"><div class='widget-content'></span> (သုိ႔မဟုတ္) <span style="background-color: magenta;"><div id='sidebar-wrapper'></span> Cond ေနရာမ်ားမွာ ရွိတတ္ပါတယ္။<br />
<br />
Layout ကုိ သြားၿပီး sidebar-wrapper ေနရာမွ Widget တစ္ခုခုနဲ႔ လည္း ရွာၿပီးထည့္နုိင္ပါတယ္။<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-1y3vqtztM9g/UoZBX01rGcI/AAAAAAAAE5M/HaTmgPQNAmw/s1600/mtm2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-1y3vqtztM9g/UoZBX01rGcI/AAAAAAAAE5M/HaTmgPQNAmw/s1600/mtm2.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-LNEYF4rG1sA/UoZBhZUotAI/AAAAAAAAE5Y/ygS34DQ9EAM/s1600/mtm1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-LNEYF4rG1sA/UoZBhZUotAI/AAAAAAAAE5Y/ygS34DQ9EAM/s1600/mtm1.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
အဆင္ေျပၿပီးဆုိရင္ ေအာက္က ေပးထားတဲ့ Cond ကုိ ထည့္ေပးလုိက္ပါ။<br />
<br />
<pre class="cpp" name="code"><b:if cond='data:blog.pageType == &quot;item&quot;'>

document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);

</script></div>

</script>

</div>

</div>

</div> </b:if>

</pre>
<br />
အားလုံး ထည့္ၿပီးသြားရင္ေတာ့ Save Template ကုိ နွိပ္ေပးလုိက္ပါ။ ဘေလာ့ Post တစ္ခုခု ကုိ ဖြင့္ၾကည့္ပါ။ အဆင္ေျပသြားေတာ့မွာပါ။ ဒါမွမဟုတ္ ဘေလာ့ဖြင့္ Home Page မွာတုိင္းေပၚေစခ်င္ရင္ေတာ့<br />
<br />
<pre class="cpp" name="code"><b:if cond='data:blog.pageType == &quot;item&quot;'>

</pre>
<br />
ေနရာမွာ ေအာက္က Cond နဲ႔လဲေပးလုိက္ပါ။<br />
<br />
<pre class="cpp" name="code"><b:if cond='data:blog.url == data:blog.homepageUrl'>
</pre>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-uprSQcYLBq8/UoZNyVo_pXI/AAAAAAAAE5w/wc2u11qzX08/s1600/add.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="352" src="http://3.bp.blogspot.com/-uprSQcYLBq8/UoZNyVo_pXI/AAAAAAAAE5w/wc2u11qzX08/s1600/add.jpg" width="100%" /></a></div>
<br /></div>

ဘေလာ့မွာ MTM ရဲ႕ Recent Post Slider ေလးသုံးခ်င္ရင္

ဒီေန႔ Online ေပၚက ဘေလာ့ မိတ္ေဆြမ်ားကုိ လက္ေဆာင္ေလးေပးခ်င္တဲ့ ဘေလာ့နည္း ပညာ ပုိ႔(စ္)ေလးကေတာ့ တစ္ခ်ဳိ႕ ဘေလာ့မိတ္ေဆြမ်ားက တင္ေပးပါလုိ႔ ေတာင္း...

Show Recent Posts With Thumbnails For Particular Label Or Category In Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
ဒီေန႔ တင္ေပးလုိက္တဲ့ ဘေလာ့ နည္းပညာ ပုိ႔(စ္) ေလးကေတာ့ ဘေလာ့ မိတ္ေဆြတစ္ေယာက္က Email မွာ ေတာင္းဆုိထားလုိ႔ တစ္ျခား ဘေလာ့မိတ္ေဆြမ်ား အတြက္ပါတစ္ခါတယ္ မွ်ေ၀ေပးလုိက္ပါတယ္။ ဒီနည္းလမ္းေလးက အရမ္းကုိလန္းပါတယ္။ က်ေနာ္ ႀကဳိးစားအားထုတ္တဲ့ နည္းပညာေလးပါ။ မိမိတုိ႔၏ ဘေလာ့ Posts Labels(အမ်ဳိးအစား) အခုကုိ Recent Posts လုိ ပုံေလးေတြ လွလွေလးေပၚေအာင္ ေထာက္ပံ႔ ေပးမယ့္ Myanmar Version Labels Recent Posts နည္းေလးပါ။<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8uZChXiBMR9xfptVbuHjYVKdcdPxkGf1sk4e28BydnOQ2FwCl3lsbQBhW7O6hyphenhyphenH7KPE2dY3c21vD9OwYt3m6kJifycfwpYo3KTov0_p5sUhY4DqI55U98KYA7nEGCDXiCuWM0wpO5tVk/s1600/Untitled_1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="239" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8uZChXiBMR9xfptVbuHjYVKdcdPxkGf1sk4e28BydnOQ2FwCl3lsbQBhW7O6hyphenhyphenH7KPE2dY3c21vD9OwYt3m6kJifycfwpYo3KTov0_p5sUhY4DqI55U98KYA7nEGCDXiCuWM0wpO5tVk/s400/Untitled_1.gif" width="400" /></a></div>
<br /></div>
၁။ <a href="http://blogger.com/" target="_blank" title="Enter Blogger">Sign In Blogger</a><br />
<br />
၂။ Show Recent Posts From Particular Category/Label  Box ထဲက <span style="background-color: yellow;">Myanmar Font </span>ဆုိတဲ႔ေနရာမွာ မိမိ ပုံေစလုိတဲ့ Post Label အမည္ ေပးပါ။ ဥပမာ_ေအာက္ပုံ ကုိၾကည့္ပါ။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXLcBTYCbJMGR-4XXVKKkLB_lerOq2QTacmBtxLMwnsFXFSjqu3nHcYi_NSx9E2vxjPaYSFmaaVzCeJwVQ6JBxwAONsXunOR_8epJO-h6ujnvGGeG2pASVUX6zf7A3SJS4AAaUF1JxXnY/s1600/labe.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXLcBTYCbJMGR-4XXVKKkLB_lerOq2QTacmBtxLMwnsFXFSjqu3nHcYi_NSx9E2vxjPaYSFmaaVzCeJwVQ6JBxwAONsXunOR_8epJO-h6ujnvGGeG2pASVUX6zf7A3SJS4AAaUF1JxXnY/s1600/labe.png" /></a></div>
၃။ Blog URL: ေနရာမွာ မိမိ၏ ဘေလာ့ လိပ္စာ ေျပာင္းေပးပါ။<br />
<br />
၄။ က်န္တဲ့ဟာ ကုိ ေတာ့ Generator Setting ထဲက အတုိင္း မိမိ ႀကဳိက္ကလုိ ျပဳျပင္နုိင္ပါတယ္။ ဥပမာ ေပၚေစခ်င္ရင္ <span style="background-color: yellow;">Yes</span> ေပါ့ ၊ မေပၚေစခ်င္ရင္ <span style="background-color: yellow;">No</span> ေပါ့။ ၿပီးေတာ့ Color မ်ားကုိလည္း မိမိစိတ္တုိင္းက် ျပဳျပင္ေျပာင္းလဲနုိင္ပါတယ္။<br />
<br />
၅။ အားလုံး ၿပီးသြားရင္ <span style="background-color: yellow;"><u>Generate</u></span> ကုိ နွိပ္ၿပီး <span style="background-color: yellow;"><u>Preview</u></span> ၾကည့္နုိင္သလုိ <span style="background-color: #0b5394;"><u>Add To Blogger Button</u></span> ကုိနွိပ္၍ မိမိတုိ႔ ဘေလာ့ Site ထဲ ထည့္သြင္းနုိင္ပါတယ္။<br />
<br style="background-color: white; color: #111111; font-size: 14px; line-height: 21px;" />
<div class="alert" style="background-attachment: scroll; background-color: #fbe3e4; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFTDgqCynraE7-sZ2TSoZ3ybuXlhMxpZDTvTG4xBlCazf8eo5IfYZIpUTYiR5QLw-AUJZCXu7Ar2t-V5-wKG-sGPYPLWag4ZweP3WtHuFwMvXT_phvA-syYVf5J6pQhX5A_3uquQT6GEAF/s1600/MTM+alert.png); background-position: 0.8em 0.4em; background-repeat: no-repeat no-repeat; border: 2px solid rgb(251, 194, 196); color: #8a1f11; font-size: 14px; line-height: 21px; margin-bottom: 1em; padding: 0.8em 0.8em 0.8em 3.6em;">
<b>သင့္ Blogger Account ၀င္ၿပီးမွသာ ဤ Widget Generator ကုိ အသုံးျပဳပါ</b></div>
<div dir="ltr" style="text-align: left;" trbidi="on">
<iframe frameborder="0" height="1080px" marginheight="0px" marginwidth="0px" name="5 in 1 Slide Out Social Subscription Widget" scrolling="no" src="https://dl.dropboxusercontent.com/s/cwqhu8q8nla0gq4/Stylish%20Recent%20Posts%20Widget%20With%20Thumbnail%20From%20a%20Particular%20Label.html" style="background-color: white; border: 0px none rgb(255, 255, 255); color: #111111; font-size: 14px; line-height: 21px;" width="610px"></iframe><span style="background-color: white; color: #111111; font-size: 14px; line-height: 21px;"></span><br style="background-color: white; color: #111111; font-size: 14px; line-height: 21px;" />
<div class="success" style="background-attachment: scroll; background-color: #e6efc2; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEissYTul9v0-GBkK2BwOvLQpAZThZ9mH01dpUzEA-YFuhrmeWU527jSckDRb4nnaMPHIhCJBojIN6jMP7o40XdnAHWGmamLTvG6zufjd971SnhGGcyh-btnQQBj4VvbomXtQUZxHdWu4PWs/s1600/NBT+success.png); background-position: 0.8em 0.4em; background-repeat: no-repeat no-repeat; border: 2px solid rgb(198, 216, 128); color: #264409; font-size: 14px; line-height: 21px; margin-bottom: 1em; padding: 0.8em 0.8em 0.8em 3.6em;">
ၿပီးရင္ Save ကုိ ႏွိပ္ & သင့္ Blog ကုိ ဖြင့္ၾကည့္ပါ. အားလုံးအဆင္ေျပပါၿပီး !!</div>
</div>
</div>

Show Recent Posts With Thumbnails For Particular Label Or Category In Blogger

ဒီေန႔ တင္ေပးလုိက္တဲ့ ဘေလာ့ နည္းပညာ ပုိ႔(စ္) ေလးကေတာ့ ဘေလာ့ မိတ္ေဆြတစ္ေယာက္က Email မွာ ေတာင္းဆုိထားလုိ႔ တစ္ျခား ဘေလာ့မိတ္ေဆြမ်ား အတြက္ပါတစ္...

Auto Scrolling/Ticker Recent Post Widget With Thumbnils For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
ဒီေန႔ တင္ေပးလုိက္တဲ့ နည္းပညာ ေလးကေတာ့ ဘေလာ့မိတ္ေဆြမ်ားအတြက္ မိမိတုိ႔၏ ဘေလာ့မွာ Recent Post Widget ေလးကုိ ပုံေလးနဲ႔ တကြ လွလွပပ ေလးျဖစ္ေအာင္ ထည့္နည္း/လုပ္နည္းေလးကုိ မွ်ေ၀ေပးလုိက္ပါတယ္။ ဒီ Cond ေလးကုိ အသုံးျပဳၿပီး အဆင္မေျပခဲ့ရင္ Comments Box မွာ မွတ္ခ်က္ျပဳနုိင္ပါတယ္။ က်ေနာ္ကုိ ခင္တယ္ဆုိရင္ Google မွာ Sign In ၀င္ေပးၿပီး Facebook Like Box မွာ Like ေပးခဲ့ၾကပါ။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPvADBoBXhASBZcd_gmtiBWepy3Gq2XIArLUqJWLlWRCNTo9koNh3WY7WchJh9FtJ8x-IYQQlZmYTtMLSrA171zLXK43YBo1nWUqQwH5ONWntL1M8ek8sdZ3jXYJ7xmjQgPLCa53VPrSE/s1600/recent.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPvADBoBXhASBZcd_gmtiBWepy3Gq2XIArLUqJWLlWRCNTo9koNh3WY7WchJh9FtJ8x-IYQQlZmYTtMLSrA171zLXK43YBo1nWUqQwH5ONWntL1M8ek8sdZ3jXYJ7xmjQgPLCa53VPrSE/s1600/recent.png" /></a></div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://htmlsheen.blogspot.com/" style="font-size: 100%;" target="_blank" title="Go Check Out The Demo Live.. "><img height="35" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq1T28UHnYJ5c-Ex3Ny43eJnOtCKu7-B5i89oMD567ndzdTkPp1fe3cKRx0wML9n1gBEjL1GQKWl3FDQaMGkarx4DR-ElThuqLOrbFtLAVoZiKijVBkhJJppCP25N1e44COnxUJle_gXw/s1600/live-demo-icon.jpg" width="180" /></a></div>
၁။<a href="http://blogger.com/" target="_blank" title="Enter Blogger">Sign In Blogger</a>
<br />
<br style="background-color: white; color: #111111; font-size: 14px; line-height: 21px;" />
<div class="alert" style="background-attachment: scroll; background-color: #fbe3e4; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFTDgqCynraE7-sZ2TSoZ3ybuXlhMxpZDTvTG4xBlCazf8eo5IfYZIpUTYiR5QLw-AUJZCXu7Ar2t-V5-wKG-sGPYPLWag4ZweP3WtHuFwMvXT_phvA-syYVf5J6pQhX5A_3uquQT6GEAF/s1600/NBT+alert.png); background-position: 0.8em 0.4em; background-repeat: no-repeat no-repeat; border: 2px solid rgb(251, 194, 196); color: #8a1f11; font-size: 14px; line-height: 21px; margin-bottom: 1em; padding: 0.8em 0.8em 0.8em 3.6em;">
<b>သင့္ Blogger Account ၀င္ၿပီးမွသာ ဤ Widget Generator ကုိ အသုံးျပဳပါ</b></div>
</div>
<div dir="ltr" style="text-align: left;" trbidi="on">
<iframe frameborder="0" height="730px" marginheight="0px" marginwidth="0px" name="5 in 1 Slide Out Social Subscription Widget" scrolling="no" src="https://dl.dropboxusercontent.com/s/3gh4as1yiwv9yux/Auto%20Scrolling-Ticker%20Recent%20Post%20Widget%20With%20Thumbnils.html" style="background-color: white; border: 0px none rgb(255, 255, 255); color: #111111; font-size: 14px; line-height: 21px;" width="610px"></iframe><span style="background-color: white; color: #111111; font-size: 14px; line-height: 21px;"></span><br style="background-color: white; color: #111111; font-size: 14px; line-height: 21px;" />
<div class="success" style="background-attachment: scroll; background-color: #e6efc2; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEissYTul9v0-GBkK2BwOvLQpAZThZ9mH01dpUzEA-YFuhrmeWU527jSckDRb4nnaMPHIhCJBojIN6jMP7o40XdnAHWGmamLTvG6zufjd971SnhGGcyh-btnQQBj4VvbomXtQUZxHdWu4PWs/s1600/NBT+success.png); background-position: 0.8em 0.4em; background-repeat: no-repeat no-repeat; border: 2px solid rgb(198, 216, 128); color: #264409; font-size: 14px; line-height: 21px; margin-bottom: 1em; padding: 0.8em 0.8em 0.8em 3.6em;">
ၿပီးရင္ Save ကုိ ႏွိပ္ & သင့္ Blog ကုိ ဖြင့္ၾကည့္ပါ. အားလုံးအဆင္ေျပပါၿပီး !!</div>
</div>
</div>

Auto Scrolling/Ticker Recent Post Widget With Thumbnils For Blogger

ဒီေန႔ တင္ေပးလုိက္တဲ့ နည္းပညာ ေလးကေတာ့ ဘေလာ့မိတ္ေဆြမ်ားအတြက္ မိမိတုိ႔၏ ဘေလာ့မွာ Recent Post Widget ေလးကုိ ပုံေလးနဲ႔ တကြ လွလွပပ ေလးျဖစ္ေအာင...

How To Add Awesome Random Post widget to blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
အခုတင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့မိတ္ေဆြတစ္ေယာက္က ေတာင္းဆုိထားတဲ့ Random Post Widget ေလးကုိတင္ေပးလုိက္ပါတယ္။ သိၿပီးၾကေသာ ဘေလာ့မိတ္ေဆြမ်ားလည္းမ်ားေတာ့မွာပါ။ မသိေသးတဲ့ မိတ္ေဆြမ်ားလုိအပ္ရင္ အလြယ္တကူ ထည့္သြင္းအသုံးျပဳနုိင္ေအာင္ ထပ္မွ်ေ၀းေပးလုိက္တာပါ။ ဘေလာ့သမားမ်ားအတြက္ သုံးသင့္တဲ့ Widget ေလးပါ။ မိမိတုိ႔၏ဘေလာ့မွာ လာေရာက္အားေပးေနၾကတဲ့ ပရိသတ္မ်ားအတြက္လည္း အရမ္းအဆင္ေပးနုိင္မယ့္ အရာေလးပါ။ ပုိ႔(စ္)ေတြကုိ အလုိအေရွာက္ Random လုပ္ေပးနုိင္မယ့္ Cond ေလးပါ။ ေအာက္မွာ Demo သြားၾကည့္လုိ႔ရေအာင္ Link လည္းထားေပးပါတယ္။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrBEj09qY7oQskNm5VZDiKRx7uA9ANGXh2bXlXdpjeHK8Bti8_QMGPrvkdSeRaFynzSpgi8dxsjr8V7lkah4klcXBTRHSBZuwObHSfxAKeM1jA0NfRYYQpuka7Gq6ET2bMNBvCeTQ00nQ/s1600/post.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrBEj09qY7oQskNm5VZDiKRx7uA9ANGXh2bXlXdpjeHK8Bti8_QMGPrvkdSeRaFynzSpgi8dxsjr8V7lkah4klcXBTRHSBZuwObHSfxAKeM1jA0NfRYYQpuka7Gq6ET2bMNBvCeTQ00nQ/s1600/post.jpg" /></a></div>
<br /></div>
<span style="background-color: white; line-height: 20px;"><span style="color: lime; font-size: large;">ေအာက္က Add To Blogger ပုံကုိ Click လုိက္ပါ</span></span><br />
<span style="background-color: white; line-height: 20px;"><span style="color: lime; font-size: large;"><br /></span></span>
<a href="http://tmdemoblog.blogspot.com/2013/05/how-to-add-awesome-random-post-widget.html" style="font-size: 100%;" target="_blank" title="Go Check Out The Demo Live.. "><img height="30" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinUCIy1oMnV2AugZ50Lz3Pubf6lgouSCxn2R2XqvD7KAaEF1MfDchcnBKibp2Bbb0_Yxlb9crLvPN6xP_kot_ydHSHjm42a8455yweFIrNCzTJycMClLExfnPRbS-TSe-6y_8M2zwWZ7Fp/s1600/demo.gif" width="105" /></a><br />
<br /></div>
<form action="http://www.blogger.com/add-widget" method="POST" target="_blank">
<input name="widget.title" type="hidden" value="Random Posts" /><input name="widget.content" type="hidden" value="<style type="text/css"></style>

//Setting_end

//Define your language
var Lang_By = 'By ';
var Lang_comment = ' comment';
var Lang_comments = ' comments';

//For valid feed, not touch

How To Add Awesome Random Post widget to blogger

အခုတင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့မိတ္ေဆြတစ္ေယာက္က ေတာင္းဆုိထားတဲ့ Random Post Widget ေလးကုိတင္ေပးလုိက္ပါတယ္။ သိၿပီးၾကေသာ ဘေလာ့မိတ္ေဆြမ...

How To Add Automatic Recent Posts Slider With jQuery To Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
ဒီေန႔တင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့ မွာ Automatic Recent Posts Slider Widget ေလးထည့္နည္း/လုပ္နည္းေလးပါ။ သိၿပီးၾကေသာ ဘေလာ့မိတ္ေဆြမ်ားလည္းမ်ားနုိင္သလုိ မသိေသးတဲ့ ဘေလာ့မိတ္ေဆြမ်ားလည္းရွိနုိင္ပါတယ္။ ဒါေၾကာင့္ မသိေသးတဲ့ ဘေလာ့မိတ္ေဆြမ်ား အလြယ္တကူ လုပ္နုိင္ေအာင္ ထပ္မွ်ေ၀ေပးလုိက္တာပါ။ က်ေနာ္တင္ေပးတဲ့ Cond ေတြကုိ အမ်ားအားျဖင့္ Demo ျပေပးထားပါတယ္။ အခု ဒီ Cond ေလးကေတာ့ က်ေနာ္ ဆုိဒ္မွာလည္း သုံးေနတဲ့ Cond ေလးပါ။ Demo ကုိေတာ့ ကေနာ္ ဆုိဒ္မွာပဲ ၾကည့္ရွၾကပါ။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyMgGVxsyowr6FCIz51IfEkTZhoLdw9ztFPFa69CHnFu0nmCNgW0aELYyy7LEaelVdCIzKHwJQX2tQmbpRs9N3Y50DSvJ5XCCuIJGpoa96MynEXdaQG6vU7H6u-ZMG6m998feeKwfS1K8/s1600/RECENT~1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyMgGVxsyowr6FCIz51IfEkTZhoLdw9ztFPFa69CHnFu0nmCNgW0aELYyy7LEaelVdCIzKHwJQX2tQmbpRs9N3Y50DSvJ5XCCuIJGpoa96MynEXdaQG6vU7H6u-ZMG6m998feeKwfS1K8/s1600/RECENT~1.PNG" /></a></div>
<span style="color: orange; font-size: x-large;"><b>အဆင့္ ၁။</b></span><br />
<span style="color: orange; font-size: x-large;"><b><br /></b></span></div>
၁။<a href="http://blogger.com/" target="_blank" title="Enter Blogger">Sign In Blogger</a>
<br />
<br />
၂။ Template<br />
Cond ေပါင္းထည့္ရမွာ စိတ္မခ်ပါက <a href="http://mrthangming.blogspot.com/2012/11/how-to-backuprestore-your-blogger.html" target="_blank" title="Take a Backup/Restore of your template">Backup/Restore</a> အရင္လုပ္ေပးသင့္ပါတယ္။<br />
၃။ Edit HTMl<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHfgFBrshrABhXuNz_3i6lK4gr6ZFUSlCQlE3e21rqq8om6dJCjgGAeGuuZVIOamZFg_8qjsq3YNDZmCyr6dnZLzOXOpDiO5MyOTYdZP7Fpe-ss4Rdh-06_Zv11jCXaeoRM-bOBxBhrcE/s1600/%E1%81%86%E1%81%8B+Edit+HTML.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;" title="Tick the Expand Widget Templates check box on top right of the HTML window...."><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHfgFBrshrABhXuNz_3i6lK4gr6ZFUSlCQlE3e21rqq8om6dJCjgGAeGuuZVIOamZFg_8qjsq3YNDZmCyr6dnZLzOXOpDiO5MyOTYdZP7Fpe-ss4Rdh-06_Zv11jCXaeoRM-bOBxBhrcE/s1600/%E1%81%86%E1%81%8B+Edit+HTML.png" /></a>၄။ Proceed<br />
Expand Widget Templates ကုိအမွန္ျခစ္ေပးလုိက္ပါ
<br />
<br />
၅။ ေအာက္က  Cond ေလးကုိရွာပါ။Ctrl + F ကုိတြဲနုိပ္၍ရွာပါ ၊ ရွာရလြယ္ပါတယ္။<br />
<br />
<pre class="cpp" name="code">]]></b:skin>

</pre>
<br />
၆။ ေတြ႔ၿပီးဆုိရင္ ]]></b:skin> ရဲ႕အေပၚမွာ ေအာက္က ေပးထားတဲ့ Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။<br />
<br />
<pre class="cpp" name="code">/* START EasySlider By Mrthangming.com */

#slide-container {

height: 260px;

position: relative;

width: 320px;

}

#slider {

height: 260px;

left: 0px;

overflow-x: hidden;

overflow-y: hidden;

position: relative;

width: 320px;

font-family: calibri;

}

.slide-desc {

background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO5AgE44NjIyDbg0aZd34Dd4tpSIU93BdByiIUVyYeuMlnSGNCzvOqIcv36oG-MjT-paUsNxlA2sA12rZFOjwRy_JFSei1-q5gxpVr9auXJoeZswmzF3G1jXrKJwRuOFFn_x19BEYrnWo/s1600/darkbg.png) repeat scroll 0 0;

color: #99FF33;

padding: 0px;

position: absolute;

right: 0px;

text-align: left;

top: 0;

width: 145px;

z-index: 99FF33;

}

.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 {

/* END EasySlider By Mrthangming.com */

</pre>
၇။ ေအာက္က Cond ကုိ ထပ္ရွာပါ။<br />
<br />
<pre class="cpp" name="code"></body>

</pre>
<br />
၈။ ေတြ႕ၿပီးဆုိရင္ </body> ရဲ႕ အေပၚ(သုိ႔မဟုတ္)ေအာက္ တစ္ေနရာမွာ ေအာက္က ေပးထားတဲ့ Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။<br />
<br />
<pre class="cpp" name="code">

//<![CDATA[

$(document).ready(function(){

$("#slider").easySlider({

auto: true,

continuous: true

});

//]]>

</script>

</pre>
<br />
၉။ အားလုံးထည့္ၿပီးသြားရင္ Save Template Button ေလးကုိ နုိပ္ေပးလုိက္ပါ။<br />
<br />
<div>
<br /></div>
<div>
<span style="color: orange; font-size: x-large;"><b> အဆင့္ ၂။</b></span></div>
<div>
<br /></div>
<div>
၁။ Layout<br />
<br />
၂။ Add a Gadget<br />
<br />
၃။ HTML/JavaScript<br />
<br />
၄။ ေအာက္က ေပးထာတဲ့ Cond ေလးကုိထည့္ေပးလုိက္ပါ။<br />
<br />
<pre class="cpp" name="code"></script></center>

var numposts_gal = 15;

var numchars_gal = 150;

var random_posts = false; // random posts

</script>

</div>

</center>

</pre>
<br />
၅။ ထည့္ၿပီးရင္ Save Button ေလးကုိနုိပ္ေပးလုိက္ပါ။<br />
<br />
<span style="font-size: x-large;"><b>မွတ္ခ်က္။   ။</b></span><a href="http://mrthangming.blogspot.com/"> http://mrthangming.blogspot.com</a> ေနရာမွာ မိမိ၏ ဘေလာ့လိပ္စာ ထည့္ေပးပါ။ var numposts_gal = 15; ေနရာမွာ မိမိေပၚေစခ်င္တဲ့ Posts အေရအတြက္ ေျပာင္းနုိင္ပါတယ္။<br />
<br />
<br /></div>
</div>

How To Add Automatic Recent Posts Slider With jQuery To Blogger

ဒီေန႔တင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့ မွာ Automatic Recent Posts Slider Widget ေလးထည့္နည္း/လုပ္နည္းေလးပါ။ သိၿပီးၾကေသာ ဘေလာ့မိတ္ေဆြမ်ားလည္း...

How To Add Thumbnail Recent Post Widgets Version (1) To Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
Hello.....အားလုံးေသာမိတ္ေဆြမ်ား ေကာင္းေသာေန႔သစ္ေလးမွာ မဂၤလာပါ။ အခ်ိန္ေတြမရလုိ႔ ပုိ႔(စ္) အသစ္ေလးေတြ မတင္နုိင္တာၾကားပါၿပီး။ ဒီေန႔ေတာ့ အခ်ိန္ရလာၿပီး Thumbnail Recent Post ေလးကုိ မသိေသးတဲ့ မိတ္ေဆြေတြအတြက္ ေ၀မွ်ေပးလုိက္ပါတယ္။ အၿမဲလုိလာေရာက္အားေပးေနၾကတဲ့ မိတ္ေဆြေတြကုိလည္း အထူးေက်းဇူးတင္ရွိပါတယ္။ ေအာက္မွာ Demo ပုံ နွင့္ တကြ Cond ေပးထားပါတယ္။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQBvvYzDbV2XQBuyGxfLDXpaV-mpplu2Sbvjq8nPCLfSGnfZVZjkE9_mE3mhLYw8GYvXMX5LeTxcEDrgHfCoYd-JUsfldVYxIlj2qKt2lWMzsH_ThvxvxudlqQeDxizY-I2TtmD6HAOsk/s1600/recent+posts.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQBvvYzDbV2XQBuyGxfLDXpaV-mpplu2Sbvjq8nPCLfSGnfZVZjkE9_mE3mhLYw8GYvXMX5LeTxcEDrgHfCoYd-JUsfldVYxIlj2qKt2lWMzsH_ThvxvxudlqQeDxizY-I2TtmD6HAOsk/s1600/recent+posts.png" /></a></div>
၁။<a href="http://blogger.com/" target="_blank" title="Enter Blogger">Sign In Blogger</a>
<br />
<br />
၂။ Layout<br />
<br />
၃။ Add a Gadget<br />
<br />
၄။ HTML/JavaScript<br />
<br />
၅။ ေအာက္က ေပးထာတဲ့ Cond ေလးကုိထည့္ေပးလုိက္ပါ။<br />
<br />
<pre class="cpp" name="code"><script language="JavaScript">imgr = new Array();imgr[0]="http://i43.tinypic.com/orpg0m.jpg";imgr[1]="http://i43.tinypic.com/orpg0m.jpg";imgr[2]="http://i43.tinypic.com/orpg0m.jpg";imgr[3]="http://i43.tinypic.com/orpg0m.jpg";imgr[4]="http://i43.tinypic.com/orpg0m.jpg";showRandomImg = true;boxwidth = 298;cellspacing = 8;borderColor = "#ffffff";bgTD = "#000000";thumbwidth = 50;thumbheight = 50;fntsize = 12;acolor = "#666";aBold = true;icon = " ";text = "comments";showPostDate = false;summaryPost = 50;summarFontsize = 10;summaryColor = "#666";icon2 = " ";numposts = 5;home_page = "http://www.mrthangming.blogspot.com/";</script><script src="http://mrthangming.googlecode.com/files/recent%20posts.js" type="text/javascript"></script>

</pre>
<br />
၆။ ထည့္ၿပီးရင္ Save Button ကုိနုိပ္ေပးလုိက္ပါ။<br />
<br />
မွတ္ခ်က္။   ။<a href="http://www.mrthangming.blogspot.com/">http://www.mrthangming.blogspot.com/</a> ေနရာမွာ မိိမိ၏ Blog/Website လိပ္စာ နွင့္ အစားထုိးေပးလုိက္ပါ။(ေျပာင္းေပးပါ)<br />
<br /></div>

How To Add Thumbnail Recent Post Widgets Version (1) To Blogger

Hello.....အားလုံးေသာမိတ္ေဆြမ်ား ေကာင္းေသာေန႔သစ္ေလးမွာ မဂၤလာပါ။ အခ်ိန္ေတြမရလုိ႔ ပုိ႔(စ္) အသစ္ေလးေတြ မတင္နုိင္တာၾကားပါၿပီး။ ဒီေန႔ေတာ့ အခ်ိန္ရ...

ဘေလာ့မွာ Recent Posts ေတြကုိ Marque Sliding ပုံစံသုံးခ်င္ရင္

<div dir="ltr" style="text-align: left;" trbidi="on">
 ဒီေန့တင္တဲ့ပုိ့စ္ေလးကေတာ့ Recent Posts ေတြကုိ Marque Sliding ပုံစံသုံးခ်င္တဲ့မိတ္ေဆြေတြ<br />
အတြက္ ထပ္ၿပီမွ်ေ၀ေပးလုိက္တာပါ။ Recent post ေတြပုိအေပၚကနွင့္ေအာက္သုိ့ Sliding လုပ္<br />
ေပးတဲ့ Cond ေလးပါ။ စာေရးသူကုိယ္တုိင္းလည္း သုံးေနတဲ့ Cond ေလးပါ။<br />
 ၾကဳိက္ၾကမယ္လုိ့လည္းေမွ်ာ္လင့္ပါတယ္။ ႀကဳိက္တယ္ဆုိရင္ ေအာက္က<br />
စာေရးသူေပးထားတဲ့ Cond ေလးကုိ သုံးၾကည့္လုိက္ၾကပါ။<br />
<a href="http://www.blogger.com/blogger.g?blogID=7388332448929021318" name="more"></a><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW68JWYQ5mqWoSsIDXzMZOCsaqwlp7SJWzfvjV1pUju4c2d-NyYk_BDqU6QtXdNKdF-XRO0Jr4eMRUZTLqtd84ECXQlOZYiHzJNE9ZCV8_vJKF2FuZoLaBgMN5Uly-9_IO-BcOnbKK2YlY/s1600/mrthangming22.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW68JWYQ5mqWoSsIDXzMZOCsaqwlp7SJWzfvjV1pUju4c2d-NyYk_BDqU6QtXdNKdF-XRO0Jr4eMRUZTLqtd84ECXQlOZYiHzJNE9ZCV8_vJKF2FuZoLaBgMN5Uly-9_IO-BcOnbKK2YlY/s400/mrthangming22.png" width="257" /></a></div>
<br />
<br />
၁။Design<br />
<br />
 ၂။Layout<br />
<br />
 ၃။Add a Gadget<br />
<br />
 ၄၊၊HTML/JavaScript<br />
<br />
<br />
၅။ေအာက္က cond ေလးကု္ထည္ေပးပါ။<br />
<br />
<br />
<br />
<div>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All" /> </div>
<div align="center">
</div>
<div align="center">
<textarea cols="55" name="txt" rows="100" style="height: 200px; width: 480px;" wrap="VIRTUAL"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <style type="text/css" media="screen">    </style>   <script language='javascript'>   imgr = new Array();  imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";  imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";  imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";  imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";  imgr[4] = "http://i43.tinypic.com/orpg0m.jpg"; showRandomImg = true;  boxwidth = 255;  cellspacing = 6;  borderColor = "#232c35";  bgTD = "#000000";  thumbwidth = 70;  thumbheight = 70;  fntsize = 12;  acolor = "#666";  aBold = true;  icon = " ";  text = "Replys";  showPostDate = false;  summaryPost = 40;  summaryFontsize = 10;  summaryColor = "#666";  icon2 = " ";  numposts = 10;  home_page = "http://mrthangming.blogspot.com/";  limitspy=4 intervalspy=4000  </script>  <div id="spylist">
  <script type='text/javascript'> //<![CDATA[  /*  * Recent Post with Spy effect for blogger.com  * Script combined from bloggerstricks.com and spy effect from jqueryfordesigners.com  * By Abu Farhan (www.abu-farhan.com)  */ jQuery(function(){jQuery("ul.spy").simpleSpy(limitspy,intervalspy).bind("mouseenter",function(){jQuery(this).trigger("stop")}).bind("mouseleave",function(){jQuery(this).trigger("start")})});(function(e){e.fn.simpleSpy=function(f,g){f=f||4;g=g||5000;return this.each(function(){var l=e(this),k=true,i=[],m=f,o=0,h=l.find("> li:first").height();l.find("> li").each(function(){i.push("
<li>"+e(this).html()+"</li>
")});o=i.length;l.wrap('<div class="spyWrapper" />
').parent().css({height:h*f});l.find("> li").filter(":gt("+(f-1)+")").remove();l.bind("stop",function(){k=false}).bind("start",function(){k=true});function n(){if(k){var p=e(i[m]).css({height:0,opacity:0,display:"none"}).prependTo(l);l.find("> li:last").animate({opacity:0},1000,function(){p.animate({height:h},1000).animate({opacity:1},1000);e(this).remove()});m++;if(m>=o){m=0}}setTimeout(n,g)}n()})}})(jQuery);function showrecentposts(z){document.write('<ul class="spy">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var o=0;o<numposts;o++){var w=z.feed.entry[o];var g=w.title.$t;var f;var p;if(o==z.feed.entry.length){break}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="alternate"){p=w.link[l].href;break}}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="replies"&&w.link[l].type=="text/html"){f=w.link[l].title.split(" ")[0];break}}if("content" in w){var r=w.content.$t}else{if("summary" in w){var r=w.summary.$t}else{var r=""}}postdate=w.published.$t;if(j>imgr.length-1){j=0}img[o]=imgr[j];s=r;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){img[o]=d}cmtext=(text!="no")?'<i><font color="'+acolor+'">('+f+" "+text+")</font></i>":"";var q=[1,2,3,4,5,6,7,8,9,10,11,12];var x=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var u=postdate.split("-")[2].substring(0,2);var h=postdate.split("-")[1];var t=postdate.split("-")[0];for(var e=0;e<q.length;e++){if(parseInt(h)==q[e]){h=x[e];break}}var n=(showPostDate)?'<i><font color="'+acolor+'"> ('+u+" "+h+" "+t+")</font></i>":"";g=(aBold)?"<b>"+g+"</b>":g;var v='
<li><a href="'+p+'"><img src="'+img[o]+'" width="'+thumbwidth+'" height="'+thumbheight+'" class="recent-thumb"/></a><a href="'+p+'" class="recent-link">'+g+'</a><div class="spydate">
'+n+'</div>
<div class="spycomment">
'+cmtext+"</div>
";document.write(v);j++}document.write("</ul>
")}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');  //]]> </script> </div>

ထည့္ျပီရင္ save နုိပ္လုိက္ပါ။

မွတ္ခ်က္။ ။http://mrthangming.blogspot.com ေနရာမွာမိမိ၏ဘေလာ့နာမည္ထည့္ေပးပါ။

ဘေလာ့မွာ Recent Posts ေတြကုိ Marque Sliding ပုံစံသုံးခ်င္ရင္

ဒီေန့တင္တဲ့ပုိ့စ္ေလးကေတာ့ Recent Posts ေတြကုိ Marque Sliding ပုံစံသုံးခ်င္တဲ့မိတ္ေဆြေတြ အတြက္ ထပ္ၿပီမွ်ေ၀ေပးလုိက္တာပါ။ Recent post ေတြပုိ...

Mr ThangMing

ဘေလာ့မွာ MTM ရဲ႕ Recent Post Slider ေလးသုံးခ်င္ရင္

Show Recent Posts With Thumbnails For Particular Label Or Category In Blogger

Auto Scrolling/Ticker Recent Post Widget With Thumbnils For Blogger

How To Add Awesome Random Post widget to blogger

How To Add Automatic Recent Posts Slider With jQuery To Blogger

How To Add Thumbnail Recent Post Widgets Version (1) To Blogger

ဘေလာ့မွာ Recent Posts ေတြကုိ Marque Sliding ပုံစံသုံးခ်င္ရင္

Activity Find

Labels

Archives