Mr ThangMing: CSS and HTML

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

Blog မွာ ျမန္မာစလုံးေရးလုိ႔ရမယ့္ Keyboard ေလးထည့္ခ်င္ရင္

<div dir="ltr" style="text-align: left;" trbidi="on">
အခုတင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့ Comment Box အေပၚမွာ ျမန္မာ စလုံးေရးနုိင္မယ့္ Keyboard ေလးထည့္နည္းေလးကုိ မွ်ေ၀ေပးလုိက္ပါတယ္။ က်ေနာ္တုိ႔ ျမန္မာ ဘေလာ့ သမားမ်ားအတြက္ ထည့္ထားသင့္တယ္ ထင္ၿပီးတင္ေပးလုိက္တာပါ။ Myanmar Font ကုိ Computer မွာ Install မလုပ္ထားေပမယ့္ ဤနည္းလမ္းေလးကုိ မိမိ ဘေလာ့မွာ ထည့္ထားတယ္ဆုိရင္ မိမိ ဘေလာ့ကုိ လာေရာက္အားေပးၾကတဲ့ ပရိသတ္မ်ား အတြက္ ျမန္မာစလုံးေလးမ်ား ေရးသာနုိင္မွာ ျဖစ္ပါတယ္။ ေအာက္မွာ Demo သြားၾကည့္လုိ႔ရေအာင္ Link ႏွင့္ တကြ ထည့္နည္းနဲ႔ လုိအပ္ တဲ့ Cond မ်ားလည္း ထားေပးပါတယ္။<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc2qw2M2vgCEurvmDW2lbMN-7mmmRQM0REczTiSrgTPjfs7szsrO13HsOMpgm7vYuPVWTrrR2xa9GiCFfxIze00gO6GAUdVR-zeBDu0DMB3FOqyeV-9T0wIvHPse0KB2e_QCRHtNaKm4g/s1600/mm_1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc2qw2M2vgCEurvmDW2lbMN-7mmmRQM0REczTiSrgTPjfs7szsrO13HsOMpgm7vYuPVWTrrR2xa9GiCFfxIze00gO6GAUdVR-zeBDu0DMB3FOqyeV-9T0wIvHPse0KB2e_QCRHtNaKm4g/s1600/mm_1.gif" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<center>
<a class="medium button green" href="http://facebook-thangming.blogspot.com/2013/03/how-to-write-post-for-wallpaper-blogdemo.html" target="_blank" title="Go Check Out The Demo Live.. ">Go Check Live Demo</a></center>
<br />
၁။<a href="http://blogger.com/" target="_blank" title="Enter Blogger">Sign In Blogger</a>
<br />
<br />
၂။ Template<br />
<br />
၃။ Edit HTMl<br />
<br />
၄။ ေအာက္က  Cond ေလးကုိရွာပါ။Ctrl + F ကုိတြဲနုိပ္၍ရွာပါ ၊ ရွာရလြယ္ပါတယ္။<br />
<br />
<pre class="cpp" name="code"><head>
</pre>
<br />
၅။ ေတြ႕ၿပီးဆုိရင္ <head> ရဲ႕ေအာက္မွာ ေအာက္က ေပးထားတဲ့ Cond ေလးကုိ ထပ္ထည့္ေပးလုိက္ပါ။<br />
<br />
<pre class="cpp" name="code"><script charset='utf-8' src='http://mr-thangming.googlecode.com/files/Type.js' type='text/javascript'/>

keyboards = [
 ['http://mr-thangming.googlecode.com/files/Ayar.js', 'Ayar'],
 ['http://mr-thangming.googlecode.com/files/Ayar-zawgyi.js', 'Ayar-Zawgyi'],
 ['http://mr-thangming.googlecode.com/files/Ayar-karen.js', 'Ayar-karen'],
 ['http://mr-thangming.googlecode.com/files/Ayar-karenNi.js', 'Ayar-karenNi'],
 ['http://mr-thangming.googlecode.com/files/Ayar-Mon1.js', 'Ayar-Mon1'],
 ['http://mr-thangming.googlecode.com/files/Ayar-Mon2.js', 'Ayar-Mon2'],
 ['http://mr-thangming.googlecode.com/files/Ayar-Shan.js', 'Ayar-Shan'],
 ['http://mr-thangming.googlecode.com/files/Ayar-Pao.js', 'Pao'], 
];

for (var i in keyboards) {
 keyboard = keyboards[i];
 JKME.keyboard.addKeyboard(keyboard[0], keyboard[1]);
}

JKME.config.menuClassName = 'jkime';

Blog မွာ ျမန္မာစလုံးေရးလုိ႔ရမယ့္ Keyboard ေလးထည့္ခ်င္ရင္

အခုတင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့ Comment Box အေပၚမွာ ျမန္မာ စလုံးေရးနုိင္မယ့္ Keyboard ေလးထည့္နည္းေလးကုိ မွ်ေ၀ေပးလုိက္ပါတယ္။ က်ေနာ္တုိ႔ ...

မိိမိ ဘေလာ့မွာ ေရးထားတဲ့ ျမန္မာစလုံးေတြကုိ ျမန္မာေဖာင့္ Install မလုပ္တဲ့ စက္ေတြမွာ ျမင္လုိ႔ရေအာင္ လုပ္နည္း

<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">
အားလုံး မဂၤလာပါ.....။ ဒီေန႔ တစ္ကမၻာလုံးရဲ႕ အလုပ္သမားေန႔မွာ သမင္ရည္ေရြးၿပီး ဒီနည္းလမ္းေလးကုိ တင္ေပးလုိက္တာပါ။ အရင္ကဆုိရင္ေတာ့ ျမန္မာပညာရွင္တုိ႔၏ Website ေတြေလာက္မွာပဲ ဤနည္းကုိ အသုံးျပဳခဲ့ၾကတာပါ။ အခုေနာက္ပုိင္းေလာက္မွာ ပဲ Website နွင့္ Blog သမားေတြမ်ားလာတာနဲ႔အညီ ဤနည္းလမ္းေလးကုိ အသုံးျပဳတဲ့ သူသိပ္မရွိေတာ့ပါဘူး။ မလုပ္တတ္ၾကတာလာေတာ့ မသိပါဘူး။ ဘယ္လုိပဲျဖစ္ျဖစ္ လုပ္တတ္တာကေတာ့ အေကာင္းဆုံးပါပဲ။ ႀကဳိက္ၾကမယ္လုိ႔လည္း ေမွ်ာ္လင့္ထားပါတယ္။ ဤနည္းလမ္းကုိ အသုံးျပဳမယ္ဆုိရင္ မိမိတုိ႔၏္ ဘေလာ့မွာ ေရးထားတဲ့ ျမန္မာစလုံးေတြကုိ ျမန္မာေဖာင့္ Install မလုပ္တဲ့ စက္ေတြမွာပါ ျမင္လုိ႔ရမွာ ျဖစ္ပါတယ္။ ေအာက္မွာ လုပ္နည္းနွင့္ တကြ လုိ အပ္တဲ့ Cond ေတြလည္းေပးထားပါတယ္။<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvy_kkszVpclZr3JUip2VwNKjM1DkCGKpgkepJ6HZBum-8-u-nTwiwnQd5nFAgc0tpjVo9dcIqfJsZx9CZnBsJNfc3VAe7KKaQxN74a83KFh11m5yhypPhD3N0O2jkb2aOmpM0J_Tu99s/s1600/MTMF~1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvy_kkszVpclZr3JUip2VwNKjM1DkCGKpgkepJ6HZBum-8-u-nTwiwnQd5nFAgc0tpjVo9dcIqfJsZx9CZnBsJNfc3VAe7KKaQxN74a83KFh11m5yhypPhD3N0O2jkb2aOmpM0J_Tu99s/s1600/MTMF~1.JPG" /></a></div>
<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 ေလးကုိရွာပါ။Ctrl + F ကုိတြဲနုိပ္၍ရွာပါ ၊ ရွာရလြယ္ပါတယ္။<br />
<br />
<pre class="cpp" name="code"><head>

