Mr ThangMing: blogger tutorial

How To Add Go To Top/Bottom Buttons Using JQuery In Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
ဒီေန႔ တင္ေပးလုိက္တဲ့ ဘေလာ့ နည္းပညာ ပုိ႔(စ္) ေလးကေတာ့ ဘေလာ့မွာ Go To Top And Go To Bottom Buttons (အေပၚ နွင့္ ေအာက္ တက္ဆင္ လုိ႔ရတဲ့ ခလုဒ္ေလး ကုိ JQuery နည္းလမ္းေလးျဖင့္ ထည့္သုံးခ်င္တဲ့ ဘေလာ့ မိတ္ေဆြမ်ား အတြက္ ထပ္ၿပီးွမွ်ေ၀ေပးလုိက္ပါတယ္။ မိမိဘေလာ့ ကုိ ViSit ၾကည့္႐ွု သူေတြအတြက္ အလြယ္တကူ အေပၚ နွင့္ ေအာက္ တက္ဆင္ လုိ႔ရတဲ့ ခလုဒ္ေလး တပ္ေပးခ်င္တဲ့ သူမ်ား အတြက္ အလြန္အဆင္ေျပလွတဲ့ နည္းလမ္းေကာင္းေလးပါ။<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU_KsbA5Gof9VbOzBCgG9kAABvLu1Rp7Oqg1ft6XnVpmHyDRS5kZTpQTsq-DS723rqe6dSWiqkv63GjSAGc7-qGuMfHPHIXvUGyIsWok2tXWIWLFNLKUmnRMPRvDIgmDoKUqLdQy5PZbA/s1600/How+To+Add+Go+To+Top+And+Go+To+Bottom+Buttons+Using+JQuery+In+Blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU_KsbA5Gof9VbOzBCgG9kAABvLu1Rp7Oqg1ft6XnVpmHyDRS5kZTpQTsq-DS723rqe6dSWiqkv63GjSAGc7-qGuMfHPHIXvUGyIsWok2tXWIWLFNLKUmnRMPRvDIgmDoKUqLdQy5PZbA/s1600/How+To+Add+Go+To+Top+And+Go+To+Bottom+Buttons+Using+JQuery+In+Blogger.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.myanmarbloggingtip.tk/" 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 />
၄။ ေအာက္က  Cond ေလးကုိရွာပါ။Ctrl + F ကုိတြဲနုိပ္၍ရွာပါ ၊ ရွာရလြယ္ပါတယ္။<br />
<br />
<pre class="cpp" name="code">]]></b:skin>

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

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

.button_up{

padding:7px; /* Distance between the border and the icon */

background-color:white;

border:1px solid #CCC; /* Border Color */

position:fixed;

background: white url(http://mr-thangming.ucoz.com/Images/MTMarrow_up.png) no-repeat top left;

background-position:50% 50%;

width:20px; /* Button's width */

height:20px; /* Button's height */

bottom:280px; /* Distance from the bottom */

right:5px; /* Change right to left if you want the buttons on the left */

white-space:nowrap;

cursor: pointer;

border-radius: 3px 3px 3px 3px;

opacity:0.7;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);

}

.button_down{

padding:7px; /* Distance between the border and the icon */

background-color:white;

border:1px solid #CCC; /* Border Color */

position:fixed;

background: white url(http://mr-thangming.ucoz.com/Images/MTMarrow_down.png) no-repeat top left;

background-position:50% 50%;

width:20px; /* Button's width */

height:20px; /* Button's height */

bottom:242px; /* Distance from the bottom */

right:5px; /* Change right to left if you want the buttons on the left */

white-space:nowrap;

cursor: pointer;

border-radius: 3px 3px 3px 3px;

opacity:0.7;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);

}

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

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

//<![CDATA[

$(function() {

var $elem = $('body');

$('#button_up').fadeIn('slow');

$('#button_down').fadeIn('slow');

$(window).bind('scrollstart', function(){

$('#button_up,#button_down').stop().animate({'opacity':'0.2'});

});

$(window).bind('scrollstop', function(){

$('#button_up,#button_down').stop().animate({'opacity':'1'});

});

$('#button_down').click(

function (e) {

$('html, body').animate({scrollTop: $elem.height()}, 800);

} );

$('#button_up').click(

function (e) {

$('html, body').animate({scrollTop: '0px'}, 800);

} );});

//]]>

</script>

</pre>
<br />
၈။ အားလုံး ထည့္ၿပီးရင္ေတာ့ Save Template Button ေလးကုိ နွိပ္ေပးလုိက္ပါ။ ၿပီးပါၿပီး>>>>အဆင္ေျပၾကပါေစ။<br />
<br /></div>

How To Add Go To Top/Bottom Buttons Using JQuery In Blogger

