post tittle ေရွ႕မွာ ပံုေလးထည့္ခ်င္ရင္

1.  blogger မွာ log in ျပီးရင္  Design >> Edit HTML သြားပါ။

2. "Expand Widget Templates"  ေရွ႕က box ေလးမွာ အမွန္ျခစ္ေလးေပးလိုက္ပါ။

3.  ေအာက္မွာ ေပးထားတဲ့ ကုဒ္ေတြကိုရွာပါ။ Templates တစ္ခုနဲ႔ တစ္ခုေတာ့ ကြဲျပားမွဳရွိႏိုင္ပါသည္

<a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>

4. အနီေရာင္ ကုဒ္ႏွင့္ အျပာေရာင္ကုဒ္ ၾကားမွာ ေအာက္မွာေပးထားတဲ့ ကုဒ္ေလးကိုထည့္ေပးလိုက္ပါ
 <a expr:href='data:post.url'><data:post.title/></a>

<img src="ပံုရဲ႕ URL- link ထည့္ရန္" style="border-width: 0px;" />
ဥပမာ ဒီလိုေလး ျဖစ္သြားပါ လိမ္မယ္
<a expr:href='data:post.url'> <img src="ပံုရဲ႕ URL- link ထည့္ရန္" style="border-width: 0px;" /><data:post.title/></a> 
5. template ကို save လို႔ ရပါျပီ။လုပ္ေဆာင္ခ်က္ျပီးစီး ပါျပီ။ အဆင္ေျပၾကပါေစ။

မိမိ blog မွာ post တင္ရင္ လွလွေလးျဖစ္ေအာင္

မိမိ ဘေလာ့မွာ ကိုေရးထာတဲ့(post တင္တဲ့)စာေတြကို သိသိသာသာ သတိထားမိေစရန္ ဒီလိုေလးေရခ်င္ရင္ေတာ့ ေအာက္မွာေဖာ္ျပထားတဲ့ အတိုင္း လုပ္ၾကည့္ပါ အားလံုးကိုေလးစားလွ်က္ ေမာင္ေအးလြင္ ၁. အရင္ဆံုး blogger မွာ sign in ၀င္လို္က္ပါ.
2.  Design ကိုသြားပါ။ edit HTML ေရွ႕က box ေလးမွာ အမွန္ျခစ္ေလးေပးလိုက္ပါ။
3. ဒီကုဒ္ေလးကို ရွာပါ....  ]]></b:skin>
4.ေအာက္မွာ ေပးထားတဲ့ ဒီဇိုင္း (၇)ခုထဲက မိမိႏွစ္သက္ရာကို ဒီကုဒ္ အေပၚကထည့္ပါ ]]></b:skin>

5.မွတ္ခ်က္။   ။ မိမိ post တင္တဲ႔ အခ်ိန္မွာ မိမိ ေဖာ္ျပလို ေအာက္မွာျပထားတဲ့ အတိုင္းေတာ့ ေရးရပါမယ္

< textarea>
ဒီေနရာေလးမွာ မိမိေဖာ္ျပလို႔တဲ့ စာကိုေရးပါ
</textarea>

6. Save  template ကို Save လို႔ရပါျပီ။ ျပီးပါျပီ.။ အဆင္ေျပပါေစ။

မိမိ ၾကိဳက္ႏွစ္ရာကို ေရြးပါ

textarea {background: #000; font: 13px Verdana, sans-serif; color: #fff; border: 2px inset #ccc; line-height: 1.5em; padding: 0 7px; -moz-border-radius: 5px;}

textarea {background:#DAFFBF; font: 13px Comic Sans MS, Comic Sans, Arial; color:#295F00; border:2px #295F00 dashed; line-height:1.5em; padding:5px;}

textarea {background:#BFFAFF; font:13px Tahoma; color:#FF0000; border-bottom: 4px solid #40FF1F; border-right: 4px solid #40FF1F; border-top: 4px solid #FFE900; border-left: 4px solid #FFE900; line-height:1.5em; padding:5px; -moz-border-radius:10px;}

textarea {background: #EF0090; font: 13px Georgia; color: #FFEFF9; border: 3px dotted #FFEFF9; line-height: 1.5em; padding: 5px;}

textarea {background: #FFDAAF; font: 14px Papyrus, Georgia; color: #7F4500; border: 2px ridge #7F4500; line-height: 1.5em; padding: 5px; -moz-border-radius-topleft: 15px; -moz-border-radius-bottomright: 15px;}

textarea {background:#FF000A; color:#fff; border:3px double #fff; line-height:1.5em; padding:5px;}

textarea {background: #FBEFFF; font: 13px Tahoma; color: #CA3DD9; border: 1px solid #CA3DD9; border-left: 20px solid #CA3DD9; line-height: 1.5em; padding: 5px; -moz-border-radius: 7px;}

scorce; http://blogandtipsblog.blogspot.com/2011/12/create-unique-text-area.html

Css3 vertical Slide Menu ေလးထည့္ခ်င္ရင္

 DEMO အေနနဲ႔ေတာ့ က်ေနာ့္ဘေလာ့ ရဲ႕ လက္၀ဲ ဘက္မွာ ၾကည့္ႏိုင္ပါတယ္ ခင္ဗ်ာ
1. ပထမဆံုးအေနနဲ႕Blogger DashBoard >> CLick on the Design Tab >>And then on Edit HTML. ကိုသြားလိုက္ပါ။
2. သင့္ Template ကို Backup လုပ္ထားပါ.
3.  Expand Template Widgets မွာ အမွန္ျခစ္ေလးေပးလိုက္ပါ
4. ဒီကုဒ္ေလးကိုရွပါ ]]></b:skin> 
5.  ]]></b:skin> ကိုေတြျပီဆိုရင္ ေအာက္မွာ ေပးထားတဲ့ ကုဒ္ေတြကို ]]></b:skin> အေပၚမွာထည့္လိုက္ပါ။

/* Css3 Stylish Vertical Side Menu - info @ http://www.trickstime.com */
#hor {
list-style:none;
padding:0;
margin:0;
}

#hor li {
float:left;
padding:5px;
}

#hor a {
display:block;
height: 12px;
text-indent:-999em;
}

#hor a.home {
width:46px;
background:url(vHome.gif) no-repeat 0 0;
}

#hor a.download {
width:94px;
background:url(vDownload.gif) no-repeat 0 0;
}

#hor a.contact {
width:74px;
background:url(vContact.gif) no-repeat 0 0;
}


/* CSS Style for Vertical Menu */

#ver {
list-style:none;
padding:0;
margin:0;
}

#ver li {
padding:2px;
}

#ver li a {
display:block;
height:12px;
text-indent:-999em;
}

#ver a.home {
width:47px;
background:url(hHome.gif) no-repeat 0 0;
}

#ver a.download {
width:95px;
background:url(hDownload.gif) no-repeat 0 0;
}

#ver a.contact {
width:74px;
background:url(hContact.gif) no-repeat 0 0;
}


.clear {
clear:both;
}


*{
/* A universal CSS reset */
margin:0;
padding:0;
}


#navigationMenu body{
font-size:14px;
color:#666;
background:#111 no-repeat;


/* CSS3 Radial Gradients */
background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);
background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));

font-family:Arial, Helvetica, sans-serif;
}

#navigationMenu li{
list-style:none;
height:39px;
padding:2px;
width:40px;
}

#navigationMenu span{
/* Container properties */
width:0;
left:38px;
padding:0;
position:absolute;
overflow:hidden;