</pre>
<br />
၅။ ေတြ႕ၿပီးဆုိရင္ <head> ရဲ႕ေအာက္မွာ ေအာက္က ေပးထားတဲ့ Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။<br />
<br />
<pre class="cpp" name="code"><link href='https://googledrive.com/host/0B68pyTcm3IVfSnhTbG9qLUpPams/?font=MTM-ZG,MTM_MM3,MTM-Ayar,MTM-Wazo,MTM-Wagaung,MTM-Typewriter,MTM-Thawka,MTM-Thadingyut,MTM-Tazaungmone,MTM-Tawthalin,MTM-Tapotwe,MTM-Takhu,MTM-Tabaung,MTM-Pyatho,MTM-Parabaik,MTM-Padauk,MTM-Nayon,MTM-Natdaw,MTM-Kasone,MTM-Juno' rel='stylesheet' type='text/css'/>

</pre>
<br />
၆။ ေအာက္က Cond ကုိ ထပ္ရွာပါ။ ဒီဟာကုိေတာ့ Originals Template သုံးတဲ့ ဘေလာ့ မိတ္ေဆြေတြအတြက္ပါ။ <br />
<br />
<pre class="cpp" name="code">/* Content

----------------------------------------------- */

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

font-family:MTM-ZG,MTM_MM3,MTM-Ayar,MTM-Wazo,MTM-Wagaung,MTM-Typewriter,MTM-Thawka,MTM-Thadingyut,MTM-Tazaungmone,MTM-Tawthalin,MTM-Tapotwe,MTM-Takhu,MTM-Tabaung,MTM-Pyatho,MTM-Parabaik,MTM-Padauk,MTM-Nayon,MTM-Natdaw,MTM-Kasone,MTM-Juno;

font-size:100%px;

}

p {

font-size:100%px;

}
 </pre>
ဒီဟာကုိေတာ့ Originals Template သုံးတဲ့ ဘေလာ့ မိတ္ေဆြေတြအတြက္ပါ။ သိပ္မရွင္းသူေတြအတြက္ ေအာက္က ပုံကုိ ၾကည့္ပါ။ ပုံႀကီးၾကည့္ လုိပါက ပုံေပၚ Mouse ေလးတင္ၿပီး Click ပါ။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc0fnOPYqXbXZeOY4zRk4if0m1BKJtdpPKfRwyCmyuMeJV2FjiEtk_rEpUVi9rT6fDT91z0PsnpbH1KyAJe_dld1bvln5SWUIn8ff5WqKwfm1z9aj6yz8L3EsstKADOGir5iHmoKU7Ri4/s1600/MTMT1~1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="188" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc0fnOPYqXbXZeOY4zRk4if0m1BKJtdpPKfRwyCmyuMeJV2FjiEtk_rEpUVi9rT6fDT91z0PsnpbH1KyAJe_dld1bvln5SWUIn8ff5WqKwfm1z9aj6yz8L3EsstKADOGir5iHmoKU7Ri4/s640/MTMT1~1.PNG" width="640" /></a></div>
<br />
ဒီဟာကုိေတာ့ Originals Template မသုံးတဲ့ ဘေလာ့ မိတ္ေဆြေတြအတြက္ပါ။<br />
<br />
<pre class="cpp" name="code">    type="automatic" default="right" value="right">

</pre>
<br /></div>
<div>
ေတြ႕ၿပီးဆုိရင္  မိမိရွာ ေတြ႕တဲ့ Cond ရဲ႕ေအာက္မွာ အေပၚက Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။</div>
<br />
 ဒီဟာကုိေတာ့ Originals Template မသုံးတဲ့ ဘေလာ့ မိတ္ေဆြေတြအတြက္ပါ။ သိပ္မရွင္းသူေတြအတြက္ ေအာက္က ပုံကုိ ၾကည့္ပါ။ ပုံႀကီးၾကည့္ လုိပါက ပုံေပၚ Mouse ေလးတင္ၿပီး Click ပါ။<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgINsgV7AR8W7_Xn08wc-n4wCx6aJUuqFcQd69j6w1Oj2pG4HWUlK-4EIlBcZnQUkTV8srI_bobPZSvt0nnCvfKVgm3CyYk2a4oplrptA3Fy-Ckt6bvI4usNyGgsvzHt_t5uokv0l44iTU/s1600/MTMT~1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="164" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgINsgV7AR8W7_Xn08wc-n4wCx6aJUuqFcQd69j6w1Oj2pG4HWUlK-4EIlBcZnQUkTV8srI_bobPZSvt0nnCvfKVgm3CyYk2a4oplrptA3Fy-Ckt6bvI4usNyGgsvzHt_t5uokv0l44iTU/s640/MTMT~1.PNG" width="640" /></a></div>
<br />
 ၇။ အားလုံးျပင္ဆင္ၿပီး ထည့္ၿပီးသြားရင္ Save Template ကုိ နုိပ္ေပးလုိက္ပါ။</div>

မိိမိ ဘေလာ့မွာ ေရးထားတဲ့ ျမန္မာစလုံးေတြကုိ ျမန္မာေဖာင့္ Install မလုပ္တဲ့ စက္ေတြမွာ ျမင္လုိ႔ရေအာင္ လုပ္နည္း

အားလုံး မဂၤလာပါ.....။ ဒီေန႔ တစ္ကမၻာလုံးရဲ႕ အလုပ္သမားေန႔မွာ သမင္ရည္ေရြးၿပီး ဒီနည္းလမ္းေလးကုိ တင္ေပးလုိက္တာပါ။ အရင္ကဆုိရင္ေတာ့ ျမန္မာပညာရွင...

Blogger HTML Editor အသစ္ ေျပာင္းလဲ