ဒီေန႔ တင္ေပးလုိက္တဲ့ ဘေလာ့ နည္းပညာ ပုိ႔(စ္) ေလးကေတာ့ ဘေလာ့မွာ Go To Top And Go To Bottom Buttons (အေပၚ နွင့္ ေအာက္ တက္ဆင္ လုိ႔ရတဲ့ ခလုဒ္ေလး...

Arrow Keyboard Navigation For Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
ဒီေန႔ တင္ေပးလုိက္တဲ့ နည္းပညာ ပုိ႔(စ္) ေလးကေတာ့ မိမိတုိ႔၏ ဘေလာ့ေလးကုိ Computer Keyboard တြင္ပါ၀င္ေသာ Arrow( ျမားတံ) ေလးေတြနဲ႔ မိမိဘေလာ့ထဲက ပုိ႔(စ္)မ်ားကုိ Newer Post ႏွင့္ Older Post Button ေလးေတြအသုံးျပဳစရာမလုိပဲ Keyboard Arrow( ျမားတံ) ျဖင့္ Newer Post ႏွင့္ Older Post Button ႏွိပ္သကဲ့သုိ႔ အသုံးျပဳလုိ႔ရေအာင္ လုပ္နည္း/ထည့္နည္း ေလးကုိ မသိေသးတဲ့ ဘေလာ့ မိတ္ေဆြမ်ား အတြက္ မွ်ေ၀ေပးလုိက္ပါတယ္။ ေအာက္မွာ Demo သြားၾကည့္လုိ႔ ရေအာင္ Link နဲ႔ တကြ လုိအပ္တဲ့ Cond လည္းထားေပးပါတယ္။<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-XehygwEGQWgf_Lsg4QCYHBzQF9DI8RtxuO9A7oYS9HXvSUNXOVoDxZwoPNdriRF4-euZDKXq7dIM0HPpMKA34fCNi6g8GIwqD6-G5jPamh12wLDxpJH1V5kq4UaHYNYffm6wLvy1MaU/s1600/arrow-key-navigation-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-XehygwEGQWgf_Lsg4QCYHBzQF9DI8RtxuO9A7oYS9HXvSUNXOVoDxZwoPNdriRF4-euZDKXq7dIM0HPpMKA34fCNi6g8GIwqD6-G5jPamh12wLDxpJH1V5kq4UaHYNYffm6wLvy1MaU/s1600/arrow-key-navigation-blogger.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://htmlsheen.blogspot.com/2012/10/blog-post.html" style="font-size: 100%;" target="_blank" title="Go Check Out The Demo Live.. "><img height="35" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq1T28UHnYJ5c-Ex3Ny43eJnOtCKu7-B5i89oMD567ndzdTkPp1fe3cKRx0wML9n1gBEjL1GQKWl3FDQaMGkarx4DR-ElThuqLOrbFtLAVoZiKijVBkhJJppCP25N1e44COnxUJle_gXw/s1600/live-demo-icon.jpg" width="180" /></a></div>
<br />
<br style="background-color: white; color: #111111; font-size: 14px; line-height: 21px;" />
<div class="alert" style="background-attachment: scroll; background-color: #fbe3e4; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFTDgqCynraE7-sZ2TSoZ3ybuXlhMxpZDTvTG4xBlCazf8eo5IfYZIpUTYiR5QLw-AUJZCXu7Ar2t-V5-wKG-sGPYPLWag4ZweP3WtHuFwMvXT_phvA-syYVf5J6pQhX5A_3uquQT6GEAF/s1600/NBT+alert.png); background-position: 0.8em 0.4em; background-repeat: no-repeat no-repeat; border: 2px solid rgb(251, 194, 196); color: #8a1f11; font-size: 14px; line-height: 21px; margin-bottom: 1em; padding: 0.8em 0.8em 0.8em 3.6em;">
<b>သင့္ Blogger Account ၀င္ၿပီးမွသာ ဤ Widget Generator ကုိ အသုံးျပဳပါ</b></div>
</div>
<br />
<form action="http://www.blogger.com/add-widget" method="post" target="_blank">
<input name="widget.title" type="hidden" value="Arrow Key Nav" /><input name="widget.content" type="hidden" value="<script type='text/javascript'>document.onkeyup = function(event){if (document.activeElement.nodeName == 'TEXTAREA' || document.activeElement.nodeName == 'INPUT') return;event = event || window.event;switch(event.keyCode){case 37:var newerLink = document.getElementById('Blog1_blog-pager-newer-link');if(newerLink !=null) window.location.href = newerLink.href;break;case 39:var olderLink = document.getElementById('Blog1_blog-pager-older-link');if(olderLink!=null) window.location.href = olderLink.href;}};</script>" /><input name="widget.template" type="hidden" value="<data:content/>" /><input name="infoUrl" type="hidden" value="https://plus.google.com/u/0/103359415538823163001/posts" /><input name="logoUrl" type="hidden" value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizDL7sDUKGbUjaUSpUSakOSUlOZL762eRe5iWRD6EKhN18ZVNbviH-T78Oe3GXe0Ijmc2kx7zS2hRQJuoem63nXnWCb6j-ik3urSKUxaSA7r-EYJlHCqQH04kxoTHOdbAOGNnGipKbTCs/s1600/logo.png" /><input alt="Add to Blogger" src="http://www.blogger.com/img/add/add2blogger_lg.gif" type="image" /></form>
</div>
<br />
ထည့္နည္းကုိ မသိေသးတဲ့ မိတ္ေဆြမ်ားရွိခဲ့ရင္ ေအာက္ပုံ ကုိ ၾကည့္ၿပီး လုပ္ေဆာင္ပါ။<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAOqBnmuUp-9g4jQMzR362rFxZ3lxUWdU_y8Tq99yntOtu_vzAMqqqQUlWBafaGGD5xkbntdkztnf46fx4FtvqPSUpZsKppZhcKirHCIMMfgphNeiYwBnD4yVKqmFiAVqzA-MwM5vMeJw/s1600/addb_1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="199" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAOqBnmuUp-9g4jQMzR362rFxZ3lxUWdU_y8Tq99yntOtu_vzAMqqqQUlWBafaGGD5xkbntdkztnf46fx4FtvqPSUpZsKppZhcKirHCIMMfgphNeiYwBnD4yVKqmFiAVqzA-MwM5vMeJw/s320/addb_1.gif" width="320" /></a></div>
<br />
<br />
<br /></div>

Arrow Keyboard Navigation For Blogger

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

ဘေလာ့မွာ Blogger နွင့္ Google+ Comments Box ၂ခုစလုံး တြဲသုံးလုိ႔ရေအာင္ ထည့္နည္း

<div dir="ltr" style="text-align: left;" trbidi="on">
မဂၤလာပါ၊  ဒီေန႔ ဘေလာ့သမားမ်ားအတြက္ ဘေလာ့မွာ Blogger Comments Box နွင့္ Google+ Plus Comments Box  ၂ခုစလုံး တြဲသုံးလုိ႔ရေအာင္ ထည့္နည္း/လုပ္နည္းေလးကုိ မွ်ေ၀ေပးလုိက္ပါတယ္။ ဒီ နည္းလမ္းေလးကုိေတာ့ က်ေနာ္တုိ႔ ျမန္မာဘေလာ့ေတြမွာ အသုံးျပဳတဲ့သူသိပ္မရွိပါဘူးလုိ႔ေျပာရရင္ မွားမယ္မထင္ပါဘူး။ ဘာပဲျဖစ္ျဖစ္ သုံးခ်င္တဲ့ ဘေလာ့မိတ္ေဆြမ်ားအတြက္ အဆင္ေျပေအာင္ ထပ္မွ်ေ၀ေပးလုိက္တာပါ။ ေအာက္မွာ Demo သြားၾကည့္လုိ႔ရေအာင္ Link ႏွင့္တကြ ထည့္နည္းနဲ႔ လုိအပ္တဲ့ Cond ေတြလည္း ထားေပးပါတယ္။<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgykoYsPcjh65bg_G1bnUzgQB45y9l4joONSIERyoTSe0MWqBcf5TM0BXFeSbTzTZGIo0qt4wqW2D1ZUBdbFul1bW1Lo8BMkqCiwpyAM55l1-JuIxS6DH1ptd8q8u-b8vDJTz2RhVbZ-f0/s1600/bg_1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="427" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgykoYsPcjh65bg_G1bnUzgQB45y9l4joONSIERyoTSe0MWqBcf5TM0BXFeSbTzTZGIo0qt4wqW2D1ZUBdbFul1bW1Lo8BMkqCiwpyAM55l1-JuIxS6DH1ptd8q8u-b8vDJTz2RhVbZ-f0/s640/bg_1.gif" width="100%" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://exe-idea.blogspot.com/2012/10/blog-post_28.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 />
၄။ ေအာက္က  Cond ေလးကုိရွာပါ။Ctrl + F ကုိတြဲနုိပ္၍ရွာပါ ၊ ရွာရလြယ္ပါတယ္။<br />
<br />
<pre class="cpp" name="code"><b:includable id='threaded_comments' var='post'>...</b:includable>

</pre>
<br />
၅။ ေတြ႕ၿပီးဆုိရင္ ထုိ Cond ကုိျဖဳတ္ၿပီး ေအာက္က Cond နဲ႔ လဲေပးလုိက္ပါပါ။ (မွတ္ခ်က္။   ။ မိမိရွာေတြ႔တဲ့ အေပၚက Cond ကုိျဖဳတ္ၿပီး ေအာက္က က်ေနာ္ေပးထားတဲ့ Cond ကုိ ထည့္ေပးလုိက္ပါ။)<br />
<br />
<pre class="cpp" name="code"><b:includable id='threaded_comments' var='post'>

</div>

<b:if cond='data:post.embedCommentForm'>

<b:include data='post' name='threaded_comment_js'/>

</b:if>

<data:post.commentHtml/>

</div>

<b:if cond='data:post.allowNewComments'>

<b:include data='post' name='threaded-comment-form'/>

<b:else/>

<data:post.noNewCommentsText/>

</b:if>

</p>

<b:if cond='data:showCmtPopup'>

</iframe>

</div>

</b:if>

<b:if cond='data:post.showBacklinks'>

<b:include data='post' name='backlinks'/>

</b:if>

</div>

gapi.comments.render('gcomments', {

href: window.location,

width: '600',

first_party_property: 'BLOGGER',

view_type: 'FILTERED_POSTMOD'

});

$('#comments-norm').click(function(){

<span class="Apple-tab-span" style="white-space: pre;">	</span>// switch to normal comments displaying

<span class="Apple-tab-span" style="white-space: pre;">	</span>$('#gcontainer').css('display','none');

<span class="Apple-tab-span" style="white-space: pre;">	</span>$('#comments').css('display','block');

<span class="Apple-tab-span" style="white-space: pre;">	</span>$('#comments-norm').addClass('comment-on');

<span class="Apple-tab-span" style="white-space: pre;">	</span>$('#comments-gplus').removeClass('comment-on');

<span class="Apple-tab-span" style="white-space: pre;">	</span>$('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfpOnH7rkwMNc19CgopN1isEAP3DU7qZSvr0dpygurxQ3nSVmkHhQHDPL-mHpEOC5lBdi6DceGism6qGzbP8iRC3FX3_zCyQmbit17VSOhkyizainV5sp73y3NLjKJNJ2NP3DLsuisfnVA/s1600/MTMblogger_on.png');

<span class="Apple-tab-span" style="white-space: pre;">	</span>$('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiySi8EHFMEZmKIQwGUHP2zxEiRFr3aieX9wlF-wjF2l3CmQMAch9PPdN3cEqlr0Z9kEj-YyzNLFvCSot4tTG1DQQLgOeMJP2dBkjhOErFwvSRa429xRaYxVjkDebR0a5SG9TR_6Gga_Wvk/s1600/MTMplus_off.png');

});

$('#comments-gplus').click(function(){

<span class="Apple-tab-span" style="white-space: pre;">	</span>// switch to google plus comments displaying

<span class="Apple-tab-span" style="white-space: pre;">	</span>$('#comments').css('display','none');

<span class="Apple-tab-span" style="white-space: pre;">	</span>$('#gcontainer').css('display','block');

<span class="Apple-tab-span" style="white-space: pre;">	</span>$('#comments-norm').removeClass('comment-on');

<span class="Apple-tab-span" style="white-space: pre;">	</span>$('#comments-gplus').addClass('comment-on');

<span class="Apple-tab-span" style="white-space: pre;">	</span>$('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaNTL3dPytOUA4AeAMa36QLD1i8Bw0zf7sFJYPywgZaDH1tBFtDEjMYm7C745OM0B38INWPHWTYvXndhktQ1SPE5mnD_Xc1R15OCCDtr-GqOxntuhOor_Fj0JXlLy2F8coo2MSDo8J7vce/s1600/MTMblogger_off.png');

<span class="Apple-tab-span" style="white-space: pre;">	</span>$('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdii_fzNetNHhp5Db1nxCAt3V-iUv8OUI0NIqiqI0HPh0zJVblTPS84zLavVC44JpjYb4xLYUJunEcPgCSf3NbygdTttZtb4plZQjO_akHVWp6x_k2GAwnDQG0BZLwDPF6xT6z45OOUliS/s1600/MTMplus_on.png');

});

$('#comments-norm').hover(

<span class="Apple-tab-span" style="white-space: pre;">	</span>// switch to normal comments displaying

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

<span class="Apple-tab-span" style="white-space: pre;">		</span>if (!$('#comments-norm').hasClass('comment-on')){ $('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfpOnH7rkwMNc19CgopN1isEAP3DU7qZSvr0dpygurxQ3nSVmkHhQHDPL-mHpEOC5lBdi6DceGism6qGzbP8iRC3FX3_zCyQmbit17VSOhkyizainV5sp73y3NLjKJNJ2NP3DLsuisfnVA/s1600/MTMblogger_on.png');}

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

<span class="Apple-tab-span" style="white-space: pre;">		</span>if (!$('#comments-norm').hasClass('comment-on')){ $('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaNTL3dPytOUA4AeAMa36QLD1i8Bw0zf7sFJYPywgZaDH1tBFtDEjMYm7C745OM0B38INWPHWTYvXndhktQ1SPE5mnD_Xc1R15OCCDtr-GqOxntuhOor_Fj0JXlLy2F8coo2MSDo8J7vce/s1600/MTMblogger_off.png');}

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

);

$('#comments-gplus').hover(

<span class="Apple-tab-span" style="white-space: pre;">	</span>// switch to gplus comments displaying

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

<span class="Apple-tab-span" style="white-space: pre;">		</span>if (!$('#comments-gplus').hasClass('comment-on')){ $('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdii_fzNetNHhp5Db1nxCAt3V-iUv8OUI0NIqiqI0HPh0zJVblTPS84zLavVC44JpjYb4xLYUJunEcPgCSf3NbygdTttZtb4plZQjO_akHVWp6x_k2GAwnDQG0BZLwDPF6xT6z45OOUliS/s1600/MTMplus_on.png');}

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

<span class="Apple-tab-span" style="white-space: pre;">		</span>if (!$('#comments-gplus').hasClass('comment-on')){ $('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiySi8EHFMEZmKIQwGUHP2zxEiRFr3aieX9wlF-wjF2l3CmQMAch9PPdN3cEqlr0Z9kEj-YyzNLFvCSot4tTG1DQQLgOeMJP2dBkjhOErFwvSRa429xRaYxVjkDebR0a5SG9TR_6Gga_Wvk/s1600/MTMplus_off.png');}

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

);

</script>

<style>

#comment-zone {

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

}

#gcontainer {

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

}

#comments-norm, #comments-gplus {

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

<span class="Apple-tab-span" style="white-space: pre;">	</span>padding:<span class="Apple-tab-span" style="white-space: pre;">		</span>0px 5px;

}

</style>

</div>

</b:includable>

</pre>
<br />
၆။ ေအာက္က Cond ကုိ ထပ္ရွာပါ။<br />
<br />
<pre class="cpp" name="code"><b:includable id='comment_picker' var='post'>...</b:includable>

</pre>
<br />
၇။ ေတြ႕ၿပီးဆုိရင္ ထုိ Cond ကုိျဖဳတ္ၿပီး ေအာက္က Cond နဲ႔ လဲေပးလုိက္ပါပါ။ (မွတ္ခ်က္။   ။ မိမိရွာေတြ႔တဲ့ အေပၚက Cond ကုိျဖဳတ္ၿပီး ေအာက္က က်ေနာ္ေပးထားတဲ့ Cond ကုိ ထည့္ေပးလုိက္ပါ။)<br />
<br />
<pre class="cpp" name="code"><b:includable id='comment_picker' var='post'>

<b:if cond='data:post.forceIframeComments'>

<b:include data='post' name='iframe_comments'/>

<b:if cond='data:post.showThreadedComments'>

<b:include data='post' name='threaded_comments'/>

<b:else/>

<b:include data='post' name='comments'/>

</b:if>

<b:else/>

<b:if cond='data:post.commentSource == 1'>

<b:include data='post' name='iframe_comments'/>

<b:else/>

<b:if cond='data:post.showThreadedComments'>

<b:include data='post' name='threaded_comments'/>

<b:else/>

<b:include data='post' name='threaded_comments'/>

</b:if>

</b:includable>