/* Text properties */
font-family:'Myriad Pro',Arial, Helvetica, sans-serif;
font-size:18px;
font-weight:bold;
letter-spacing:0.6px;
white-space:nowrap;
line-height:39px;

/* CSS3 Transition: */
-webkit-transition: 0.25s;

/* Future proofing (these do not work yet): */
-moz-transition: 0.25s;
transition: 0.25s;
}

#navigationMenu a{
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDY5nMxHw7rYI883dNW3IX_Qon8aloB3tbs9r5UINe53vINqS2Jd-QsJVOaKPVw0rD9TbQT815UQNF3m5OmaowuBiCZ7RR_8e__iO-LDIDe5mhA_X2NSw9xz9yZDIpqaLGly8ou2c_tikG/s1600/navigation.jpg') no-repeat;

height:39px;
width:38px;
display:block;
position:relative;
}

/* General hover styles */

#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration:none;

/* CSS outer glow with the box-shadow property */
-moz-box-shadow:0 0 5px #9ddff5;
-webkit-box-shadow:0 0 5px #9ddff5;
box-shadow:0 0 5px #9ddff5;
}

/* Green Button */

#navigationMenu .home { background-position:0 0;}
#navigationMenu .home:hover { background-position:0 -39px;}
#navigationMenu .home span{
background-color:#7da315;
color:#3d4f0c;
text-shadow:1px 1px 0 #99bf31;
}

/* Blue Button */

#navigationMenu .about { background-position:-38px 0;}
#navigationMenu .about:hover { background-position:-38px -39px;}
#navigationMenu .about span{
background-color:#1e8bb4;
color:#223a44;
text-shadow:1px 1px 0 #44a8d0;
}

/* Orange Button */

#navigationMenu .services { background-position:-76px 0;}
#navigationMenu .services:hover { background-position:-76px -39px;}
#navigationMenu .services span{
background-color:#c86c1f;
color:#5a3517;
text-shadow:1px 1px 0 #d28344;
}

/* Yellow Button */

#navigationMenu .portfolio { background-position:-114px 0;}
#navigationMenu .portfolio:hover{ background-position:-114px -39px;}
#navigationMenu .portfolio span{
background-color:#d0a525;
color:#604e18;
text-shadow:1px 1px 0 #d8b54b;
}

/* Purple Button */

#navigationMenu .contact { background-position:-152px 0;}
#navigationMenu .contact:hover { background-position:-152px -39px;}
#navigationMenu .contact span{
background-color:#af1e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}

/*End Css3 Stylish Vertical Side Menu - info @ http://www.trickstime.com */

6. တိန္းပလိတ္ ကို Save လိုက္ပါ။


7. ေနာက္တစ္ဆင့္အေနနဲ႔ >>Design Tab >> Page Elements ကိုသြားပါ။


8.  Add a widgetကိုေရြးပါျပီးရင္  "HTML/Javascript".ကိုေရြးပါ။


9. ေအာက္က ကုဒ္ေလဒေတြကို copy ယူျပီး "HTML/Javascript" မွာ paste လုပ္လိုက္ပါ။ 

10.Save လိုက္ပါ။

<div style='position: fixed; top: 40%; left: 0%;'/>
<ul id="navigationMenu">
<li>
<a class="Home" href="ayelwin-it.blogspot.com">
<span>မူလစာမ်က္ႏွာ</span>
</a>
</li>
<li>

<a class="about" href="link ထည့္ရန္">
<span>နာမည္ထည့္ရန္</span>
</a>
</li>

<li>
<a class="categories" href="link ထည့္ရန္">
<span>နာမည္ထည့္ရန္</span>
</a>

</li>

<li>
<a class="services" href="link ထည့္ရန္">
<span>နာမည္ထည့္ရန္</span>
</a>
</li>

<li>
<a class="contact" href="link ထည့္ရန္">

<span>နာမည္ထည့္ရန္</span>
</a>
</li>
</ul>
</div>

Note; အနီေရာင္ စာသားနဲ႔  အစိမ္းေရာင္ စာေတြကို ျပန္လည္ ျပင္ယူပါ။
အားလံုးပဲ အဆင္ေျပၾကပါေစ အားလံုးကို ေလးစားစြာျဖင့္ ေမာင္ေအးလြင္

ေမာင္ေအးလြင္ အားလံုးအဆင္ေျပၾကပါေစ ဆက္လက္ၾကိဳးစားပါဦးမည္

Back to Top button ေလးထည့္နည္း

ဒီတစ္ခါေရးမယ့္ အေၾကာင္ေလးကေတာ့ မိမိ ဘေလာ့မွာ စာမ်က္ႏွာ ရွည္ေနရင္ အေပၚကို ျပန္တက္တဲ့ေနရာ အသံုးျပဳဖို႔အတြက္ပါ က်ေနာ့္ ဘေလာ့ ေအာက္မွာ
အေနနဲ႔ ၾကည့္ ႏိုင္ပါတယ္ ဒီေကာင္ေလးကေတာ့ ဘေလာ့ဂါ သမားေတြ အတြက္ မရွိမျဖစ္ လိုအပ္တဲ့ Plug in ေလးတစ္ခုပါ jump to top လုပ္နည္းေလးေတြကိုေတာ့ ေတာ္ေတာ္ မ်ားမ်ား ရွိပါတယ္ ဒါေပမယ့္ က်ေနာ္ၾကိဳက္တဲ့ JQuery နည္းေလးပါ သူငယ္ခ်င္းတို႔လဲ သေဘာက်ၾကလိမ့္မယ္လို႔ေမွ်ာ္လင့္ပါတယ္ ကဲစလိုက္ၾကရေအာင္ဗ်ာ

ပထမဆံုးအေနနဲ႔ Design=>>Edit HTML ကိုသြားလိုက္ပါ။

expanded Wedget ကို အမွတ္ေလးေပးလိုက္ပါ

ဒီ </body> ကုဒ္ေလးကို ကီးဘုတ္မွ Ctrl+F အကူနဲ႔ ရွာလိုက္ပါ။ ေတြ႔ျပီဆိုရင္ ေအာက္မွာေပးထားတဲ့ ကုဒ္ေလးကို အေပၚက ထည့္လိုက္ပါ