<div dir="ltr" style="text-align: left;" trbidi="on">
၁၀/၄/၂၀၁၃ ေလာက္က Blogger HTML Editor ကုိ မယံုၾကည္ႏုိင္ေလာက္ေအာင္ Blogger ကုိ ထိန္းခ်ဳပ္လာခဲ့တဲ့ ပုဂၢဳိလ္ မ်ားက အဂၤါရပ္မ်ား အသစ္ ေျပာင္းလဲ ေပးနုိင္ခဲ့ပါတယ္။ အခုလုိ Blogger ကုိ အသစ္အဆန္ေလးေျပာင္းလဲေပးတာကလည္း Blogger ကုိ ပုိၿပီးလူသိမ်ားလာတာေၾကာင့္ Blogger ကုိ အသုံးျပဳသူမ်ားအတြက္ ယုံၾကည္စိတ္ခ်စြာ အသုံးျပဳနုိင္ေအာင္ ရည္ေရြးၿပီး Blogger HTML Editor ေျပာင္းလဲေပးတဲ့ သေဘာလဲ ပါပါတယ္ လုိ႔ Blogger ကုိ ထိန္းခ်ဳပ္လာခဲ့တဲ့ ပုဂၢဳိလ္ မ်ားကေျပာဆုိခဲ့ၾကပါတယ္။ က်ေနာ္အထင္ေျပာရရင္ ေနာက္လည္း ဒီထက္မက ေျပာင္းလဲမူေတြမ်ားလာနုိင္မယ္ထင္ပါတယ္။ ဘာျဖစ္လုိ႔လဲဆုိေတာ့ အဆုိပါ Blogger ကုိ ထိန္းခ်ဳပ္လာခဲ့တဲ့ ပုဂၢဳိလ္ မ်ားက New Post တင္တဲ့ Compose ေနရာ မွာ Translation ကုိေပါင္းစပ္ေပးလာတာ သိပ္မၾကားေသးမွာပဲ အခုလုိ Blogger HTML Editor ေျပာင္းေလးေပးတာေၾကာင့္ပါ။ အခုလုိ Blogger HTML Editor အသစ္ေျပာင္းလဲတာကုိ မႀကဳိက္လုိ႔ အေဟာင္းကုိပဲ ျပန္လုိခ်င္တယ္ဆုိတဲ့ သူေတြကလည္းမနည္းပါဘူး။ အရင္က Blogger HTML Editor အေဟာင္းဆုိရင္ အရင္က Blogger HTML Editor အသစ္ထက္ သုံးတာေလးၾကားၿပီးဆုိေတာ့ ဘေလာ့သမားေတာ္ေတာ္မ်ားမ်ားကလည္း အရင္က Blogger HTML Editor အေဟာင္းကုိပဲ မုိႀကဳိက္ၾကလိမ့္မည္လုိ႔ထင္ပါတယ္။ ဒါပဲမယ့္ က်ေနာ္ကေတာ့ အသစ္လည္း ႀကဳိက္ပါတယ္။ ေအာက္မွာ Screenshot နွင့္ Blogger HTML Editor အေၾကာင္းအရာ ကုိအနည္းငယ္ေဖာ္ျပေပးလုိက္ပါတယ္။<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-BXQvmPnCxOa6QYcpHA83ectMH3JInOs5N4Hk39oMTX3S6tBGHPaOmbCTeaY6zQ76wxSzPAGT5yr4y3ySk21YVec2GhWAgM4Ex16pRJrUQjwikCrr4qG20r8Uugrz4tZHx3vmVOxHWos/s1600/bhd.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-BXQvmPnCxOa6QYcpHA83ectMH3JInOs5N4Hk39oMTX3S6tBGHPaOmbCTeaY6zQ76wxSzPAGT5yr4y3ySk21YVec2GhWAgM4Ex16pRJrUQjwikCrr4qG20r8Uugrz4tZHx3vmVOxHWos/s1600/bhd.png" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVkg_gcVlbkJaEgeDzsLgUH-941vLaKOiJe7WGT7xl9Ps5kL3dfeM7E-L9gVTmbWgyXM3kiWfT3PzcXUyDl56SqB6qurxZLe740DE0LeqhZfPz1G53DbTTMv-MrlTd3Nd-JgvOZPIJw_Q/s1600/bhd2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVkg_gcVlbkJaEgeDzsLgUH-941vLaKOiJe7WGT7xl9Ps5kL3dfeM7E-L9gVTmbWgyXM3kiWfT3PzcXUyDl56SqB6qurxZLe740DE0LeqhZfPz1G53DbTTMv-MrlTd3Nd-JgvOZPIJw_Q/s1600/bhd2.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPrR04jwMpREuCwJTuIqNUa-xxgFu9QTueRp70Z8p2AhgQOxHsoJYdD421PmzdUI6j_PWig3ImdI4BuktcVbub4e8Gz7g7qrR0nXKzdvuUd89FjszgUG9N3NbMPR3p8ltb6E86Kf-7bJ0/s1600/bhd1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPrR04jwMpREuCwJTuIqNUa-xxgFu9QTueRp70Z8p2AhgQOxHsoJYdD421PmzdUI6j_PWig3ImdI4BuktcVbub4e8Gz7g7qrR0nXKzdvuUd89FjszgUG9N3NbMPR3p8ltb6E86Kf-7bJ0/s640/bhd1.png" width="640" /></a></div>
<br />
အေပၚမွာ ျပထားတဲ့ ပုံေလးေတြပုံစံ Bloger HTML Editor အသစ္ ေျပာင္းလဲ တားကုိေတြ႕ၾကရမွာပါ။<br />
<br />
<br />
 မိမိတို႕ ဘေလာ့ရဲ႕ Blogger HTML Editor ဆိုတာကို ၀င္လုိက္တာနဲ႕  အေပၚကပုံလိုဘဲ က်လာတာ ေတြ႕ရမွာပါ...............
ကုဒ္ေတြ ရွာဖို႕ဆိုတာကေတာ့ အရင္လိုဘဲ   ctrl  +  f  နဲ႕ပါဘဲ...ကဲ နံပါတ္စဥ္တိုင္းးစမယ္...<br />
<br />
 (၁)  Back ဆုိတာ Template ကုိ မျပဳျပင္လုိပါက ျပန္ထြက္ဖုိ႔ တပ္ဆင္ေပးထားတာပါ။<br />
<br />
(၂) Save Template ဆုိတာက Template ကုိ ျပဳျပင္ၿပီးသြားၿပီး စိတ္တုိင္းက် ျဖစ္ၿပီးဆုိရင္ နုိပ္ေပးရမယ့္ Button ေလးပဲ ျဖစ္ပါတယ္။<br />
<br />
(၃) Jump Widget ဆုိတာက Blogger HTML ေတြကုိ လြယ္ကူစြာ ရွာနုိင္ေပးဖုိ႔ ထားတာပါ။<br />
<br />
(၄) Edit Template ဆုိတာက blog ကုိ ျပဳျပင္ ေျပာင္းလဲနုိင္ဖုိ႔ အေရးႀကီးဆုံးအခ်က္ပါ။<br />
<br />
(၅) Preview Template ဆုိတာက မိမိ Blog HTML  ျပဳျပင္တာ စိတ္တုိင္းက် ျဖစ္/မျဖစ္ စစ္ေဆး နုိင္ဖုိ႔ တပ္ဆင္ထားတဲ့ အေရးႀကီးအခ်က္ပါ။<br />
<br />
(၆) Format Template ဆုိတာက Blog HTML အခ်က္အလက္မ်ား ထိန္းသိမ္း လုပ္ေဆာင္ႏိုင္ရန္ စီစဥ္ဖဲြ႔စည္းထားျခင္းျဖစ္ပါတယ္။<br />
<br />
(၇)  Revert  Change ဆိုတာက  မိမိတို႕ HTML Cond ေတြ စစ္ေဆးျပီး  သေဘာမေတြ႕တဲ့အခါ  မူလတိုင္းျပထားေပးနုိင္ဖို႕ အတြက္ အေရးႀကီးတဲ့ အခ်က္ပါ။ (အရင္က clear edit html ) ပါဘဲ..<br />
<br />
(၈) Revert Widget Template To Default ဆုိတာကေတာ့  Revert  Change ဆိုတာနွင့္ လုပ္ေဆာင္ခ်က္ အတူူတူေလာက္ပါပဲ။<br />
<br />
ဆက္မေရးနုိင္ေတာ့လုိ ဒီလုိနဲ႔ပဲ အဆုံးတတ္ပါရေစ။ </div>

Blogger HTML Editor အသစ္ ေျပာင္းလဲ

၁၀/၄/၂၀၁၃ ေလာက္က Blogger HTML Editor ကုိ မယံုၾကည္ႏုိင္ေလာက္ေအာင္ Blogger ကုိ ထိန္းခ်ဳပ္လာခဲ့တဲ့ ပုဂၢဳိလ္ မ်ားက အဂၤါရပ္မ်ား အသစ္ ေျပာင္းလဲ ေ...

How To Add Content Spoiler With Simple Animation To Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
အခုတင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့မွာ Content Spoiler နွင့္ Simple Animation ေတြကုိ သုံးနည္း/ထည့္နည္းေလးပါ။ အနည္းအားျဖင့္ေျပာရရင္ ဓါတ္ပုံ/Cond/စာသားေတြကုိ Button(ခလုဒ္) ေလးတပ္ၿပီး အဖြင့္/ပိတ္ လုပ္နည္းလုိ႔လည္း ေျပာလုိ႔ရပါတယ္။ သိၿပီးၾကေသာ ဘေလာ့မိတ္ေဆြမ်ားလည္း မ်ားေတာ့မွာပါ။ မသိရွိေသးတဲ့ ဘေလာ့မိတ္ေဆြမ်ားအတြက္ ထပ္မွ်ေ၀ျခင္းျဖစ္ပါတယ္။ ေအာက္မွာ Demo (နမူနာ) သြားၾကည့္လုိ႔ရေအာင္ Link{လင့္(ခ္)} နွင့္ တကြ ထည့္နည္းနွင့္ Cond ေတြလည္း ေပးထားပါတယ္။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuvsB0y51gfEKqaLzNlKErJAkPTr4oqsnEafPV_5X__YUVkBJ4rdrXoDJBmGJBP5uCSjySy9ZIdOjo6-Bi39V3XrlR6O9TTXW26RPZEJ1K5QUivmBtnK1JlpSdipB1yTzWQQLhPLpKInI/s1600/technology.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuvsB0y51gfEKqaLzNlKErJAkPTr4oqsnEafPV_5X__YUVkBJ4rdrXoDJBmGJBP5uCSjySy9ZIdOjo6-Bi39V3XrlR6O9TTXW26RPZEJ1K5QUivmBtnK1JlpSdipB1yTzWQQLhPLpKInI/s1600/technology.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://demo-mrthangming.blogspot.com/2013/04/views-mrthangming-blogger-technology.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 />
<br />
၃။ Edit HTMl<br />
<br />
၄။ Proceed<br />
<br />
၅။ ေအာက္က  Cond ေလးကုိရွာပါ။Ctrl + F ကုိတြဲနုိပ္၍ရွာပါ ၊ ရွာရလြယ္ပါတယ္။<br />
<br />
<pre class="cpp" name="code"></head>