</pre>
<br />
၈။ ထည့္ၿပီးရင္ Save Template ကုိ ႏွိပ္ေပးလုိက္ပါ။ ၿပီးရင္ မိမိ၏ ဘေလာ့ကုိ ဖြင့္ၾကည့္ပါ၊ သိပ္အဆင္မေျပဘူးဆုိရင္ Edit HTMl ကုိျပန္၀င္ၿပီး ေအာက္က Cond ကုိ ရွာပါ။<br />
<br />
<pre class="cpp" name="code"></head>

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

</pre>
<br />
ထည့္ၿပီးရင္ Save Template ကုိႏွိပ္ေပးလုိက္ပါ။ အားလုံးအဆင္ေျပနုိင္ၾကပါေစ။<br />
<br /></div>

ဘေလာ့မွာ Blogger နွင့္ Google+ Comments Box ၂ခုစလုံး တြဲသုံးလုိ႔ရေအာင္ ထည့္နည္း

မဂၤလာပါ၊ ဒီေန႔ ဘေလာ့သမားမ်ားအတြက္ ဘေလာ့မွာ Blogger Comments Box နွင့္ Google+ Plus Comments Box ၂ခုစလုံး တြဲသုံးလုိ႔ရေအာင္ ထည့္နည္း/လုပ္န...

ဘေလာ့မွာ Google+ Comments ထည့္သြင္းအသုံးျပဳနည္း

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
ဒီေန႔တင္ေပးလုိက္တဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့မွာ Google+ Comments ထည့္သြင္းအသုံးျပဳနည္းေလးကုိ တင္ေပးလုိက္ပါတယ္။ ဤနည္းကုိေတာ့ က်ေတာ္တုိ႔ ျမန္မာဘေလာ့မွာေတာ့ သုံးတဲ့သူမရွိသေလာက္ပါပဲလုိ႔ေျပာရင္ မွားမယ္မထင္ပါဘူး။ ဘာျဖစ္လုိ႔လဲဆုိေတာ့ က်ေနာ္တုိ႔ျမန္မာေတြကမွ Google Page ကုိသိပ္မသုံးၾကတာ။ Chatting အတြက္ Gmail,Gtalk နွင့္ Facebook ေလာက္ပဲ သုံးတာမ်ားတာပါ။ အားလုံးကုိဆုိလုိတဲ့ သေဘာ့ေတာ့မဟုတ္ပါဘူး။ သိၿပီးၾကတဲ့မိတ္ေဆြေတြ ထိခုိက္မယ္ဆုိရင္ ေအာင္ပန္းပါရေစ။ ဘာပဲျဖစ္ျဖစ္ သုံးခ်င္တဲ့ ဘေလာ့မိတ္ေဆြမ်ားအတြက္ အဆင္ေျပေအာင္ မွ်ေ၀ေပးလုိက္တာပါ။ ေအာက္မွာ Demo သြားၾကည့္လုိ႔ရေအာင္ Link နွင့္ တကြ လုပ္နည္းနဲ႔ လုိအပါတဲ့ Cond ေတြလည္း ထားေပးပါတယ္။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiSH6iuKt4YZcjOJlH-GsXInnL1YTBL-FIxqMlrulwPbx8lsX7pvUvokuMdDS3JAmzZW_2CWblvjdmscyBYU6xi4cQF0BYGvWAML3IstSsoMuZ8tfxSIIL1RPW9Nyu2qy1SA-QcbBhl0U/s1600/Google+2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="378" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiSH6iuKt4YZcjOJlH-GsXInnL1YTBL-FIxqMlrulwPbx8lsX7pvUvokuMdDS3JAmzZW_2CWblvjdmscyBYU6xi4cQF0BYGvWAML3IstSsoMuZ8tfxSIIL1RPW9Nyu2qy1SA-QcbBhl0U/s640/Google+2.png" width="100%" /></a></div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://facebook-thangming.blogspot.com/2013/03/how-to-write-post-for-wallpaper-blogdemo.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 />
၂။ Google+<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhOt5I9JOsi2Bep0RMEszeFJgQuowIJ1O8f4hjjK2DAtkPfJmawJ1Q5FRkVOfysXsJ3NNoeiaRhSwEHWCp-M-FnmKN_OcqFkCbvihCRjTEXS6dADwsfmYI4pkZXJD1dk-dnY8ZnWOEH7Y/s1600/Google%252B.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="318" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhOt5I9JOsi2Bep0RMEszeFJgQuowIJ1O8f4hjjK2DAtkPfJmawJ1Q5FRkVOfysXsJ3NNoeiaRhSwEHWCp-M-FnmKN_OcqFkCbvihCRjTEXS6dADwsfmYI4pkZXJD1dk-dnY8ZnWOEH7Y/s640/Google%252B.png" width="100%" /></a></div>
<br />
Google Page မရွိေသးဘူးဆုိရင္ အေပၚကပုံ အတုိင္းျမင္ေတြ႔ရမွာပါ။ Get Started Button ေလးကုိနုိပ္ၿပီး အရင္ဆုံး Google Page ကုိ ျပဳလုပ္ပါ။ အလြယ္ေလးဖုိ႔လုိ႔ ထပ္မရွင္းျပေတာ့ပါဘူး။ Google Page ကုိရျပဳလုပ္ၿပီးသြားရင္ေတာ့ ေအာက္ပုံအတုိင္း ျမင္ေတြ႔ရမွာပါ။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi21NatLrOIjzAE2yT55KJFsWAURareh-xP1F3o5arOBJ-UHVhs1k6rP7hpRJvfjipoeoMzn-MS1IlMehjI_FnLFVBgezz_M272MrfSAmvwiwaL5R86FlqlNHuO83GsA3a6_SmMF8X75DQ/s1600/Google%252B1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="224" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi21NatLrOIjzAE2yT55KJFsWAURareh-xP1F3o5arOBJ-UHVhs1k6rP7hpRJvfjipoeoMzn-MS1IlMehjI_FnLFVBgezz_M272MrfSAmvwiwaL5R86FlqlNHuO83GsA3a6_SmMF8X75DQ/s640/Google%252B1.png" width="100%" /></a></div>
<br />
အေပၚကပုံမွာျပထားတဲ့တုိင္း Google+ ၀င္ၿပီး Use Google+ Comments On This Blog ကုိ အမွန္ျခစ္ေပးလုိက္ပါ။ ေအာက္ပါ အဆင့္ကုိထပ္သြားပါ။<br />
<br />
၃။ Template<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDsdKEonzVaOp7GoHHtCFZJX0mRAAym_PANoq1UAX8V2tXKaamyhECBwOOVjELC5cTauSe79N0erYe87WgKL7mxUCIM8ifcktkfjVsyjlvVcYCf155A9KZgtSwD00_bdQRFHtkFmjVk5w/s1600/f11.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDsdKEonzVaOp7GoHHtCFZJX0mRAAym_PANoq1UAX8V2tXKaamyhECBwOOVjELC5cTauSe79N0erYe87WgKL7mxUCIM8ifcktkfjVsyjlvVcYCf155A9KZgtSwD00_bdQRFHtkFmjVk5w/s1600/f11.png" /></a>၄။ Edit HTM (မွတ္ခ်က္။   ။ Edit HTM ၀င္ရတာ အခက္အခဲျဖစ္ေနရင္ Keyboard ေပၚက  F11 နုိပ္ေပးလုိက္ပါ၊ Cond ေတြျမင္ရၿပီးဆုိရင္ F11 ကုိထပ္နုိပ္ေပးလုိက္ပါ။)<br />
<br />
၅။ Format Template<br />
ေအာက္က  Cond ေလးကုိရွာပါ။ (မွတ္ခ်က္။   ။Ctrl + F ကုိတြဲနုိပ္၍ရွာပါ ၊ ရွာရလြယ္ပါတယ္။)<br />
<br />
<pre class="cpp" name="code"><div class='post-footer'>

</pre>
<br />
၆။ ေတြ႕ၿပီးဆုိရင္ <div class='post-footer'> ရဲ႕ေအာက္မွာ ေအာက္က Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။<br />
<br />
<pre class="cpp" name="code">
<div class='cmt_iframe_holder' data-viewtype='FILTERED_POSTMOD' expr:href='data:blog.canonicalUrl'/>

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

ဘေလာ့မွာ Google+ Comments ထည့္သြင္းအသုံးျပဳနည္း

ဒီေန႔တင္ေပးလုိက္တဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့မွာ Google+ Comments ထည့္သြင္းအသုံးျပဳနည္းေလးကုိ တင္ေပးလုိက္ပါတယ္။ ဤနည္းကုိေတာ့ က်ေတာ္တုိ႔ ျမန္မ...

မိိမိ ဘေလာ့မွာ ေရးထားတဲ့ ျမန္မာစလုံးေတြကုိ ျမန္မာေဖာင့္ 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 မလုပ္တဲ့ စက္ေတြမွာ ျမင္လုိ႔ရေအာင္ လုပ္နည္း

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

Google Feedburner Account တည္ေဆာက္နည္း/ဖန္တီးနည္း

