မိမိဘေလာ့မွာ 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