</pre>
<br />
၆။ ေတြ႔ၿပီးဆုိရင္ </head> ရဲ႕ေအာက္မွာ ေအာက္က ေပးထားတဲ့ Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။<br />
<br />
<pre class="cpp" name="code"><style type='text/css'>

/* animated spoiler CSS by MrthangMing.com */

.spoilerbutton {display:block;margin:5px 0;}

.spoiler {overflow:hidden;background: #f5f5f5;}

.spoiler &gt; div {-webkit-transition: all 0.2s ease;-moz-transition: margin 0.2s ease;-o-transition: all 0.2s ease;transition: margin 0.2s ease;}

.spoilerbutton[value=&quot;Show&quot;] + .spoiler &gt; div {margin-top:-100%;}

.spoilerbutton[value=&quot;Hide&quot;] + .spoiler {padding:5px;}

</style>

</pre>
<br />
၇။ ထည့္ၿပီးရင္ Save Template ကုိ နုိပ္ေပးလုိက္ပါ။<br />
<br />
၈။ Content Spoiler With Simple Animation နွင့္ ထည့္ခ်င္တဲ့ Cond/text ေတြကုိ New Post ၿပီးရင္ HTML ေနရာမွာ ေအာက္က Cond ကုိ ထည့္ၿပီး လုပ္ေဆာင္ပါ။<br />
<br />
<pre class="cpp" name="code"><input class="spoilerbutton" type="button" value="Show" onclick="this.value=this.value=='Show'?'Hide':'Show';">
<div class="spoiler"><div>
ဤေနရာမွာ မိမိ လွ်ိဳ႕ဝွက္/ဖြတ္ ခ်င္တဲ့ Cond/Text ထည့္ေပးပါ။
</div></div></pre>
<br />
အားလုံးအဆင္ေျပၿပီးဆုိရင္ Publish Button ေလးကုိ နုိပ္ေပးလုိက္ယုံပါပဲ။ အားလုံးအဆင္ေျပနုိင္ၾကပါေစ။</div>

How To Add Content Spoiler With Simple Animation To Blogger

အခုတင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့မွာ Content Spoiler နွင့္ Simple Animation ေတြကုိ သုံးနည္း/ထည့္နည္းေလးပါ။ အနည္းအားျဖင့္ေျပာရရင္ ဓါတ္ပုံ/...

How to add "Date Time" to Blogger Title Bar

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
အခုတေလာ က်ေနာ္ ဘေလာ့ဆုိဒ္ေလးျပဳျပင္ေနတာေၾကာင့္ ပုိ႔(စ္)အသစ္ေလးေတြမတင္ေပးနုိင္တာပါ။ လာေရာက္အားေပးတဲ့ ဘေလာ့မိတ္ေဆြမ်ားကုိလည္း ႀကဳိၿပီးေတာင္းပန္ပါရေစ။ အခုတင္ေပးခ်င္တဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့ဆုိဒ္ဘာ မွာ ရက္စြဲႏွင့္အခ်ိန္နာရီေလးေတြ ေပၚေအာင္ ထည့္နည္း/လုပ္နည္းေလးပါ။ သိၿပီးၾကေသာ ဘေလာ့ မိတ္ေဆြမ်ားလည္း မ်ားေတာ့မွာပါ။ မသိေသးတဲ့ ဘေလာ့မိတ္ေဆြမ်ားအတြက္ မွ်ေ၀ေပးလုိက္တာပါ။ ေအာက္မွာ Demo သြားၾကည့္လုိ႔ ရေအာင္ Link(လင့္(ခ္)) နွင့္ တကြ Cond လည္း ထားေပးလုိက္ပါတယ္။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiewxf1efvNZ7O1OoH9NUL2eOOFNNK2oa8AKCQbtsMnv4Jx_jzB2fup_tgoBhViJQBjWAIrBic789_ZB0EDQc09ov_JJafy9vceG1WF18DQVljpdmdI3kEM6ATDqyjx7MAOOIaht4S7MfE/s1600/times.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiewxf1efvNZ7O1OoH9NUL2eOOFNNK2oa8AKCQbtsMnv4Jx_jzB2fup_tgoBhViJQBjWAIrBic789_ZB0EDQc09ov_JJafy9vceG1WF18DQVljpdmdI3kEM6ATDqyjx7MAOOIaht4S7MfE/s1600/times.png" /></a></div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://tmyoutube.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"><script language="JavaScript" type="Text/JavaScript">

var mytime1=24;

function mytime2() {

mytime3=mytime1+6;

mytime4=mytime1+mytime3;

timexx=mytime1+mytime3+mytime4;

timexxx=timexx/mytime4*mytime1; twelfth=mytime4*mytime1/12*mytime3;

timexxxx=mytime1+mytime3/timexxx-16*timexx;

timexxxxx=twelfth*(mytime1-5)/mytime4+timexx;

timexxxxxx=timexxxxx/timexxxx+mytime1*mytime4-timexx;

mytime5=(timexxxxxx+mytime1/mytime4*timexx+mytime3*timexxx)/twelfth+timexxxxx-timexxxxxx-1;

mytime6=Math.floor(mytime5);

mytime8=mytime6*mytime3/2+100;

mytime7 = window.setTimeout("mytime2()", mytime8);

var mytime9 = new Date();

var mytime10= mytime9.toLocaleString();

document.title = mytime10;}

function op(){mytime2()}

window.onload=op;

</script>

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

How to add "Date Time" to Blogger Title Bar

အခုတေလာ က်ေနာ္ ဘေလာ့ဆုိဒ္ေလးျပဳျပင္ေနတာေၾကာင့္ ပုိ႔(စ္)အသစ္ေလးေတြမတင္ေပးနုိင္တာပါ။ လာေရာက္အားေပးတဲ့ ဘေလာ့မိတ္ေဆြမ်ားကုိလည္း ႀကဳိၿပီးေတာင္း...

ဘေလာ့ 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 ႏွင့္ ထိလုိက္ရင္ မီးလုံးေလးထြက္လာၿ...

How to show CSS/HTML/java codes in blogger Posts

<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">
ဒီေန႔တင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ CSS/HTML/java codes ေတြကုိ ဘေလာ့ ပုိ႔(စ္)မွာ လွလွပပေလးျဖစ္ေအာင္ ထည့္နည္း/လုပ္နည္းေလးပါ။ အရင္ကတင္ၿပီးသာ ပုိ႔(စ္)ေတြလည္းရွိပါတယ္၊ (၁)<a href="http://mrthangming.blogspot.com/2012/12/how-to-show-htmljavascript-codes-in.html">How To Show HTML/Javascript Codes In Blogger Posts</a> / (၂) <a href="http://mrthangming.blogspot.com/2012/12/how-to-show-html-css-javascript-codes.html">How To Show HTML, CSS, JavaScript Codes in Colored Background To Blogger Posts</a> ဒီပုိ႔(စ္)ေတြမွာလဲ ၾကည့္ရွဳ႕နုိင္ပါတယ္။ Cond တစ္ခုနွင္တစ္ခု မတူသလုိ Cond ရဲ႕ အလုပ္လုပ္ပုံမွာလဲ မတူတာေၾကာင့္ လုိတာထက္ပုိ တင္ေပးလုိက္တာပါ။ ေအာက္မွာ Demo သြားၾကည့္လုိ႔ရေအာင္ Link ႏွင့္ တကြ Cond လည္းေပးထားပါတယ္။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiogFTuOxAtS8HOEqtYt9vvBFRE1EZ9ujM-AuMnxRZXQfPogcELm1Pl0dGMP3YKr4AdJsm8-MpLb3lPNYOaMduLaRLIO_LUq9r3_8hdo7QufOn4V_6701EM3ktrUt-tLkjc9EmcHU698iY/s1600/conds.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="CSS/HTML/java codes"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiogFTuOxAtS8HOEqtYt9vvBFRE1EZ9ujM-AuMnxRZXQfPogcELm1Pl0dGMP3YKr4AdJsm8-MpLb3lPNYOaMduLaRLIO_LUq9r3_8hdo7QufOn4V_6701EM3ktrUt-tLkjc9EmcHU698iY/s1600/conds.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://tmdemoblog.blogspot.com/2012/11/how-to-show-htmljava-codes-in-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 />
<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">pre { background:#efefef; border:1px solid #A6B0BF; font-size:120%; line-height:100%; overflow:auto; padding:10px; color:#000000 } pre:hover { border:1px solid #efefef; } code { font-size:120%; text-align:left; margin:0;padding:0; color: #000000;} .clear { clear:both; overflow:hidden; }

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

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

</pre>

</pre>
<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>
</div>
<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>

How to show CSS/HTML/java codes in blogger Posts

ဒီေန႔တင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ CSS/HTML/java codes ေတြကုိ ဘေလာ့ ပုိ႔(စ္)မွာ လွလွပပေလးျဖစ္ေအာင္ ထည့္နည္း/လုပ္နည္းေလးပါ။ အရင္ကတင္ၿပီးသာ ပု...

How To Add CSS Nudge Effect To Blogger Links

<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">
အခုတင္လုိက္တဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့မွာ ရွိတဲ့ Links ေတြကုိ Mouse Pointer ေလးနွင့္ထိလုိက္ရင္   Links ေတြ ေ႐ြ႕႐ွားျခင္း/ေျပးေနေအာင္ လုပ္နည္း နွင့္  မိမိ ရည္ေရြးတဲ့ Links ေတြကုိပဲ ေ႐ြ႕႐ွားျခင္း/ေျပးေနေအာင္ လုပ္နည္း/ထည့္နည္းေလးပါ။ ဒီနည္းေတြကေတာ့ က်ေနာ္တုိ႔ ျမန္မာ ဘေလာ့ဆုိဒ္ေတြမွာဆုိရင္ အသုံးအမ်ားဆုံးလုိ႔ေျပာရရင္မွားမယ္မထင္ပါဘူး။ ဒါေပမယ့္ မသိေသးတဲ့ မိတ္ေဆြေတြအတြက္ အခက္အခဲမရွိေအာင္ ထပ္မွ်ေ၀ေပးလုိက္တာပါ။ ေအာက္မွာ Demo သြားၾကည့္လုိ႔ရေအာင္ Link ႏွင့္ တကြ Cond လည္းထားေပးပါတယ္။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg63pzHLKoW4JBoj611A2epejv0EaBMXSJNla9DYWXQuEAuGpLKlGR5e0vFalwGEkvo169sdN-y7sEtk4bnSz2nIU-Dr5VL9fxScOiWnIywew7tY5wiSba7h19S_qfBWEGueVEhTBuNh3M/s1600/nuge.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="CSS Nudge Effect "><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg63pzHLKoW4JBoj611A2epejv0EaBMXSJNla9DYWXQuEAuGpLKlGR5e0vFalwGEkvo169sdN-y7sEtk4bnSz2nIU-Dr5VL9fxScOiWnIywew7tY5wiSba7h19S_qfBWEGueVEhTBuNh3M/s1600/nuge.png" /></a></div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://tm-democond.blogspot.com/2012/12/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 />
<div data-find="_16" dir="ltr" style="background-color: white; line-height: 20px;" trbidi="on">
<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 title="Adding all Blog Links CSS Nudge Effect  :"><span style="font-size: small;">(၁) Blog မွာရွိတဲ့ Links ေတြအားလုံးကုိ </span></span><span style="line-height: normal;">ေ႐ြ႕႐ွားျခင္း/ေျပးေနေအာင္ လုပ္နည္း........!!</span></span></h3>
</div>
၁။<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">a:link {

-moz-transition: all 0.1s ease-in 0s ;

-webkit-transition: all 0.1s ease-in 0s ;

-o-transition: all 0.1s ease-in 0s ;

}