<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">
ဒီေန႔တင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ Google Feedburner Account တည္ေဆာက္နည္း/ဖန္တီးနည္း ေလးကုိ မွ်ေ၀ေပးလုိက္ပါတယ္။ Comment Box မွာ ဘေလာ့မိတ္ေဆြတစ္ေယာက္က ေမးလုိ႔ တခ်ဳိ႕မသိေသးတဲ့ ဘေလာ့မိတ္ေဆြမ်ားအတြက္လည္း အဆင္ေျပေအာင္ဆုိၿပီး ပုိ႔(စ္)ေလး အေနျဖင့္ ထပ္တင္ေပးလုိက္တာပါ။  သိၿပီးၾကေသာ ဘေလာ့မိတ္ေဆြေတြကုိေတာ့ မဆုိလုိပါဘူး။ ေအာက္မွာ ပုံနဲ႔ တကြ ရုပ္ျမင္ Video နဲ႔ပါ ရွင္းျပေပးထားပါတယ္။<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://feedburner.google.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqT-jULWcIvX5jHO_fjFZcKsdV4YqZ8GXME_V_leKwUxVpuyd3IxLDUFaamqKEjF8yZugvqiIvNwVZgoANsONd47oHj5xxSmyVFuDg2O_FDC4pt59zBPZZR9mmp3hjhtD_O9yr8-xKw0U/s1600/feed.png" /></a></div>
<br />
၁။ <span style="background-color: white; color: #343333; font-size: 14px; line-height: 20px;"><a href="http://feedburner.google.com/" target="_blank">http://feedburner.google.com</a> တြင္ ၀င္ပါ။</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinl5P6x5YhyphenhyphenozaXfCv4jNIktgOmkC17x_SbGGiHbA2MOTZMsl7O8rEJGq_-2OwtrHPW-iSxWXiiAkDnGPuHC6alGMmIGNyXJFW18bQv4zHKGnJY26EfmtORObDy_VwwsMciU-8q6Wt3C4/s1600/feedburner.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinl5P6x5YhyphenhyphenozaXfCv4jNIktgOmkC17x_SbGGiHbA2MOTZMsl7O8rEJGq_-2OwtrHPW-iSxWXiiAkDnGPuHC6alGMmIGNyXJFW18bQv4zHKGnJY26EfmtORObDy_VwwsMciU-8q6Wt3C4/s1600/feedburner.gif" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
၂။မိမိ၏ Gmail Account ျဖင့္ ၀င္ပါ။ Sign In/ ေအာက္ပုံ အတုိင္းထြက္လာပါမည္။</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikONOwDm_kujQw61zSms9vsBiw0H7aMTqgeFQKhyphenhyphencAYl_LwZ8G5aOAXftMWL3yb6zJILfFcHDd4Uo-8X6XBKYtl0yiHV16U7py_dOwSoXZyRwFtNIIAD0VZSRMGYKd69XxbeMDLSP9H3U/s1600/feedburner1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikONOwDm_kujQw61zSms9vsBiw0H7aMTqgeFQKhyphenhyphencAYl_LwZ8G5aOAXftMWL3yb6zJILfFcHDd4Uo-8X6XBKYtl0yiHV16U7py_dOwSoXZyRwFtNIIAD0VZSRMGYKd69XxbeMDLSP9H3U/s1600/feedburner1.gif" /></a></div>
၃။ ေပၚလာေသာ Box ထဲမွာ  မိမိ၏ ဘေလာ့ လိပ္စာကု္ိထည့္ေပးပါ။ Next Button ေလးကုိ နုိပ္ပါ။ ေအာက္ပုံ ထြက္လာပါမည္။<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDBDBKUTIak3VyD8f0k8mQRSfC1-pWHxEFIWx3z-t6pkpC80X14CNEPleWKRbJSDHCeyvulpMo4VgwKHL736p6bdJ-bHedGhcCLtHCcPj8VbRvxbwOCdThKV_SZ19NFzx7rslBb8Gbhoc/s1600/feedburner.2gif.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDBDBKUTIak3VyD8f0k8mQRSfC1-pWHxEFIWx3z-t6pkpC80X14CNEPleWKRbJSDHCeyvulpMo4VgwKHL736p6bdJ-bHedGhcCLtHCcPj8VbRvxbwOCdThKV_SZ19NFzx7rslBb8Gbhoc/s1600/feedburner.2gif.gif" /></a></div>
<br />
၄။မိမိ ႀကိဳက္ရာ တစ္ခုကုိေရြးေပးၿပီး Next Button ေလးကုိ ထပ္နုိပ္ပါ။ ေအာက္ပုံ အတုိင္းထြက္လာပါမည္။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc6_EGgW7SGeFJixQwVSdNmhmKsYzzXN0RCMSAHttOdR2HBLjtsbnq8yIkpZZ6X5NII_a9UW_k_YnX5RlNgRJ1SJztVRt670PrV1nW7JPRwgKONi9ZY83o9WNu_RKpPVXcfHvMQ1nQTcE/s1600/feedburner2.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc6_EGgW7SGeFJixQwVSdNmhmKsYzzXN0RCMSAHttOdR2HBLjtsbnq8yIkpZZ6X5NII_a9UW_k_YnX5RlNgRJ1SJztVRt670PrV1nW7JPRwgKONi9ZY83o9WNu_RKpPVXcfHvMQ1nQTcE/s1600/feedburner2.gif" /></a></div>
၅။ Feed Title နွင့္္ Feed Address ျပေပးပါမည္။ Next Button ေလးကုိသာ နုိပ္ေပးလုိက္ပါ။ ေအာက္ပုံ ကုိ ထပ္ၾကည့္ပါ။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhowYeZe805ECt7uPWWVqAfP6RjkAolrC0wY2OMEUhzRwvh8IRjBuKSJ5CUygMRU06o86Or-lY5vyK3lHC4aZKPgCWwnGwiDxdq1-gcwWOETBcGQGCEodS-fPmBfB2Xzd-NR2pL1VcKfd0/s1600/feedburner3.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhowYeZe805ECt7uPWWVqAfP6RjkAolrC0wY2OMEUhzRwvh8IRjBuKSJ5CUygMRU06o86Or-lY5vyK3lHC4aZKPgCWwnGwiDxdq1-gcwWOETBcGQGCEodS-fPmBfB2Xzd-NR2pL1VcKfd0/s1600/feedburner3.gif" /></a></div>
<br />
၆။ Step 1 ကနဲ႔ 3 အထိ ၿပီးေျမာက္ေၾကာင္းကုိ ေျပာတာပါ။ Next Button ကုိိနုိပ္ေပးလုိက္ပါ။ ေအာက္ပုံ ကုိ ဆက္ၾကည့္ပါ။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7R4OZuGNJ5GNogseC9hJGme5uykz36aszasK7aJM5puySDalf7yjxprP-2r_jC6Q68r7h0vPbx2qfwg4L9Sv3PVmRCS1zrqaNDagrCIBsQXlgLrHIV_h5MxS_WrEDqhGp2NM9Fei2xXc/s1600/feedburner4.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7R4OZuGNJ5GNogseC9hJGme5uykz36aszasK7aJM5puySDalf7yjxprP-2r_jC6Q68r7h0vPbx2qfwg4L9Sv3PVmRCS1zrqaNDagrCIBsQXlgLrHIV_h5MxS_WrEDqhGp2NM9Fei2xXc/s1600/feedburner4.gif" /></a></div>
၇။ ဒီေနရာမွာ ေတာ့ Feedburner Account Information ျဖစ္ပါတယ္။ မိမိႀကဳိက္ စိတ္တုိင္းက် ျပင္တင္နုိင္ပါတယ္။  စိတ္တုိင္းက် ျဖစ္ၿပီးဆုိရင္  Next Button ကုိ ထပ္နုိပ္ေပးလုိက္ပါ။ ေအာက္ပုံကုိ ဆက္ၾကည့္ပါ။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAgcHG7jvN6Z4-t3t2MHRKU0R0i9xSo4Yg9J00Q9wPSauhsxI_hd9qXNLqHy3V3UzWCBq6a5Q0yjuFumuOz3bdCo-xUvfcaj-wb6uReyfGMWMgbcT3_2WfiDdo6HsSfuKXn8WcixxsRlU/s1600/feedburner5.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAgcHG7jvN6Z4-t3t2MHRKU0R0i9xSo4Yg9J00Q9wPSauhsxI_hd9qXNLqHy3V3UzWCBq6a5Q0yjuFumuOz3bdCo-xUvfcaj-wb6uReyfGMWMgbcT3_2WfiDdo6HsSfuKXn8WcixxsRlU/s1600/feedburner5.gif" /></a></div>
<br />
၈။ box ေတြကုိ မိမိ ႀကဳိက္သလုိ အမုန္ျခစ္ေပးပါ။ ၿပီးရင္ Next Button ကုိ ထပ္နုိပ္ေပးလုိက္ပါ။ ေအာက္ပုံ ကုိ ဆက္ၾကည့္ပါ။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvgar8x3g3hP17ghhHjEsc4XYehjWNK-O9j5xD-Iim2u3Sob3g9oeOSNJAH4xuOoc8Ri2q0RjBdzxNVajE6n4yhPpc-ww_BQkqbhg_nVTF1GTFF6166XId-jHVepldT7mPNEW2Jw4R-lw/s1600/feedburner6.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvgar8x3g3hP17ghhHjEsc4XYehjWNK-O9j5xD-Iim2u3Sob3g9oeOSNJAH4xuOoc8Ri2q0RjBdzxNVajE6n4yhPpc-ww_BQkqbhg_nVTF1GTFF6166XId-jHVepldT7mPNEW2Jw4R-lw/s1600/feedburner6.gif" /></a></div>
<br />
၉။ Google Feedburner Account ေအာင္ျမင္စြာၿပီးဆုံးေၾကာင္းျပတာပါ။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZhOHYi9chM8ijZ2b0rqORM0dLlSfH05zSBmRSW5kU8HSqel1hVrWGRP68IACRVYnSiDGXnDNgI-OElZaVkpsPBaJfT5m70Q9P-AboVqwryY5mq3Nb5_J6V0hNyMTqkGwzoPKVvAxYqgU/s1600/MrThangMing.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZhOHYi9chM8ijZ2b0rqORM0dLlSfH05zSBmRSW5kU8HSqel1hVrWGRP68IACRVYnSiDGXnDNgI-OElZaVkpsPBaJfT5m70Q9P-AboVqwryY5mq3Nb5_J6V0hNyMTqkGwzoPKVvAxYqgU/s1600/MrThangMing.gif" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="color: orange; font-size: x-large;">Video Tutorial(ရုပ္ျမင္ Video ျဖင့္ ရွင္းျပျခင္း)</span></div>
<br /></div>
<iframe allowfullscreen="" frameborder="0" height="450" src="http://www.youtube.com/embed/J-2PeJRG038" width="610"></iframe>
</div>

Google Feedburner Account တည္ေဆာက္နည္း/ဖန္တီးနည္း

ဒီေန႔တင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ Google Feedburner Account တည္ေဆာက္နည္း/ဖန္တီးနည္း ေလးကုိ မွ်ေ၀ေပးလုိက္ပါတယ္။ Comment Box မွာ ဘေလာ့မိတ္ေဆြ...

How To Add Embed YouTube Videos In Blogger Comments Box