<style type='text/css'>
#amazi {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #cococo;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=&#39;#99EEEEEE&#39;,EndColorStr=&#39;#99EEEEEE&#39;);text-align:center;padding:5px;position:fixed;bottom:30px;left:20px;cursor:pointer;color:#444;text-decoration:none;border:4px solid #9AFE2E;}
</style>
<script src='http://yourjavascript.com/22951137813/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
    $(function() {
        $.fn.scrollToTop = function() {
            $(this).hide().removeAttr(&quot;href&quot;);
            if ($(window).scrollTop() != &quot;0&quot;) {
                $(this).fadeIn(&quot;slow&quot;)
            }
            var scrollDiv = $(this);
            $(window).scroll(function() {
                if ($(window).scrollTop() == &quot;0&quot;) {
                    $(scrollDiv).fadeOut(&quot;slow&quot;)
                } else {
                    $(scrollDiv).fadeIn(&quot;slow&quot;)
                }
            });
            $(this).click(function() {
                $(&quot;html, body&quot;).animate({
                    scrollTop: 0
                }, &quot;slow&quot;)
            })
        }
    });
    $(function() {
        $(&quot;#amazi&quot;).scrollToTop();
    });
</script>
<a href='ဒီေနရာမွာ မိမိရဲ့ဘေလာ့လိပ္စာထည့္ပါ' id='amazi' style='display:none;'>^^အေပၚသို႔^^ </a>

preview နဲ႔ အရင္ၾကည့္လိုက္ပါ error မတက္ရင္ေတာ့ Teamplate ကို save လိုက္လို႔ ရပါျပီ ။လုပ္ေဆာင္ခ်က္ ျပီးဆံုးသြားပါျပီ။

 

ဒီ javascript ==> http://yourjavascript.com/22951137813/jquery.min.js' ေလးကိုေဒါင္းေလ့ာယူျပီး မိမိကိုယ္တိုင္ upload တင္ျပီး သံုးရင္ပိုအဆင္ေျပပါတယ္

ျပန္ျပင္ရန္ အက်ယ္ width:100px; ေနာက္ခံအေရာင္ background-color: #cococo; မိမိထားလိုတဲ့ေနရာ ;bottom:30px;left:20px; ေအာက္ေခ် ဘယ္ဖက္ ညာဘက္မွာထားခ်င္ရင္ေတာ့ right လို႔ ျပန္ျပင္လို႔ရပါတယ္ ဒါကေတာ့ ;bottom:30px ေအာက္ေခ်ကေနအေပၚသို႔ 30px အျမင့္ပါ ကိုယ့္တိန္းပလိတ္ႏွင့္ ကိုက္ညီေအာင္ ျပန္ညွိယူပါ။ ဒါကေတာ့ left:20px လက္၀ဲဘက္ကေန 20px အကြာမွာထားမယ္လို႔ သတ္မွတ္လိုက္တာပါ လက္ယာဘက္မွာထားမယ္ ဆိုရင္ေတာ့ right:20px (သို႔မဟုတ္) right:မိမိထားလိုတဲ့အကြာအေ၀းနံပါတ္px လို႔ သတ္မွတ္ျပီး မိမိ Teamplate နဲ႔ ကိုက္ညီေအာင္ညွိယူပါ အားလံုးအဆင္ေျပၾကပါေစ။

ဘေလာ့မွာ Zawgyi ႏွင့္ Unicode ႏွစ္မ်ိဳးလံုးနဲ႔ဖတ္လို႔ရေအာင္

မိမိရဲ့ ဘေလာ့ေလးမွာ Zawgyi ႏွင့္ Unicode ေဖာင့္ႏွစ္မ်ဳိးစလံုးနဲ႔ ဖတ္လို႔ရေအာင္ ထည့္ထားလို႔
ရပါတယ္ screen shoot ေလးပါ တင္ေပးထားပါတယ္ မိမိ ရဲ့ ဘေလာမွာ ထည့္ထားခ်င္ရင္ေတာ့ ေအာက္မွာ ေျပာျပထားတဲ့အတိုင္း လုပ္လိုပ္ပါ စလိုက္ၾကရေအာင္....

ပထမဆံုး Design => Page Elements ကိုသြားလိုက္ပါ။

Add a Gadget ကိုေရြးပါ။

basic category ထဲက HTML-Javascript ကိုေရြးပါ။ျပီးရင္ ေအာက္မွာေပးထားတဲ့ ကုဒ္ေလးေတြကို copy ယူျပီး HTML-Javascript box ေလးမွာ paste လုပ္လိုက္ပါ...။

<script type="text/javascript" src="http://yourjavascript.com/1010245324/unicodeorzawgyi_ayelwin.js"></script>

teamplate ကိုsave လိုက္ပါ မွတ္ခ်က္။ ။ ဒီ ဂ်ာဗာ ==> http://yourjavascript.com/1010245324/unicodeorzawgyi_ayelwin.js <== ကုဒ္ေလးကို ကိုယ္ပိုင္upload တင္ျပီးသံုးရင္ေတာ့ ပိုျပီး အဆင္ေျပပါတယ္ အားလံုးအဆင္ေျပၾကပါေစ ေက်းဇူးတင္ပါတယ္ ခင္ဗ်ာ က်ေနာ့္ဘေလာ့မွာ ဘေလာ့နဲ႔ပတ္သက္တာေလးေတြ စံုလင္ေအာင္ တင္ခ်င္တာနဲ႔ ဒီကုဒ္ေလးကို တင္လိုက္တာပါ ဒီကုဒ္ေလးကေတာ့ ဆိုဒ္ေတာ္ေတာ္ မ်ားမ်ားမွာ ရွာဖြ ရယူႏိုင္ပါတယ္ ...ဘေလာနည္းပညာေလးနဲ႔ ပတ္သက္ျပီး အတတ္ႏိုင္ဆံုးရွာေဖြ ေလ့လာတင္ျပသြားမွာ ျဖစ္တယ္ခင္ဗ်ာ

မိမိဘေလာ့မွာ notice infomation box ေလးထည့္မယ္

ဒီတစ္ခါေတာ့ ဘေလာ့ သူငယ္ခ်င္းေတြ အတြက္ notice infomation box ေလးထည့္နည္းေလးကိုတင္ေပးလိုက္ပါတယ
္ ဒီေကာင္ေလးမွာေတာ့ ကိုသြားေရာက္လည္ပတ္ေစခ်င္တဲ့ link ေလးပါထည့္ေပးလို႔ ရသလို imfomation သီးသန္႔ထည့္ခ်င္ရင္လဲ
ရပါတယ္ က်ေနာ့္ ဘေလာ့ေလးရဲ့ ညာဘက္ေအာက္ေထာင့္ေလးမွာ <button>DEMO</button> အေနနဲ႔ ၾကည့္ႏိုင္ပါတယ္။
ၾကိဳက္တယ္ဆိုရင္ေတာ့ စမ္းၾကည့္ လို႔ ရေအာင္ က်ေနာ္နားလည္သေလာက္ ရွင္းျပပါမယ္....က်ေနာ္လုပ္တာေတာ့ အဆင္ေျပပါတယ္။
သူငယ္ခ်င္းမ်ားအေနနဲ႔ အဆင္မေျပခဲ့ရင္ comment ေလးေရးထားခဲ့ပါ ....အဆင္ေျပရင္တယ္ ၾကိဳက္တယ္ဆိုရင္ေတာ့ ေက်းဇူးတင္
စကားေလးေျပာေပးသြားပါလို႔ ေျပာရေစ သူငယ္ခ်င္းတို႔ရဲ့ comments ေလးေတြက က်ေနာ့္အတြက္ အားေဆးမို႔ပါ..........:D။
စလိုက္ၾကရေအာင္ေနာ္........

၁။ ပထမဆံုး  Dashboard –> Design tab –>Edit html –> ကိုသြားလိုက္ပါ။

၂။ expand webget ကို အမွတ္လးေပးလိုက္ပါ။

၃။ မိမိရဲ့ template ကို Download Full Template နဲ႔ download လုပ္ထားလိုက္ပါ.. မိမိ အမွတ္ရမယ့္       တစ္ေနရာမွာ သိမ္းထားလိုက္ပါ။ ဒီလိုလုပ္ရတာက မိမိဘေလာ့ေလးမွာ တစ္ခုခု မွားသြားခဲ့ရင္ မဂိုမူလ
    အတိုင္း ျပန္ယူလို႔ ရေအာင္ ၾကိဳတင္သိမ္းထားျခင္းျဖစ္ပါတယ္။ ဒီအဆင့္ထိျပီးသြားဆိုရင္ ဆက္မယ္ေနာ္

၄။ ေအာက္မွာေပးထားတဲ့ ကုဒ္ေလးကို ရွာလိုက္ပါ။(ရွာရန္...  ::.help???.::= ကီးဘုတ္မွ Ctrl+F ႏႈိက္လိုက္ပါ ကြန္ပ်ဴတာရဲ့
    ေအာက္ေျခမွာ bar ေလးတစ္ခု တတ္လာမွာပါ အဲမွာ လက္၀ဲဘက္ေထာင့္မွာ စာရုိက္ထည့္လို႔ ရတဲ့ ေနရာေလးရွိပါတယ္
    အဲဒီေနရာမွာ ေအာက္က ကုဒ္ေလးကို copy ယူျပီး ေပၚလာတဲ့ bar ေလးရဲ့စာရိုက္တဲ့ေနရာမွာ paste လုပ္လိုက္ပါ။)
   (စာၾကြင္း။   ။ အခုလိုေျပာရတာ ဘေလာ့စတင္လုပ္သူေတြပါ အဆင္ေျပေအာင္လို႔ပါ                        ....bolg ႏွင့္ရင္ႏွီးပီးသားသူငယ္ခ်င္းအတြက္မရည္ရြယ္ပါ)

</head>

၅။</head> ကိုရွာေတြ႔ျပီဆိုရင္ ေအာက္မွာေပးထားတဲ့ ကုဒ္ေလးကို </head> အေပၚမွာကပ္ထည့္လိုက္ပါ။

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://tntechie.googlecode.com/files/jquery.slidenote.min.js" type="text/javascript"></script>

၆။ ေအာက္မွာေပးထားတဲ့ ကုဒ္ေလးကိ္ု ထပ္ရွာပါ။ [(၄)မွာေျပာခဲ့ သလိုေပါ့။]

]]></b:skin>