a:hover {

margin-left: 12px;

</pre>
၇။ ထည့္ၿပီးရင္ Save Template ကုိနုိပ္ေပးလုိက္ပါ။<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 title="Adding CSS Nudge Effect To Blogger Links :"><span style="font-size: small;">(၂) မိိမိရည္ေရြးတဲ့ Links ေတြကုိပဲ </span></span><span style="line-height: normal;">ေ႐ြ႕႐ွားျခင္း/ေျပးေနေအာင္ လုပ္နည္း........!!</span></span></h3>
</div>
၁။<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">.nudg {

-moz-transition: all 0.1s ease-in 0s ;

-webkit-transition: all 0.1s ease-in 0s ;

-o-transition: all 0.1s ease-in 0s ;

}

.nudg:hover {

margin-left: 12px;

}

</pre>
<br />
၇။ ထည့္ၿပီးရင္ Save Template ကုိ နုိပ္ေပးလုိက္ပါ။<br />
<br />
၈။ မိိမိရည္ေရြးတဲ့ Links ေတြကုိပဲ ေ႐ြ႕႐ွားျခင္း/ေျပးေနေအာင္ လုပ္ခ်င္တဲ့ Link ကုိ ေအာက္ပါအတုိင္ ထည့္ေပးပါ။<br />
<br />
<pre class="cpp" name="code"><a class="nudg" href="http://mrthangming.blogspot.com/">Blogger Technology</a>

</pre>
<span style="font-size: large;"><b>မွတ္ခ်က္။   ။</b></span> <a href="http://mrthangming.blogspot.com/">http://mrthangming.blogspot.com/</a> ေနရာနွင့္ Blogger Technology ေနရာေတြမွာ မိမိ လုိခ်င္တဲ့ အတုိင္ ျပဳျပင္ေျပာင္းလဲရပါမယ္။ ဥပမာ_ Link ႏွင့္ Name<br />
<br />
<br /></div>

How To Add CSS Nudge Effect To Blogger Links

အခုတင္လုိက္တဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့မွာ ရွိတဲ့ Links ေတြကုိ Mouse Pointer ေလးနွင့္ထိလုိက္ရင္ Links ေတြ ေ႐ြ႕႐ွားျခင္း/ေျပးေနေအာင္ လုပ္န...

