Mr ThangMing: JavaScript

ဘေလာ့မွာ 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 ေပၚက ဘေလာ့ မိတ္ေဆြမ်ားကုိ လက္ေဆာင္ေလးေပးခ်င္တဲ့ ဘေလာ့နည္း ပညာ ပုိ႔(စ္)ေလးကေတာ့ တစ္ခ်ဳိ႕ ဘေလာ့မိတ္ေဆြမ်ားက တင္ေပးပါလုိ႔ ေတာင္း...

Arrow Keyboard Navigation 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">
ဒီေန႔ တင္ေပးလုိက္တဲ့ နည္းပညာ ပုိ႔(စ္) ေလးကေတာ့ မိမိတုိ႔၏ ဘေလာ့ေလးကုိ Computer Keyboard တြင္ပါ၀င္ေသာ Arrow( ျမားတံ) ေလးေတြနဲ႔ မိမိဘေလာ့ထဲက ပုိ႔(စ္)မ်ားကုိ Newer Post ႏွင့္ Older Post Button ေလးေတြအသုံးျပဳစရာမလုိပဲ Keyboard Arrow( ျမားတံ) ျဖင့္ Newer Post ႏွင့္ Older Post Button ႏွိပ္သကဲ့သုိ႔ အသုံးျပဳလုိ႔ရေအာင္ လုပ္နည္း/ထည့္နည္း ေလးကုိ မသိေသးတဲ့ ဘေလာ့ မိတ္ေဆြမ်ား အတြက္ မွ်ေ၀ေပးလုိက္ပါတယ္။ ေအာက္မွာ Demo သြားၾကည့္လုိ႔ ရေအာင္ Link နဲ႔ တကြ လုိအပ္တဲ့ Cond လည္းထားေပးပါတယ္။<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-XehygwEGQWgf_Lsg4QCYHBzQF9DI8RtxuO9A7oYS9HXvSUNXOVoDxZwoPNdriRF4-euZDKXq7dIM0HPpMKA34fCNi6g8GIwqD6-G5jPamh12wLDxpJH1V5kq4UaHYNYffm6wLvy1MaU/s1600/arrow-key-navigation-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-XehygwEGQWgf_Lsg4QCYHBzQF9DI8RtxuO9A7oYS9HXvSUNXOVoDxZwoPNdriRF4-euZDKXq7dIM0HPpMKA34fCNi6g8GIwqD6-G5jPamh12wLDxpJH1V5kq4UaHYNYffm6wLvy1MaU/s1600/arrow-key-navigation-blogger.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://htmlsheen.blogspot.com/2012/10/blog-post.html" 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>
<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>
<br />
<form action="http://www.blogger.com/add-widget" method="post" target="_blank">
<input name="widget.title" type="hidden" value="Arrow Key Nav" /><input name="widget.content" type="hidden" value="<script type='text/javascript'>document.onkeyup = function(event){if (document.activeElement.nodeName == 'TEXTAREA' || document.activeElement.nodeName == 'INPUT') return;event = event || window.event;switch(event.keyCode){case 37:var newerLink = document.getElementById('Blog1_blog-pager-newer-link');if(newerLink !=null) window.location.href = newerLink.href;break;case 39:var olderLink = document.getElementById('Blog1_blog-pager-older-link');if(olderLink!=null) window.location.href = olderLink.href;}};</script>" /><input name="widget.template" type="hidden" value="<data:content/>" /><input name="infoUrl" type="hidden" value="https://plus.google.com/u/0/103359415538823163001/posts" /><input name="logoUrl" type="hidden" value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizDL7sDUKGbUjaUSpUSakOSUlOZL762eRe5iWRD6EKhN18ZVNbviH-T78Oe3GXe0Ijmc2kx7zS2hRQJuoem63nXnWCb6j-ik3urSKUxaSA7r-EYJlHCqQH04kxoTHOdbAOGNnGipKbTCs/s1600/logo.png" /><input alt="Add to Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" type="image" /></form>
</div>
<br />
ထည့္နည္းကုိ မသိေသးတဲ့ မိတ္ေဆြမ်ားရွိခဲ့ရင္ ေအာက္ပုံ ကုိ ၾကည့္ၿပီး လုပ္ေဆာင္ပါ။<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAOqBnmuUp-9g4jQMzR362rFxZ3lxUWdU_y8Tq99yntOtu_vzAMqqqQUlWBafaGGD5xkbntdkztnf46fx4FtvqPSUpZsKppZhcKirHCIMMfgphNeiYwBnD4yVKqmFiAVqzA-MwM5vMeJw/s1600/addb_1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="199" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAOqBnmuUp-9g4jQMzR362rFxZ3lxUWdU_y8Tq99yntOtu_vzAMqqqQUlWBafaGGD5xkbntdkztnf46fx4FtvqPSUpZsKppZhcKirHCIMMfgphNeiYwBnD4yVKqmFiAVqzA-MwM5vMeJw/s320/addb_1.gif" width="320" /></a></div>
<br />
<br />
<br /></div>

Arrow Keyboard Navigation For Blogger

ဒီေန႔ တင္ေပးလုိက္တဲ့ နည္းပညာ ပုိ႔(စ္) ေလးကေတာ့ မိမိတုိ႔၏ ဘေလာ့ေလးကုိ Computer Keyboard တြင္ပါ၀င္ေသာ Arrow( ျမားတံ) ေလးေတြနဲ႔ မိမိဘေလာ့ထဲက...

က်ေနာ္တုိ႔ ျမန္မာ ဘေလာ့မ်ားအတြက္ ျမန္မာ ျပကၡဒိန္ ေလးမ်ား