<div dir="ltr" style="text-align: left;" trbidi="on">
ဒီေန႔တင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့ Comments Box မွာ  Embed YouTube Videos မ်ားထည့္လုိ႔ရေအာင္ လုပ္နည္းေလးပါ။ က်ေနာ္တုိ႔ ျမန္မာ ဘေလာ့ေတြမွာေတာ့ သုံးတဲ့ သူမရွိသေလာက္ပါပဲလုိ႔ေျပာနုိင္ပါတယ္။ မႀကဳိက္ၾကတာလာေတာ့ မသိပါ။ ႀကဳိက္တဲ့ ဘေလာ့မိတ္ေဆြမ်ားရွိရင္ အလြယ္တကူ လုပ္လုိ႔ရေအာင္ တင္ေပးလုိက္တာပါ။ ေအာက္မွာ Demo(နမူနာ) သြားၾကည့္ လုိ႔ရေအာင္ Link{လင့္(ခ္)} နွင့္ တကြ လုပ္နည္းနဲ႔ လုိအပ္တဲ့ Cond ေတြလည္းေပးထားပါတယ္။<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8DL8fnn4wZQC5J8IO0iybsfTI28Lt8oaad0bDVExCTNynbaJovy1u_ZfSxjz9Br7qDWuFI7fXK2jTz2rajLOMNUzFNfI23n0CnV54durwbx1VNHJ_94qCLb1IcuvO_54pXMoDGSzfdgw/s1600/EMBEDY~1.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8DL8fnn4wZQC5J8IO0iybsfTI28Lt8oaad0bDVExCTNynbaJovy1u_ZfSxjz9Br7qDWuFI7fXK2jTz2rajLOMNUzFNfI23n0CnV54durwbx1VNHJ_94qCLb1IcuvO_54pXMoDGSzfdgw/s1600/EMBEDY~1.JPG" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://mtmdemo.blogspot.com/2013/04/how-to-create-a-new-blogger.html" style="font-size: 100%;" target="_blank" title="Go Check Out The Demo Live.. "><img height="35" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq1T28UHnYJ5c-Ex3Ny43eJnOtCKu7-B5i89oMD567ndzdTkPp1fe3cKRx0wML9n1gBEjL1GQKWl3FDQaMGkarx4DR-ElThuqLOrbFtLAVoZiKijVBkhJJppCP25N1e44COnxUJle_gXw/s1600/live-demo-icon.jpg" width="180" /></a></div>
၁။<a href="http://blogger.com/" target="_blank" title="Enter Blogger">Sign In Blogger</a>
<br />
<br />
၂။ Template<br />
Cond ေပါင္းထည့္ရမွာ စိတ္မခ်ပါက <a href="http://mrthangming.blogspot.com/2012/11/how-to-backuprestore-your-blogger.html" target="_blank" title="Take a Backup/Restore of your template">Backup/Restore</a> အရင္လုပ္ေပးသင့္ပါတယ္။<br />
၃။ Edit HTMl<br />
<br />
၄။ Proceed<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxz1mFb7tWnisQzytpbnDy2NrH9Dmka3QObLAWIY1cFSrFkwfvK7cABckjTKMYaqw54Yx5Ud3I8ToQgTOU-fThL_0FBlc55JMkOYQVVDngmfJzfro5eliRa-DsNfztEDi622juCivvcYI/s1600/box.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="40" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxz1mFb7tWnisQzytpbnDy2NrH9Dmka3QObLAWIY1cFSrFkwfvK7cABckjTKMYaqw54Yx5Ud3I8ToQgTOU-fThL_0FBlc55JMkOYQVVDngmfJzfro5eliRa-DsNfztEDi622juCivvcYI/s200/box.png" width="200" /></a>၅။ ေအာက္က  Cond ေလးကုိရွာပါ။Ctrl + F ကုိတြဲနုိပ္၍ရွာပါ ၊ ရွာရလြယ္ပါတယ္။<br />
<br />
<pre class="cpp" name="code"></head>

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

//<![CDATA[

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

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

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

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

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

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

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

// config:

var oetag = 0;           // see above

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

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

function oe_loadscript(filename) {

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

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

scr.setAttribute("src",filename);

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

}

function oe_jumptohash() { // reposition to anchor

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

}

var oe_tid;

var oe_elems = {};

function oembed_callback(response) {

var resp = response;

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

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

ee = $(resp.html);

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

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

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

src = ee.attr("src");

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

ee.attr("src", src);

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

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

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

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

}

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

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

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

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

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

if(html != htmlx) {

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

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

if(oe_tid) window.clearTimeout(oe_tid);

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

}

function oembed_yt(url, width, callID) {

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

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

oe_loadscript(src);

}

$(document).ready(function() {

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

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

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

if(oelazy != 0) oelazy=1;

}

else oelazy = 0;

det.remove();

window.setTimeout(function() {

var callID=0;

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

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

if(oetag)

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

else

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

if(matches && matches.length) {

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

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

oe_elems[callID] = $(this);

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

}

});

}, 500);

});

//]]>

</script>

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

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

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

How To Add Embed YouTube Videos In Blogger Comments Box

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

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 Automatic Recent Posts Slider With jQuery To Blogger

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

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

#slide-container {

height: 260px;

position: relative;

width: 320px;

}

#slider {

height: 260px;

left: 0px;

overflow-x: hidden;

overflow-y: hidden;

position: relative;

width: 320px;

font-family: calibri;

}

.slide-desc {

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

color: #99FF33;

padding: 0px;

position: absolute;

right: 0px;

text-align: left;

top: 0;

width: 145px;

z-index: 99FF33;

}

.slide-desc h2 {

display: block;

}

.crosscol .widget-content {

position: relative;

}

#slider ul, #slider li,

#slider2 ul, #slider2 li {

margin: 0;

padding: 0;

list-style: none;

}

#slider2 {

margin-top: 1em;

}

#slider li, #slider2 li {

/* END EasySlider By Mrthangming.com */

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

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

//<![CDATA[