How To Show HTML, CSS, JavaScript Codes in Colored Background To Blogger Posts

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
အခုေနာက္တစ္ခါ မွ်ေ၀ခ်င္တဲ့ ပုိ႔(စ္)ကေတာ့ ဘေလာ့မွာ HTML, CSS, JavaScript Codes ေတြကုိ ေနာက္ခံ အေရာင္ေလးနွင့္ လွလွပပ တင္နည္း/ထည့္နည္းေလးပါ။ ႀကဳိက္ၾကမယ္လုိ႔လည္းေမွ်ာ္လင့္ပါတယ္။ ေစာေစာက တင္ၿပီးသာ ပုိ႔(စ္)ေလးနွင့္ သိပ္မကြာပါဘူး။ <a href="http://mrthangming.blogspot.com/2012/12/how-to-show-htmljavascript-codes-in.html">How To Show HTML/Javascript Codes In Blogger Posts</a> မွာလည္းတင္ေပးၿပီးပါၿပီး။ ဒါေပမယ့္ Cond ၏ အလုပ္လုပ္ပုံကေတာ့ကြာပါတယ္။  ေအာက္မွာ Demo သြားၾကည့္လုိ႔ရေအာင္ Link ႏွင့္ တကြ Cond လည္းေပးထားပါတယ္။
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVvGA7G98JXpDCxoAHuWFaf9fwKvSRAxRoO4Z6lF5cuEYRaEBHrkRYhMv_57L-IDJK7Rdz-OYlfS-iv43h63IVXt6viBe_uDPSmM1Xj0r8tMs6b8HYQfw3F2o_fo-GxImKuRY6hDAzVag/s1600/cond.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="Show HTML, CSS, JavaScript Codes"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVvGA7G98JXpDCxoAHuWFaf9fwKvSRAxRoO4Z6lF5cuEYRaEBHrkRYhMv_57L-IDJK7Rdz-OYlfS-iv43h63IVXt6viBe_uDPSmM1Xj0r8tMs6b8HYQfw3F2o_fo-GxImKuRY6hDAzVag/s1600/cond.png" /></a></div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://tmdemoshow.blogspot.com/2012/12/how-to-show-html-css-javascript-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">.rafi { font-size: 15px;font-family: Courier;font-weight: normal;font-style:italic; background-color: #000000; color: #ffffff; width: 90%; margin: 5px 10px; padding: 20px 20px 20px 20px; border: 2px dotted lightgrey; transition: background-color .777s; -webkit-transition: background-color .777s; -moz-transition: background-color .777s; -o-transition: background-color .777s; -ms-transition: background-color .777s; } .rafi:hover { background-color: #0c991a ; color: #fff; box-shadow: -1px -1px 12px 2px gainsboro; border-radius: 10px; } .rafi:active { background-color: CornflowerBlue ; color: #000; }</pre>
<br />
၇။ ထည့္ၿပီးရင္ Save Template ကုိ နုိပ္ေပးလုိက္ပါ။
<br />
<br />
၈။ မိမိ ေပၚေစခ်င္တဲ့ HTML/Javascript Codes ေတြကုိ ေအာက္ပါအတုိင္ ထည့္ပါ။<br />
<br />
<pre class="cpp" name="code"><div class="rafi">

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

</div>

</pre>
</div>

How To Show HTML, CSS, JavaScript Codes in Colored Background To Blogger Posts

အခုေနာက္တစ္ခါ မွ်ေ၀ခ်င္တဲ့ ပုိ႔(စ္)ကေတာ့ ဘေလာ့မွာ HTML, CSS, JavaScript Codes ေတြကုိ ေနာက္ခံ အေရာင္ေလးနွင့္ လွလွပပ တင္နည္း/ထည့္နည္းေလးပါ။ ...

How To Show HTML/Javascript Codes In Blogger Posts

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
ဒီေန႔တင္တဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့မွာ HTML/Javascript Codes ေတြကုိ လွလွပပ ေလးျဖင့္ေအာင္ တင္ခ်င္/ထည့္ခ်င္တဲ့ မိတ္ေဆြေတြအတြက္ ေ၀မွ်ေပးလုိက္ပါတယ္။ ျဖစ္နုိင္ရင္ေတာ့ ဘေလာ့ကုိ ကုိယ္တုိင္ေလ့လာၿပီးမွ မိမိတုိ႔ရထားတဲ့ HTML/Javascript Codes ေတြကုိ တစ္ပါးသူေတြကုိ ျပန္မွ်ေ၀ခ်င္တဲ့ အခါမွာ ဒီနည္းကုိ သုံးရင္ပုိအႀကဳိးရွိပါလိမ့္မယ္။ ေအာက္မွာ Demo သြားၾကည့္လုိ႔ရေအာင္ Link ႏွင့္ တကြ Cond လည္းေပးထားပါတယ္။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNBw6wL6rlwnkjVYXnpBfEi5ajfQpdbA7QQaRSklanHcb9YkpkbFJtZUUByNwLtxuobDy1yGir7p87QrudESYPGUWeA5GatOnxk5iinyHg0nEVKL5gFMqB2E_pspCoXwhr-tDpPEC4tz0/s1600/html+cond.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title=" HTML/Javascript Codes "><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNBw6wL6rlwnkjVYXnpBfEi5ajfQpdbA7QQaRSklanHcb9YkpkbFJtZUUByNwLtxuobDy1yGir7p87QrudESYPGUWeA5GatOnxk5iinyHg0nEVKL5gFMqB2E_pspCoXwhr-tDpPEC4tz0/s1600/html+cond.png" /></a></div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://tmdemoshow.blogspot.com/2012/12/how-to-show-htmljavascript-codes-in.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">/*--Code View--------------*/

code {

color: #000099;

font: 108% "Courier new",Courier,mono;

padding: 0 2px;

white-space: nowrap;

}

pre code {

-moz-box-shadow: 0 0 10px #DDDDDD;

background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2ZHQ2-EPVdYJcpy3H7keWUmSCP-DIVVaz9nzoneYztKLaoAJ8gejDqZ_aDQQ0zOzil9tns2ZMDQUBFRLum1_pxmv2yt89eE3s2HnqR6OSQxKMAiKPpKei1ylihDQAc7TFdWb8So4dpjQt/s1600/btsnts_color_background.png") repeat scroll 0 0 #FFFFFF;

border: 2px solid #CCCCCC;

clear: both;

color: #333333;

display: block;

font-size: 12px;

line-height: 15px;

margin: 10px auto 10px 30px;

overflow: auto;

padding: 15px;

white-space: pre;

width: 85% !important;

word-wrap: break-word;

}

code .comment {

color: #888;

}

code .class, code .rules {

color: #ff00ff;

font-size: 100%;

}

code .value,  code .title, code .string {

color: #0000FF;

}

code .tag {

color: #000099;

}

code .keyword {

color: #000099;

}

.html .attribute {

color: #006600;

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

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

</pre></code>

</pre>
</div>

How To Show HTML/Javascript Codes In Blogger Posts

ဒီေန႔တင္တဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့မွာ HTML/Javascript Codes ေတြကုိ လွလွပပ ေလးျဖင့္ေအာင္ တင္ခ်င္/ထည့္ခ်င္တဲ့ မိတ္ေဆြေတြအတြက္ ေ၀မွ်ေပးလုိက္ပ...

How To Add Customize Popular Posts Widget With CSS3 To Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
ဒီေန႔အခ်ိန္ရလုိ႔ တင္ေပးရတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့ Popular Posts ေတြကုိ သူမ်ားေတြနဲ႔ မတူေအာင္ စက္၀ုိင္းပုံစံျဖင့္ ျမင္ကြင္းလွလွေလးျဖင့္ေပၚေအာင္ထည့္နည္းေလးပါ။ သိၿပီးၾကေသာ မိတ္ေဆြေတြလည္း မ်ားေတာ့မွာပါ။ မသိေသးတဲ့ မိတ္ေဆြေတြအတြက္ ထပ္ေ၀မွ်ေပးလုိက္တာပါ။ ႀကဳိက္ၾကမယ္ လုိ႔လည္းေမွ်ာ္လင့္ပါတယ္။ ေအာက္မွာ Demo သြားၾကည့္လုိ႔ရေအာင္ link နဲ႔ တကြ ထည့္နည္း နွင့္ Cond ကုိလည္း အဆင့္လုိက္ ျပေပးထားပါတယ္။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdk3XL30fSwhfwSmj5o8AsHmdA9pctwesjG3uv6MIUWFh20cvWTNk1LAKFJV32U8vFTkpA61cpa9GqbCanOnwIhrSAnHQG0W_2dbnbdCZyyHNH84C0gRSo53by3Tq-qZW3Q9uYnju_MPE/s1600/Popular+Posts.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="Customize Popular Posts Widget With CSS3"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdk3XL30fSwhfwSmj5o8AsHmdA9pctwesjG3uv6MIUWFh20cvWTNk1LAKFJV32U8vFTkpA61cpa9GqbCanOnwIhrSAnHQG0W_2dbnbdCZyyHNH84C0gRSo53by3Tq-qZW3Q9uYnju_MPE/s1600/Popular+Posts.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://tmdemoblog.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>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h3 style="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; color: #2e6886; font-family: 'Carrois Gothic SC', sans-serif; font-size: 16px; letter-spacing: -1px; line-height: 22px; 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: 1px; padding-left: 4px; padding-right: 4px; padding-top: 3px;" title="Add Popular Posts Widget To Your Blogger :">
(၁) သင့္ ဘေလာ့မွာ Popular Posts Widget ကုိ အရင္ထည့္ပါ:</h3>
၁။<a href="http://blogger.com/" target="_blank" title="Enter Blogger">Sign In Blogger</a>
<br />
<br />
၂။ Layout<br />
<br />
၃။ Add a Gadget<br />
<br />
၄။ Popular Posts<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmgBb4DGS1JKZNhb6p75kHyzvqfRwMR2W9GCtyoUphZMafydGl-FJA3C3J3m8-pDM5ti_43T-bOTKpNGaI7TzAoAFY1H37ClLkleBREmm2jb8665ky2mj_da-CE9WshYg6StAFmyuhF9k/s1600/Popular+posts+1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="Click Popular Post"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmgBb4DGS1JKZNhb6p75kHyzvqfRwMR2W9GCtyoUphZMafydGl-FJA3C3J3m8-pDM5ti_43T-bOTKpNGaI7TzAoAFY1H37ClLkleBREmm2jb8665ky2mj_da-CE9WshYg6StAFmyuhF9k/s1600/Popular+posts+1.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEireSkDjrj21TZjb3_aVuMn-N4gz93HDmLP95kraMH3MG5OktGGALsUvxxNkGdGeIOjx1Ivs1uxUkMRJurS0bUIL-t4CXP9sWiOPuff_R64jQMkLLfL53J2Q5mE2Fr3eZwHHwa5OZwkmeY/s1600/mr+thangming-p.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="Popular Posts Setting"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEireSkDjrj21TZjb3_aVuMn-N4gz93HDmLP95kraMH3MG5OktGGALsUvxxNkGdGeIOjx1Ivs1uxUkMRJurS0bUIL-t4CXP9sWiOPuff_R64jQMkLLfL53J2Q5mE2Fr3eZwHHwa5OZwkmeY/s1600/mr+thangming-p.png" /></a></div>
<h3 style="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; color: #2e6886; font-family: 'Carrois Gothic SC', sans-serif; font-size: 16px; letter-spacing: -1px; line-height: 22px; 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: 1px; padding-left: 4px; padding-right: 4px; padding-top: 3px;" title="Customize With CSS Popular Post Widge Blogger :">
(၂) ေအာက္ပါအတုိင္ CSS Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ:</h3>
၅။ Edit HTMl<br />
<br />
၆။ Proceed<br />
<br />
၇။ ေအာက္က  Cond ေလးကုိရွာပါ။Ctrl + F ကုိတြဲနုိပ္၍ရွာပါ ၊ ရွာရလြယ္ပါတယ္။<br />
<br />
<pre class="cpp" name="code">]]></b:skin>
</pre>
<br />
<br />
၈။ ေတြ႕ၿပီးဆုိရင္ ]]></b:skin> ရဲ႕ အေပၚမွာ ေအာက္က Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။<br />
<br />
<pre class="cpp" name="code">/*--- Mr ThangMing --- */