၇။ ]]></b:skin> ကိုရွာလို႔ေတြျပီဆိုရင္ ေအာက္က ကုဒ္ေလးကို အေပၚမွာ ထည့္လိုက္ပါ။ center>

/* ----- tntechie CSS START------ */
.slidenote { width: 540px; height: 140px; background: #FBEC78; padding: 1em;
-moz-box-shadow: -0.2em -0.2em 0.7em #333; -webkit-box-shadow: -0.2em -0.2em 0.7em #333;}
.slidenote img { float: left; margin-left: -2em; margin-top: -2em; }
.slidenote img:hover { margin-top: -1.95em; }
/* ----- tntechie CSS END------ */

၈။ ကိုယ္လိုခ်င္တဲ့ အက်ယ္ width: 540px ။အျမင့္  height: 140px ။ေနာက္ခံအေရာင္  background: #FBEC78 ေတြကို
    ျပန္ျပင္ႏိုင္ပါတယ္  ( { width: 540px; height: 140px; background: #FBEC78;) ။

၉။ ေနာက္ဆံုးအဆင့္အေနနဲ႔ ေအာက္မွာေပးထားတဲ့ ကုဒ္ေလးကို ရွာပါ။

</body>

၁၀။ </body> ကိုရွာေတြ႔ျပီဆိုရင္ ေအာက္မွာေပးထားတဲ့ ကုဒ္ေလးေတြကို </body>အေပၚမွာ ထည့္လိုက္ပါ။

<!-- Notification Slider Start -->
<div class='slidenote' id='note'>
<div id='container'>
<h2>ဒီေနရာမွာ ေခါင္စဥ္ေရးပါ</h2>
<span><em>ဒီေနရာမွာ မိမိေရးလိုတဲ့ infomarions ေတြေရးပါ</em></span>

<p><a href='ဒီေနရာမွာ infomations ရဲ့ link ကိုထည့္ပါ' target="_blank">သြားလည္မယ္</a> </p>

</div>
</div>
<script type='text/javascript'>
$(&#39;#note&#39;).slideNote({
closeImage: &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-N7f7H93FPG1PYPRHTgO5h9RSo3Hvi2351p44eAjVpJygCiA_Z_eENYXINt863ZZzLF2hQ08s9uadUELOt5dfpntJIXi4HHtOY6d3MXFnWng-Gjc9ZpKOtZJyJZrjP__3IwcxpYY0odyn/s1600/slidenote.close.png&#39;
});
</script>
<!-- Notification Slider Ends -->

၁၀။ မိမိရဲ့  template ကိုpreview နဲ႔ ၾကည့္လိုက္ပါ error မတတ္ရင္ေတာ့ save လုပ္လိုက္ပါ။
     လုပ္ေဆာင္ခ်က္ ျပီးဆံုးသြားပါျပီ............အဆင္ေျပပါေစ.......Good luck!!!

၁၂။ မွတ္ခ်က္။  ။ မိမိေရးလိုတဲ့ infomations ေတြကို link မခ်ိတ္ ခ်င္ရင္ေတာ့
     <p><a href='ဒီေနရာမွာ infomations ရဲ့ link ကိုထည့္ပါ' target="_blank">သြားလည္မယ္</a></p>
    ဆိုတဲ့ စာေၾကာင္းေလးကို ျဖဳတ္လိုက္ပါ update

ဘေလာ့ဂါ post မွာ စာပိုဒ္ေလးေတြ ေဖ်ာက္ျပီးေရးနည္း

ေအာက္မွာ DEMO အေနနဲ႔ ေရးျပထားပါတယ္ ခင္ဗ်ာ အနီေရာင္စာေလးကို ႏႈိက္ၾကည့္လိုက္ပါ

ဒီေနရာကိုႏႈိက္၍ၾကည့္ပါ

က်ေနာ္သည္ ပညာသင္ေလ့လာေနသူ တစ္ဦးသာ ျဖစ္ပါသည္

က်ေနာ့္ ဘေလာ့ေလးမွာ အမွားေပါင္းမ်ားစြာနဲ႔ ျပည့္နက္ေနပါလိမ့္မယ္

က်ေနာ္ ေလ့လာေနေသာ

သိထားေသာ(တတ္ေျမာက္ကၽြမ္းက်င္ျခင္းမဟုတ္ပါ)

အေၾကာင္းအရာေလးေတြကို ျပန္လည္မွ်ေ၀ျခင္းသာျဖစ္ပါသည္

ဘေလာ့ေလး ကိုအလည္ေရာက္လာၾကသူ သူငယ္ခ်င္းမ်ား အေနနဲ႔

နားလည္ေပးၾကလိမ့္မယ္ ေမွ်ာ္လင့္ ရင္း

ဘာေတြလုပ္ရမလဲ လို စိတ္ကူးရင္း ဒီလိုမ်ိဳးေလး စာေလးေတြေဖ်ာက္ျပီး မိမိရဲ႕ ဘေလာ့မွာ post ေလးေတြ ေရးခ်င္ ေရးလို႔ ရေအာင္ ကုဒ္ဒင္း
ေလးေတြ တင္ေပးလိုက္ပါတယ္ က်ေနာ္ကေတာ့ လွ်ိဳ႕၀ွက္ရတာ ၀ါသနာပါလို႔ :) က်ေနာ့္လို ၀ါသနာတူသူမ်ားလဲ အသံုးျပဳလို႔ရေအာင္
ျပန္လည္ မွ်ေ၀ေပးလိုက္ပါတယ္

<div style="background-color: #a0ffff; border: 0px solid 00000; color: black; font-family: arial; font-size: 12px; height: 40px; overflow: auto; padding: 4px; text-align: left; width: 395px;">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<script type="text/javascript">
var haut_max, timer_glisse, action_glisse, haut_fenetre = "";function deplie(blid) {   var elm = document.getElementById(blid);   if (parseInt(elm.style.height) == 0 || !elm.style.height) {       elm.style.height = "auto";       elm.style.lineHeight = "120%";       init_glisse(blid, 'ouvre');   } else if (action_glisse == "") {       init_glisse(blid, "ferme");   }}function init_glisse(blid, sens) {   var elm = document.getElementById(blid);      haut_max = (document.getElementById(blid).offsetHeight) ? document.getElementById(blid).offsetHeight : document.getElementById(blid).style.pixelHeight;      if (sens == "ouvre") elm.style.height = "0px";   haut_fenetre = (document.body) ? document.body.clientHeight : window.innerHeight;      clearTimeout(timer_glisse);   timer_glisse = setTimeout("glisse('" + blid + "', '" + sens + "')", 10);}function glisse(blid, sens) {   action_glisse = 1;   var elm = document.getElementById(blid);   var haut = parseInt(elm.style.height);   if (sens == "ouvre") {       haut = haut + 10;       if (haut > haut_max) haut = haut_max;   } else {       haut = haut - 10;       if (haut < 0) haut = 0;   }   elm.style.height = haut + "px";      if (sens == "ouvre") {       if (haut < haut_max) {           timer_glisse = setTimeout("glisse('" + blid + "', '" + sens + "')", 10);       } else {           action_glisse = "";       }   } else {       if (haut > 0) {           timer_glisse = setTimeout("glisse('" + blid + "', '" + sens + "')", 10);       } else {           action_glisse = "";           elm.style.lineHeight = "0";       }   }}
</script>


<h4 onclick="javascript:deplie('div1')"><blink>
ဒီေနရာကိုႏႈိက္၍ၾကည့္ပါ</blink></h4>
<div id="div1" style="height: 0px; line-height: 0px; overflow: hidden;">
<div style="background-color: #a0ffff; border: 0px solid 00000; color: black; font-family: arial; font-size: 14px; height: 60px; overflow: auto; padding: 4px; text-align: left; width: 420px;">
ဒီေနရာမွာမိမိ ၀ွက္ထားခ်င္တဲ့ စာေလးကိုေရးပါ</div></div>

ဘေလာ့ဂါ မွာ color code Generator ထည့္ခ်င္ရင္

ေအာက္မွာ DEMO ေလးထည့္ေပးထားပါတယ္ မိမိရဲ႕ ဘေလာ့ေလးကို ျပန္ျပင္တဲ့ အခ်ိန္မွာ အေရာင္ကုဒ္ေလးေတြ အလြယ္တကူ
ရယူႏိုင္တာေပါ့ ဟုတ္ဘူးလား :P

<center><object2 border="1" classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="480" id="obj1" width="480"><embed height="485" name="obj2" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="High" src="http://www.2createawebsite.com/build/col.swf" type="application/x-shockwave-flash" width="485"></embed></object2></center>

အေပၚမွာ ေပးထားတဲ့ ကုဒ္ေလးကို မိမိ ဘေလာ့ ရဲ႕ ကိုယ္ၾကိဳက္တဲ့ တစ္ေနရာရာမွာ ထည့္ထားလိုေပါ့ ။
မွတ္ခ်က္။ ။ ထည့္တဲ့အခါမွာ HTML အေနနဲ႔ ထည့္ပါ post မွာ ဆိုရင္ Edit HTML ကိုေရြးျပီးထည့္ပါ။Gadget ေနရာမွာဆိုရင္ေတာ့
HTML/Javascript မွာ ထည့္ေပးပါ။
ျပန္ျပင္ရန္။ ။ အနီေရာင္ေလးနဲ႔ ေရးထားတဲ့ အျမင့္နဲ႔ အက်ယ္ ကိုေတာ့ ကိုယ္လိုအပ္သလိုျပန္ျပင္ႏိုင္ပါတယ္
 height="485" / width="485"
Scorce:  http://www.itechcolumn.com/2012/03/how-to-add-color-code-wheel-to-blogger.html


ေမာင္ေအးလြင္| it ႏွင့္ ဘေလာ့ နည္းပညာ(ျပန္လည္မွ်ေ၀ျခင္း

မိမိရဲ႕ post မွာ ပံုေလးေတြကို scrolling နဲ႔ တင္နည္း

မိမိရဲ႕ post မွာ ပံုေလးေတြကို scrolling နဲ႔ တင္နည္းေလးပါ ေအာက္မွာ နမူနာ ပံုစံေလးတင္ေပးလိုက္ပါတယ္
DEMO

ေမာင္ေအးလြင္

<marquee behavior="scroll" direction="right">
<img src="ဒီေနရာမွာ ပံုရဲ႕ URL ကိုထည့္ပါ" width="200" height="200" alt="Art design" />
<p>An image by<p><a href="http://ayelwin-it.blogspot.com/">ေမာင္ေအးလြင္| it ႏွင့္ ဘေလာ့ နည္းပညာ(ျပန္လည္မွ်ေ၀ျခင္း</a>
</marquee>

မိမိရဲ့ Post တိုင္း မွာ ေနာက္ခံေျပာင္းျပီးေရးမယ္

ဘေလာ့ဂါေပါက္စ(က်ေနာ္လိုေပါ့:P) အတြက္ မိမိ post တင္တိုင္း post ရဲ့ ေနာက္ခံ (background)ကို မိမိ ၾကိဳက္တဲ့ အေရာင္ ျပီးရင္ .....မိမိ ၾကိဳက္တဲ့ ေနာက္ခံပံုေလးေတြ အမ်ိဳးမ်ိဳးနဲ႔ေျပာင္းျပီး တင္ခ်င္ရင္ပဲျဖစ္ျဖစ္ ကိုယ္ထင္ထင္ရွာရွား ျပလို႔တဲ့ post ေတြပဲျဖစ္ျဖစ္ ေနာက္ခံအေရာင္(သို႕)ေနာက္ခံပံု အမ်ိဳးမ်ိဳး ေျပာင္းတင္လို႔ ရေအာင္ က်ေနာ္သိထားတဲ့ ကုဒ္ေလးေတြကို သူငယ္ခ်င္းမ်ားအတြက္ ျပန္လည္ မွ်ေ၀လိုက္ပါတယ္။ စေျပာေတာ့မယ္ေနာ္.........အရမ္းလြယ္ပါတယ္..ခိခိ
1. Post အသစ္တင္ တင္မယ္(New Post)ဆိုတာကို ႏႈိက္လိုက္တာနဲ႔ Compose ႏွင့္ Edit HTMLေတြရမွာပါ....HTML ကိုေရြးလိုက္ပါ။
2. ေအာက္မွာေပးထားတဲ့ ကုဒ္ေလးေတြကို အသံုးျပဳလိုက္ပါ ။ဒါကေတာ့ အေရာင္ေနာက္ခံအတြက္ ကုဒ္ေလးေတြပါ။ ဒါကေတာ့ အေရာင္ေနာက္ခံ ကုဒ္ေလးပါ။
   

<div style="background:ဒိေနရာမွာ အေရာင္ကုဒ္ကိုထည့္ပါ; padding:5px 10px 5px 10px;">ဒီေနရာမွာ မိမိ post ကိုေရးပါ </div>

အေ၇ာင္ ကုဒ္ေလးေတြအတြက္ အဆင္မေျပသူမ်ား ေအာက္မွာ ကြန္႔မက္ေလးေပးသြားပါ.....။
3. ဒီကုဒ္ေလးကေတာ့ ေနာက္ခံ ပံုထည့္မယ္ ကုဒ္ေလးပါ။ gif format ပါ support ပါတယ္။ ဒီ post မွာ ဥပမာအေနနဲ႔ တင္္လိုက္ပါတယ္။ေအာက္က ကုဒ္ေလးကို အသံုးျပဳထားပါတယ္.............။

<div style="background:url(ဒီေနရာမွာ ပံု ရဲ့ URL ကိုထည့္ပါ) no-repeat;"> ဒီေန၇ာမွာ Post ကို ေရးပါ </div>

no-repeat ေနရာမွာ မိမိ ပံုႏွင့္ ကိုက္ညီမႈမရွိရင္ေတာ့ no-repeat မွာ no- ကိုျဖဳတ္ျပီး repeat လို႔ေျပာင္းႏိုင္ပါတယ္....။ ဥပမာ အေနနဲ႔ ေအာက္မွာ ၾကည့္ႏိုင္ပါတယ္.............။  

<div style="background:url(ဒီေနရာမွာ ပံု ရဲ့ URL ကိုထည့္ပါ) repeat;"> ဒီေန၇ာမွာ Post ကို ေရးပါ </div>

အားလံုးေသာ သူငယ္ခ်င္းမ်ား ၾကယ္ေၾကြသြားသည့္တိုင္ အေကာင္းဆံုးေသာ sharing လုပ္ႏိုင္ၾကပါေစ

Newer Posts, Older posts ႏွင့္ Home ေနရာမွာ ပံုနဲ႔ အစားထိုးနည္း

1. www.blogger.com ကို blogger account နဲ႔ Login ၀င္လိုက္ပါ။
2.  Dashboard>Design> ကိုသြားလိုက္ပါ။
3. Edit HTML ကိုေရြးပါ။Expand Widget Templates .....ေရွ႕မွာ အမွတ္ေပးပါ။
4. Expand Widget Templates .....ေရွ႕မွာ အမွတ္ေပးပါ။
5. ေအာက္မွာေပးထားတဲ့ ကုဒ္ေလးေတြမွာ အနီေရာင္စာသားေလးေတြပါတာကို စာတစ္ေၾကာင္းေလာက္ေရြးျပီး ရွာပါ.။

<span id='blog-pager-newer-link'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a> </span> </b:if> <b:if cond='data:olderPageUrl'> <span id='blog-pager-older-link'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a> </span> </b:if> <b:if cond='data:blog.homepageUrl != data:blog.url'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> <b:else/> <b:if cond='data:newerPageUrl'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> </b:if> </b:if>

6. အနီေရာင္နဲ႔ ေရးထားတဲ့ ကုဒ္ေနရာေလးေတြမွာ အစားထိုးေပးရပါမယ္။
   
   <data:newerPageTitle/> နဲ႔ အစားထိုေပးပါ: <img alt='Newer Posts' src='ပံုရဲ႔URLထည့္'/>
   <data:olderPageTitle/>နဲ႔ အစားထိုေပးပါ : <img alt='Older Posts' src='ပံုရဲ႔URLထည့္'/>
   <data:homeMsg/> နဲ႔ အစားထိုေပးပါ: <img alt='Home' src='ပံုရဲ႔URLထည့္'/>
7. template ကို save လိုက္ပါ>>>>> ျပီးပါျပီ လွပေသသပ္ေသာ blog ေလးပိုင္ႏိုင္ၾကပါေစ။

ဘေလာ့ဂါမွာ Post Date Header ကိုျဖဳတ္နည္း

အဆင့္-၁

post တင္တဲ့အခါမွာ မိမိတင္တဲ့ပို႔ေလးမွာ ေရးသားတဲ့ date ေလး ကိုျဖဳတ္ခ်င္ရင္ဒီနည္းေလးကိုသံုးလို႔ ၇ပါတယ္ ...ညီေလးတစ္ေယာက္ကေမးလို႔ က်ေနာ္လဲ ဟိုရွာဒီရွာနဲ႔ ေတြျပီး ကိုယ္တိုင္စမ္းၾကည့္တာ အဆင္ေျပလို႔ post ေလးအျဖစ္ က်ေနာ့္ မွတ္စုေလးမွာ တင္လိုက္ပါတယ္ မသိေသးတဲ့ သူငယ္ခ်င္းေတြလဲ
 Post Date Header ေလးကို ျဖဳတ္ခ်င္ရင္ အသံုးျပဳလို႔ရေအာင္လို႔ပါ.

i.  Blogger Dashboard ကိုအရင္၀င္လိုက္ပါ.

ii. Page Elements ကိုေရြးလိုက္ပါ

iii. blog post ကိုရွာပါ ေတြ႔ရင္ Etid ကိုႏိႈက္လိုက္ပါ...ေအာက္မွာ ပံုေလးနဲ႔ ျပသြားပါမယ္....

iv.

v.

vi.

vii. Preview နဲ႔ၾကည့္လိုက္ပါ Save လိုက္လို႔ ရပါျပီ။အဲဒါမွ posting date မေပ်ာက္ေသးဘူးဆိုရင္
ေအာက္ကနည္းအတိုင္းဆင္လုပ္ပါ။



ဒါကေတာ့ ေနာက္တစ္နည္းပါ
Steps:

i.  Blogger Dashboard ကို၀င္လိုက္ပါ။

ii. Edit HTML ကိုေရြးလိုက္ပါ။

iii. Expand Widget Templates မွာ အမွန္ျခစ္ေလးေပးပါ

iv.  ]]></b:skin ဒီကုဒ္ေလးကိုရွာလိုက္ပါ

v.  ]]></b:skin> ကိုေတြျပီဆိုရင္ ေအာက္မွာ ေပးထားတဲ့ ကုဒ္ကို ]]></b:skin> ရဲ႕အေပၚက ထည့္လိုပ္ပါ။