$(document).ready(function(){

$("#slider").easySlider({

auto: true,

continuous: true

});

//]]>

</script>

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

var numposts_gal = 15;

var numchars_gal = 150;

var random_posts = false; // random posts

</script>

</div>

</center>

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

How To Add Automatic Recent Posts Slider With jQuery To Blogger

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

How To Add YouTube Video To Blogger Post

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
အခုတင္တဲ့ ပုိ႔(စ္)ေလးကေတာ့ YouTube Videos မ်ားကုိ Blog ပုိ႔(စ္)မွာ တင္နည္း/ထည့္နည္းေလးပါ။ မိတ္ေဆြတစ္ေယာက္က Email ကနဲ႔ ေတာင္းထားလုိ႔ တခ်ဳိ႕မိတ္ေဆြေတြလုိအပ္ခဲ့ရင္ အလြယ္တကူ ထည့္လုိ႔ရေအာင္ ပုိ႔(စ္)ေလးအေနျဖင့္ ထပ္တင္းေပးလုိက္တာပါ။ Email မွာ ေတာင္းထားတဲ့ မိတ္ေဆြကုိေတာ့ သူရဲ႕ Email ထဲကုိလည္း ပုိ႔ေပးလုိက္ပါၿပီး။ ဘေလာ့ေလးကုိ စေလ့လာသူေတြအတြက္ ပဲ ဒီပုိ႔(စ္)ေလးကုိ ဖတ္လုိ႔သင့္ေတာ္ပါတယ္။ သိၿပီးသာ ဘေလာ့ မိတ္ေဆြေတြအတြက္ကေတာ့ Sorry ပါ။ မသိေသးတဲ့ မိတ္ေဆြမ်ားအတြက္ ေအာက္မွာ အဆင့္လုိက္ ပုံျဖင့္ ရွင္းျပေပးပါတယ္။<br />
<br />
1။ <a href="http://www.blogger.com/" target="_blank">Sign In Blogger</a><br />
<br />
၂။ New Post<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFmrPgD0m-yLBExGVu9vz1Rd5h-qDFB76MuBO_jq0uVFC3xfgY0WHKEEaR6CuErPJX3P0obzPmYkePmvuJQWnI1yi01r4GQVnrO_aMyaJpj2RRwvdrhMEw91z2J8GwO0i7qGXPsEfyQZc/s1600/post.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFmrPgD0m-yLBExGVu9vz1Rd5h-qDFB76MuBO_jq0uVFC3xfgY0WHKEEaR6CuErPJX3P0obzPmYkePmvuJQWnI1yi01r4GQVnrO_aMyaJpj2RRwvdrhMEw91z2J8GwO0i7qGXPsEfyQZc/s1600/post.png" /></a></div>
3။ Insert a Video<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvUk_qxpDwlxj4wnPFNcldWmTq4pi_jrt4Cm-vS_HGIBw9pqGpowL1xb1JdHhJd6m-Gqu1eVpKVO0jg5AMJcY4IMlWJR7jdmz-EqWqHzoXmcY5ynEPo0JG23v4d1iaNdXMItX2AQt3XrA/s1600/video.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvUk_qxpDwlxj4wnPFNcldWmTq4pi_jrt4Cm-vS_HGIBw9pqGpowL1xb1JdHhJd6m-Gqu1eVpKVO0jg5AMJcY4IMlWJR7jdmz-EqWqHzoXmcY5ynEPo0JG23v4d1iaNdXMItX2AQt3XrA/s1600/video.png" /></a></div>
4။ Form YouTube ကုိနုိပ္ပါ။ ေပၚလာတဲ့ Search Box ကနဲ႔ မိမိ ႀကဳိက္တဲ့ YouTube Videos မ်ားကုိရွာပါ။ ေအာက္ပုံ အတုိင္းပါ။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidbhYsdNMgw0k-xTxy6Ctr5vSmMouml2fR5R7NoJh9PtZWFHoW_LSfE7n_UhyAGiwCx2jp4WH11-5146B2C0oUd5q1wUExAwr-qMGfluyrU0kJXFuu6cvq63ojmKFvFiRck7g7dvDApfw/s1600/video1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="245" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidbhYsdNMgw0k-xTxy6Ctr5vSmMouml2fR5R7NoJh9PtZWFHoW_LSfE7n_UhyAGiwCx2jp4WH11-5146B2C0oUd5q1wUExAwr-qMGfluyrU0kJXFuu6cvq63ojmKFvFiRck7g7dvDApfw/s400/video1.png" width="600" /></a></div>
<br />
5။ Select Video<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrCTB04qvJ_G29QHF6Bl3p37WRR3Jvqb7lmYxYY-BzzYnyyY071s6eCZjngm3NhWl0dP-KsaSbtJ4ed_5d38dD9MGWJDzyQDGyDkGYZb-klwkXfVWcwMtN7Dv8Q6I9bYulQwur4vC5KU8/s1600/save.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrCTB04qvJ_G29QHF6Bl3p37WRR3Jvqb7lmYxYY-BzzYnyyY071s6eCZjngm3NhWl0dP-KsaSbtJ4ed_5d38dD9MGWJDzyQDGyDkGYZb-klwkXfVWcwMtN7Dv8Q6I9bYulQwur4vC5KU8/s1600/save.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="color: #f3f3f3; font-size: large;"><b style="background-color: orange;">Publish</b></span> ကုိနုိပ္ေပးလုိက္ပါ။ ၿပီးပါၿပီး။ ေနာက္တစ္နည္း YouTube Videos မ်ားက Embed Cond ကုိ Copy / Paste နွင့္ Post မွာ တင္နည္း/ထည့္နည္းကုိ ေအာက္မွာ ဆင္ရွင္းျပေပးပါမယ္။</div>
<br />
၁။ Youtube Videos ကုိဖြင့္ပါ။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuGw2HHUBql2IvHVib7fx2s6dQFojFJZo6rTmRcoW4fuo-FRIhpqhqZc-SbFuLoEljA6kgmfv6FBaayK8sRHGC7JqG52gL0uF31Vs4LxLJHAK2PqDN0CqgilyHV_qF-UzziBaPfpXsW6g/s1600/copy.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuGw2HHUBql2IvHVib7fx2s6dQFojFJZo6rTmRcoW4fuo-FRIhpqhqZc-SbFuLoEljA6kgmfv6FBaayK8sRHGC7JqG52gL0uF31Vs4LxLJHAK2PqDN0CqgilyHV_qF-UzziBaPfpXsW6g/s1600/copy.png" /></a></div>
<br />
ပုံကုိၾကည့္ၿပီးလုပ္ေဆာင္ၾကည့္ပါ။
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYgAF4cfTRuRUlo6JnZ6YCPEOHqfueeWqJkiIBNVhEZXClCJXXN8NyrZAtQyRJ6U2hWQaYWWBWU_k28sSjvBM6BL1GoldLjCSYYtNvf_OFDqyORTYcUi1gMXthKsAb7d1ZOHwSLQ0oVdA/s1600/html.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYgAF4cfTRuRUlo6JnZ6YCPEOHqfueeWqJkiIBNVhEZXClCJXXN8NyrZAtQyRJ6U2hWQaYWWBWU_k28sSjvBM6BL1GoldLjCSYYtNvf_OFDqyORTYcUi1gMXthKsAb7d1ZOHwSLQ0oVdA/s1600/html.png" /></a></div>
<br />
ႊႊ<span style="color: #0b5394; font-size: x-large;">Tutorial Video</span></div>
<iframe allowfullscreen="" frameborder="0" height="500" src="http://www.youtube.com/embed/27jE2u6bTAM?autoplay=1" width="610"></iframe></div>

How To Add YouTube Video To Blogger Post

အခုတင္တဲ့ ပုိ႔(စ္)ေလးကေတာ့ YouTube Videos မ်ားကုိ Blog ပုိ႔(စ္)မွာ တင္နည္း/ထည့္နည္းေလးပါ။ မိတ္ေဆြတစ္ေယာက္က Email ကနဲ႔ ေတာင္းထားလုိ႔ တခ်ဳိ႕...

How To Add jQuery Popular Posts Slideshow Widget to Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
အခုတင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့မွာ Popular Posts ေတြကုိ Slideshow ျဖင့္ ထည့္နည္း/လုပ္နည္းေလးပါ။ တခ်ဳိ႕ဘေလာ့ေတာေတာမ်ားမ်ားမွာ ဒီလုိ Posts Slideshow ေတြကုိ သိပ္အသုံးမျပဳၾကပါဘူးလုိ႔ ေျပာရင္မွားမယ္မထင္ပါဘူး။ မႀကဳိက္ၾကတာလာလုိ႔ေတာ့ မသိပါ။ ကဲကြာ ႀကဳိက္တဲ့ ဘေလာ့မိတ္ေဆြမ်ားရွိရင္ အသုံးျပဳနုိင္ေအာင္ ေအာက္မွာ Demo သြားၾကည့္လုိ႔ရေအာင္ Link နွင့္တကြ ထည့္နည္း/လုပ္နည္း နွင့္ လုိအပ္တဲ့ Cond ေတြကုိ လည္း ေပးထားပါတယ္။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3D2ol2Xasw82zyCAiYFU_5FL04jc2rYBIiIEdk2TXWKvauYcPSEBMLP-rgGi4A4E2aVfLx63iCWg0PXagIBit-3bl5ipuXwHKVUm0OZpKVFjNxRyx85E9L4NI8cGl4KA0nNljeNcO9Is/s1600/recent.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3D2ol2Xasw82zyCAiYFU_5FL04jc2rYBIiIEdk2TXWKvauYcPSEBMLP-rgGi4A4E2aVfLx63iCWg0PXagIBit-3bl5ipuXwHKVUm0OZpKVFjNxRyx85E9L4NI8cGl4KA0nNljeNcO9Is/s1600/recent.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>
၁။<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'>

#gallery{position:relative;margin:0 35px 20px;width:500px;height:126px;background:#ffffff}

#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}

#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6OZdnzNQqsFN8ND_2MaTg1Qv1DCQ9nvTGfYXXBOml9y6a8OI5Vz_mvFUGiz7AHMFVeELNO1to6k6NU331B5bIwOm-AbNcu4hpr9GWwyg-Cuj-7cfA_5SvVB7JZJLLhuk48g0x9bgYPxc/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden}

#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}

#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}

</style>

//<![CDATA[

stepcarousel.setup({

galleryid: "gallery",

beltclass: "belt",

panelclass: "panel",

autostep: {enable:true, moveby:1, pause:3000},

panelbehavior: {speed:500, wraparound:true, persist:true},

defaultbuttons: {enable: true, moveby: 12, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVRON2pB_aFbu5sZIJc6nsSj5RMg8QhH249X9DN-QSH5WSe8n_m7hrbmMolno7M-XoMRnNWwcvfbFTt_cj13OBqTsryfsvIwC7uynAPidGShTWLsD3pITzCJBlfilI3S9eCDwqewVgLzSz/s1600/back.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP4ZSgrh1d1UPPRUgyA-_-1hEJYQDZoxqXI0kSbr97uk92EcQqOe8gb09uTf5CqVuqMguj-ADeu4icq6K8ze5zdhBt9nljFIEeOB8E6DuqmdKpulUPAvy0mU8i1fiU0vswRd1iO8wiuyto/s1600/MRTHAN~1.PNG", 2, 36]},

contenttype: ["external"]

})

//]]>

</script>

<div>
</div>
</pre>
<br />
၇။ ေအာက္က Cond ကုိ ထပ္ရွာပါ။<br />
<br />
<pre class="cpp" name="code"><b:section class='main' id='main' showaddelement='no'>

</pre>
<br />
၈။ ေတြ႕ၿပီးဆုိရင္ <b:section class='main' id='main' showaddelement='no'>  ရဲ႕ ေအာက္မွာ ေအာက္က Cond ကုိ ထပ္ထည့္ေပးလုိက္ပါ။<br />
<br />
<pre class="cpp" name="code"><b:widget id='PopularPosts7' locked='false' title='Popular Posts' type='PopularPosts'>

<b:includable id='main'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:loop values='data:posts' var='post'>

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

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

<b:else/>

</div>

<data:post.snippet/>

</div>

</b:if>

<b:else/>

<b:if cond='data:post.thumbnail'>

<b:else/>

</b:if>

</a>

</b:if>

</li>

</b:loop>

</ul>

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

</b:includable>

</b:widget>

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

</div>

How To Add jQuery Popular Posts Slideshow Widget to Blogger

အခုတင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့မွာ Popular Posts ေတြကုိ Slideshow ျဖင့္ ထည့္နည္း/လုပ္နည္းေလးပါ။ တခ်ဳိ႕ဘေလာ့ေတာေတာမ်ားမ်ားမွာ ဒီလုိ Post...

Add Facebook Style DropDown Menu Bar To Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
ဒီေန႔တင္ေပးလုိက္တဲ့ ပုိ႔(စ္)ေလးကေတာ့ Blog မွာ Facebook Style DropDown Menu Bar ေလးထည့္နည္း/သုံးနည္းေလးပါ။ ဒီ Cond ေလးကုိေတာ့ က်ေနာ္ေလ့လာၿပီး ေရးၾကည့္တဲ့ Cond ေလးပါ။ HTMl Cond နဲ႔ CSS Cond ကုိေပါင္းစပ္ၿပီး ေရးလုိက္တာပါ။ CSS Cond ကုိ သီသန္႔ထည့္ေပးစရာမလုိေတာ့ပါ။ ေအာက္မွာ နမူနာ(Demo) သြားၾကည့္လုိ႔ရေအာင္ Link နဲ႔ တကြ Cond လည္းေပးထားပါတယ္။ Cond အဆင္မေျပတာေတြရွိခဲ့လွ်င္္ Comment ျဖင့္ ေမးနုိင္ပါတယ္။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZujg_jIMSBZfs-31pcdfo3OlFJgzP58F_x-f_gGob5OaRPkyZ5YxvSt2L5VyuJnVYHQBamotEm2rDz3ObFfckERRVkLLX5tqiC8TG20ulHAylQu1xnN-_h6QT_GYbasnLe5-HM2NG93Q/s1600/FACEBO~1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="174" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZujg_jIMSBZfs-31pcdfo3OlFJgzP58F_x-f_gGob5OaRPkyZ5YxvSt2L5VyuJnVYHQBamotEm2rDz3ObFfckERRVkLLX5tqiC8TG20ulHAylQu1xnN-_h6QT_GYbasnLe5-HM2NG93Q/s400/FACEBO~1.PNG" width="400" /></a></div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://demo-mrthangming.blogspot.com/2013/01/Facebook-Style-DropDown-Menu.html" style="font-size: 100%;" target="_blank" title="Go Check Out The Demo Live.. "><img height="35" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq1T28UHnYJ5c-Ex3Ny43eJnOtCKu7-B5i89oMD567ndzdTkPp1fe3cKRx0wML9n1gBEjL1GQKWl3FDQaMGkarx4DR-ElThuqLOrbFtLAVoZiKijVBkhJJppCP25N1e44COnxUJle_gXw/s1600/live-demo-icon.jpg" width="180" /></a></div>
၁။<a href="http://blogger.com/" target="_blank" title="Enter Blogger">Sign In Blogger</a><br />
<br />
၂။ Layout<br />
<br />
၃။ Add a Gadget<br />
<br />
၄။ HTML/JavaScript<br />
<br />
၅။ ေအာက္က ေပးထာတဲ့ Cond ေလးကုိထည့္ေပးလုိက္ပါ။<br />
<br />
<pre class="cpp" name="code"><style>

#thangmingnavbar {

background: #3B5998;

width: 100%;

color: #FFF;

margin: 10px 0;

padding: 0;

position: relative;

border-top:0px solid #960100;

height:35px;

}

#thangmingnav {

margin: 0;

padding: 0;

}

#thangming ul {

float: left;

list-style: none;

margin: 0;

padding: 0;

}

#thangmingnav li {

list-style: none;

margin: 0;

padding: 0;

}

#thangmingnav li a, #thangmingnav li a:link, #thangmingnav li a:visited {

color: #FFF;

display: block;

font:bold 12px Helvetica, sans-serif;

margin: 0;

padding: 9px 12px 11px 12px;

text-decoration: none;

border-right:0px solid #627AAD;

}

#thangmingnav li a:hover, #thangmingnav li a:active {

background: #627AAD;

color: #FFF;

display: block;

text-decoration: none;

margin: 0;

padding: 9px 12px 11px 12px;

}

#thangmingnav li {

float: left;

padding: 0;

}

#thangmingnav li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 160px;

margin: 0;

padding: 0;

}

#thangmingnav li ul a {

width: 140px;

}

#thangmingnav li ul ul {

margin: -25px 0 0 161px;

}

#thangmingnav li:hover ul ul, #thangmingnav li:hover ul ul ul, #thangmingnav li.sfhover ul ul, #thangmingnav li.sfhover ul ul ul {

left: -999em;

}

#thangmingnav li:hover ul, #thangmingnav li li:hover ul, #thangmingnav li li li:hover ul, #thangmingnav li.sfhover ul, #thangmingnav li li.sfhover ul, #thangmingnav li li li.sfhover ul {

left: auto;

}

#thangmingnav li:hover, #thangmingnav li.sfhover {

position: static;

}

#thangmingnav li li a, #thangmingnav li li a:link, #thangmingnav li li a:visited {

background: #EDEFF4;

width: 120px;

color: #3B5998;

display: block;

font:normal 12px Helvetica, sans-serif;

margin: 1px 0 0 0;

padding: 9px 12px 10px 12px;

text-decoration: none;

z-index:9999;

border:1px solid #ddd;

-moz-border-radius:4px;

-webkit-border-radius:4px;

}

#thangmingnav li li a:hover, #thangmingnav li li a:active {

background: #627AAD;

color: #FFF;

display: block;

}

#thangmingnav li li li a, #thangmingnav li li li a:link, #thangmingnav li li li a:visited {

background: #EDEFF4;