.popular-posts ul{padding-left:0px;}

.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOTU4-t4CtgZ1HJ5PcbeZSUPbifdZJ1Lf643DCowZ57jpPUWke8gHFTAgOzGoJMDlPmrSrIUfWgt5LBFplqNn5vA9dmGEIr0mjgp8D6goLVptw6HVGuBfEPOhHe_Xb7IKGaqboqJ-Kbgk/s1600/1.gif)  no-repeat scroll 5px 10px;

list-style-type: none;

margin:0 0 5px 0px;

padding:5px 5px 5px 20px !important;

border: 1px solid #ddd;

border-radius:10px;

-moz-border-radius:10px;

-webkit-border-radius:10px;

}

.popular-posts ul

li:hover {

border:1px solid #6BB5FF;

}

.popular-posts ul

li a:hover {

text-decoration:none;

}

.popular-posts .item-thumbnail img {

webkit-border-radius: 100px;

-moz-border-radius: 100px;

border-radius: 100px;

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

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

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

}

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

How To Add Customize Popular Posts Widget With CSS3 To Blogger

ဒီေန႔အခ်ိန္ရလုိ႔ တင္ေပးရတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့ Popular Posts ေတြကုိ သူမ်ားေတြနဲ႔ မတူေအာင္ စက္၀ုိင္းပုံစံျဖင့္ ျမင္ကြင္းလွလွေလးျဖင့္ေပၚေ...

How To Add & Use SyntaxHighlighter (V3) To Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
ဒီပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့မွာ HTMl, CSS , JaveScirpt Cond ေတြကုိ SyntaxHighlighter (V3) သုံးၿပီး တင္နည္း/ထည့္နည္းေလးပါ။ သိၿပီးၾကေသာ မိတ္ေဆြမ်ားရွိနုိင္သလုိ မသိေသးတဲ့ မိတ္ေဆြမ်ားလည္းရွိနုိင္ပါတယ္။ ဒါေၾကာင့္မသိေသးတဲ့ မိတ္ေဆြေတြအတြက္ ထပ္ေ၀မွ်ေပးလုိက္တာပါ။ ႀကဳိက္ၾကမယ္လုိ႔လည္းေမွ်ာ္လင့္ ပါတယ္။ ေအာက္မွာ Demo သြားၾကည့္လုိ႔ရေအာင္Link နဲ႔ တကြ Cond လည္း ေပးထားပါတယ္။ ဘေလာ့အတြက္ လုိတာေတြနဲ႔အဆင္မေျပတာ ေလးေတြ ရွိခဲ့ရင္ Comment မွာ ေမးနုိင္ၾကပါတယ္။ ဆက္လက္ႀကဳိးစားလွ်က္ - Mr ThangMing<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEgcLDcMt7a3maoeJ7lSQAoDGLe85_EQw3GdEy3rR1qa_Ggi6VWwR6HsMZEeBDm72pfOAjo-gNDXGp5MkS08VgiEBJhX30lZt78oGB9xk3wyFDGf_RzlGyMIOC_-u8yHAt-WYBE6XcI6M/s1600/HTML+Cond+Editor.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title=" SyntaxHighlighter (V3)"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEgcLDcMt7a3maoeJ7lSQAoDGLe85_EQw3GdEy3rR1qa_Ggi6VWwR6HsMZEeBDm72pfOAjo-gNDXGp5MkS08VgiEBJhX30lZt78oGB9xk3wyFDGf_RzlGyMIOC_-u8yHAt-WYBE6XcI6M/s1600/HTML+Cond+Editor.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://tmdemoblog.blogspot.com/2012/11/mr-thangming-blogger_6.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>
၁။<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"></head>
</pre>
<br />
<br />
၆။ ေတြ႕ၿပီးဆုိရင္ </head> ရဲ႕အေပၚမွာ ေအာက္က Cond ကုိထည့္ေပးပါ။<br />
<br />
<pre class="cpp" name="code">
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript' type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

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

မွတ္ခ်က္။   ။ SyntaxHighlighter (V3) ျဖင့္ေပၚေစခ်င္ တဲ့ Cond ကုိ Post / HTMl မွာ ေအာက္ က Cond အတုိင္ ထည့္ပါ။
<pre class="cpp" name="code"><pre class="brush: js">
ဒီေနရာမွာ သင့္ေပၚေစခ်င္တဲ့ Cond ထည့္ပါ / Add Your code here
</pre>
</pre>
Please Go To The Developer Through This Link>>><a href="http://alexgorbatchev.com/SyntaxHighlighter/" target="_blank">http://alexgorbatchev.com/SyntaxHighlighter/</a></pre>
</div>

How To Add & Use SyntaxHighlighter (V3) To Blogger

ဒီပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့မွာ HTMl, CSS , JaveScirpt Cond ေတြကုိ SyntaxHighlighter (V3) သုံးၿပီး တင္နည္း/ထည့္နည္းေလးပါ။ သိၿပီးၾကေသာ မိတ္ေဆြမ...

How To Add Animated CSS3 Bubble Buttons To Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
ဒီေန႔တင္တဲ့ပုိ႔(စ္) ေလးကေတာ့ Animated CSS3 Bubble Buttons ေလးကုိဘေလာ့ ထည့္နည္း ေလးပါ။ သိၿပီးၾကေသာ မိတ္ေဆြေတြလည္းမ်ားနုိင္သလုိ မသိေသးတဲ့ မိတ္ေဆြေတြလည္းရွိေကာင္းရွိနုိင္ပါတယ္။ ဒါေၾကာင့္ မသိေသးတဲ့မိတ္ေဆြေတြ အတြက္ထပ္ေ၀မွ်ေပးလုိက္တာပါ။ ႀကဳိက္ၾကမယ္လုိ႔လည္း ေမွ်ာ္လင့္ပါတယ္။ ေအာက္မွာ Demo သြားၾကည့္နုိင္ရန္ လင့္(ခ္) နဲ႔ တကြ Cond လည္းေပးထားပါတယ္။ အဆင္မေျပတာရွိရင္ Comment မွာ ျပန္ေမးလုိ႔ရပါတယ္။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFocr7RQpXhZCxyr2Du33QpSo1dwY6tMYzmwP-H5YWRHbtlsQVd_7IWNWkQbhByjK4NE0IgzEwcyamoauMXFVahxmn8AWXLEL3xBMH_ARiH6hr7TfqyoNZ0pctjQI8G98JY746zALEbH0/s1600/live+demo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" title="Animated CSS3 Bubble Buttons"><img border="0" height="110" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFocr7RQpXhZCxyr2Du33QpSo1dwY6tMYzmwP-H5YWRHbtlsQVd_7IWNWkQbhByjK4NE0IgzEwcyamoauMXFVahxmn8AWXLEL3xBMH_ARiH6hr7TfqyoNZ0pctjQI8G98JY746zALEbH0/s1600/live+demo.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://exe-idea.blogspot.com/2012/10/blog-post_28.html" target="_blank" title="Go Check Out The Demo Live"><span style="font-size: large;">Preview</span></a></div>
 ၁။<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 />