.date-header {display:none !important;}

vi.  Preview နဲ႔ အရင္ၾကည့္လိုပါ error မတတ္ဘူးဆိုရင္ေတာ့ template ကို Save လိုက္ပါ။
vii. မိမိရဲ႕ ဘေလာ့ေလးကို ၾကည့္လိုက္ပါ posting date ေတြကို ေဖ်ာက္ပီးသားေတြပါလိမ့္မယ္။
Enjoy :-)

ဘေလာ့ဂါ post မွာ Animated picture ထည့္မယ္

  အေပၚမွာ ပံုေလးတင္ျပထားပါတယ္ ...:P ဘာမွမဟုတ္ေပမယ့္ က်ေနာ္လို ၀ါသနာအရ ဘေလာ့ ေရးေနတဲ့
သူငယ္ခ်င္းေတြ အတြက္ တစ္ခါတစ္ေလ ကိုယ္ေရးတဲ့ post ေတြမွာ ဒီလိုပံု အရွင္ေလးေတြ ထည့္လို႔ ရေအာင္ ေရးသား ေပၚျပလိုက္ပါတယ္ ေအာက္မွာ ပံုထည့္ရမယ့္ ကုဒ္ေလးေတြကိုပါ

<center><img alt="Photo Sharing and Video Hosting at Photobucket" border="0" src="gif ပံု link ထည့္ရန္" title="animated gif image" /></center>

