Mr ThangMing: Slider

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

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 5 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">
ဒီေန႔တင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့မွာ 5 in 1 Slide Out Social Subscribing ေလးထည့္နည္းေလးကုိ မွ်ေ၀ေပးလုိက္ပါတယ္။ သိၿပီးၾကေသာ ဘေလာ့မိတ္ေဆြမ်ားလည္းမ်ားေတာ့မွာပါ။ မသိေသးတဲ့ ဘေလာ့မိတ္ေဆြမ်ားအတြက္ ထပ္တင္ေပးလုိက္ပါတယ္။ ႀကဳိက္ၾကမယ္လုိ႔ လည္းေမွ်ာ္လင့္ထားပါတယ္။ ေအာက္မွာ Demo(နမူနာ) သြားၾကည့္လုိ႔ ရေအာင္ Link နဲ႔ တကြ လုိအပ္တဲ့ Cond ေတြလည္း ထားေပးပါတယ္။ ဒီနည္းကုိ သုံးၾကည့္လုိ႔ အဆင္မေျပမူမ်ားရွိခဲ့လွ်င္ Comment ေပးနုိင္ပါတယ္။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw2jXGBQPABH_qPMz7zAvyLTWEN-XTwOCCqC9hvgNaiRDvgoK39fj3CieUNBpFAVZhpKhTlkPQOZzm1qI7YaQEdSEm1_xUFfDQ9aCBRKywPzM4L1GyaLVJPnjAl7StuXug6BdZQWqjtMM/s1600/5IN1~1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw2jXGBQPABH_qPMz7zAvyLTWEN-XTwOCCqC9hvgNaiRDvgoK39fj3CieUNBpFAVZhpKhTlkPQOZzm1qI7YaQEdSEm1_xUFfDQ9aCBRKywPzM4L1GyaLVJPnjAl7StuXug6BdZQWqjtMM/s1600/5IN1~1.PNG" /></a></div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://demo-mrthangming.blogspot.com/2013/04/how-to-add-5-in-1-slide-out-social.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"><style>  img, a {  border: 0;  }  #on {  visibility: visible;  }  #off {  visibility: hidden;  }  #facebook_div {  width: 196px;  height: 340px;  overflow: hidden;  }  #twitter_div {  width: 246px;  height: 353px;  overflow: hidden;  }  #google_plus_div {  width: 290px;  height: 120px;  overflow: hidden;  margin-left: 5px;  margin-top: 1px;  }  #MTMfeedburner_div {  width: 300px;  height: 120px;  overflow: hidden;  margin-top: 5px;  margin-left: -4px;  }  #MTM_div {  width: 300px;  height: 97px;  overflow: hidden;  }  /* right side style */  #facebook_right {  z-index: 10005;  border: 2px solid #3c95d9;  background-color: #fff;  width: 196px;  height: 353px;  position: fixed;  right: -200px;  }  #facebook_right img {  position: absolute;  top: -2px;  left: -35px;  }  #facebook_right iframe {  border: 0px solid #3c95d9;  overflow: hidden;  position: static;  height: 360px;  left: -2px;  top: -3px;  }  #twitter_right {  z-index: 10004;  border: 2px solid #6CC5FF;  background-color: #6CC5FF;  width: 246px;  height: 353px;  position: fixed;  right: -250px;  }  #twitter_right_img {  position: absolute;  top: -2px;  left: -35px;  border: 0;  }  #google_plus_right {  z-index: 10003;  background-color: #F2F2F2;  border: 2px solid #006ec9;  border-top: 2px solid #0056a0;  border-bottom: 2px solid #0056a0;  border-right: 2px solid #0056a0;  border-left: 2px solid #0056a0;  width: 290px;  height: 120px;  position: fixed;  right: -292px;  }  #google_plus_right_img {  position: absolute;  top: -2px;  left: -33px;  border: 0;  }  #feedburner_right {  z-index: 10003;  background-color: #fefefe;  border: 2px solid #5b5b5b;  border-top: 2px solid #5b5b5b;  border-bottom: 2px solid #5b5b5b;  border-right: 2px solid #5b5b5b;  border-left: hidden;  width: 300px;  height: 97px;  position: fixed;  right: -303px;  }  #feedburner_right_img {  position: absolute;  top: -2px;  left: -33px;  border: 0;  }  #MTM_right {  z-index: 10003;  border: 2px solid #303030;  background-color: #fff;  width: 300px;  height: 97px;  position: fixed;  }  #MTM_right img {  position: absolute;  top: -2px;  left: -101px;  }  /* left side style */  #facebook_left {  z-index: 10005;  border: 2px solid #3c95d9;  background-color: #fff;  width: 196px;  height: 353px;  position: fixed;  left: -200px;  }  #facebook_left img {  position: absolute;  top: -2px;  right: -35px;  }  #facebook_left iframe {  border: 0px solid #3c95d9;  overflow: hidden;  position: static;  height: 360px;  right: -2px;  top: -3px;  }  #twitter_left {  z-index: 10004;  border: 2px solid #6CC5FF;  background-color: #6CC5FF;  width: 246px;  height: 353px;  position: fixed;  left: -250px;  }  #twitter_left_img {  position: absolute;  top: -2px;  right: -35px;  border: 0;  }  #google_plus_left {  z-index: 10003;  background-color: #006ec9;  border: 2px solid #006ec9;  border-top: 2px solid #0056a0;  border-bottom: 2px solid #0056a0;  border-left: 2px solid #0056a0;  border-right: 2px solid #0056a0;  width: 290px;  height: 120px;  position: fixed;  left: -292px;  }  #google_plus_left_img {  position: absolute;  top: -2px;  right: -33px;  border: 0;  }  #feedburner_left {  z-index: 10003;  background-color: #fefefe;  border: 2px solid #5b5b5b;  border-top: 2px solid #5b5b5b;  border-bottom: 2px solid #5b5b5b;  border-left: 2px solid #5b5b5b;  border-right: hidden;  width: 300px;  height: 97px;  position: fixed;  left: -303px;  }  #feedburner_left_img {  position: absolute;  top: -2px;  right: -33px;  border: 0;  }  #MTM_left {  z-index: 10003;  border: 2px solid #303030;  background-color: #fff;  width: 300px;  height: 97px;  position: fixed;  }  #MTM_left img {  position: absolute;  top: -2px;  right: -101px;  }  .box-title1 {  border: 1px solid #ddd;  /*border-radius*/  -webkit-border-radius: 6px;  -moz-border-radius: 6px;  border-radius: 6px;  /*box-shadow*/  -webkit-box-shadow: 5px 5px 5px #CCCCCC;  -moz-box-shadow: 5px 5px 5px #CCCCCC;  box-shadow: 5px 5px 5px #CCCCCC;  padding: 10px;  margin: 10px 0;  }  .enteryouremail {  background: #fff !important;  border: 1px solid #d2d2d2;  padding: 0px 8px 0px 8px;  color: #a19999;  font-size: 12px;  height: 25px;  width: 165px;  /*border-radius*/  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  border-radius: 5px;  margin: 0px;  }  .submitbutton {  background: #FF8000;  border: 1px solid #F66303;  /*box-shadow*/  -webkit-box-shadow: 3px 3px 3px #666;  box-shadow: 3px 3px 3px #666;  font: bold 12px Arial, sans-serif;  color: #000000;  height: 25px;  padding: 0 12px 0 12px;  margin: 0 0 0 5px;  /*border-radius*/  -webkit-border-radius: 5px;  border-radius: 5px;  cursor: pointer;  }  #youtube_right {  z-index: 10001;  background-color: #fefefe;  border:2px solid #ff0000;  border-top:2px solid #5b5b5b;  border-bottom: 2px solid #5b5b5b;  border-right:2px solid #5b5b5b;  border-left: hidden;  width:301px;  height: 106px;  position: fixed;  right: -303px;  }  #youtube_right_img {  position: absolute;  top: -2px;  left: -33px;  border:  </style><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script><script type="text/javascript">  jQuery(document).ready(function () {  jQuery("#facebook_right").hover(function () {  jQuery(this).stop(true, false).animate({  right: 0  }, 500);  }, function () {  jQuery("#facebook_right").stop(true, false).animate({  right: -200  }, 500);  });  jQuery("#twitter_right").hover(function () {  jQuery(this).stop(true, false).animate({  right: 0  }, 500);  }, function () {  jQuery("#twitter_right").stop(true, false).animate({  right: -250  }, 500);  });  jQuery("#google_plus_right").hover(function () {  jQuery(this).stop(true, false).animate({  right: 0  }, 500);  }, function () {  jQuery("#google_plus_right").stop(true, false).animate({  right: -292  }, 500);  });  jQuery("#feedburner_right").hover(function () {  jQuery(this).stop(true, false).animate({  right: 0  }, 500);  }, function () {  jQuery("#feedburner_right").stop(true, false).animate({  right: -303  }, 500);  });    jQuery("#youtube_right").hover(function () {  jQuery(this).stop(true, false).animate({  right: 0  }, 500);  },    function () {  jQuery("#youtube_right").stop(true, false).animate({  right: -303  }, 500);  });  });  </script><br />