width: 120px;

color: #3B5998;

display: block;

font:normal 12px Helvetica, sans-serif;

padding: 9px 12px 10px 12px;

text-decoration: none;

z-index:9999;

border:1px solid #ddd;

margin: 1px 0 0  -14px;

}

#thangmingnav li li li a:hover, #thangmingnav li li li a:active {

background: #627AAD;

color: #FFF;

display: block;

}

</style>

<br />

<li>

</li>

<li>

<a href="ဤေနရာမွာ လင့္(ခ္)ထည့္္ပါ">About &amp; Contact</a>

</li>

<li>

<a href="ဤေနရာမွာ လင့္(ခ္)ထည့္္ပါ">Windown </a>

</li>

<li>

<a href="ဤေနရာမွာ လင့္(ခ္)ထည့္္ပါ">Myanmar Font</a>

</li>

<li>

<a href="ဤေနရာမွာ လင့္(ခ္)ထည့္္ပါ">Free Download</a>

<ul>

<li><a href="ဤေနရာမွာ လင့္(ခ္)ထည့္္ပါ">Template</a></li>

<li><a href="ဤေနရာမွာ လင့္(ခ္)ထည့္္ပါ">Blogger Technology»</a>

<ul>

<li><a href="ဤေနရာမွာ လင့္(ခ္)ထည့္္ပါ">Blogger Tutorial</a></li>

</ul>

</li>

</ul>

</li>

<li>

<a href="ဤေနရာမွာ လင့္(ခ္)ထည့္္ပါ">Android Technology</a>

</li>

<li>

</li>

</ul>

</div>

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

Add Facebook Style DropDown Menu Bar To Blogger

ဒီေန႔တင္ေပးလုိက္တဲ့ ပုိ႔(စ္)ေလးကေတာ့ Blog မွာ Facebook Style DropDown Menu Bar ေလးထည့္နည္း/သုံးနည္းေလးပါ။ ဒီ Cond ေလးကုိေတာ့ က်ေနာ္ေလ့လာၿပ...

How To Add Page Peel/Flip Effect Using JQuery To Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
ဒီေန႔တင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့ညာဘက္ေဒါင့္မွာ(Page Peel/Flip Effect Using JQuery) ႀကဳိက္တဲ့ Social Widget ေလးေတြထည့္နည္း/ထားနည္းေလးပါ။ ဘေလာ့ ကုိ လွလွပပ ထားခ်င္သူေတြအတြက္ အသုံး၀င္တဲ့ Cond ေလးပါ။ ႀကဳိက္ၾကမယ္ လုိ႔လည္းေမွ်ာ္လင့္ ထားပါတယ္။ ေအာက္မွာ Demo သြားၾကည့္လုိ႔ရေအာင္ Link နဲ႔ တကြ လုိအပ္တဲ့ Cond ေတြလည္း ေပးထားပါတယ္။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQWVShQ5tmrdLRom4MXmnJOruH28QUDeqUchZx_vd_FB66u_Ca5pqfOBYfPoiMtQKR0zvZdegJCxoT_HAebQ2a3-SzDuRo0ofTidXntEnN17WVK_u1wbVBQvBvYWV0J54e3TSoFnvCbNU/s1600/feel.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQWVShQ5tmrdLRom4MXmnJOruH28QUDeqUchZx_vd_FB66u_Ca5pqfOBYfPoiMtQKR0zvZdegJCxoT_HAebQ2a3-SzDuRo0ofTidXntEnN17WVK_u1wbVBQvBvYWV0J54e3TSoFnvCbNU/s1600/feel.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://wilddemo.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 />
၂။ 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"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
</pre>
<br />
<br />
၇။ ေအာက္က Cond ကုိ ထပ္ရွာပါ။<br />
<br />
<pre class="cpp" name="code"></head>
</pre>
<br />
<br />
၈။ ေတြ႔ၿပီးဆုိရင္ </head> ရဲ႕ အေပၚမွာ ေအာက္က Cond ထပ္ထည့္ေပးလုိက္ပါ။<br />
<br />
<pre class="cpp" name="code"><style type='text/css'>

img { behavior: url(iepngfix.htc) }

#pageflip {

position: absolute;

right: 0; top: 0;

float: right;

}

#pageflip img {

width: 50px; height: 52px;

z-index: 99;

position: absolute;

right: 0; top: 0;

-ms-interpolation-mode: bicubic;

}

#pageflip .back-img {

width: 50px; height: 50px;

overflow: hidden;

position: absolute;

right: 0; top: 0;z-index:98;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu4MmneKASVjMuG_YXiV_0GQlqBouvdG7OFSJpuipd9FopQuXfjdDq7nVxYwpd-XAPEFrd58SorqC11wHeDL5HcVZ9uXiRdjQMHbOPX9r5-dZgm1AsFWvHP4XZFVBSUx10JFDgglz8WkeB/s400/MBT-RSS-FEED.gif) no-repeat right top #fff;

}

</style><a href='http://mrthangming.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifksGxs1vW-StQbKkHNedu6RsWoEAHiHTmCnPeGAgBCuWUw76NtOlLaqgprKclm8IUuNP_3fOY42oiOSaBhhhUutcle_lM0yRhG4lOPg7idtHferqSe460VbwB-BtstdEL9tJv61bmhec/s1600/1x1juice.png'/></a><script type='text/javascript'>