အာလံုးပဲ အမ်ားအတြက္လုပ္ရင္း စိတ္ခ်မ္းသာမႈ ရႏိုင္ၾကပါေစ

ဘေလာ့ဂါ မွာ forum ေလးထည့္မယ္

မိမိ ဘေလာစပို႔စ္ ေလးမွာ ေဖာ္ရမ္ထည့္နည္းေလးပါ blogspot မွာ ေဖာ္ရမ္ေလးပါ သံုခ်င္တယ္ဆိုရင္ေတာ့ က်ေနာ္ ရွာေတြ႔ထာတဲ့ နည္းေလးကို အသံုးျပဳလိုရေအာင္ျပန္လည္ share လိုက္တယ္။

စလိုက္ၾကရေအာင္ေနာ္;

1.    ပထမဆံုးအေနႏွင့္ DASHBOARD >> NEW POST >> EDIT PAGES ကိုသြားလိုက္ပါ

2.     NEW PAGE တစ္ခု ျပဳလုပ္လိုက္ပါ။

3.    Page ရဲ႕ title ကိုေတာ့ (ဥပမာ) FORUM (သို႔မဟုတ္) ေဖာ္ရမ္ လို႔ေပးလိုက္ေပါ့ဒ

4.    စာမ်က္ႏွာ အသစ္မွာ ဘာမွ (ဘာ post မွ မေရးပဲ ) Publish  လုပ္လိုက္ပါ။ ရလာတဲ့ စာမ်က္ႏွာ အသစ္ ဖြင္လိုက္ပါ။