</div>

<img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFbppv0twk-G6CxVK0rP9-HkkWFOwlcLlpxv3ERCfBbx8rDFqFuQCcaGaIymep1hkzk5HQi5V5L_BnWay16h0pveeWwI6_4UshaKX-AcYiklMBV5m4bczTNU30aBp01sUmtBhgwUzD65fd/s1600/MTMtwitter_right.png" />  <script src="http://widgets.twimg.com/j/2/widget.js"></script>  <script src="http://widgets.twimg.com/j/2/widget.js"></script>  <script>  new TWTR.Widget({  version: 2,  type: 'profile',  rpp: 4,  interval: 1000,  width: 246,  height: 265,  theme: {  shell: {  background: '#63BEFD',  color: '#FFFFFF'  },  tweets: {  background: '#FFFFFF',  color: '#000000',  links: '#47a61e'  }  },  features: {  loop: false,  live: true,  scrollbar: false,  hashtags: false,  timestamp: true,  avatars: true,  behavior: 'all'  }  }).render().setUser('johnthangming').start();  </script>  </div>

</div>

</div>

</div>

You can also receive Free Email Updates:</h4>

</center>

<span style="font-size: 10px;">Widget by <a href="http://mrthangming.blogspot.com/">MTM</a></span><span style="font-size: 8px;"></span>   </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%2<a href="http://www.facebook.com/tmblogtechnology" target="_blank" title="Relace Your Name">Ftmblogtechnology</a><br />
<br />
(၂) setUser('<a href="http://twitter.com/johnthangming" target="_blank" title="Relace Your Name">johnthangming</a>')<br />
<br />
(၃) plus.google.com/<a href="https://plus.google.com/u/0/103359415538823163001" target="_blank" title="Relace Your Name">103359415538823163001</a><br />
<br />
(၄) http://feedburner.google.com/fb/a/mailverify?uri=blogspot/<a href="http://feedburner.google.com/fb/a/mailverify?uri=blogspot/mrthangming" target="_blank" title="Relace Your Name">mrthangming</a><br />
<br />
(၅) http://www.youtube.com/subscribe_widget?p=<a href="http://www.youtube.com/user/MrThangming/featured" target="_blank" title="Relace Your Name">mrthangming</a><br />
<br />
ေနရာေတြမွာ မိမိတုိ႔၏ ID နဲ႔ လဲေပးပါ။</div>