<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">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
ဒီေန႔ တင္ေပးခ်င္တဲ့ ပုိ႔(စ္)ေလးကေတာ့ က်ေနာ္တုိ႔ ျမန္မာ ဘေလာ့မ်ားအတြက္ ျမန္မာ ျပကၡဒိန္ ေလးမ်ားကုိ မွ်ေ၀ေပးလုိက္ပါတယ္။ သိၿပီးၾက ေသာ ဘေလာ့မိတ္ေဆြမ်ားလည္း မ်ားေတာ့ မွာပါ။ မသိေသးတဲ့ ဘေလာ့မိ္တ္ေဆြမ်ားအတြက္ ပုိ႔(စ္)ေလးတစ္ခုအေနျဖင့္ ထပ္တင္ေပးလုိက္တာပါ။ ႀကဳိက္ၾကမယ္လုိ႔လည္း ေမွ်ာ္လင့္ထားပါတယ္။ ေအာက္မွာ Demo သြားၾကည့္လုိ႔ရေအာင္ Link နွင့္တကြ Cond ေတြလည္း ထားေပးပါတယ္။ အဆင္ေျပရင္ Facebook မွာ Like ေပးၿပီး Google မွာ Sign In ၀င္ေပးၾကပါ လုိ႔ ေမတၱာရပ္ခံပါတယ္။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSzwDwVOV7EJsW3sbvd0_XSA3PtcQevC4P3LZfAKFvyCaE9szoKyat4jMmd35ADBQ9sGAppUQjGGtQKfqxInlCD_1WtLa3xcFauoZAOF06vVghv_13sOhsHQqi79YL3LcNrb9jw6hmVD8/s1600/myanmar+calendar.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSzwDwVOV7EJsW3sbvd0_XSA3PtcQevC4P3LZfAKFvyCaE9szoKyat4jMmd35ADBQ9sGAppUQjGGtQKfqxInlCD_1WtLa3xcFauoZAOF06vVghv_13sOhsHQqi79YL3LcNrb9jw6hmVD8/s1600/myanmar+calendar.png" /></a></div>
<span style="background-color: white; line-height: 20px;"><span style="color: lime; font-size: large;">ေအာက္က Add To Blogger ပုံကုိ Click လုိက္ပါ</span></span><br />
၁။<br />
<a href="http://demo-mrthangming.blogspot.com/2013/04/blog-post_20.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="" /><input name="widget.content" type="hidden" value="<script src="http://mr-thangming.googlecode.com/files/Calendar.js" type="text/javascript"></script>" /><input name="widget.template" type="hidden" value="<data:content/>" /><input name="infoUrl" type="hidden" value="http://mrthangming.blogspot.com/" /><input name="logoUrl" type="hidden" value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizDL7sDUKGbUjaUSpUSakOSUlOZL762eRe5iWRD6EKhN18ZVNbviH-T78Oe3GXe0Ijmc2kx7zS2hRQJuoem63nXnWCb6j-ik3urSKUxaSA7r-EYJlHCqQH04kxoTHOdbAOGNnGipKbTCs/s1600/logo.png" /><input alt="Add to Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" type="image" /></form>
</div>
</div>
<br />
<br />
၂။<br />
<a href="http://demo-mrthangming.blogspot.com/2013/04/var-mydatenew-datevar-yearmydate.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="" /><input name="widget.content" type="hidden" value="<script type='text/javascript'>
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var dayarray=new Array("တနဂၤေႏြ","တနလၤာ","အဂၤါ","ဗုဒၶဟူး","ၾကာသပေတး","ေသာၾကာ","စေန")
var montharray=new Array("ဇန္နဝါရီ","ေဖေဖၚဝါရီ","မတ္","ဧျပီ","ေမ","ဇြန္","ဇြန္လိုင္","ၾသဂုတ္","စက္တင္ဘာ","ေအာက္တိုဘာ","ႏိုဝင္ဘာ","ဒီဇင္ဘာ")
document.write("<p>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+"</p>")
</script></a></div>
" /><input name="widget.template" type="hidden" value="<data:content/>" /><input name="infoUrl" type="hidden" value="http://mrthangming.blogspot.com/" /><input name="logoUrl" type="hidden" value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizDL7sDUKGbUjaUSpUSakOSUlOZL762eRe5iWRD6EKhN18ZVNbviH-T78Oe3GXe0Ijmc2kx7zS2hRQJuoem63nXnWCb6j-ik3urSKUxaSA7r-EYJlHCqQH04kxoTHOdbAOGNnGipKbTCs/s1600/logo.png" /><input alt="Add to Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" type="image" /></form>
<br />
၃။<br />
<a href="http://facebook-thangming.blogspot.com/" 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="" /><input name="widget.content" type="hidden" value="<a id='mcalr' style='text-decoration: none;
font-family: Zawgyi-One;'
href='http://mrthangming.blogspot.com/2013/05/how-to-add-myanmar-calendar-widget-to-blogger.html'
target='_blank'>Myanmar Calendar</a>
<script src='http://myanmar-calendar.cool-emerald.com/mcalrs.js' type='text/javascript'></script>
" /><input name="widget.template" type="hidden" value="<data:content/>" /><input name="infoUrl" type="hidden" value="http://www.mrthangming.blogspot.com/" /><input name="logoUrl" type="hidden" value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizDL7sDUKGbUjaUSpUSakOSUlOZL762eRe5iWRD6EKhN18ZVNbviH-T78Oe3GXe0Ijmc2kx7zS2hRQJuoem63nXnWCb6j-ik3urSKUxaSA7r-EYJlHCqQH04kxoTHOdbAOGNnGipKbTCs/s1600/logo.png" /><input alt="Add to Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" type="image" /><br />
<br />
<br />
မသိေသးတဲ့ မိတ္ေဆြမ်ားရွိခဲ့လွ်င္ ေအာက္ပါ ပုံကုိ ၾကည့္ပါ။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgObAcWnHTpKyQldhrMBA2hEN6y-QzFKj7bzvgdT8E5WRA5rw2ttX-diz5CqOeVPVXEjXraNqY9dosZT7M6eJP9MrZQcRdiSwvf6GWRg70iLyHEv-2XLajDPGpjaGZ_gt_sI5vAO95_EO8/s1600/addb_1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgObAcWnHTpKyQldhrMBA2hEN6y-QzFKj7bzvgdT8E5WRA5rw2ttX-diz5CqOeVPVXEjXraNqY9dosZT7M6eJP9MrZQcRdiSwvf6GWRg70iLyHEv-2XLajDPGpjaGZ_gt_sI5vAO95_EO8/s1600/addb_1.gif" /></a></div>
<br /></form>
</div>

က်ေနာ္တုိ႔ ျမန္မာ ဘေလာ့မ်ားအတြက္ ျမန္မာ ျပကၡဒိန္ ေလးမ်ား

ဒီေန႔ တင္ေပးခ်င္တဲ့ ပုိ႔(စ္)ေလးကေတာ့ က်ေနာ္တုိ႔ ျမန္မာ ဘေလာ့မ်ားအတြက္ ျမန္မာ ျပကၡဒိန္ ေလးမ်ားကုိ မွ်ေ၀ေပးလုိက္ပါတယ္။ သိၿပီးၾက ေသာ ဘေလာ...

How To Add 3 In 1 Slide Out Social Subscribing Widget To Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
ဒီေန႔တင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ 3 In 1 Slide Out Social Subscribing Widget ေလးထည့္နည္းေလးပါ။ တစ္နည္းအားျဖင့္ Facebook Like Box , Twitter Follow Box ႏွင့္ Google+1 တုိ႔ကုိ တစ္ပ်ဥ္းတည္း ဘေလာ့ဆုိဒ္ ညာဘက္ေဒါင့္ မွာ ထည့္နည္းေလးပါ။ ႀကဳိက္ၾကမယ္လုိ႔လည္း ေမွ်ာ္လင့္ထားပါတယ္။ ေအာက္မွာ Demo သြားၾကည့္လုိ႔ရေအာင္ link ႏွင့္ တကြ လုိအပ္တဲ့ Cond ေတြလည္း ထားေပးပါတယ္။ အဆင္မေျပတာေလးမ်ားရွိခဲ့ပါက Comment Box မွာ ျပန္ေမးလုိ႔ရပါတယ္။ က်ေနာ္အတတ္နုိင္ဆုံး ျပန္စစ္ေဆးေပးမွာပါ။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji9xmRgMXYwP4z7SW-SnjYuQji1QcE-CHO6Z3BVbc-XgoK_SG-rtQHuemu9m42Ih5SLwxGh79ho08FKz_5aldilC206BL_xmkEUZNV0ql6trflrgYhjciCNMFB4jDBQBi_iaBoTqpp7qE/s1600/3IN1_1~1.GIF" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji9xmRgMXYwP4z7SW-SnjYuQji1QcE-CHO6Z3BVbc-XgoK_SG-rtQHuemu9m42Ih5SLwxGh79ho08FKz_5aldilC206BL_xmkEUZNV0ql6trflrgYhjciCNMFB4jDBQBi_iaBoTqpp7qE/s1600/3IN1_1~1.GIF" /></a></div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://mtmdemo.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 />
၂။ Layout<br />
<br />
၃။ Add a Gadget<br />
<br />
၄။ HTML/JavaScript<br />
<br />
၅။ ေအာက္က ေပးထာတဲ့ Cond ေလးကုိထည့္ေပးလုိက္ပါ။<br />
<br />
<pre class="cpp" name="code"><style>img, a {<span class="Apple-tab-span" style="white-space: pre;"> </span>border: 0;}#on {<span class="Apple-tab-span" style="white-space: pre;"> </span>visibility: visible;}#off {<span class="Apple-tab-span" style="white-space: pre;"> </span>visibility: hidden;}#facebook_div {<span class="Apple-tab-span" style="white-space: pre;"> </span>width: 196px;<span class="Apple-tab-span" style="white-space: pre;"> </span>height: 340px;<span class="Apple-tab-span" style="white-space: pre;"> </span>overflow: hidden;}#twitter_div {<span class="Apple-tab-span" style="white-space: pre;"> </span>width: 246px;<span class="Apple-tab-span" style="white-space: pre;"> </span>height: 240px;<span class="Apple-tab-span" style="white-space: pre;"> </span>overflow: hidden;}#google_plus_div {<span class="Apple-tab-span" style="white-space: pre;"> </span>width: 290px;<span class="Apple-tab-span" style="white-space: pre;"> </span>height: 250px;<span class="Apple-tab-span" style="white-space: pre;"> </span>overflow: hidden;<span class="Apple-tab-span" style="white-space: pre;"> </span>margin-left: 5px;<span class="Apple-tab-span" style="white-space: pre;"> </span>margin-top: 1px;}#MTM_div {<span class="Apple-tab-span" style="white-space: pre;"> </span>width: 300px;<span class="Apple-tab-span" style="white-space: pre;"> </span>height: 97px;<span class="Apple-tab-span" style="white-space: pre;"> </span>overflow: hidden;}/* right side style */ #facebook_right {<span class="Apple-tab-span" style="white-space: pre;"> </span>z-index: 10005;<span class="Apple-tab-span" style="white-space: pre;"> </span>border: 2px solid #3c95d9;<span class="Apple-tab-span" style="white-space: pre;"> </span>background-color: #fff;<span class="Apple-tab-span" style="white-space: pre;"> </span>width: 196px;<span class="Apple-tab-span" style="white-space: pre;"> </span>height: 353px;<span class="Apple-tab-span" style="white-space: pre;"> </span>position: fixed;<span class="Apple-tab-span" style="white-space: pre;"> </span>right: -200px;}#facebook_right img {<span class="Apple-tab-span" style="white-space: pre;"> </span>position: absolute;<span class="Apple-tab-span" style="white-space: pre;"> </span>top: -2px;<span class="Apple-tab-span" style="white-space: pre;"> </span>left: -35px;}#facebook_right iframe {<span class="Apple-tab-span" style="white-space: pre;"> </span>border: 0px solid #3c95d9;<span class="Apple-tab-span" style="white-space: pre;"> </span>overflow: hidden;<span class="Apple-tab-span" style="white-space: pre;"> </span>position: static;<span class="Apple-tab-span" style="white-space: pre;"> </span>height: 360px;<span class="Apple-tab-span" style="white-space: pre;"> </span>left: -2px;<span class="Apple-tab-span" style="white-space: pre;"> </span>top: -3px;}#twitter_right {<span class="Apple-tab-span" style="white-space: pre;"> </span>z-index: 10004;<span class="Apple-tab-span" style="white-space: pre;"> </span>border: 2px solid #6CC5FF;<span class="Apple-tab-span" style="white-space: pre;"> </span>background-color: #6CC5FF;<span class="Apple-tab-span" style="white-space: pre;"> </span>width: 246px;<span class="Apple-tab-span" style="white-space: pre;"> </span>height: 240px;<span class="Apple-tab-span" style="white-space: pre;"> </span>position: fixed;<span class="Apple-tab-span" style="white-space: pre;"> </span>right: -250px;}#twitter_right_img {<span class="Apple-tab-span" style="white-space: pre;"> </span>position: absolute;<span class="Apple-tab-span" style="white-space: pre;"> </span>top: -2px;<span class="Apple-tab-span" style="white-space: pre;"> </span>left: -35px;<span class="Apple-tab-span" style="white-space: pre;"> </span>border: 0;}#google_plus_right {<span class="Apple-tab-span" style="white-space: pre;"> </span>z-index: 10003;<span class="Apple-tab-span" style="white-space: pre;"> </span>background-color: #F2F2F2;<span class="Apple-tab-span" style="white-space: pre;"> </span>border: 2px solid #006ec9;<span class="Apple-tab-span" style="white-space: pre;"> </span>border-top: 2px solid #0056a0;<span class="Apple-tab-span" style="white-space: pre;"> </span>border-bottom: 2px solid #0056a0;<span class="Apple-tab-span" style="white-space: pre;"> </span>border-right: 2px solid #0056a0;<span class="Apple-tab-span" style="white-space: pre;"> </span>border-left: 2px solid #0056a0;<span class="Apple-tab-span" style="white-space: pre;"> </span>width: 290px;<span class="Apple-tab-span" style="white-space: pre;"> </span>height: 250px;<span class="Apple-tab-span" style="white-space: pre;"> </span>position: fixed;<span class="Apple-tab-span" style="white-space: pre;"> </span>right: -294px;}#google_plus_right_img {<span class="Apple-tab-span" style="white-space: pre;"> </span>position: absolute;<span class="Apple-tab-span" style="white-space: pre;"> </span>top: -2px;<span class="Apple-tab-span" style="white-space: pre;"> </span>left: -33px;<span class="Apple-tab-span" style="white-space: pre;"> </span>border: 0;}#MTM_right {<span class="Apple-tab-span" style="white-space: pre;"> </span>z-index: 10003;<span class="Apple-tab-span" style="white-space: pre;"> </span>border: 2px solid #303030;<span class="Apple-tab-span" style="white-space: pre;"> </span>background-color: #fff;<span class="Apple-tab-span" style="white-space: pre;"> </span>width: 300px;<span class="Apple-tab-span" style="white-space: pre;"> </span>height: 97px;<span class="Apple-tab-span" style="white-space: pre;"> </span>position: fixed;}#MTM_right img {<span class="Apple-tab-span" style="white-space: pre;"> </span>position: absolute;<span class="Apple-tab-span" style="white-space: pre;"> </span>top: -2px;<span class="Apple-tab-span" style="white-space: pre;"> </span>left: -101px;}/* left side style */ #facebook_left {<span class="Apple-tab-span" style="white-space: pre;"> </span>z-index: 10005;<span class="Apple-tab-span" style="white-space: pre;"> </span>border: 2px solid #3c95d9;<span class="Apple-tab-span" style="white-space: pre;"> </span>background-color: #fff;<span class="Apple-tab-span" style="white-space: pre;"> </span>width: 196px;<span class="Apple-tab-span" style="white-space: pre;"> </span>height: 250px;<span class="Apple-tab-span" style="white-space: pre;"> </span>position: fixed;<span class="Apple-tab-span" style="white-space: pre;"> </span>left: -200px;}#facebook_left img {<span class="Apple-tab-span" style="white-space: pre;"> </span>position: absolute;<span class="Apple-tab-span" style="white-space: pre;"> </span>top: -2px;<span class="Apple-tab-span" style="white-space: pre;"> </span>right: -35px;}#facebook_left iframe {<span class="Apple-tab-span" style="white-space: pre;"> </span>border: 0px solid #3c95d9;<span class="Apple-tab-span" style="white-space: pre;"> </span>overflow: hidden;<span class="Apple-tab-span" style="white-space: pre;"> </span>position: static;<span class="Apple-tab-span" style="white-space: pre;"> </span>height: 360px;<span class="Apple-tab-span" style="white-space: pre;"> </span>right: -2px;<span class="Apple-tab-span" style="white-space: pre;"> </span>top: -3px;}#twitter_left {<span class="Apple-tab-span" style="white-space: pre;"> </span>z-index: 10004;<span class="Apple-tab-span" style="white-space: pre;"> </span>border: 2px solid #6CC5FF;<span class="Apple-tab-span" style="white-space: pre;"> </span>background-color: #6CC5FF;<span class="Apple-tab-span" style="white-space: pre;"> </span>width: 246px;<span class="Apple-tab-span" style="white-space: pre;"> </span>height: 250px;<span class="Apple-tab-span" style="white-space: pre;"> </span>position: fixed;<span class="Apple-tab-span" style="white-space: pre;"> </span>left: -250px;}#twitter_left_img {<span class="Apple-tab-span" style="white-space: pre;"> </span>position: absolute;<span class="Apple-tab-span" style="white-space: pre;"> </span>top: -2px;<span class="Apple-tab-span" style="white-space: pre;"> </span>right: -35px;<span class="Apple-tab-span" style="white-space: pre;"> </span>border: 0;}#google_plus_left {<span class="Apple-tab-span" style="white-space: pre;"> </span>z-index: 10003;<span class="Apple-tab-span" style="white-space: pre;"> </span>background-color: #006ec9;<span class="Apple-tab-span" style="white-space: pre;"> </span>border: 2px solid #006ec9;<span class="Apple-tab-span" style="white-space: pre;"> </span>border-top: 2px solid #0056a0;<span class="Apple-tab-span" style="white-space: pre;"> </span>border-bottom: 2px solid #0056a0;<span class="Apple-tab-span" style="white-space: pre;"> </span>border-left: 2px solid #0056a0;<span class="Apple-tab-span" style="white-space: pre;"> </span>border-right: 2px solid #0056a0;<span class="Apple-tab-span" style="white-space: pre;"> </span>width: 290px;<span class="Apple-tab-span" style="white-space: pre;"> </span>height: 250px;<span class="Apple-tab-span" style="white-space: pre;"> </span>position: fixed;<span class="Apple-tab-span" style="white-space: pre;"> </span>left: -294px;}#google_plus_left_img {<span class="Apple-tab-span" style="white-space: pre;"> </span>position: absolute;<span class="Apple-tab-span" style="white-space: pre;"> </span>top: -2px;<span class="Apple-tab-span" style="white-space: pre;"> </span>right: -33px;<span class="Apple-tab-span" style="white-space: pre;"> </span>border: 0;}</style><script src="http://code.jquery.com/jquery-latest.js"></script><script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script><script type="text/javascript">jQuery(document).ready(function () {<span class="Apple-tab-span" style="white-space: pre;"> </span>jQuery("#facebook_right").hover(function () {<span class="Apple-tab-span" style="white-space: pre;">  </span>jQuery(this).stop(true, false).animate({<span class="Apple-tab-span" style="white-space: pre;">   </span>right: 0<span class="Apple-tab-span" style="white-space: pre;">  </span>}, 500);<span class="Apple-tab-span" style="white-space: pre;"> </span>}, function () {<span class="Apple-tab-span" style="white-space: pre;">  </span>jQuery("#facebook_right").stop(true, false).animate({<span class="Apple-tab-span" style="white-space: pre;">   </span>right: -200<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>jQuery("#twitter_right").hover(function () {<span class="Apple-tab-span" style="white-space: pre;">  </span>jQuery(this).stop(true, false).animate({<span class="Apple-tab-span" style="white-space: pre;">   </span>right: 0<span class="Apple-tab-span" style="white-space: pre;">  </span>}, 500);<span class="Apple-tab-span" style="white-space: pre;"> </span>}, function () {<span class="Apple-tab-span" style="white-space: pre;">  </span>jQuery("#twitter_right").stop(true, false).animate({<span class="Apple-tab-span" style="white-space: pre;">   </span>right: -250<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>jQuery("#google_plus_right").hover(function () {<span class="Apple-tab-span" style="white-space: pre;">  </span>jQuery(this).stop(true, false).animate({<span class="Apple-tab-span" style="white-space: pre;">   </span>right: 0<span class="Apple-tab-span" style="white-space: pre;">  </span>}, 500);<span class="Apple-tab-span" style="white-space: pre;"> </span>}, function () {<span class="Apple-tab-span" style="white-space: pre;">  </span>jQuery("#google_plus_right").stop(true, false).animate({<span class="Apple-tab-span" style="white-space: pre;">   </span>right: -294<span class="Apple-tab-span" style="white-space: pre;">  </span>}, 500);<span class="Apple-tab-span" style="white-space: pre;"> </span>});});</script><br /><div id="on"><span class="Apple-tab-span" style="white-space: pre;"> </span><div id="facebook_right" style="top: 12%;"><span class="Apple-tab-span" style="white-space: pre;">  </span><div id="facebook_div"><span class="Apple-tab-span" style="white-space: pre;">   </span><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_3zDRm_dFSEHAv0GgriXt3LQz5E1GK700lDb5JSaeebcwrgGrEAByfBITpIKhNVWyPHWkQL9gzXQQzHEzHAlzSEz4BDkmBVa-g3F0947JouO6rLBHHGVwdlkEkqkvXRts0G5tcpCZUjnC/s1600/MTMfacebook_right.png" /><span class="Apple-tab-span" style="white-space: pre;">   </span><iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Ftmblogtechnology&amp;width=200&amp;height=346&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false"<span class="Apple-tab-span" style="white-space: pre;">   </span>style="border: none; height: 346px; overflow: hidden; width: 200px;"></iframe><span class="Apple-tab-span" style="white-space: pre;">  </span></div><span class="Apple-tab-span" style="white-space: pre;"> </span></div></div><div id="on"><span class="Apple-tab-span" style="white-space: pre;"> </span><div id="twitter_right" style="top: 28%;"><span class="Apple-tab-span" style="white-space: pre;">  </span><div id="twitter_div"><span class="Apple-tab-span" style="white-space: pre;">   </span><img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFbppv0twk-G6CxVK0rP9-HkkWFOwlcLlpxv3ERCfBbx8rDFqFuQCcaGaIymep1hkzk5HQi5V5L_BnWay16h0pveeWwI6_4UshaKX-AcYiklMBV5m4bczTNU30aBp01sUmtBhgwUzD65fd/s1600/MTMtwitter_right.png" /><span class="Apple-tab-span" style="white-space: pre;">   </span><script type='text/javascript'>function fanbox_init(screen_name){document.getElementById('twitterfanbox').innerHTML='<iframe name="fbfanIFrame_0" frameborder="0" allowtransparency="true" src="http://s.moopz.com/connect.html?user='+screen_name+'" class="FB_SERVER_IFRAME" scrolling="no" style="width: 300px; height: 250px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; "></iframe>';}</script>  <div id="twitterfanbox">  <script type="text/javascript">fanbox_init("johnthangming");</script><span class="Apple-tab-span" style="white-space: pre;">  </span></div><span class="Apple-tab-span" style="white-space: pre;"> </span></div></div><div id="on"><span class="Apple-tab-span" style="white-space: pre;"> </span><div id="google_plus_right" style="top: 45%;"><span class="Apple-tab-span" style="white-space: pre;">  </span><div id="google_plus_div"><span class="Apple-tab-span" style="white-space: pre;">   </span><img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuYreIZVsUvREHwxKQhXYEzSNMtOZ1lCFk3X5mxR0qrXi6HNQ_qdVRlckggRZQrXzHL7c_kCpFMTByA4gDovgU5qI_nAJiKUfg2Po4R6xpTOGbcg5y8Hb88mqX9eFyF6u-Sq8i5T2AKD8/s1600/MTMgoogle_plus_right.png" /><span class="Apple-tab-span" style="white-space: pre;">   </span><div style="float: left; margin: 10px 10px 10px 0;"><span class="Apple-tab-span" style="white-space: pre;">    </span> <a href='http://mrthangming.blogspot.com'><img alt='Tips Tricks And Tutorials' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji-g9g7ndU2FvCk3YyBSDYj6b6jY6rzNoD5hnboT8WD9H8asx4ukLRl2_QEOa2EvykEMdqOHhEUbJP1eD_elhNAoi4Wp58CzmYe9tuwVmQfwjHQdQXp0w8PzynsvF4O06ATVg6NUHTx2Fe/s1600/best+blogger+tips.png'/></a>  <div class="g-plus" data-action="followers" data-height="250" data-href="https://plus.google.com/108100949889665305918" data-source="blogger:blog:followers" data-width="270">  </div>  <script type="text/javascript">        (function() {          window.___gcfg = {'lang': 'en'};          var po = document.createElement('script');          po.type = 'text/javascript';          po.async = true;          po.src = 'https://apis.google.com/js/plusone.js';          var s = document.getElementsByTagName('script')[0];          s.parentNode.insertBefore(po, s);        })();      </script>   <span class="Apple-tab-span" style="white-space: pre;">   </span></div><span class="Apple-tab-span" style="white-space: pre;">  </span></div><span class="Apple-tab-span" style="white-space: pre;"> </span></div></div></div>

</pre>
<br />
၆။ ထည့္ၿပီးရင္ Save Button ေလးကုိ နုိပ္ေပးလုိက္ပါ။<br />
<br />
<span style="font-size: x-large;"><b>မွတ္ခ်က္။      ။</b></span> ေအာက္ပါ ေဖာ္ျပပါ ေနရာ ေတြမွာ မိမိ၏ အမည္ ေျပာင္းေပးရပါမယ္။<br />
<br />
(၁) http%3A%2F%2Fwww.facebook.com%2F<a href="http://www.facebook.com/tmblogtechnology" target="_blank" title="Replace Your Name">tmblogtechnology</a><br />
<br />
(၂) fanbox_init("<a href="http://twitter.com/johnthangming" target="_blank" title="Replace Your Name">johnthangming</a>")<br />
<br />
(3) https://plus.google.com/<a href="https://plus.google.com/u/0/108100949889665305918/posts" target="_blank" title="Replace Your Name">108100949889665305918</a><br />
<br />
ေျပာင္းေပးရမွာက အျပာေရာင္ Link ကုိသာ ေျပာင္းေပးရမွာပါ။ ရွာရလြယ္ ေအာင္ အခုလုိေဖာ္ျပေပးလုိက္တာပါ။<br />
<br /></div>

How To Add 3 In 1 Slide Out Social Subscribing Widget To Blogger

ဒီေန႔တင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ 3 In 1 Slide Out Social Subscribing Widget ေလးထည့္နည္းေလးပါ။ တစ္နည္းအားျဖင့္ Facebook Like Box , Twitter F...

How To Add Flash Animated Label Cloud 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">
အခုတင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့မိတ္ေဆြတစ္ေယာက္က Comment Box မွာေတာင္းဆုိထားတဲ့ Label(ပုိ႔(စ္)အမ်ဳိးအစားေတြ ကုိ Flash Animated ျဖင့္ ထည့္သုံးနည္းေလးကုိတင္ေပးလုိက္ပါတယ္။ အရင္က ပုိ႔(စ္)အေဟာင္းမွာလည္း ၂ခုေလာက္တင္ေပးၿပီးပါၿပီး။ Cond တစ္ခုနဲ႔တစ္ခု မတူတာေၾကာင့္ ဒီနည္းက ပုိၿပီးရွင္းလင္းတယ္လုိ႔ ထင္ၿပီး ထပ္မွ်ေ၀ေပးလုိက္တာပါ။ ႀကဳိက္ၾကမယ္လုိ႔လည္းေမွ်ာ္လင္းပါတယ္။ ေအာက္မွာ Demo သြားၾကည့္လုိ႔ရေအာင္ Link နဲ႔ တကြ Cond လည္းထားေပးပါတယ္။  ဒီ Flash Animated Label Cloud Widget နဲ႔ ပတ္သတ္တဲ့ အေသးစိတ္အေၾကာင္းအရာကုိိ သိခ်င္ရင္ ေတာ့ <a href="http://www.roytanck.com/2008/05/19/how-to-repurpose-my-tag-cloud-flash-movie/" target="_blank">ဒီေနရာေလးမွာ</a> ေလ့လာနုိင္မွာျဖစ္ပါတယ္။ 
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCZSNU5XS40mKx-Cdg5X3jeT2PSX2oY-7HXAC-gTrHNyoFDktoK96O-fCWuaqXnUk1pyIWNrm3FVJ1mm5xOQKFOyNngweetNGsUhcjfxQ-MovYZFmIRZ8ovKIf3aIy8YyEh34kmRbnF5Y/s1600/label.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCZSNU5XS40mKx-Cdg5X3jeT2PSX2oY-7HXAC-gTrHNyoFDktoK96O-fCWuaqXnUk1pyIWNrm3FVJ1mm5xOQKFOyNngweetNGsUhcjfxQ-MovYZFmIRZ8ovKIf3aIy8YyEh34kmRbnF5Y/s1600/label.png" /></a></div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://demo-mrthangming.blogspot.com/2013/04/mrthangming-posts-title.html" 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 />
၂။ Layout<br />
<br />
၃။ Add a Gadget<br />
<br />
၄။ HTML/JavaScript<br />
<br />
၅။ ေအာက္က ေပးထာတဲ့ Cond ေလးကုိထည့္ေပးလုိက္ပါ။<br />
<br />
<pre class="cpp" name="code"><div id="NBTFlashContent"><p style="display:none;">Flash Labels by <a href="http://www.mrthangming.blogspot.com/">NBT</a></p></div>  <script type="text/javascript">  /*<![CDATA[*/  var NBTFlashLabelSettings = {      blogurl        : "ဤေနရာေလးမွာ မိမိ၏ ဘေလာ့လိပ္စာထည့္ေပးပါ",      color          : "545413",      hoverColor     : "210e6e",      backgroundColor: "FFFFFF",      size             : 12,      speed         : 100,      width          : 320,      height         : 250,      transparency   :true  };  /*]]>*/  </script>  <script type="text/javascript" src="http://mr-thangming.googlecode.com/files/MTM-Blog-Label.js"></script>

</pre>
<br />
၆။ ထည့္ၿပီးရင္ Save Button ေလးကုိနုိပ္ေပးလုိက္ပါ။</div>
<div>
<br /></div>
<div>
<span style="font-size: x-large;"><b>မွတ္ခ်က္။   ။</b></span> <span style="color: blue;">{      blogurl        : "ဤေနရာေလးမွာ မိမိ၏ ဘေလာ့လိပ္စာထည့္ေပးပါ"</span> ေနရာမွ မိမိ၏ ဘေလာ့ လိပ္စာ ထည့္ေပးပါ။ ဥပမာ_ <a href="http://www.mrthangming.blogspot.com/">http://www.mrthangming.blogspot.com/</a>  လုိ႔ထည့္ေပးရပါမယ္။</div>
<br />
<br /></div>

How To Add Flash Animated Label Cloud Widget To Blogger

အခုတင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့မိတ္ေဆြတစ္ေယာက္က Comment Box မွာေတာင္းဆုိထားတဲ့ Label(ပုိ႔(စ္)အမ်ဳိးအစားေတြ ကုိ Flash Animated ျဖင့္ ထ...

How To Add Embed YouTube Videos In Blogger Comments Box

<div dir="ltr" style="text-align: left;" trbidi="on">
ဒီေန႔တင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့ Comments Box မွာ  Embed YouTube Videos မ်ားထည့္လုိ႔ရေအာင္ လုပ္နည္းေလးပါ။ က်ေနာ္တုိ႔ ျမန္မာ ဘေလာ့ေတြမွာေတာ့ သုံးတဲ့ သူမရွိသေလာက္ပါပဲလုိ႔ေျပာနုိင္ပါတယ္။ မႀကဳိက္ၾကတာလာေတာ့ မသိပါ။ ႀကဳိက္တဲ့ ဘေလာ့မိတ္ေဆြမ်ားရွိရင္ အလြယ္တကူ လုပ္လုိ႔ရေအာင္ တင္ေပးလုိက္တာပါ။ ေအာက္မွာ Demo(နမူနာ) သြားၾကည့္ လုိ႔ရေအာင္ Link{လင့္(ခ္)} နွင့္ တကြ လုပ္နည္းနဲ႔ လုိအပ္တဲ့ Cond ေတြလည္းေပးထားပါတယ္။<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8DL8fnn4wZQC5J8IO0iybsfTI28Lt8oaad0bDVExCTNynbaJovy1u_ZfSxjz9Br7qDWuFI7fXK2jTz2rajLOMNUzFNfI23n0CnV54durwbx1VNHJ_94qCLb1IcuvO_54pXMoDGSzfdgw/s1600/EMBEDY~1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8DL8fnn4wZQC5J8IO0iybsfTI28Lt8oaad0bDVExCTNynbaJovy1u_ZfSxjz9Br7qDWuFI7fXK2jTz2rajLOMNUzFNfI23n0CnV54durwbx1VNHJ_94qCLb1IcuvO_54pXMoDGSzfdgw/s1600/EMBEDY~1.JPG" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://mtmdemo.blogspot.com/2013/04/how-to-create-a-new-blogger.html" 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 />
၂။ 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 />
၄။ Proceed<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxz1mFb7tWnisQzytpbnDy2NrH9Dmka3QObLAWIY1cFSrFkwfvK7cABckjTKMYaqw54Yx5Ud3I8ToQgTOU-fThL_0FBlc55JMkOYQVVDngmfJzfro5eliRa-DsNfztEDi622juCivvcYI/s1600/box.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxz1mFb7tWnisQzytpbnDy2NrH9Dmka3QObLAWIY1cFSrFkwfvK7cABckjTKMYaqw54Yx5Ud3I8ToQgTOU-fThL_0FBlc55JMkOYQVVDngmfJzfro5eliRa-DsNfztEDi622juCivvcYI/s200/box.png" width="200" /></a>၅။ ေအာက္က  Cond ေလးကုိရွာပါ။Ctrl + F ကုိတြဲနုိပ္၍ရွာပါ ၊ ရွာရလြယ္ပါတယ္။<br />
<br />
<pre class="cpp" name="code"></head>

</pre>
<br />
၆။ ေတြ႔ၿပီးဆုိရင္ </head> ရဲ႕ အေပၚမွာ ေအာက္က ေပးထားတဲ့ Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။<br />
<br />
<pre class="cpp" name="code"><script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

//<![CDATA[

// Embed youtube videos in Blogspot comments by Mr-ThangMing 2012.

// See http://mrthangming.blogspot.com/2013/04/How-To-Add-Embed-YouTube-Videos-In-Blogger-Comments-Box.html

// if oetag=0, just use video urls like:

//           http://www.youtube.com/watch?v=12345678901

//           surrounded by white space (video tag can be used, too)

// if oetag=1 (for nerdy blogs?), use syntax:

//           [video=http://www.youtube.com/watch?v=12345678901]

// config:

var oetag = 0;           // see above

var oetagname = "video"; // [video=zzz], maybe you like "embed" or "youtube" more?

var oelazy = -1; // -1 detect, 0 = normal, 1 = lazy (needs lazy load hack)

function oe_loadscript(filename) {

var scr=document.createElement('script');

scr.setAttribute("type","text/javascript");

scr.setAttribute("src",filename);

document.getElementsByTagName("head")[0].appendChild(scr);

}

function oe_jumptohash() { // reposition to anchor

window.scrollTo(0, $("#"+window.location.hash.replace(/^#/, "")).offset().top);

}

var oe_tid;

var oe_elems = {};

function oembed_callback(response) {

var resp = response;

revurl = resp.url.split("").reverse().join("");

html = oe_elems[response.callID].html();

ee = $(resp.html);

w = parseInt(ee.attr("width"));

h = parseInt(ee.attr("height"));

if(oelazy==1) { // convert to lazy load

src = ee.attr("src");

src += ((src.indexOf("?")==-1) ? "?" : "&") + "autoplay=1";

ee.attr("src", src);

ee.attr("style", "vertical-align:top;");

htm = $("<div/>").append(ee).html();

htm = $('<div/>').text(htm).html().replace(/"/g,'&quot;');

resp.html = '<a href="'+resp.url+'" class="youtube-lazy-link" style="width: '+w+'px; height: '+h+'px; background: #000 url('+resp.thumbnail_url+') center center no-repeat;" onclick="$(this).replaceWith(\''+htm+'\');return false;"><div style="width:'+(w-4)+'px;height:'+(h-4)+'px;" class="youtube-lazy-link-div"></div><div class="youtube-lazy-link-info"><b>'+resp.title+(resp.playlist ? '</b> [playlist]' : '</b>')+'<br /><small>by '+resp.author_name+'</small></div></a>';

}

htmlx = html.replace(new RegExp("\\[" + oetagname + "="+resp.url.replace("/", "\\/").replace(".", "\\.").replace("?", "\\?")+"\\]"), " " + resp.url + " ");

htmlx = htmlx.replace(new RegExp("\\[" + oetagname + "="+resp.url.replace("/", "\\/").replace(".", "\\.").replace("?", "\\?")+" \\]"), " " + resp.url + " ");

htmlx = htmlx.replace(new RegExp('"'+resp.url.replace("/", "\\/").replace(".", "\\.").replace("?", "\\?")+'"', "g"), '"'+revurl+'"');  // trick to preserve href="url"

htmlx = htmlx.replace(new RegExp(resp.url.replace("/", "\\/").replace(".", "\\.").replace("?", "\\?")), '<div style="height:'+h+'px;" class="oembed youtube">'+resp.html+'</div>')

htmlx = htmlx.replace(new RegExp('"'+revurl.replace("/", "\\/").replace(".", "\\.").replace("?", "\\?")+'"', "g"), '"'+resp.url+'"');  // trick to preserve href="url"

if(html != htmlx) {

oe_elems[response.callID].html(htmlx);

if(window.location.hash.replace(/^#/, "").length > 0) {

if(oe_tid) window.clearTimeout(oe_tid);

oe_tid = window.setTimeout("oe_jumptohash()", 1000);

}

function oembed_yt(url, width, callID) {

src = "http://oembed-js.appspot.com/?url=" + encodeURIComponent(url) + "&callback=oembed_callback&callID=" + encodeURIComponent(callID);

if(width) src = src + "&maxwidth=" + width + "&maxheight=" + width;

oe_loadscript(src);

}

$(document).ready(function() {

det=$('<div class="youtube-lazy-link-div" />');

$("body").append(det);

if(det.css("position")=="absolute") {

if(oelazy != 0) oelazy=1;

}

else oelazy = 0;

det.remove();

window.setTimeout(function() {

var callID=0;

$(".comment-content,.comment-body,.comment-body-author").each(function() {

html = " " + $(this).html() + " ";

if(oetag)

matches = html.match(new RegExp("\\["+oetagname+"=(https?:\\/\\/[^\\s<\\/]*youtu\\.*be[^\\]]+)", "g"));

else

matches = html.match(/([>\s^]|\[\w+=)(https?:\/\/[^\s<\/]*youtu\.*be[^\s<\]]+)/g);

if(matches && matches.length) {

for(var i=0;i<matches.length;i++) {

url = matches[i].match(/https?:\/\/[^\s<\/]*youtu\.*be[^\s<\]]+/);

oe_elems[callID] = $(this);

oembed_yt(url, $(this).width(), callID++);

}

});

}, 500);

});

//]]>

</script>

</pre>
<br />
၇။ ထည့္ၿပီးရင္ Save Template Button ေလးကုိ နုိပ္ေပးလုိက္ပါ။<br />
<br />
<span style="font-size: large;"><b>မွတ္ခ်က္။   ။ </b></span>Blog Comment Box မွာ [video=ဤေနရာမွာ မိမိႀကဳိက္တဲ့ YouTube လင့္(ခ္) ထည့္ပါ] ဆုိၿပီထည့္ရပါမယ္။<br />
<br />
<pre class="cpp" name="code"> [video=ဤေနရာမွာ မိမိႀကဳိက္တဲ့ YouTube လင့္(ခ္) ထည့္ပါ]

</pre>
<br />
<span style="color: orange; font-size: large;"><b>ဥပမာ_</b></span>[video=http://www.youtube.com/watch?v=ZVHPKBlw4-0]<br />
<br />
<pre class="cpp" name="code">[video=http://www.youtube.com/watch?v=ZVHPKBlw4-0]

</pre>
<br /></div>

How To Add Embed YouTube Videos In Blogger Comments Box

ဒီေန႔တင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့ Comments Box မွာ Embed YouTube Videos မ်ားထည့္လုိ႔ရေအာင္ လုပ္နည္းေလးပါ။ က်ေနာ္တုိ႔ ျမန္မာ ဘေလာ့ေတြမွ...

Show Pinterest Pin it Button On Images On Mouse Hover

<div dir="ltr" style="text-align: left;" trbidi="on">
ဒီေန႔တင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့ပုိ႔(စ္)မွာ တင္ထားတဲ့ Images(ဓါတ္ပုံ)ေတြကုိ Mouse{ေမာ့(စ္)} နဲ႔ထိလုိက္ရင္ Pinterest, Icon(ရုပ္ပုံ)ေလးေပၚလာၿပီး ထုိ Icon(ရုပ္ပုံ) ေလးကုိ တစ္ခ်က္ Click(နုိပ္)လုိက္ရင္ Pinterest ID ထဲ Auto ထည့္လုိ႔ရေအာင္ လုပ္နည္း/ထည့္နည္းေလးပါ။ အရမ္းလည္းမုိက္ပါတယ္။ ဒီနည္းကုိ သုံးတဲ့ ဘေလာ့မိတ္ေဆြမ်ားမရွိသေလာက္ပါပဲလုိ႔ ေျပာရရင္ မွားမယ္မထင္ပါဘူး။ မႀကဳိက္ၾကတာလုိေတာ့ မသိပါ။ ဒါေပမယ့္ စာေရးသူအႀကဳိက္မုိ႔လုိ႔ လုိအပ္တဲ့ ဘေလာ့မိတ္ေဆြမ်ားအတြက္ ျပန္လည္မွ်ေ၀ေပးလုိက္တာပါ။ Demo ကုိေတာ့ က်ေနာ္ ဘေလာ့ဆုိဒ္မွာ ၾကည့္နုိင္ပါတယ္။ ပုံကုိ Mouse နဲ႔ ထိပါ။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ3OdhG8gvObJClNmlm5OnduNeZC7ayLjcc4QtXTFAGNhcpnwzTm2EW7p5cBdFG65CwRbk0UarTeq10uXtiQp7vjK3Yq44otbDa8fAL0SZpClvzytQust5mCpi4K_U8TaBNvMPcYSsoHs/s1600/Pin.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ3OdhG8gvObJClNmlm5OnduNeZC7ayLjcc4QtXTFAGNhcpnwzTm2EW7p5cBdFG65CwRbk0UarTeq10uXtiQp7vjK3Yq44otbDa8fAL0SZpClvzytQust5mCpi4K_U8TaBNvMPcYSsoHs/s1600/Pin.png" /></a></div>
၁။<a href="http://blogger.com/" target="_blank" title="Enter Blogger">Sign In Blogger</a>
<br />
၂။ Template<br />
<br />
၃။ Edit HTMl<br />
<br />
၄။ Proceed<br />
<br />
၅။ ေအာက္က  Cond ေလးကုိရွာပါ။Ctrl + F ကုိတြဲနုိပ္၍ရွာပါ ၊ ရွာရလြယ္ပါတယ္။<br />
<br />
<pre class="cpp" name="code"></body>

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

//<![CDATA[

var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF29ocm34dwJz3ynMzwVUV8cNo_FcSB2uU-46ZUa3OJIYmv038_nK-_lSxc_otm8eqAzfuUXUeR5C8H5uQkAzD8wyZbq0kC35vVp2xM6zZw7TjjchDqsyDVIE-zopnsR1Zzk9LFf0-l8_A/s1600/pinterestx1_72.png";

var bs_pinButtonPos = "center";

//]]>

</script>

<div id='bs_pinOnHover'><a href='http://mrthangming.blogspot.com/2013/04/pinterest-pin-it-button-on-image-hover.html'>Pin It button on image hover</a></div>

</pre>
<br />
၇။ ထည့္ၿပီးရင္ Save Template ကုိ နုိပ္ေပးလုိက္ပါ။ ၿပီးပါၿပီး.........</div>

Show Pinterest Pin it Button On Images On Mouse Hover

ဒီေန႔တင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့ပုိ႔(စ္)မွာ တင္ထားတဲ့ Images(ဓါတ္ပုံ)ေတြကုိ Mouse{ေမာ့(စ္)} နဲ႔ထိလုိက္ရင္ Pinterest, Icon(ရုပ္ပုံ)ေလးေ...

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 ေလးထည့္နည္း/လုပ္နည္းေလးပါ။ သိၿပီးၾကေသာ ဘေလာ့မိတ္ေဆြမ်ားလည္း...

ဘေလာ့ Comment Box ေပၚမွာ Facebook နွင့္ Twitter Box ေပါင္းထည့္နည္း

<div dir="ltr" style="text-align: left;" trbidi="on">
ဒီေန႔တင္ေပးခ်င္တဲ့ ပုိ႔(စ္) ေလးကေတာ့ ဘေလာ့မွာ Blogger Comments Box , Tweets Box ႏွင့္ Facebook Comments Box ေတြကုိ တစ္ၿပဳိင္တည္း တြဲသုံးလုိ႔ရေအာင္ လုပ္နည္း/ထည့္နည္း ေလးပါ။ ဒီ နည္းေလးကုိ က်ေနာ္တုိ႔ ျမန္မာဘေလာ့ေတြမွာေတာ့ သုံးတဲ့သူမရွိဘူးလုိ႔ေတာင္ေျပာရလွ်င္ မွားမယ္မထင္ပါဘူး။ မႀကဳိက္ၾကတာလာေတာ့ မသိပါ။ ဘာပဲျဖစ္ျဖစ္ထည့္သုံးခ်င္တဲ့ ဘေလာ့မိတ္ေဆြမ်ားရွိရင္ အလြယ္တကူ ထည့္လုိ႔ရေအာင္ မွ်ေ၀ေပးလုိက္ပါတယ္။ ေအာက္မွာ Demo သြားၾကည့္လုိ႔ရေအာင္ Link နဲ႔ တကြ ထည့္နည္းနွင့္ လုိအပ္တဲ့ Cond ေတြလည္း ထားေပးပါတယ္။<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBdOpF7PbovbYE94BmKLNizkpTniohw3lX3CVrJqI-TVdkOV1l7Iw9WMUG96e6Cxd8TjqYvASpM_xZ_EbWwtgoklT8ihmslh0b1uJU9IfygPdgDbt1pTNbtypOGNs-qZ6ttLAVoIF1lSA/s1600/box.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBdOpF7PbovbYE94BmKLNizkpTniohw3lX3CVrJqI-TVdkOV1l7Iw9WMUG96e6Cxd8TjqYvASpM_xZ_EbWwtgoklT8ihmslh0b1uJU9IfygPdgDbt1pTNbtypOGNs-qZ6ttLAVoIF1lSA/s1600/box.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://tm-democond.blogspot.com/2012/11/back.html" 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>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<span style="font-size: x-large;"><b>အဆင့္္ ၁။</b></span> Facebook API ID ကုိ <a href="https://developers.facebook.com/apps" target="_blank" title="Register Facebook API ID Click Here..">ဤေနရာေလးမွာ</a> ၀င္ၿပီး Register လုပ္ယူပါ။<br />
<br />
<span style="font-size: x-large;"><b>အဆင့္ ၂။ </b></span>Twitter API Key ကုိ <a href="http://dev.twitter.com/apps/new" target="_blank" title="Register Twitter API Key Click Here..">ဤေနရာေလးမွာ</a> ၀င္ၿပီး Register လုပ္ယူပါ။<br />
<br />
<span style="font-size: x-large;"><b>အဆင့္ ၃။</b></span> ေအာက္ပါအတုိင္း ၀င္ေရာက္ထည့္ေပးလုိက္ပါ။<br />
<br />
၁။<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 />
<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 />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxz1mFb7tWnisQzytpbnDy2NrH9Dmka3QObLAWIY1cFSrFkwfvK7cABckjTKMYaqw54Yx5Ud3I8ToQgTOU-fThL_0FBlc55JMkOYQVVDngmfJzfro5eliRa-DsNfztEDi622juCivvcYI/s1600/box.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxz1mFb7tWnisQzytpbnDy2NrH9Dmka3QObLAWIY1cFSrFkwfvK7cABckjTKMYaqw54Yx5Ud3I8ToQgTOU-fThL_0FBlc55JMkOYQVVDngmfJzfro5eliRa-DsNfztEDi622juCivvcYI/s200/box.png" width="200" /></a>၅။ ေအာက္က  Cond ေလးကုိရွာပါ။Ctrl + F ကုိတြဲနုိပ္၍ရွာပါ ၊ ရွာရလြယ္ပါတယ္။<br />
<br />
<pre class="cpp" name="code"><head>

</pre>
<br />
၆။ ေတြ႕ၿပီးဆုိရင္ <head> ရဲ႕ ေအာက္မွာ ေအာက္က Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။<br />
<br />
<pre class="cpp" name="code"><meta content='သင့္ နာမည္ ထည့္ပါ' property='fb:admins'/>

</pre>
<br />
<span style="font-size: x-large;"><b>မွတ္ခ်က္။   ။</b></span>သင့္ နာမည္ ထည့္ပါ(ဥပမာ-Mr ThangMing) , သင့္ Facebook API ID ၁၅ လုံးကုိထည့္ပါ(ဥပမာ-***************) , သင့္ Twitter API Key ထည့္ပါ ဆုိတဲ့ ေနရာေလးေတြမွာ မွန္ေအာင္ထည့္ ေပးပါ။<br />
<br />
၇။ ၿပီးရင္ ေအာက္က Cond ကုိ ထပ္ရွာပါ။<br />
<br />
<pre class="cpp" name="code"><div class='comments' id='comments'>

</pre>
<br />
<span style="font-size: x-large;"><b>မွတ္ခ်က္။   ။ </b></span><div class='comments' id='comments'> ဟာ ၂ Cind ရွိပါတယ္။ ဒုတိယ Cond ေအာက္မွာ ေအာက္က Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။ အဆင္မေျပ ရင္ ေအာက္က ပုံကုိ ၾကည့္ပါ။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR_QivhNlku6KcnJS2rEqOrna1fxrSNKOeqddNTeKhcA84o9eb4zwU2OhsMMrXymBFoQqinYNtDDGhqUyi6Zf8U52eVajjgu1qLgNyXSwDo-e1UL36ef1bcVl9lFZ2X4MtXlZw2LZN4SQ/s1600/html.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR_QivhNlku6KcnJS2rEqOrna1fxrSNKOeqddNTeKhcA84o9eb4zwU2OhsMMrXymBFoQqinYNtDDGhqUyi6Zf8U52eVajjgu1qLgNyXSwDo-e1UL36ef1bcVl9lFZ2X4MtXlZw2LZN4SQ/s1600/html.png" /></a></div>
<br />
<br />
<pre class="cpp" name="code"><b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<data:post.numComments/> Blogger Comments Box

</div>

<span class='js-page-tweet-count' expr:href='data:post.url'/> Twitter-Tweets Box

</div>

<fb:comments-count expr:href='data:post.url'/> FaceBook Comments Box

</div>

</b:if>

</div>

</div>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<fb:comments expr:href='data:post.url' num_posts='10' width='500'/>

</b:if>

</div>

</pre>
<br />
<br />
<span style="font-size: x-large;"><b>မွတ္ခ်က္။  ။</b></span>သင့္ Twitter API Key ထည့္ပါ , သင့္ နာမည္ထည့္ပါ ဆုိတဲ့ ေနရာေတြမွာ မွန္ေအာက္ထည့္ေပးပါ။<br />
<br />
၉။ အားလုံးၿပီးၿပီးဆုိရင္ Save Template Button ေလးကုိ ႏွိပ္ေပးလုိက္ပါ။ အဆင္မေျပတာေလးေတြကုိ Comment Box မွာ ေမးလုိ႔ရပါတယ္ဗ်ာ။ က်ေနာ္တုိ႔ ဖက္က အတတ္နုိင္ဆုံး ျပန္ေဆာင္၍ေပးသြားမွာပါ။</div>

ဘေလာ့ Comment Box ေပၚမွာ Facebook နွင့္ Twitter Box ေပါင္းထည့္နည္း

ဒီေန႔တင္ေပးခ်င္တဲ့ ပုိ႔(စ္) ေလးကေတာ့ ဘေလာ့မွာ Blogger Comments Box , Tweets Box ႏွင့္ Facebook Comments Box ေတြကုိ တစ္ၿပဳိင္တည္း တြဲသုံးလုိ...

Show Your HTML/Javascript and Css Codes In Bulb Lights

<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">
အခုတင္ေပးမယ့္္ ပုိ႔(စ္) ေလးကေတာ့ ဘေလာ့ပုိ႔(စ္)မွာ  HTML/Javascript and Css Codes ေတြကုုိ Mouse Pointer ႏွင့္ ထိလုိက္ရင္ မီးလုံးေလးထြက္လာၿပီး မီးလင္းေနေအာင္ တင္နည္း/ထည့္နည္းေလးပါ။ ဤ နည္းကုိသုံး၍ ဘေလာ့ပုိ႔(စ္)မွာ Cond တင္တဲ့ သူေတြေတာ့ သိပ္မရွိသေလာက္ပါပဲ မႀကဳိက္ၾကတာလာေတာ့ မသိပါ။ ႀကဳိက္တဲ့ မိတ္ေဆြေတြ အတြက္ ေအာက္မွာ Demo သြားၾကည့္နုိင္ရန္ Link ႏွင့္တကြ Cond လည္းေပးထားပါတယ္။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT0BSVMH9_IKRqbG4Eo3ULImEyGZa9i4HMIQulIbYDUWf3oAZC-tkzG3CTkvrMNrXhNT1bQlSjAfJSHAupiz8LLs4aAXFi56MzynRGU4QwNqvz6Cku_bnJ7Bq9XSz3gyryA25Wgew0mgc/s1600/tm-cond.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title=" Bulb Lights"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT0BSVMH9_IKRqbG4Eo3ULImEyGZa9i4HMIQulIbYDUWf3oAZC-tkzG3CTkvrMNrXhNT1bQlSjAfJSHAupiz8LLs4aAXFi56MzynRGU4QwNqvz6Cku_bnJ7Bq9XSz3gyryA25Wgew0mgc/s1600/tm-cond.PNG" /></a></div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://tmdemoblog.blogspot.com/2012/11/show-your-htmljavascript-and-css-codes.html" 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>
<br />
၁။<a href="http://blogger.com/" target="_blank" title="Enter Blogger">Sign In Blogger</a>
<br />
<br />
၂။ Template<br />
<br />
၃။ Edit HTMl<br />
<br />
၄။ Proceed<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">.code1 {

overflow:auto;width:503px;height:200px;

font-family: "Consolas", "Courier New", Courier, mono, serif;

color:#848176;

margin : 15px 35px 15px 15px;

padding : 10px 10px 10px 35px;

clear : both;

list-style-type : none;

background : #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYVYnDfw5C5c_-ewBtdbr-oMH5CAJ4GhT93yQKyhYv9eB40L7CnZst0RJy161JYRIeoKXRUyFymODr0a29_YQOWPFcv1pbiKVr_5P7PtLEVJRW2ahzms4ReRe5GLuNOzPize_ou64DUImY/s320/btsnts-show-codes1.jpg) repeat-y top left;

border : 1px solid #000000;

border-left:20px solid #ccc;

-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px

}

.code1:hover{

background : #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje2owuX3a-Q1I9CeYo0KBEzuXWvXkvVp6vjvIe-0DQ26iz8QPWPoBs4uc0A7_ob7FrZZGOp3LRivewTDdnGlUGvPrmin32WgElVhWEmveOCL8Ajap8G9ilIK1Nbd79EOh3I68nXVXrPcRR/s1600/btsnts-show-codes2.jpg) repeat-y top left;

color:#FEF9BF;

border : 1px solid #000;

border-left:20px solid #ccc;

-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);

-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);

box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);

box-shadow: 10px 10px 5px #888888;

}

</pre>
၇။ ထည့္ၿပီးရင္ Save Template ကုိ နုိပ္ေပးလုိက္ပါ။<br />
<br />
၈။ မိမိ ေပၚေစခ်င္တဲ့ HTML/Javascript Codes ေတြကုိ ေအာက္ပါအတုိင္ ထည့္ပါ။
<br />
<br />
<pre class="cpp" name="code"><div class="code1">

ဒီေနရာမွာ မိမိ ေပၚေစခ်င္တဲ့ HTML/Javascript Codes ကုိထည့္ပါ။Your Code Here

</div>

</pre>
</div>
<b><span style="font-size: large;">မွတ္ခ်က္။   ။</span></b>မိမိတင္သြင္းလုိသည့္ HTML/Javascript Codes ဟာ ထည့္မရတာမ်ဳိး၊ ဆုိရင္ HTML/Javascript Codes ေတြ ကုိ Convert HTML to Escaped HTML လုပ္ေပးဖုိ႔ လုိပါလိမ့္မယ္။ ေအာက္မွာ က်ေနာ္ေပးထာတဲ့ HTML Parser Tool မွာ အရင္ဆုံး မိမိတင္လုိသည့္ HTML/Javascript Codes ေတြကုိ Convert လုပ္ေပးလုိက္ပါ။
<br />
<br />
<h3 style="background-color: white; border-bottom-color: rgb(40, 109, 164); border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(40, 109, 164); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(40, 109, 164); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(40, 109, 164); border-top-left-radius: 6px; border-top-right-radius: 6px; border-top-style: solid; border-top-width: 1px; clear: both; font-family: 'Carrois Gothic SC', sans-serif; letter-spacing: -1px; list-style-image: initial; list-style-position: initial; list-style-type: none; margin-bottom: 5px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: none; outline-width: initial; padding-bottom: 3px; padding-left: 7px; padding-right: 7px; padding-top: 3px;">
<span style="color: blue;"><span style="font-size: small;">Mr ThangMing By </span><span style="background-color: transparent;">Convert HTML to Escaped HTML Tool</span></span></h3>
<br />
<script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/102462998830435293579/post-Code.xml&up_grows=10&up_conv1=1&up_conv2=1&up_conv3=1&up_conv4=1&up_conv5=1&synd=open&w=590&h=260&title=Post-Code%3A+code+converter&border=http%3A%2F%2Fwww.gmodules.com%2Fig%2Fimages%2F&output=js"></script>

</div>

Show Your HTML/Javascript and Css Codes In Bulb Lights

အခုတင္ေပးမယ့္္ ပုိ႔(စ္) ေလးကေတာ့ ဘေလာ့ပုိ႔(စ္)မွာ HTML/Javascript and Css Codes ေတြကုုိ Mouse Pointer ႏွင့္ ထိလုိက္ရင္ မီးလုံးေလးထြက္လာၿ...

ဘေလာ့မွာ Flash Animated Label Cloud ေလးသုံးခ်င္ရင္

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
ဒီေန့တင္တဲ့ ပုိ့(စ္) ေလးကေတာ့ <span style="line-height: 1.2;"> </span><span style="line-height: 1.2;">Flash Animated Label Cloud Widget အသစ္ေလးပါ။ မိမိ၏ Post Label{ပုိ့(စ္) အမ်ဳိးအစာ} ေတြကုိျမင္ကြင္းထူးဆန္းစြာျဖင့္ ထည့္နည္းလုိ့လည္းေျပာလုိ့ရပါတယ္။ Label ေတြကုိ Mouse Pointer ေလးျဖင့္ ထိလုိက္ရင္ Label ေတြပတ္လည္းေနပါတယ္။ ေျပာရမွာ ခက္ခဲေနတယ္    ကုိယ္တုိင္သုံးၾကည့္ၿပီးမွသာ ျမင္ကြင္းခံစားလုိ့ရမွာပါ။ ေအာက္မွာ DEMO ပုံေလးနဲ့တကြ Cond လည္းေပးထားပါတယ္။ DEMO ၾကည့္ခ်င္ရင္ေတာ့ က်ေနာ္ ဘေလာ့ဆုိဒ္ Widget Title ထဲက Tags ကုိိနုိပ္လုိက္ရင္ ေပၚလာမွာပါ။</span>
<br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK3VmogAt21VPPWldsuJ4ciuCCrVq2_g4JKjE8I3TJBO7Fa4WYZrWyguEoOOAK-Ks6hFKhaLZjANuo7Z9YTr63e5SDMuF5BvCY9iMcQ3gDKw2llJ7lcvUxb9OsXoqN0Yhp_XHgyetpI9U/s1600/label.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK3VmogAt21VPPWldsuJ4ciuCCrVq2_g4JKjE8I3TJBO7Fa4WYZrWyguEoOOAK-Ks6hFKhaLZjANuo7Z9YTr63e5SDMuF5BvCY9iMcQ3gDKw2llJ7lcvUxb9OsXoqN0Yhp_XHgyetpI9U/s1600/label.png" /></a></div>
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://demo-mrthangming.blogspot.com/2013/04/blog-post_25.html" 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 />
<br />
၂။ Layout<br />
<br />
၃။ Add a Gadget<br />
<br />
၄။ HTML/JavaScript<br />
<br />
၅။ ေအာက္က ေပးထာတဲ့ Cond ေလးကုိထည့္ေပးလုိက္ပါ။<br />
<br />
<pre class="cpp" name="code"><div id="w2bFlashContent"><p style="display:none;">Flash Labels by <a href="http://www.mrthangming.blogspot.com/">MrThangMing</a></p></div>

/*<![CDATA[*/

var w2bFlashLabelSettings = {

blogurl        : "ဤေနရာေလးမွာ သင့္ဘေလာ့ လိပ္စာထည့္ေပးပါ",

color          : "000000",

hoverColor     : "333333",

backgroundColor: "FFFFFF",

size           : 12,

speed          : 100,

width          : 250,

height         : 300,

transparency   : true

};

/*]]>*/

</script>

</pre>
<br />
၆။ ထည့္ၿပီးရင္ Save ကုိနုိပ္လုိက္ပါ။<br />
<br />
<span style="font-size: x-large;"><b>မွတ္ခ်က္။    ။</b></span>    blogurl        : "ဤေနရာေလးမွာ သင့္ဘေလာ့ လိပ္စာထည့္ေပးပါ" ဆုိတဲ့ ေနရာမွာ မိမိ၏ ဘေလာ့ လိပ္စာထည့္ေပးပါ။ ဥပမာ_ <a href="http://www.mrthangming.blogspot.com/">http://www.mrthangming.blogspot.com/</a>  လုိ႔ထည့္ေပးရပါမယ္။</div>
</div>

ဘေလာ့မွာ Flash Animated Label Cloud ေလးသုံးခ်င္ရင္

ဒီေန့တင္တဲ့ ပုိ့(စ္) ေလးကေတာ့ Flash Animated Label Cloud Widget အသစ္ေလးပါ။ မိမိ၏ Post Label{ပုိ့(စ္) အမ်ဳိးအစာ} ေတြကုိျမင္ကြင္းထူးဆန္းစ...

Mr ThangMing

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

Arrow Keyboard Navigation For Blogger

က်ေနာ္တုိ႔ ျမန္မာ ဘေလာ့မ်ားအတြက္ ျမန္မာ ျပကၡဒိန္ ေလးမ်ား

How To Add 3 In 1 Slide Out Social Subscribing Widget To Blogger

How To Add Flash Animated Label Cloud Widget To Blogger

How To Add Embed YouTube Videos In Blogger Comments Box

Show Pinterest Pin it Button On Images On Mouse Hover

How To Add Automatic Recent Posts Slider With jQuery To Blogger

ဘေလာ့ Comment Box ေပၚမွာ Facebook နွင့္ Twitter Box ေပါင္းထည့္နည္း

Show Your HTML/Javascript and Css Codes In Bulb Lights

ဘေလာ့မွာ Flash Animated Label Cloud ေလးသုံးခ်င္ရင္

Activity Find

Labels

Archives