5.     browser ထဲမွာ မိမိ၏စာမ်က္ႏွာ အသစ္ရဲ့ လိပ္စာကို copy ယူျပီး notepad နဲ႔ မွတ္ထားပါ
        ဥပမာ (http://yourdomain.blogspot.com /p/forum.htm)

6.     ဒီဆိုဒ္ေလးကို သြားလိုက္ပါ
       
7.   လိုအပ္တာေတြ ျဖည့္ျပီး  အေကာင့္ တစ္ခု ဖြင့္လိုက္ပါ. သင့္အီးေမးလ္  verify လုပ္ျပီး အေကာင့္ကို active ျဖစ္ေအာင္ လုပ္ပါ
      verify လုပ္ရန္ သင့္အီးေမးလ္ မွာ inbox က အေပၚက ကိုယ္အေကာင့္ဖြင့္ခဲ့တဲ့ ဆိုဒ္ mail ကိုဖြင့္ျပီး သူညႊန္ၾကားခ်က္အတိုင္း
      လုပ္သြားလိုက္ပါ။ သင့္ အေကာင္ အက္တစ္ ျဖစ္သြားပါပီ.
8.    သင့္ ေဖာ္ရမ္းေလးဟာ မိမိ ေကာင့္ဖြင့္လိုက္တဲ့ <a href="http://n4.nabble.com/free-forum.html">ဆိုဒ္</a>မွာ
      ဖြင့္ျပီးသြားပါျပီ။

9.     မိမိ ေဖာ္ရမ္ရဲ႕ embed code ကို ယူရပါမယ္.  embed code ကို ယူရန္ OPTIONS >> EMBEDDING OPTIONS
       ကိုႏိႈက္ျပီး code ကို ေတြ ရမွာ ျဖစ္ပါတယ္။

10.  embed code  copy ယူပါ။

11. ျပီးရင္ မိမိ ဘေလာ့ရဲ႕ DASHBOARD >> DESIGN >>EDIT HTML ျပန္သြားလိုက္ပါ။

12. ေအာက္မွာ ေပးထားတဲ့ ကုဒ္ကို( ကီးဘုတ္မွ  CTRL+F အကူျဖင့္ အလြယ္တကူ) ရွာပါ။

           <div id='content-wrapper'>

13. ေတြျပီဆိုရင္ ေအာက္မွာေပးထားတဲ့ ကုဒ္ေလးကို အေပၚမွာ ထည့္လို္က္ပါ ။

<b:if cond='data:blog.url == "ဒီေနရာမွာ မိမိ ဘေလာ့၏ url ကိုထည့္ပါ">
ဒီေနရာမွာ ေဖာ္ရမ္က copy ယူထားတဲ့ embed code ကိုထည့္ပါ
</b:if>

14.အေပၚက ကုဒ္ေနရာမွာ (ဒီေနရာမွာ မိမိ ဘေလာ့၏ url ကိုထည့္ပါ)နဲ႔(ဒီေနရာမွာ ေဖာ္ရမ္က copy ယူထားတဲ့ embed code       
    ကိုထည့္ပါ) ဆိုတဲ့ေနရာေလးေတြမွာ မိမိ copy ယူထားထာေလးေတြ ကို သူေနရာႏွင့္သူ ထည့္ေပးပါ။

15. ေနာက္ျပီး ေအာက္က ကုဒ္ေလးထပ္ရွာပါ။
   </head>

16.ေတြ႔ျပီဆိုရင္ ေအာက္မွာေပးထားတဲ့ ကုဒ္ေလးကို အေပၚမွာ ထည့္လိုက္ပါ

<b:if cond='data:blog.url == "မိမိ ေဖာ္ရမ္ မွ URL ကိုထည့္ပါ"'>
<style type='text/css'>
#content-wrapper {
display:none !important;
}
</style>
</b:if>

17. preview ႏွင့္ၾကည့္လိုက္ပါ error မတတ္ရင္ အိုေက သြားျပီေပါ့

18.မိမိ ရဲ႕ TEMPLATE ေလးကိုsave လိုက္ပါ ။ မိမိရဲ႕ ဘေလာ့ေလးမွာ ေဖာ္ရမ္ ေလး ရသြားပါျပီ။


scroce; http://www.techblaster.net/2011/08/how-to-make-forum-for-blogger-blog.html




HAYE A NICE TIME

လင့္အေပၚမွာ ေရာင္စံု ကာလာေလး ထည့္နည္း

 လင့္ အေပၚမွာ mouse နဲ႔ေထာက္လိုက္ရင္ မာတီကာေလးေတြ ေျပးေနေအာင္ လုပ္နည္းေလးပါ။

1. Layout > Edit HTML ကိုသြားလိုက္ပါ
2.  </head> ကုဒ္ကိုရွာပါ ။
3.  </head> ကို ေတြ႔ျပီဆိုရင္ အေပၚမွာ ေအာက္ကကုဒ္ေလးကို ထည့္လိုက္ပါ

<script type='text/javascript'>
//<![CDATA[
var rate = 20;
if (document.getElementById)
window.onerror=new Function("return true")
var objActive;  // The object which event occured in
var act = 0;    // Flag during the action
var elmH = 0;   // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg;     // A color before the change
var TimerID;    // Timer ID
if (document.all) {
    document.onmouseover = doRainbowAnchor;
    document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
    document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
    document.onmouseover = Mozilla_doRainbowAnchor;
    document.onmouseout = Mozilla_stopRainbowAnchor;
}
function doRainbow(obj)
{
    if (act == 0) {
        act = 1;
        if (obj)
            objActive = obj;
        else
            objActive = event.srcElement;
        clrOrg = objActive.style.color;
        TimerID = setInterval("ChangeColor()",100);
    }
}

function stopRainbow()
{
    if (act) {
        objActive.style.color = clrOrg;
        clearInterval(TimerID);
        act = 0;
    }
}