<br />
၆။ ေတြ႕ၿပီးဆုိရင္ ]]></b:skin> ရဲ႕ အေပၚမွာ ေအာက္က Cond ကုိ ထည့္ေပးလုိက္ပါ။<br />
<br />
<pre class="cpp" name="code">.button {
    font: 15px Calibri, Arial, sans-serif;
/* A semi-transparent text shadow */
    text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
/* Overriding the default underline styling of the links */
    text-decoration: none !important;
    white-space: nowrap;
    display: inline-block;
    vertical-align: baseline;
    position: relative;
    cursor: pointer;
    padding: 10px 20px;
    background-repeat: no-repeat;
/* The following two rules are fallbacks, in case
the browser does not support multiple backgrounds. */
    background-position: bottom left;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png');
/* Multiple backgrounds version. The background images
are defined individually in color classes */
    background-position: bottom left, top right, 0 0, 0 0;
    background-clip: border-box;
/* Applying a default border raidus of 8px */
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
/* A 1px highlight inside of the button */
    -moz-box-shadow: 0 0 1px #fff inset;
    -webkit-box-shadow: 0 0 1px #fff inset;
    box-shadow: 0 0 1px #fff inset;
/* Animating the background positions with CSS3 */
/* Currently works only in Safari/Chrome */
    -webkit-transition: background-position 1s;
    -moz-transition: background-position 1s;
    transition: background-position 1s;
}
.button:hover {
/* The first rule is a fallback, in case the browser
does not support multiple backgrounds
*/
    background-position: top left;
    background-position: top left, bottom right, 0 0, 0 0;
}
.button:active {
/* Moving the button 1px to the bottom when clicked */
    bottom: -1px;
}
/* The three buttons sizes */
.button.big {
    font-size: 30px;
}
.button.medium {
    font-size: 18px;
}
.button.small {
    font-size: 13px;
}
/* A more rounded button */
.button.rounded {
    -moz-border-radius: 4em;
    -webkit-border-radius: 4em;
    border-radius: 4em;
}
/* Defining four button colors */
/* BlueButton */
.blue.button {
    color: #0f4b6d !important;
    border: 1px solid #84acc3 !important;
/* A fallback background color */
    background-color: #48b5f2;
/* Specifying a version with gradients according to */
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'),
-moz-radial-gradient(    center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'),
-webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}
.blue.button:hover {
    background-color: #63c7fe;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'),
-moz-radial-gradient(    center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'),
-webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
/* Green Button */
.green.button {
    color: #345903 !important;
    border: 1px solid #96a37b !important;
    background-color: #79be1e;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}
.green.button:hover {
    background-color: #89d228;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
/* Orange Button */
.orange.button {
    color: #693e0a !important;
    border: 1px solid #bea280 !important;
    background-color: #e38d27;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);

background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}
.gray.button {
    color: #525252 !important;
    border: 1px solid #a5a5a5 !important;
    background-color: #a9adb1;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}
.gray.button:hover {
    background-color: #b6bbc0;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA5IYAeCOP-73ggcQuhsGi4gC0bH14GXncuD5MVLGizL4BieW3QnXagdEllji2RraYAXn_qMZCq_5nfrq1QXVEG4CAJ4UHPXcGJn_MSuRuKEuVydFGCkm_JVoTGC7PDHw6VI1Ay3JdAg/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}</pre>
<br />
ရ။ ထည့္ၿပီးရင္ Save Template ကုိ နုိပ္ေပးလုိက္ပါ။<br />
<br />
၈။ Animated CSS3 Bubble Buttons ျဖင့္ေပၚေစခ်င္တဲ့ စာကုိ ေအာက္က Cond အတုိင္ ထည့္ေပးလုိက္ပါ။ <span style="background-color: white; line-height: 20px; text-align: left;"> </span><span style="background-color: white; line-height: 20px; text-align: left;">HTML Cond ထည့္လုိ႔ရတဲ့ ေနရာေတြမွာ ထည့္သြင္းအသုံးျပဳနုိင္ပါတယ္။</span><br />
<span style="background-color: white; line-height: 20px; text-align: left;"><br /></span>
<u><span style="color: blue; font-size: large;"><span style="background-color: white; line-height: 20px; text-align: left;">၁။ </span><span style="line-height: 20px;">HTML For Big Button</span></span></u><br />
<span style="background-color: white; line-height: 20px; text-align: left;"><br /></span>
<span style="background-color: white; line-height: 20px; text-align: left;"></span><br />
<pre class="cpp" name="code"><a href="LINK HERE" class="button big blue">TEXT HERE</a></pre>
<br />
<span style="color: blue; font-size: large;"><u>2။ <span style="background-color: white; line-height: 20px; text-align: left;">HTML For Medium Button</span></u></span><br />
<span style="background-color: white; line-height: 20px; text-align: left;"><span style="color: blue; font-size: large;"><u><br /></u></span></span>
<span style="background-color: white; line-height: 20px; text-align: left;"></span><br />
<pre class="cpp" name="code"><a href="LINK HERE" class="button blue medium">TEXT HERE</a></pre>
<br />
<span style="color: blue; font-size: large;"><u>3။ <b style="background-color: white; line-height: 20px; text-align: left;">HTML For Small Button</b></u></span><span style="background-color: white; color: #343333; font-size: 12px; line-height: 20px; text-align: left;"> </span><br />
<span style="background-color: white; color: #343333; font-size: 12px; line-height: 20px; text-align: left;"><br /></span>
<span style="background-color: white; line-height: 20px; text-align: left;"></span><br />
<pre class="cpp" name="code"><a href="LINK HERE" class="button small blue">TEXT HERE</a></pre>
<br />
<div style="text-align: left;">
<span style="color: blue; font-size: large;"><u><span style="line-height: 20px;">4။ </span><b style="background-color: white; line-height: 20px;">HTML For Small Rounded Buttons
</b></u></span></div>
<br />
<pre class="cpp" name="code"><a href="LINK HERE" class="button small blue rounded">TEXT HERE</a>
</pre>
<br />
မွတ္ခ်က္။  ။ blue ေနရာ မွာ မိမိ ႀကဳိက္တဲ့ အေရာင္/Colour

ေျပာင္းနုိင္ပါတယ္။</div>

How To Add Animated CSS3 Bubble Buttons To Blogger

ဒီေန႔တင္တဲ့ပုိ႔(စ္) ေလးကေတာ့ Animated CSS3 Bubble Buttons ေလးကုိဘေလာ့ ထည့္နည္း ေလးပါ။ သိၿပီးၾကေသာ မိတ္ေဆြေတြလည္းမ်ားနုိင္သလုိ မသိေသးတဲ့ မိတ...

Mr ThangMing

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

Blog မွာ ျမန္မာစလုံးေရးလုိ႔ရမယ့္ Keyboard ေလးထည့္ခ်င္ရင္

မိိမိ ဘေလာ့မွာ ေရးထားတဲ့ ျမန္မာစလုံးေတြကုိ ျမန္မာေဖာင့္ Install မလုပ္တဲ့ စက္ေတြမွာ ျမင္လုိ႔ရေအာင္ လုပ္နည္း

Blogger HTML Editor အသစ္ ေျပာင္းလဲ

How To Add Content Spoiler With Simple Animation To Blogger

How to add "Date Time" to Blogger Title Bar

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

Show Your HTML/Javascript and Css Codes In Bulb Lights

How to show CSS/HTML/java codes in blogger Posts

How To Add CSS Nudge Effect To Blogger Links

How To Show HTML, CSS, JavaScript Codes in Colored Background To Blogger Posts

How To Show HTML/Javascript Codes In Blogger Posts

How To Add Customize Popular Posts Widget With CSS3 To Blogger

How To Add & Use SyntaxHighlighter (V3) To Blogger

How To Add Animated CSS3 Bubble Buttons To Blogger

Activity Find

Labels

Archives