How to Add 5 in 1 Slide Out Social Subscribing Widget to Blogger

ဒီေန႔တင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့မွာ 5 in 1 Slide Out Social Subscribing ေလးထည့္နည္းေလးကုိ မွ်ေ၀ေပးလုိက္ပါတယ္။ သိၿပီးၾကေသာ ဘေလာ့မိတ္ေဆ...

How to Add Google Plus Slide Out Hover Widget to Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
ဒီေန႔တင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့မွာ Google Plus Slide Out Hover ေလးထည့္နည္းေလးပါ။ သိၿပီးၾကေသာ ဘေလာ့မိတ္ေဆြမ်ားလည္းမ်ားေတာ့မွာပါ။ မသိေသးတဲ့ ဘေလာ့မိတ္ေဆြမ်ားအတြက္ လုိအပ္နုိင္တယ္ထင္လုိ႔ ထပ္မွ်ေ၀ေပးလုိက္ပါတယ္။ ႀကဳိက္ၾကမယ္လုိ႔လည္းေမ်ာ္လင့္ပါတယ္။ ေအာက္မွာ Demo(နမူနာ) သြားၾကည့္ လုိ႔ရေအာင္ Link(လင့္(ခ္)) နွင့္ တကြ လုိအပ္တဲ့ Cond ေတြလည္း ထားေပးပါတယ္။<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2RLCnpSwL_zx_761p1dnRfjAOrjNG5K1cSkqrrFTByip8r5v12BKwvKHIfPB8RB3hXMDrYoTXysTk7EkZ2MG1GTrvnKZoLqy2WG-lzJP2eNPlD6nQXqPQJ_QCisM4ZoR7co5HX98a7J8/s1600/google.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2RLCnpSwL_zx_761p1dnRfjAOrjNG5K1cSkqrrFTByip8r5v12BKwvKHIfPB8RB3hXMDrYoTXysTk7EkZ2MG1GTrvnKZoLqy2WG-lzJP2eNPlD6nQXqPQJ_QCisM4ZoR7co5HX98a7J8/s1600/google.jpg" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://demo-mrthangming.blogspot.com/2013/04/how-to-add-google-plus-slide-out-hover.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"><style>  .MTM-gplusslide {  <span class="Apple-tab-span" style="white-space: pre;">	</span>position: fixed;  <span class="Apple-tab-span" style="white-space: pre;">	</span>z-index:9;  <span class="Apple-tab-span" style="white-space: pre;">	</span>top: 100px;  <span class="Apple-tab-span" style="white-space: pre;">	</span>left: 0;  <span class="Apple-tab-span" style="white-space: pre;">	</span>-webkit-transition-duration: 1s;  <span class="Apple-tab-span" style="white-space: pre;">	</span>-moz-transition-duration: 1s;  <span class="Apple-tab-span" style="white-space: pre;">	</span>-o-transition-duration: 1s;  <span class="Apple-tab-span" style="white-space: pre;">	</span>transition-duration: 1s;  }  .MTM-gpluscontainer {  <span class="Apple-tab-span" style="white-space: pre;">	</span>height:270px;  <span class="Apple-tab-span" style="white-space: pre;">	</span>width:291px;  <span class="Apple-tab-span" style="white-space: pre;">	</span>border:2px solid #FF0000;  <span class="Apple-tab-span" style="white-space: pre;">	</span>;  <span class="Apple-tab-span" style="white-space: pre;">	</span>border-radius:5px;  <span class="Apple-tab-span" style="white-space: pre;">	</span>-moz-border-radius:5px;  <span class="Apple-tab-span" style="white-space: pre;">	</span>-webkit-border-radius:5px;  <span class="Apple-tab-span" style="white-space: pre;">	</span>background:#dcdcdc;  <span class="Apple-tab-span" style="white-space: pre;">	</span>position: fixed;  <span class="Apple-tab-span" style="white-space: pre;">	</span>z-index:9;  <span class="Apple-tab-span" style="white-space: pre;">	</span>top: 100px;  <span class="Apple-tab-span" style="white-space: pre;">	</span>left: -295px;  <span class="Apple-tab-span" style="white-space: pre;">	</span>-webkit-transition-duration: 1s;  <span class="Apple-tab-span" style="white-space: pre;">	</span>-moz-transition-duration: 1s;  <span class="Apple-tab-span" style="white-space: pre;">	</span>-o-transition-duration: 1s;  <span class="Apple-tab-span" style="white-space: pre;">	</span>transition-duration: 1s;  }  .MTM-gplusslide:hover {  <span class="Apple-tab-span" style="white-space: pre;">	</span>left:295px;  }  .MTM-gplusslide:hover .MTM-gpluscontainer {  <span class="Apple-tab-span" style="white-space: pre;">	</span>left: 0;  }  </style>  <div class="MTM-gplusslide">    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOIrTTrCxQwxNJ1FyAGTOw2-1TEwA5PeOsnh7wV_Og7DY2mFcH3KHJhMUYyfo1VeTtCfuAl39VMRk-pdrHsHplU2yVf0vfu1acpVj593a8L9KM-aE8li9vHMp5NA2KvyKXjAYnHbbQGnk/s1600/GP-Slide.png" />    <div class="MTM-gpluscontainer">  <center><b><span style="background-color: red; color: white;">&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;Add Me In Your Circle &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</span></b> <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><center><span style="font-size: x-small;"><a href="http://mrthangming.blogspot.com/2013/04/how-to-add-google-plus-slide-out-hover.html">Get This</a></span></center></div>

</pre>
<br />
၆။ ထည့္ၿပီးရင္ Save Button ကုိ နုိပ္ေပးလုိက္ပါ။<br />
<br />
<span style="font-size: large;"><b>မွတ္ခ်က္။   ။</b></span>https://plus.google.com/<a href="https://plus.google.com/u/0/108100949889665305918/posts">108100949889665305918</a> ေနရာမွာ မိိမိ၏ Google Plus ID ကုိ ထည့္ေပးလုိက္ပါ။ Google Plus ID ကုိ မရွာတတ္တဲ့ မိတ္ေဆြေတြရွိခဲ့ရင္ ေအာက္ပုံ ကုိၾကည့္ပါ။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhovi573X20TO8BWHewdbhyphenhyphenw5kfAHF1XRJbbCLG8g4ED_4sNW14gbC0LbflZ1WvkIQv0JgDn5zvYSSlvmAMG0IGSwiy8dgoDh86kRDMuZqZNLbPOgK6V6Jjk7vcCBrm5wiIdRu_u05tvOI/s1600/plus.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhovi573X20TO8BWHewdbhyphenhyphenw5kfAHF1XRJbbCLG8g4ED_4sNW14gbC0LbflZ1WvkIQv0JgDn5zvYSSlvmAMG0IGSwiy8dgoDh86kRDMuZqZNLbPOgK6V6Jjk7vcCBrm5wiIdRu_u05tvOI/s1600/plus.jpg" /></a></div>
<br />
<br /></div>

How to Add Google Plus Slide Out Hover Widget to Blogger

ဒီေန႔တင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့မွာ Google Plus Slide Out Hover ေလးထည့္နည္းေလးပါ။ သိၿပီးၾကေသာ ဘေလာ့မိတ္ေဆြမ်ားလည္းမ်ားေတာ့မွာပါ။ မသိေသ...

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

Mr ThangMing

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

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

How to Add 5 in 1 Slide Out Social Subscribing Widget to Blogger

How to Add Google Plus Slide Out Hover Widget to Blogger

How To Add Automatic Recent Posts Slider With jQuery To Blogger

Activity Find

Labels

Archives