function doRainbowAnchor()
{
    if (act == 0) {
        var obj = event.srcElement;
        while (obj.tagName != 'A' && obj.tagName != 'BODY') {
            obj = obj.parentElement;
            if (obj.tagName == 'A' || obj.tagName == 'BODY')
                break;
        }
        if (obj.tagName == 'A' && obj.href != '') {
            objActive = obj;
            act = 1;
            clrOrg = objActive.style.color;
            TimerID = setInterval("ChangeColor()",100);
        }
    }
}

function stopRainbowAnchor()
{
    if (act) {
        if (objActive.tagName == 'A') {
            objActive.style.color = clrOrg;
            clearInterval(TimerID);
            act = 0;
        }
    }
}

function Mozilla_doRainbowAnchor(e)
{
    if (act == 0) {
        obj = e.target;
        while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
            obj = obj.parentNode;
            if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
                break;
        }
        if (obj.nodeName == 'A' && obj.href != '') {
            objActive = obj;
            act = 1;
            clrOrg = obj.style.color;
            TimerID = setInterval("ChangeColor()",100);
        }
    }
}

function Mozilla_stopRainbowAnchor(e)
{
    if (act) {
        if (objActive.nodeName == 'A') {
            objActive.style.color = clrOrg;
            clearInterval(TimerID);
            act = 0;
        }
    }
}

function ChangeColor()
{
    objActive.style.color = makeColor();
}

function makeColor()
{
    // Don't you think Color Gamut to look like Rainbow?
    // HSVtoRGB
    if (elmS == 0) {
        elmR = elmV;    elmG = elmV;    elmB = elmV;
    }
    else {
        t1 = elmV;
        t2 = (255 - elmS) * elmV / 255;
        t3 = elmH % 60;
        t3 = (t1 - t2) * t3 / 60;
        if (elmH < 60) {
            elmR = t1;  elmB = t2;  elmG = t2 + t3;
        }
        else if (elmH < 120) {
            elmG = t1;  elmB = t2;  elmR = t1 - t3;
        }
        else if (elmH < 180) {
            elmG = t1;  elmR = t2;  elmB = t2 + t3;
        }
        else if (elmH < 240) {
            elmB = t1;  elmR = t2;  elmG = t1 - t3;
        }
        else if (elmH < 300) {
            elmB = t1;  elmG = t2;  elmR = t2 + t3;
        }
        else if (elmH < 360) {
            elmR = t1;  elmG = t2;  elmB = t1 - t3;
        }
        else {
            elmR = 0;   elmG = 0;   elmB = 0;
        }
    }
    elmR = Math.floor(elmR).toString(16);
    elmG = Math.floor(elmG).toString(16);
    elmB = Math.floor(elmB).toString(16);
    if (elmR.length == 1)    elmR = "0" + elmR;
    if (elmG.length == 1)    elmG = "0" + elmG;
    if (elmB.length == 1)    elmB = "0" + elmB;
    elmH = elmH + rate;
    if (elmH >= 360)
        elmH = 0;
    return '#' + elmR + elmG + elmB;
}
//]]>
</script>

preview နဲ႔ အရင္ၾကည့္လိုက္ error မတတ္ရင္ save လို႔ ရပါျပီ

Admin@@@ေမာင္ေအးလြင္

ကိုယ္..ကိုယ္တိုင္မလုပ္တတ္ေပမယ့္.....
ကိုယ္ ေလ့လာလို႔ သိတာေလးေတြကို မသိေသးေတြ အတြက္ျပန္လည္ မွ်ေ၀တာပါ
သင္ယူူေလ့လာေနသူကေတာ့ မသင္သူထက္ေတာ့ တတ္မွာပါ....ဟုတ္ဘူးလား :D

မိမိဘေလာ့မွာ ေကာမန္႔ "Reply link" ေလးထည့္နည္းေလးပါ

1. ပထမဆံုး Blogger > Design > Edit HTMLကိုသြားလိုက္ပါ။
2. ဘေလာ့ template ေလးကို Backup လုပ္ထားပါ
3.  "Expand widgets Templates" Box ကို Click ပါ။
4. ဒီကုဒ္ေလးကိုရွာပါ  ]]></b:skin> 
5. ေတြ႔ျပီဆိုရင္ ေအာက္မွာေပးထားတဲ့ ကုဒ္ေလးကို အေပၚမွာထည့္လိုက္ပါ။
   

/*--------------MBT Reply Link --------------*/
.MBT-replycomments{
background:#ECEAEA;
cursor:pointer;
color:#fff;
margin:5px 0;
float:right;
border:none;
padding:4px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:10px sans-serif;
}
.MBT-replycomments:hover{
background:#E7E7E7;
}

• မူလအေနအထားအေရာင္ကိုကိုယ္ၾကိဳက္တဲ့ အေရာင္နဲ႔ေျပာင္းႏိုင္ပါတယ္ #ECEAEA
• ေမာက္စ္နဲ႔ေထာက္လိုက္ရင္ေျပာင္းသြးမယ္အေရာင္ေလးပါ မိမိစိတ္ၾကိဳက္ေျပာင္ႏိုင္ပါတယ္#E7E7E7
• အေရာင္ကုဒ္ကိုဒီေနရာမွာ ရယူႏိုင္ပါတယ္ Color Generator

    6.    ဒီကုဒ္ေလးကိုထပ္ျပီးရာပါ,

<dd class='comment-footer'>

မေတြဘူးဆိုရင္ ဒီကုး္ေလးကိုရွာပါ,

class='comment-footer'

ေတြ႔ျပီဆိုရင္ေအာက္ေပးထားတဲ့ "Reply Link" Code ကိုအေပၚမွာထည့္လိုက္ပါ

<div class='MBT-replycomments'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=*******************&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=650,height=650&quot;); return false;'>Reply..</a></div>

•  Reply..ဆိုတဲ့စာသားကို မိမိ ၾကိဳက္သလိုေျပာင္းလိုက္ပါ။
•  ******************* ဒီေနရာေလးမွာမိမိရဲ႔ဘေလာအိုင္ဒီ BLOG ID  ကိုထည့္ပါ။
• မိမိရဲ႕ ဘေလာအိုင္ဒီကို  http://www.blogger.com/ မွာ logged in ၀င္လိုက္ပါ။
•  ျပီးရင္ မိမိဘေလာ့မွာ Desing ကိုႏႈိက္လိုက္ browser address bar မွာ ဂဏန္း 18-19 လံုးရွိပါတယ္ အဲဒီ နံပါတ္ေတြကို ေကာ္ပီယူျပီး စတားပြင့္ေလးေတြေနရာမွာ paste လုပ္လိုက္ပါ ေအာက္မွာ ပံုေလးေလးျပထားပါတယ္ အားလံုး ျပီးသြားေတာ့ preview နဲ႔အရင္ၾကည့္လိုပ္ပါ error မတတ္ဘူးဆိုရင္ေတာ့ save လိုက္ပါ  အဆင္ေျပပါေစ

Admin@@@ေမာင္ေအးလြင္

ကိုယ္..ကိုယ္တိုင္မလုပ္တတ္ေပမယ့္.....
ကိုယ္ ေလ့လာလို႔ သိတာေလးေတြကို မသိေသးေတြ အတြက္ျပန္လည္ မွ်ေ၀တာပါ
သင္ယူူေလ့လာေနသူကေတာ့ မသင္သူထက္ေတာ့ တတ္မွာပါ....ဟုတ္ဘူးလား :D