$(document).ready(function(){

//Page Flip on hover

$(&quot;#pageflip&quot;).hover(function() {

$(&quot;#pageflip img , .back-img&quot;).stop()

.animate({

width: &#39;307px&#39;,

height: &#39;319px&#39;

}, 500);

} , function() {

$(&quot;#pageflip img&quot;).stop()

.animate({

width: &#39;50px&#39;,

height: &#39;52px&#39;

}, 220);

$(&quot;.back-img&quot;).stop()

.animate({

width: &#39;50px&#39;,

height: &#39;50px&#39;

}, 200);

});

</script>
</pre>
<br />
<br />
၉။ ေအာက္က Cond ကုိ ထပ္ရွာပါ။<br />
<br />
<pre class="cpp" name="code"><body>
</pre>
<br />
<br />
၁၀။ ေတြ႕ၿပီးဆုိရင္ <body> ရဲ႕ အေပၚမွာ ေအာက္က Cond ကုိ ထပ္ထည္းေပးလုိက္ပါ။<br />
<br />
<b><span style="font-size: large;">မွတ္ခ်က္။   ။</span></b> blogger template ကုိ Originals(မူရင္း) အတုိင္းအသုံးျပဳသူေတြကေတာ့ <body  ဆုိၿပီးသာရွိပါတယ္။ <body ဆုိၿပီရွာပါ။ <body Cond နွင့္ဆက္တဲ့ Cond တစ္စု ရဲ႕အေပၚမွာ ထည့္ေပးရပါမယ္။<br />
<br />
<pre class="cpp" name="code"><div id='pageflip'>

</div>
</pre>
<br />
<br />
၁၁။ ထည့္ၿပီးရင္ Save Template ကုိ နုိပ္ေပးလုိက္ပါ။<br />
<br />
မွတ္ခ်က္။   ။ http://feeds.feedburner.com/<a href="http://feeds.feedburner.com/Mrthangming" target="_blank">Mrthangming</a> ေနရာမွာ မိမိ၏ အမည္ေျပာင္းဖုိ႔ မေမ့ၾကပါနဲ႔။<br />
<br /></div>

How To Add Page Peel/Flip Effect Using JQuery To Blogger

ဒီေန႔တင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့ညာဘက္ေဒါင့္မွာ(Page Peel/Flip Effect Using JQuery) ႀကဳိက္တဲ့ Social Widget ေလးေတြထည့္နည္း/ထားနည္းေလးပါ...

How To Add Customize Blogger Official Popular Posts Widget With CSS

<div dir="ltr" style="text-align: left;" trbidi="on">
အခုတင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ Blog Official Popular Posts Widget ေလးကုိ CSS Cond ေပါင္းထည့္ၿပီး Design လွလွေလးျဖင့္ေအာင္ လုပ္နည္း/ထည့္နည္းေလးပါ။ သိၿပီးၾကေသာ ဘေလာ့မိတ္ေဆြေတြလည္းမ်ားေတာ့မွာပါ။ မသိေသးတဲ့ ဘေလာ့မိတ္ေဆြေတြ/သုံးခ်င္းတဲ့ သူေတြအတြက္ အဆင္ေျပနုိင္ေအာင္ ပုိ႔(စ္)ေလးတစ္ခုအေနျဖင့္ ထပ္မွ်ေ၀ေပးလုိက္တာပါ။ ေအာက္မွာ Demo သြားၾကည့္လုိ႔ရေအာင္ link နဲ႔တကြ လုပ္နည္းနွင့္ လုိအပ္တဲ့ Cond ေတြကုိလည္း ထားေပးပါတယ္။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYtP740jwSLc2LxZlBd8Vr_dtmtj5faxnUgbobwsE__Yv9tzZzDTsQrlOcfDBeBa1TP0eqp__cG9f8SpPvCpmEf41shyphenhyphen8Qtz2Ca6O6eVGMh2DbtJeLDBj9U5LXMzs-B9Yc5IMFXben_EU/s1600/posts.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYtP740jwSLc2LxZlBd8Vr_dtmtj5faxnUgbobwsE__Yv9tzZzDTsQrlOcfDBeBa1TP0eqp__cG9f8SpPvCpmEf41shyphenhyphen8Qtz2Ca6O6eVGMh2DbtJeLDBj9U5LXMzs-B9Yc5IMFXben_EU/s1600/posts.png" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://simpledemo.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>
<span style="color: orange; font-size: x-large;"><b>အဆင့္ ၁။</b></span><br />
၁။ <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/AVvXsEgxTmD3oW27JxJRk2F4-Ig2dCGUQgh_I6djI47yFmPgkbsRVaQvi2JWpoxyx2HfxqzLsxr_GLKsrawLf4kV8KNLpwdqLg46eCntrRapJnmgv3af419oM8rz7qdMASbb2eDO7bmC9NGmzs0/s1600/save.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxTmD3oW27JxJRk2F4-Ig2dCGUQgh_I6djI47yFmPgkbsRVaQvi2JWpoxyx2HfxqzLsxr_GLKsrawLf4kV8KNLpwdqLg46eCntrRapJnmgv3af419oM8rz7qdMASbb2eDO7bmC9NGmzs0/s1600/save.png" /></a></div>
<b style="color: orange; font-size: xx-large;">အဆင့္ ၂။</b>
၁။ 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">/*--- Customize Popular Posts Widget Design By www.mrthangming.blogspot.com --- */

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

.popular-posts ul li {background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFgJfAJdBU8hF7tderXcHZ65XYgNBMNG06pejDnX-d7LwfLuu3y0fE-ATRZ_TeGZ6bM-t64bprEcCNCfl14NPEbmqTbMH4EL9yzHyB8A1X_2LBu3PDKCwexSSzNnPEdN7SLSv7EWvSsZk/s1600/rb+cancel+icon...jpg) no-repeat scroll 5px 10px;

list-style-type: none;

margin: 0 0 5px 0px;

padding: 5px 5px 5px 33px !important;

border: 1px dashed #dddddd;

border-radius: 10px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

}

.popular-posts ul li:hover {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_UFNlcvwJR9bSD9KijttkOhBaWzJWjofrRrlHvFKoM67hTqh5nk75Pt3WlS_gsWcB8f2Vby4-F4y1MrlNtsSGYsMUfPXfpv32nnZUOGHRQ8ATCqUa9ykLI9rBvvMmvW57sGQ7PiFYR7o/s1600/rb+mark+icon...jpg) no-repeat 2px;

border: 2px solid #b60000;

-moz-border-radius: 8px;

-webkit-border-radius: 8px;

}

.popular-posts ul li a:hover {

text-decoration:none;

}

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

How To Add Customize Blogger Official Popular Posts Widget With CSS

အခုတင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ Blog Official Popular Posts Widget ေလးကုိ CSS Cond ေပါင္းထည့္ၿပီး Design လွလွေလးျဖင့္ေအာင္ လုပ္နည္း/ထည့္နည္းေ...

How Add Image Instead Of Read More Link In Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
ဒီေန႔တင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့မွာ Read More(ဆက္ဖတ္ရန္) ဆုိတဲ့ စာသားေလးကုိ Image Button(ပုံ ခလုဒ္ျဖင့္) ေျပာင္းထည့္နည္းေလးပါ။ သိၿပီးၾကေသာ မိတ္ေဆြေတြလည္း မ်ားလွပါၿပီး။ ဒါေပမယ့္ မသိေသးတဲ့ မိတ္ေဆြေတြ အတြက္အခက္အခဲ ျဖစ္ေနရင္ ေျဖရွင္လုိ႔ရေအာင္ ေ၀မွ်ေပးလုိက္တာပါ။ ေအာက္မွာ Demo သြားၾကည့္ လုိ႔ရေအာင္ Link နွင့္ တကြ လုပ္နည္းနဲ႔ လုိအပ္တဲ့ Cond ေတြလည္းထားေပးပါတယ္။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCWGtYOi8MXAQ8lOTRwCHdNyXUXkG4RavcjFNq8bhdQ8QhT86Rbpo4lGqXeJIiMbm-qmbFUV_UQO7uGSQEJiQl-N23L6mR4KrZHUG8pQjJVoiE9SUOCTXPlcxYrKSiWt1nP-mxNM15uAk/s1600/read+more.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCWGtYOi8MXAQ8lOTRwCHdNyXUXkG4RavcjFNq8bhdQ8QhT86Rbpo4lGqXeJIiMbm-qmbFUV_UQO7uGSQEJiQl-N23L6mR4KrZHUG8pQjJVoiE9SUOCTXPlcxYrKSiWt1nP-mxNM15uAk/s1600/read+more.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>
၁။<a href="http://blogger.com/" target="_blank" title="Enter Blogger">Sign In Blogger</a><br />
<br />
၂။ Template<br />
<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 />
<br />
Expand Widget Templates ကုိအမွန္ျခစ္ေပးလုိက္ပါ<br />
<br />
၅။ ေအာက္က  Cond ေလးကုိရွာပါ။Ctrl + F ကုိတြဲနုိပ္၍ရွာပါ ၊ ရွာရလြယ္ပါတယ္။<br />
<pre class="cpp" name="code">Read More
</pre>
</div>
မေတြ႕ရင္ ေအာက္က Cond ကုိ ထပ္ရွာပါ။  <br />
<pre class="cpp" name="code">data:post .jumptext
</pre>
၆။ေတြ႕ၿပီးဆုိရင္ ထုိေနရာမွာ ေအာက္က Cond ကုိထည့္ေပးပါ။(အစားထုိးေပးလုိက္ပါ) <br />
<pre class="cpp" name="code"><img src="http://your-image-URL/သင့္ႀကဳိက္တဲ့ပုံရဲ႕ လင့္(ခ္)ထည့္ပါ.gif" />
</pre>
၇။ထည့္ၿပီးရင္ Save Template ကုိနုိပ္လုိက္ပါ။  လုံး၀မသိသူေတြအတြက္ နမူနာ_ေအာက္မွ Cond အတုိင္ထည့္ရပါမယ္။ <br />
<pre class="cpp" name="code"><b:if cond="data:post.hasJumpLink">
<div class="jump-link">
<a expr:href="data:post.url" expr:title="data:post.title" href="http://www.blogger.com/blogger.g?blogID=7388332448929021318"><img src="http://your-image-URL/သင့္ႀကဳိက္တဲ့ပုံရဲ႕ လင့္(ခ္)ထည့္ပါ.gif" /></a>
</div>
</b:if>
</pre>
ေအာက္မွာ ပုံေတြကုိ က်ေနာ္ရနုိင္သေလာက္ စုစည္းေပးထားပါတယ္။ ပုံေပၚကုိ Mouse Pointer တင္ၿပီး Right ခ်လုိက္ပါ၊ ေပၚလာတဲ့ Message Box ထဲက Copy Image URL ကုိ ေရြးခ်ယ္ေပးလုိက္ပါ။<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheYGpKHC0jyxzCdrgcgOpc1X5jWTZkum6DZTYeWykhUAF_sggOaF2vCbtemyqhpBagyrRsnV4RrMHnuSfEa18uHZ-ZZDQlVl8PkicxDevTm_IdOqRviU0uSm7vaImNRONEv-7m1FTxrIk/s1600/Read%252BMore-6.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="43" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheYGpKHC0jyxzCdrgcgOpc1X5jWTZkum6DZTYeWykhUAF_sggOaF2vCbtemyqhpBagyrRsnV4RrMHnuSfEa18uHZ-ZZDQlVl8PkicxDevTm_IdOqRviU0uSm7vaImNRONEv-7m1FTxrIk/s320/Read%252BMore-6.gif" width="149" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTZUvStcSUfoE4cg-dwZPQSHF_1BH2ir1OCVxWpEFoWLsDFiLXplmnoJkDhlDu92fECIlYlXK4jwrwr4odCAjchgO9PeCJ9woGk0sw0p-SclKdnr2nHxWxRO5SlXEAbOfjjU-LhyphenhyphengykMc/s1600/readmore.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTZUvStcSUfoE4cg-dwZPQSHF_1BH2ir1OCVxWpEFoWLsDFiLXplmnoJkDhlDu92fECIlYlXK4jwrwr4odCAjchgO9PeCJ9woGk0sw0p-SclKdnr2nHxWxRO5SlXEAbOfjjU-LhyphenhyphengykMc/s1600/readmore.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1aNKtBb7A4-N5HGouRqOGf0VTma4w56hclbQOPS9rqKXVmQCEP0Hm6TZUj63KKso6IPXCxbCjpmDmymvvZnvo66hsqrNDAYSZ7fVaATYkBlOIEUKfL3UorjAZW_MyHsK0_PJIT2vNuzA/s1600/read.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1aNKtBb7A4-N5HGouRqOGf0VTma4w56hclbQOPS9rqKXVmQCEP0Hm6TZUj63KKso6IPXCxbCjpmDmymvvZnvo66hsqrNDAYSZ7fVaATYkBlOIEUKfL3UorjAZW_MyHsK0_PJIT2vNuzA/s1600/read.gif" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVZJ1a6Rjn7BVoB1n929MQ_0Y9YYLU5IKbOp9wn-83bpBTRxWByAZOGgPFuweLqfTdCBNhgcrbJjNep5z1KbfAGd9HCXBdwvIHyrBoDB71QfUbLenr9Bchvn3o1WnjPxg2aOpT2aHVnzY/s1600/RenderedImage.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVZJ1a6Rjn7BVoB1n929MQ_0Y9YYLU5IKbOp9wn-83bpBTRxWByAZOGgPFuweLqfTdCBNhgcrbJjNep5z1KbfAGd9HCXBdwvIHyrBoDB71QfUbLenr9Bchvn3o1WnjPxg2aOpT2aHVnzY/s1600/RenderedImage.png" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge7Va76x2ZzcCfLDyo3aLUIu77rXF2Bu25eqq9sXrYmgRGgLmuq3PE172nY4VmC1gKsL5RVyeizNttE8EagUmqXYT9qrWXuxgZikWzCSwAopwcIsBhSijNsil8mRrPcnSQV8HUwPzixOE/s1600/Moving-picture-right-pointing-finger-gif-animation.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge7Va76x2ZzcCfLDyo3aLUIu77rXF2Bu25eqq9sXrYmgRGgLmuq3PE172nY4VmC1gKsL5RVyeizNttE8EagUmqXYT9qrWXuxgZikWzCSwAopwcIsBhSijNsil8mRrPcnSQV8HUwPzixOE/s1600/Moving-picture-right-pointing-finger-gif-animation.gif" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy-MlHiYFgsIGhTy_PfHn61UHzm8bgY8qajUjSi45TLzTNW-tdZmCoHdEkO3Kr9fUAZL784N-ydWzIG8sVW-Oa2W_BxyVyMkp13mBfEBKq05pVcZoQb44Om0RC1QQmpn5sIONKAZfp8kA/s1600/cooltext666275999.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy-MlHiYFgsIGhTy_PfHn61UHzm8bgY8qajUjSi45TLzTNW-tdZmCoHdEkO3Kr9fUAZL784N-ydWzIG8sVW-Oa2W_BxyVyMkp13mBfEBKq05pVcZoQb44Om0RC1QQmpn5sIONKAZfp8kA/s1600/cooltext666275999.gif" /></a></div>
</div>

How Add Image Instead Of Read More Link In Blogger

ဒီေန႔တင္ေပးတဲ့ ပုိ႔(စ္)ေလးကေတာ့ ဘေလာ့မွာ Read More(ဆက္ဖတ္ရန္) ဆုိတဲ့ စာသားေလးကုိ Image Button(ပုံ ခလုဒ္ျဖင့္) ေျပာင္းထည့္နည္းေလးပါ။ သိၿပီး...

Mr ThangMing

How To Add Go To Top/Bottom Buttons Using JQuery In Blogger

Arrow Keyboard Navigation For Blogger

ဘေလာ့မွာ Blogger နွင့္ Google+ Comments Box ၂ခုစလုံး တြဲသုံးလုိ႔ရေအာင္ ထည့္နည္း

ဘေလာ့မွာ Google+ Comments ထည့္သြင္းအသုံးျပဳနည္း

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

Google Feedburner Account တည္ေဆာက္နည္း/ဖန္တီးနည္း

How To Add Embed YouTube Videos In Blogger Comments Box

How To Add Content Spoiler With Simple Animation To Blogger

How To Add Automatic Recent Posts Slider With jQuery To Blogger

How To Add YouTube Video To Blogger Post

How To Add jQuery Popular Posts Slideshow Widget to Blogger

Add Facebook Style DropDown Menu Bar To Blogger

How To Add Page Peel/Flip Effect Using JQuery To Blogger

How To Add Customize Blogger Official Popular Posts Widget With CSS

How Add Image Instead Of Read More Link In Blogger

Activity Find

Labels

Archives