kp3နည္းပညာ၊၁ဝ၈၊မိမိရဲ႕ဘေလာ့ထဲကိုဝင္တဲ့Email Account ေျပာင္းနည္းေလး

အခုက်ေနာ္တင္မည့္ Post ေလးကေတာ့ထူးထူးျခားျခားေလးပါ၊ဘေလာ့ဂါညီးေလးတစ္
ေယာက္ကCbox မွာေတာင္းဆိုထားတာေလးပါ။မိမိရဲ႕ဘေလာ့ထဲကိုဝင္တဲ့Email Account
ေျပာင္းနည္းေလးပါ၊ဘယ္လိုေျပာင္းဒါလဲဆိုရင္ဘေလာ့SETTINGS ထဲမွာဝင္ျပီးရင္ေပၚလာ
တဲ့PERMISSIONSဆိုတာေလးအသံုးဝင္ပံုဆိုလည္းေျပာလို႕ရပါတယ္။ေအာက္မွာေတြ႕ရတဲ့
ပံုအတိုင္းေပါ့ေနာ္၊ဟုတ္ျပီေနာ္စၾကရေအာင္ေနာ္



၁။ဘေလာထဲစဝင္မယ္Settings >>- Permissionsကိုသြားမယ္၊

၂။အေပၚပံုအတိုင္းADD AUTHORS ကိုထပ္ႏိုပ္မယ္.Invite more people to write to your blog
ဆိုျပီးစာေၾကာင္းေလးေအာက္မွာ Invite လုပ္မည့္အီးေမးလ္စာေရးရန္အတြက္အကြက္ေလးေတြ႕ရပါ
လိမ့္မည္။

၃။မိမိသံုးခ်င္သည့္ဘေလာ့ဂါ Login Email အသစ္လိပ္စာကိုထည့္လိုက္ျပီး Invite Button ေလးႏိုပ္
လိုက္ပါ။

၄။မိမိရဲ႕အီးေမးလ္အသစ္ကိုျပန္ဝင္ပါ Invite ရရွိေၾကာင္းဆိုသည့္စာေလးေတြ႕ရပါလိမ့္မည္၊ဘယ္ဘေလာ ့
ကေနေပါ့ေနာ္-ဥပမာ-The Blogger user he/she has invited you to contribute to the blog:
ဒီစာေၾကာင္းေလးရဲ႕ေအာက္မွာ Invite ဘေလာ့ဂါလင့္ခ္ေလးေပးထားပါတယ္၊ႏိုပ္လိုက္ပါမိမိရဲ႕ Invite-ID
ေပါ့ေနာ္(password),မိမိအီးေမးလ္အသစ္ရဲ႕ Password ကိုေတာင္းပါလိမ့္မည္။

၅။မိမိအီးေမးလ္အသစ္ရဲ႕ Password ထည့္ျပီးရင္ေအာက္ကAccept Invitation ဆိုတဲ့Buttonေလးေတြ႕
ရလိမ့္မည္၊ႏိုပ္လိုက္ပါ။Blogger Dashboard ေလးေပၚလာပါလိမ့္မည္။ပထမအဆင့္ျပီးျပီလို႕ေျပာလို႕ရပါ
တယ္။ဒါေပမယ့္ဒီပထမအဆင့္က Invite ဘဲဆိုေတာ့ Dashboard မွာဒီ(၃)ခုဘဲေပၚပါလိမ့္မည္.,,,,,,,,,,,,,,
New Post>– Edit Posts> – Settings အဲဒါေလးကိုမူရင္:လိုျဖစ္ေအာင္(admin)ေနာက္တစ္ခု Invite ထပ္
လုပ္ေပးပါ။ဥပမာေအာက္မွာျပထားပါတယ္၊
**
ပထမမူရင္း- kp3 kp3family@gmail.com admin ေပါ့ေနာ္
***
ဒါကေတာ့ Invite လုပ္တဲ့ဟာေလး kp3g kp3group@gmail.com

၆။ေနာက္တစ္ခု Invite ထပ္လုပ္ေပးျပီးသြားရင္ေအာက္ကအတိုင္းျဖစ္ပါလိမ့္မည္။လုပ္ရင္အရမ္းလြယ္ကူ
ပါတယ္စာနွင့္ေရလို႕ရွည္တာပါ။
**
ပထမမူရင္း- kp3 kp3family@gmail.com admin

ပထမInviteကဒီလိုေျပာင္းသြားတယ္ kp3g kp3group@gmail.com author -Grant admin privileges
***
ဒုတိယInviteကဥပမာ- kp3n kp3net@gmail.com ဒီလိုျပန္ေပၚတာေပါ့ေနာ္

၇။ author -Grant admin privileges ကိုႏိုပ္လိုက္ရင္ Grant admin privileges>>>>>Cancelဆိုျပီးတက္လာ
လိမ့္မည္၊ Grant admin privileges နိုပ္လိုက္ပါ။ႏိုပ္ျပီးသြားရင္ေအာက္ကအတိုင္းေပၚလာလိမ့္မည္။

kp3 kp3family@gmail.com admin -Revoke admin privileges----------------remove

kp3g kp3group@gmail.com admin -Revoke admin privileges----------------remove

မူရင္းႏွင့္မိမိ Invite လုပ္ထားတာႏွစ္ခုစလံုးတူသြားပါျပီ။

၈။မိမိရဲအေဟာင္းကို Remove လုပ္လိုက္လို႕ရပါျပီ၊မိမိရဲ႕ဘေလာ့Accountအသစ္ႏွင့္ျပန္ၾကည့္ရင္နံပါတ္
(၅)အတိုင္းမဟုတ္ေတာ့ဘဲထံုးစံတိုင္းဘေလာ့Dashboard မွာမူးရင္အျဖစ္ေျပာင္းလဲသြားပါျပီး၊

New Post>>– Edit Posts>> – Settings >>>– Layout>> – Monetize

မိမိရဲ႕ဘေလာ့ဝင္တဲ့ Account အေဟာင္းလည္းသံုးခ်င္ရင္လည္းရတယ္၊မသံုးေတာ့ဘူးဆိုရင္ Remove
လုပ္လိုက္ေပါ့ေနာ္။

အဆင္မေျပရင္အေၾကာင္းၾကားေပးပါလို.ေမတၱာရပ္ခံပါတယ္။

မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစျခင္ပါတယ္၊
ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု

kp3နည္းပညာ၊၁ဝ၇၊မိမိရဲ႕ဝက္ဆိုက္ႏွင့္ဘေလာ့Loading Time ၾကညခ်င္ရင္

ဒါေလးကေတာ့မိမိရဲ႕ဝက္ဆိုက္ႏွင့္ဘေလာ့Loading Time ကိုဘယ္ေလာက္ၾကာတယ္၊
စကၠန္႕ၾကာတယ္ဆိုတယ္ၾကည့္လို႕ရတဲ့ဆိုက္ေလးပါ။သြားစမ္းၾကည့္ၾကေပါ့ေနာ္၊မိမိဘေလာ့
ဝက္ဆိုက္Loading Timeသိသြားတာေပါ့။


လင့္ခ္ကေတာ့ေအာက္က iwebtool togo ေပၚမွာရိွပါတယ္,


မိမိၾကည့္ခ်င္သည့္ဝက္ဆိုက္လင့္ခ္ေလးေရးလိုက္ရုံပါဘဲ။

မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစျခင္ပါတယ္၊
ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု

kp3နည္းပညာ၊၁ဝ၆၊မိမိရဲ႕ဘေလာ့မွာMulti tab Widgetထည္႔ ခ်င္ရင္

က်ေနာ္အခုတင္တာေလးကေတာ့Multi tab Widgetဘေလာ့အတြက္အသံုးလိုသလိုဘေလာ့ေလးက
ပိုျပီးလွပသြားတာေပါ့ေနာ္။Code ကေတာ့အရမ္းကိုရွင္းပါတယ္၊ေအာက္မွာပံုနဲ႕တကြCodeရိွပါတယ္။

DEMO

၁။dashboard

၂။layout

၃။add a page element

၄။html/javascript

  <style type="text/css">
    div.TabTampil div.TTs
    {height: 24px; overflow: hidden; }
    div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active
    { background-color: #0084ce; }
    div.TabTampil div.Halamans
    { clear: both; border: 1px solid #0084ce; overflow: hidden; background-color: #ffffff;}
    div.TabTampil div.Halamans div.Halaman
    { height: 100%; padding: 0px; overflow: hidden; }
    div.TabTampil div.Halamans div.Halaman div.Alas
    { padding: 3px 5px; }
    div.TabTampil div.TTs a
    { border-left:1px solid #0084ce; border-right:1px solid #0084ce; border-top:1px solid #0084ce; border-bottom:0px solid#0084ce; float: left;
    display: block; width: 79px; text-align: center; vertical-align: middle; height: 24px; padding-top: 3px; text-decoration: none; font-family: "Arial", Serif;
    font-size: 11px; font-weight: 900; color: #000000}
    </style>

    <form action="tabtampil.html" method="get">
    <div id="TabTampil" class="TabTampil">
    <div style="width: 300px;" class="TTs"> <a>ဤေနရာမွာTab-1နာမည္ေရးပါ</a> <a>ဤေနရာမွာTab-2နာမည္ေရးပါ</a>

    <a>ဤေနရာမွာTab-3နာမည္ေရးပါ</a></div>
    <div style="width: 300px; height: 310px;" class="Halamans">

    <div class="Halaman">
    <div class="Alas">

 ဤေနရာမွာTab-1 Code ထည့္ပါ

    </div>
    </div>

    <div class="Halaman">
    <div class="Alas">

   ဤေနရာမွာTab-2Codeထည့္ပါ

    </div>
    </div>

    <div class="Halaman">
    <div class="Alas">

    ဤေနရာမွာTab-3Codeထည့္ပါ
   

    </div>

    </div>
    </div>

    </div></form>

    <script style="text/javascript" src="http://sites.google.com/site/tntbystc/Home/tabwidget-smart.txt?attredirects=0"></script>
    <script type="text/javascript">tabtampil_inisial('TabTampil');</script>

မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစျခင္ပါတယ္၊
ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု

kp3နည္းပညာ၊၁ဝ၅၊Gmail ရဲ႕Import အသံုးဝင္ပံုေလး

ဘေလာ့ဂါဘဲဆိုရင္ပ်င္းစရာေကာင္းလို႕နည္းနည္းေလးသိသေလာက္Gmail ဘက္လည့္ၾကည့္ၾကရေအာင္ေနာ္၊
ဟီးဟီး....,Gmail ရဲ႕Import အသံုးဝင္ပံုေလးပါ၊ဘေလာ့Importႏွင့္Exportကေတာ့kp3နည္းပညာ၊၆၅၊မွာ
ရွိပါတယ္။သိျပီးၾကတဲ့မိတ္ေဆြေတြလည္းမ်ားမယ္ထင္ပါတယ္၊တင္ထားတဲ့ဆိုက္လည္းရွိရင္လည္းရွိမွာပါ၊ မသိၾကေသးတဲ့မိတ္ေဆြေတြအတြက္ပါ၊လက္ရွိက်ေနာ္လည္းသံုးေနပါတယ္၊က်ေနာ္တို႕ အီးေမးလ္လိပ္စားေတြကို၃-၄ခုေလာက္ရွိရင္တစ္ခုျပီးတစ္ခုဖြင့္ဖို႕ဆိုတာမလြယ္ပါဘူး၊ အခ်ိန္လည္ကုန္တယ္၊ဒါေၾကာင့္မိမိဖြင့္ေနၾကေမးလ္ထဲမွာဘဲမိမိမွာသံုးထားတဲ့ ဥပမာ- Yohoo>>Hotmail>>AOL Email အားလုံးကိုတစ္ေနရာမွာဘဲေရာက္လာတဲ့စာေတြကိုဖတ္လို႕ရသလိုတစ္ေနရာထဲမွာမိမိၾကိဳက္တဲ့Accounts ကိုေ႐ြးျပီးစာပို႕လို႕ရေအာင္လုပ္တဲ့နည္းေလးပါ။ေအာက္မွာပံုနဲ႕တကြျပထားပါတယ္
ေအာက္မွာျပထားသည့္ပံုအတိုင္းImport mail and contactsကိုႏိုပ္လိုက္ရင္ window ေလးတက္လာျပီးမိမိImportလုပ္ခ်င္သည့္အီးေမးလ္လိပ္စာနွင့္Password:ကိုထည့္ေပးလိုက္ပါ။



ဥပမာ- Yahoo>>Hotmail>>AOL Emailေပါ့ေနာ္




မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစျခင္ပါတယ္၊ ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု

kp3နည္းပညာ၊၁ဝ၄၊ဘေလာ့ရဲ႕ mouse pointer(cursor)မွာမိမိႏွစ္သက္တဲ့ပံုေလးေတြ ထည့္နည္း

ဒါေလးကေတာ့အေရးေတာ့မၾကီးပါဘူး၊ဘေလာ့ရဲ႕ mouse pointer(cursor)မွာမိမိႏွစ္သက္တဲ့ပံုေလးေတြ
ထည့္နည္းေလးပါ။ဘေလာ့ေတာ္ေတာ္မ်ားမ်ားမွာလည္းေတြ႕ဖူးပါတယ္၊မၽွေဝတဲ့ဘေလာ့ရိွလားေတာ့မသိဘူး။
မေတြ႕ဖူးလို႕လိုခ်င္တဲ့မိ္တ္ေဆြေတြရွိခဲ့ရင္သံုးလို႕ရေအာင္ပါ။ေအာက္မွာပံုနဲ႕တကြ Code




၁။ Layout

၂။Edit Html

၃။ေအာက္ကCode ကိုရွာပါ၊(Ctrl+F)

<head> 

နွင့္

<head> 

ၾကားမွာေအာက္က Code ကိုထည့္လိုက္ပါ။

<style>HTML,BODY{cursor:url(http://s5.tinypic.com/dgksyf_th.jpg), default;}</style>

(http://s5.tinypic.com/dgksyf_th.jpg)ဒါကေတာ့အခုက်ေနာ္သံုးတဲ့လင့္ခ္ေလးပါ။

ၾကိဳက္ႏွစ္သက္သလို Mouse pointer ပံုေျပာင္းလို႕ရပါတယ္။

မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစျခင္ပါတယ္၊ ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု

kp3နည္းပညာ၊၁ဝ၃၊မိမိရဲ႕Postေတြကိုေတြစလံုးအၾကီးအေသးေျပာင္းလို႕ ရတဲ့ Code

ဒါေလးကေတာ့အားလံုးၾကိဳက္ၾကမယ္လို႕လည္းေမ်ာ္လင့္ပါတယ္၊မိမိရဲ႕ဘေလာ့ကိုလာအားေပးၾကတဲ့
သူငယ္ခ်င္းေတြကသူတိုအတြက္သင့္ေတာ္သလို၊မိမိရဲ႕Postေတြကိုေတြစလံုးအၾကီးအေသးေျပာင္းလို႕
ရတဲ့ Code ေလးပါ။ေအာက္မွာနမူနာနဲ႕တကြ Code ေပးထားပါတယ္။

၁။dashboard>>>>>

၂။layout>>>>>

၃။add a page element>>>>>

၄။html/javascript>>>>>

    စာလံုးေျပာင္းရန္<br/>
    <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='.5em'"><span >အေသး</span></a>
    <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1em'"><span >ပံုမွန္</span></a>
    <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='1.5em'"><span >+ၾကီး</span></a>
    <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2em'"><span >++ၾကီး</span></a>
    <a href="javascript:void(0);" onclick="javascript:body.style.fontSize='2.5em'"><span >+++ၾကီး</span></a>

စာလံုးေျပာင္းရန္

အေသး
ပံုမွန္
+ၾကီး
++ၾကီး
+++ၾကီး


၅။Save ႏိုပ္လိုက္ပါ။ျပီးပါျပီ။။

မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစျခင္ပါတယ္၊
ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု

kp3နည္းပညာ၊၁ဝ၂၊မိမိဘေလာ့မွာFacebook Share Button ေလးထည့္နည္း

ဒါေလးကေတာ့ မိမိဘေလာ့မွာFacebook Share Button ေလးထည့္နည္းပါ။စိတ္ဝင္စားရင္ေတာ့
ေအာက္မွာပံုနဲ႕တကြ Code ,ဒီFacebook Share Button ထည့္နည္းကႏွစ္မ်ိဳးရိွပါတယ္၊တစ္ခုက
Fackbook badge ပါ၊ kp3နည္းပညာ၊၈၇၊ မွာရိွပါတယ္၊
ကိုမိမိရဲ႕ Fackbook Account အရင္ဝင္ရပါတယ္။ေအာက္မွာျပထားေပးပါတယ္။
အားလံုးနားလည္ေအာင္က်ေနာ္ဘေလည့မွာလည္းFacebook Share Buttonေလးထည့္ထားပါတယ္။

၁။

၂။


၃။

၄။

၅။



ေအာက္က Code ကိုရွာပါ။

<data:post.body/>

ေတြ႕ျပီဆိုရင္အေပၚမွာေအာက္က Code ကိုထည့္လိုက္ပါ။

<!-- FACEBOOK SHARE BUTTON -->
<b:if cond='data:blog.pageType == "item"'>
<div style='float:right; margin-left:10px;'>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<b:else/>
<div style='float:right; margin-left:10px;'>
<a href='http://www.facebook.com/sharer.php' name='fb_share' type='button_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
</b:if>
<!-- FACEBOOK SHARE BUTTON -->

၆။Save Template ကိုႏိုပ္ပါ။ျပီးပါျပီ။။

မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစျခင္ပါတယ္၊
ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု

kp3နည္းပညာ၊၁ဝ၁၊Free Domain

နည္းပညာ၊၁ဝ၁၊ကေတာ့kp3မိသားစုအခမဲ့ဝန္ေဆာင္မူလုပ္ေပးေနပါတယ္...ဟီးဟီးဟီး.

ဘာလဲဆိုရင္ Domain အသစ္ပါေလးပါ၊မသိၾကေသးတဲ့မိတ္ေဆြေတြႏွင့္လိုခ်င္တဲ့မိတ္ေဆြေတြရွိခဲ့ရင္ပါ၊
ဥပမာ-http://kp3family.tk ေပါ့ေနာ္ တိုတိုေလးပါဘဲ၊co.ccထက္လည္းတိုတယ္၊
tk က loading ျမန္ပါတယ္ co.cc က connection မေကာင္းရင္မိမိရဲ႕ဆိုက္ကလံုးဝဖြင့္လို႕အရပါဘူး။
tkကေတာ့က်ေနာ္တို႕blog loading နွင့္အတူတူပါဘဲ၊
ေအာက္မွာဥပမာလင့္ခ္ေတြလည္းေပးထားပါတယ္။ http://kp3family.tk/ အဲဒီပံုစံစိတ္ဝင္စားရင္
kp3နည္းပညာ၊၁ဝ၁၊မွာ comment ထားခဲ့ပါ၊ဒါမွမဟုတ္ C-Box မွာလည္းရပါတယ္။
မိမိရဲ႕မူရင္းဘေလာ့နာမည္ဘဲျပန္သံုးခ်င္လား၊ဒါမွမဟုတ္အေရွ႕မွာထပ္ထည့္ခ်င္လား
အေနာက္မွာထပ္ထည့္ခ်င္လားေပါ့ေနာ္၊ ဥပမာ-http://kp3familynet.tk ဒီပံုစံေပါ့ေနာ္။
မိတ္ေဆြတို႕ရဲ႕ဘေလာ့လင့္ခ္ blogspot.com ေနရာ kp3family.tk (tk)အစားထုိးခ်င္ရင္
ဘေလာ့လင့္ခ္ေလးထားခဲ့လိုက္ေပါ့ေနာ္၊ co.cc လိုပါဘဲမိမိရဲ႕မူရင္ blogspot.com နွင့္လည္းဖြင့္လို႕ရပါတယ္။
ေျပာမွားဆိုမွားတာေလးေတြရွိရင္ခြင့္လြတ္ေပးၾကမယ္လို႕ေမ်ာ္လင့္ပါတယ္။

ဥပမာလင့္ခ္မ်ားေအာက္မွာ

၁။http://kp3family.blogspot.com/
၂။http://kp3family.co.cc/
၃။http://kp3family.tk/
၄။http://kp3familynet.tk/


မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစျခင္ပါတယ္၊

ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု

kp3နည္းပညာ၊၁ဝဝ၊မိမိရဲ႕ဘေလာ့ Label ကို Header ေအာက္မွာထားနည္း Wobbling 3D Carousel effect

kp3နည္းပညာ(၁ဝဝ)လာပါျပီဗ်ာ၊ရွားရွားပါးပါးလို႕ေျပာလို႕ရပါတယ္၊က်ေနာ္ေရာက္ဖူးတဲ့
ဘေလာ့ေတာ္ေတာ္မ်ားမ်ားမွာလည္းမျမင္ဖူးဘူးလို႕ေျပာရင္လည္းရမယ္ထင္ပါတယ္၊ဒါေလး
ကေတာ့တကယ္လွပါတယ္၊မိမိရဲ႕ဘေလာ့ Label ကို Header ေအာက္မွာထားနည္းလို႕ေျပာ
ရင္လည္းရမယ္ထင္ပါတယ္။Tab cloud နွင့္နည္းနည္းတူသလိုပါဘဲ၊ဒါေပမယ့္အခုဟာေလး
ကေတာ့ ဝိုင္းဝိုင္းေလးလည္ပတ္ျပီသြားတယ္Wobbling 3D Carousel effect လို႕ေခၚပါတယ္၊
Label နံပါတ္ေတြေပၚေစျခင္ရင္Show number of posts per label လို႕ေပးထားသည့္အကြက္
ေလးကိုအမွန္ျခစ္ေပးလိုက္ရုံပါဘဲ။Label နံပါတ္မေပၚေစျခင္ရင္ေတာ့အကြက္ေလးကိုအမွန္မျခစ္
နဲ႔ေပါ့၊Horizontal menu စတိုင္းေလးလိုေျပာင္းလို့ရပါတယ္။ေအာက္မွာလုပ္နည္းနဲ႕တကြပံုေတြ
ျပထားေပးပါတယ္။က်ေနာ့္ဘေလာ့မွာလည္းေတြ႕ၾကမွာပါ။









၁။ LAYOUT>>> ၂။Edit HTML ႏိုပ္ပါ>>>

အဆင့္။၁။

ေအာက္က Code ကိုရွာပါ။(Ctrl+F)

]]></b:skin>

ေတြ႕ျပီဆိုုရင္အေပၚမွာေအာက္ကCode ကိုထည့္လိုက္ပါ၊

#item{
width:100px;
height:100px;
margin:0 auto;
position: relative;
}
#item ul{
list-style:none;
}

အဆင့္။၂။

ေအာက္က Code ကိုထပ္ရွာပါ။

<div id='content-wrapper'>

ေတြ႕ျပီဆိုုရင္ေအာက္မွာ ေအာက္ကCode ကိုထပ္ထည့္ေပးလိုက္ပါ၊၊

<div id='tag-wrap'>
<b:section class='tag-wrap' id='tag-wrapper' preferred='yes' showaddelement='no'>
<b:widget id='Label6' locked='true' title='Carousel' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<b:if cond='data:display == &quot;list&quot;'>
<div id='item'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
</div>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

အဆင့္။၃။ေနာက္ဆံုအဆင့္

ေအာက္က Code ကိုရွာပါ။

</body>

tag ေတြ႕ျပီဆိုုရင္ေအာက္မွာ ေအာက္ကCode ကိုထပ္ထည့္ေပးလိုက္ပါ၊၊

<script src='http://coolwebbies.googlepages.com/jquery-1.3.2.min.js' type='text/javascript'/>
<script charset='utf-8' src='http://coolwebbies.googlepages.com/3DEngine.js' type='text/javascript'/>
<script charset='utf-8' src='http://coolwebbies.googlepages.com/Ring.js' type='text/javascript'/>


<script type='text/javascript'>
//<![CDATA[

$(document).ready(function() {

var camera = new Camera3D();
camera.init(0,0,0,300);

var container = $("#item");

var item = new Object3D(container);

item.addChild(new Ring(200, $("#item ul li").length));

var scene = new Scene3D();
scene.addToScene(item);


var mouseX,mouseY = 0;
var offsetX = $("#item").offset().left;
var offsetY = $("#item").offset().top;
var speed = 6000;

$().mousemove(function(e){
mouseX = e.clientX - offsetX - (container.width() / 2);
mouseY = e.clientY - offsetY - (container.height() / 2);
});

axisRotation.x = 1.5;

var animateIt = function(){
if (mouseX != undefined){
axisRotation.y += (mouseX) / speed;
}

scene.renderCamera(camera);

};


setInterval(animateIt, 20);


});
//]]>
</script>

၃။Save Template ကိုႏိုပ္ပါ။ျပီးပါျပီ။။။

မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစျခင္ပါတယ္၊ ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု

kp3နည္းပညာ၊၉၉၊မိမိရဲ႕ဘေလာ့ Sidebar လင့္ခ္ေတြရဲ႕အေရွ႕မွာေပၚတဲ့ Icons ပံုေလးထားခ်င္ရင္

ဒါေလးကေတာ့မိမိရဲ႕ဘေလာ့ Sidebar လင့္ခ္ေတြရဲ႕အေရွ႕မွာေပၚတဲ့ Icons ပံုေလးေတြကို မိမိႀကိဳက္
ႏွစ္သက္သည့္ပံုထားခ်င္ရင္ပါ။တခ်ိဳ႕ Template မွာေတာ့ Icons ပံုေတြ Autoရိွပါတယ္၊တခ်ိဳ႕ၾကေတာ့
မပါဘူးေပါ့ေနာ္။Auto ရွိျပီးသား Icons ေတြလည္းေျပာင္းခ်င္ရင္ေအာက္မွာေျပာင္းနည္းေလးပါ။

၁။ LAYOUT>>>

၂။Edit HTML ႏိုပ္ပါ>>>

ေအာက္ကျပထားဒါေလးအတိုင္းစရွာပါ။

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding:0 0 .25em 15px;
text-indent:-15px;
line-height:1.5em;
}

ေတြ႕ျပီဆိုရင္ေအာက္ကေပးထားဒါေလးနဲ႕အစားထိုးေပးလိုက္ပါ။

.sidebar ul {
list-style:none;
margin:0 0 1.25em;
padding:0 0px;
}

.sidebar ul li {
background:url("ဤေနရာမွာမိမိရဲ႕Icon or  image လင့္ခ္ထည့္ပါ") no-repeat 2px .25em;
margin:0;
padding:0 0 3px 16px;
margin-bottom:3px;
border-bottom:1px dotted $bordercolor;
line-height:1.4em;
}

၃။Save Template ကိုႏိုပ္ပါ။ျပီးပါျပီ။။။

မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစျခင္ပါတယ္၊

ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု

kp3နည္းပညာ၊၉၈၊Pop Up Navigation Menu From Bucket

ဒါေလးကေတာ့ဘယ္လိုေခၚမွာလဲဆ္ိုရင္ေတာ့Pop Up Navigation Menu From Bucketေပါ့ေနာ္၊
က်ေနာ္တို႕ရဲ႕ႏွစ္သက္သည့္လင့္ခ္အခ်ိဳ႕ကိုေအာက္ပံုအတိုင္းျခင္းေလးထဲမွာထည့္ထားျခင္ရင္ေပါ့
ေအာက္ကျခင္းပံုကိုႏိုပ္လိုက္ရင္၊က်ေနာ္တုိ႕လင့္ခ္ေတြကိုအေပၚဘက္ကိုတက္လာတယ္။က်ေနာ္
အားလံုးပိုျပီးနားလည္ေအာင္ DEMO လင့္ခ္ေပးထားပါတယ္။မိမိရဲ႕ဘေလာ့ပိုျပီးလွပသြားမယ္လို႕
ေတာ့ထင္တာဘဲ...ဟီး




DEMO

ပထမအဆင့္

၁။dashboard>>>>>

၂။layout>>>>>

၃။add a page element>>>>>

၄။html/javascript>>>>>

ေအာက္က Code ေတြကိုထည့္လိုက္ပါ။လင့္ခ္ထည့္မည့္ေနရာေတြမေျပာေတာ့ဘူးေနာ္၊
အားလံုးသိၾကျပီးသားထင္ပါတယ္။

<div class="stack">
<img alt="stack" src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/stack.png" ilo-full-src="http://nettuts.s3.amazonaws.com/358_jquery/images/stacks/stack.png"/>
<ul id="stack">
<li><a href=""><span>Aperture</span><img alt="Aperature" src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/adobeAcrobat.png" ilo-full-src="http://nettuts.s3.amazonaws.com/358_jquery/images/stacks/aperture.png"/></a></li>
<li><a href="#"><span>All Examples</span><img alt="Photoshop" src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/aperture.png" ilo-full-src="http://nettuts.s3.amazonaws.com/358_jquery/images/stacks/photoshop.png"/></a></li>
<li><a href="example3.html"><span>Example 3</span><img alt="Safari" src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/safari.png" ilo-full-src="http://nettuts.s3.amazonaws.com/358_jquery/images/stacks/safari.png"/></a></li>
<li><a href="example2.html"><span>Example 2</span><img alt="Coda" src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/finder.png" ilo-full-src="http://nettuts.s3.amazonaws.com/358_jquery/images/stacks/coda.png"/></a></li>
<li><a href="index.html"><span>Example 1</span><img alt="Finder" src="http://nettuts.s3.amazonaws.com/358_jquery/example%20files/images/dock/rss.png" ilo-full-src="http://nettuts.s3.amazonaws.com/358_jquery/example%20files/images/dock/rss.png"/></a></li>
</ul>
</div><!-- end div .stack -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://files-teckzest.bravehost.com/fisheye-iutil.min.js" type="text/javascript"></script>

ဒုတိယအဆင့္

၁။ LAYOUT>>>

၂။Edit HTML ႏိုပ္ပါ>>>

၃။Expand Widget Templatesကိုမွန္ုျခစ္ပါ>>>

၄။Ctrl+F နဲ႔ေအာက္က Code ကိုရွာပါ။

]]></b:skin>

ေတြ႕ျပီဆိုရင္အေပၚမွာေအာက္ကCodeေတြကိုထည့္လိုက္ပါ။

.stack { position: fixed; bottom: 28px; right: 40px; }
.stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; }
.stack ul { list-style: none; position: absolute; top: 5px; cursor: pointer; z-index: 1; }
.stack ul li { position: absolute; }
.stack ul li img { border: 0; }
.stack ul li span { display: none; }
.stack .openStack li span {
font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
display:block;
height: 14px;
position:absolute;
top: 17px;
right:60px;
line-height: 14px;
border: 0;
background-color:#000;
padding: 3px 10px;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
color: #fcfcfc;
text-align: center;
text-shadow: #000 1px 1px 1px;
opacity: .85;
filter: alpha(opacity = 85);
}

/* IE Fixes */
.stack { _position: absolute; }
.stack ul { _z-index:-1; _top:-15px; }
.stack ul li { *right:5px; }

၅။Save Template ကိုႏိုပ္ပါ။ျပီးပါျပီ။။။

မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစျခင္ပါတယ္၊
ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု

kp3နည္းပညာ၊၉၇၊မိမိရဲ႕ဘေလာ့မွာ Google Search Engine စတိုင္ေလးသံုးခ်င္

မိမိရဲ႕ဘေလာ့မွာ Google Search Engine စတိုင္ေလးသံုးျခင္ရင္ေပါ့ေနာ္၊ေအာက္မွာနမူနာ
ပံုႏွင့္တကြ Code

<form id="searchThis" action="/search" style="display: inline;"
method="get"><input id="searchBox" style="width: 200px;"
value="မိမိေရးလိုသည့္စာဒီေနရာမွာေရးပါ...." name="q" onclick="this.value=''"
type="text"/><input id="searchButton" value="Search!" type="submit"/>
</form>

မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစျခင္ပါတယ္၊

ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု

kp3နည္းပညာ၊၉၆၊ါYouTube သီခ်င္းေတြကို Mp3ျဖင့္တစ္ခါတည္း Download ခ်ခ်င္ရင္

ဒါေလးကေတာ့လမ္းမွာေတြ႕လို႕ေကာက္လိုက္တာပါ၊သံုးလို႕ေကာင္းတာနဲ႕လိုျခင္တဲ့မိတ္ေဆြ
ေတြရွိခဲ့ရင္ယူသံုးလို႕ရေအာင္ပါ၊အခမဲ့ softwareေလးပါYouTube သီခ်င္းေတြကို Mp3ျဖင့္တစ္
ခါတည္း Download ခ်ျခင္ရင္ေပါ့ေနာ္(YouTube to MP3 Converter)လို႕ေခၚပါတယ္။ၾကိဳက္
ရင္ေတာ့ယူၾကေပါ့ေနာ္၊





မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစျခင္ပါတယ္၊

ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု

kp3နည္းပညာ၊၉၅၊မိမိရဲ႕ဘေလာ့မွာ Twitter Icon ေလးထားခ်င္ရင္

ဒါေလးၾကေတာ့မိမိရဲ႕ဘေလာ့မွာ Twitter Icon ေလးထားျခင္ရင္ေပါ့ေနာ္အေရးေတာ့မၾကီး
ပါဘူး၊အားလံုနားလည္ေအာင္လည္းေအာက္မွာပံုနဲ႕ျပထားျပီးက်ေနာ္ကိုယ္တိုင္လည္းသံုးတယ္။

<br/><a style="display:scroll;position:fixed;bottom:200px;left:1px;" href="http://www.twitter.com/kp3family" target="_blank"><img style="border:0;" src="http://i30.tinypic.com/oizneb.jpg"/></a>
အနီေရာင္ျပထားသည့္ kp3family ေနရာမွာမိမိရဲ႕Twitter နာမည္ေလးထည့္ေပးလိုက္ပါ။မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစျခင္ပါတယ္၊ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု

kp3နည္းပညာ၊၉၄၊ဆိုက္ဘားႏွစ္ခုမွာfooster မွာ 3 columnထည္႔နည္း

ဒါေလးကေတာ့ Cbox ထဲကဘေလာဂါ ့မိတ္ေဆြတစ္ေယာက္ေတာင္းဆိုထားတာေလးပါ၊
ေအာက္ကေကာ္လန္သံုးခုခြဲထည့္တာေလးပါ၊ kp3နည္းပညာ၊၅ဝ၊ မွာရိွပါတယ္၊ေအာက္ပံု



အကယ္၍ဆိုက္ဘားႏွစ္ခုဆိုရင္ေအာက္ကျပထားသည့္ Codeကိုရွာေတြ႔မွာမဟုတ္ပါဘူး၊

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

ဆိုက္ဘားႏွစ္ခုမွာေအာက္ကျပထားသည့္ Code ကိုရွာပါ၊

</div> <!-- end content-wrapper -->
<div class='footer'>,
<div class='right_footer'>

ေတြ႕ျပီဆိုရင္ေအာက္ကcodeအတိုင္းေပါ႔

</div> <!-- end content-wrapper -->ေအာက္က Code
<div class='footer'>,
<div class='right_footer'>ဒီနွစ္ခုေနရာမွာေအာက္က code နွင့္အစားထိ္ုးေပးလိုက္ပါ။

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

ထံုးစံတိုင္း

<b:section class='footer' id='footer'/>

ေနရာမွာ kp3နည္းပညာ၊၅ဝ၊ေပးထားသည့္အတိုင္းလုပ္လိုက္ပါ ။

မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစျခင္ပါတယ္၊

ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု

kp3နည္းပညာ၊၉၃၊HTML code ကို post မွာေနာက္ခံပံုႏွင့္ေပၚေအာင္လုပ္နည္း

ဒါေလးကေတာ့ HTML code ကို post မွာေနာက္ခံပံုႏွင့္ေပၚေအာင္လုပ္ျခင္ရင္ပါ။
အခုက်ေနာ္သံုးေနတာကေတာ့အျဖဴေရာင္ေနာက္ခံနွင့္ေတြ႕ၾကတဲ့အတိုင္းပါဘဲ၊ေအာက္မွာ Code view
ေလးနဲ႕သံုးမယ္ဆိုရင္လည္း၊သံုးတဲ့သူေတြမ်ားေနေတာ့မသံုးျခင္ဘူး။သူမ်ားေတြသံုးတာထက္ပိုျပီးတမူ
ထူးျခားေအာင္ေနာက္ခံပုံေလးႏွင့္ထည့္ျခင္ရင္ေတာ့ေအာက္မွာ DEMO လင့္ခ္ႏွင့္တကြ Code


၁။ Layout.

၂။Edit HTML

၃။Expand Widget Templatesမွန္ျခစ္ေပးပါ၊

၄။ေအာက္က Code ကိုရွာပါ။Ctrl+F ရွာရင္ျမန္ပါတယ္၊

]]></b:skin>

ေတြ႕ျပီဆိုရင္အေပၚမွာေအာက္က Code ကိုထည့္လိုက္ပါ၊ေအာက္ပံု

DEMO

pre
{
background: Url(ဤေနရာတြင္ပံုရဲ႕လင့္ခ္ကိုထည့္ပါ);
border:1px solid #A6B0BF;
font-size:120%;
line-height:100%;
overflow:auto;
padding:10px;
color:#000000 }
pre:hover {
border:1px solid #efefef;
}
code {
font-size:120%;
text-align:left;
margin:0;padding:0;
color: #000000;}
.clear { clear:both;
overflow:hidden;
}

၅။မိမိထည့္လိုသည့္ Code သိုမဟုတ္ စာမ်ားကိုေအာက္ပါျပထားသည့္အတိုင္းထည့္ေပးလိုက္ပါ။

<pre>
ဤေနရာတြင္Codeသို႕မဟုတ္္စာမ်ားထည့္ေပးပါ၊
</pre>

မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစျခင္ပါတယ္၊

ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု

pre
{
background: Url(http://YOUR_IMAGE_URL);
border:1px solid #A6B0BF;
font-size:120%;
line-height:100%;
overflow:auto;
padding:10px;
color:#000000 }
pre:hover {
border:1px solid #efefef;
}
code {
font-size:120%;
text-align:left;
margin:0;padding:0;
color: #000000;}
.clear { clear:both;
overflow:hidden;
}

kp3နည္းပညာ၊၉၂၊Floating Vertical Navigation Menu

အခ်ိန္မရလို႕အသစ္ေတြမတင္ျဖင့္တာၾကာသြားပါတယ္၊ဒါေၾကာင့္ဘယ္သူမွမသံုးဖူးတဲ့အသစ္
အဆန္းေလးFloating Vertical Navigation Menu လို႕ေခၚပါတယ္။ေရာက္ခဲ့ဖူးတဲ့ဘေလာ့ဂါ
မိတ္ေဆြေတြသံုးတာေတာ့့ျမင္ဖူးပါဘူး၊မေရာက္ဖူးတဲ့ေနရာေတြမွာသံုးတဲ့သူေတြလည္းရိွရင္လည္း
ရွိမွာပါ။ဒီFloating Vertical Navigation Menu ကသံုးရတာအရမ္းကိုအဆင္ေျပပါတယ္။သူက
side menu လိုဘဲအေပၚေအာက္ကို Auto အဆင္းအတက္လုပ္ပါတယ္၊ေအာက္မွာ Demo နဲ႕ပံု
DEMO

ပထမဆံုးCSSအပိုင္းကိုသြားျပီးေအာက္ကCodeကိုရွာပါ

]]></b:skin> 

ေတြ႕ျပီဆိုရင္အေပၚမွာေအာက္က Code ကိုထည့္ေပးလိုက္ပါ၊

#floatMenu {
    position:absolute;
    top:150px;
    left:50%;
    margin-left:235px;
    width:200px;
}
#floatMenu ul {
    margin-bottom:20px;
}
#floatMenu ul li a {
    display:block;
    border:1px solid #999;
    background-color:#222;
    border-left:6px solid #999;
    text-decoration:none;
    color:#ccc;
    padding:5px 5px 5px 25px;
}


    #floatMenu ul.menu1 li a:hover {
        border-color:#09f;
    }
    #floatMenu ul.menu2 li a:hover {
        border-color:#9f0;
    }
    #floatMenu ul.menu3 li a:hover {
        border-color:#f09;
    }

ဒုတိယအဆင့္ကေတာ့ေအာက္က Code

]]></b:skin> 

ေအာက္မွာ ေအာက္က Code ေတြကိုထပ္ထည့္ေပးလိုက္ပါ၊

<script language='javascript' src='http://files-teckzest.bravehost.com/jquery.js'/>
    <script language='javascript' src='http://files-teckzest.bravehost.com/jquery.dimensions.js'/>



    <script language='javascript'>
     $(document).ready(function(){
        // code will go here
    }); 
 
    $(document).ready(function(){
        $(window).scroll(function () { 
            // code will go here
        });
    }); 
    var name = &quot;#floatMenu&quot;;
    var menuYloc = null;
 
    $(document).ready(function(){
        menuYloc = parseInt($(name).css(&quot;top&quot;).substring(0,$(name).css(&quot;top&quot;).indexOf(&quot;px&quot;)))
        $(window).scroll(function () { 
            // code will go here
        });
    }); 
    var name = &quot;#floatMenu&quot;;
    var menuYloc = null;
 
    $(document).ready(function(){
        menuYloc = parseInt($(name).css(&quot;top&quot;).substring(0,$(name).css(&quot;top&quot;).indexOf(&quot;px&quot;)))
        $(window).scroll(function () { 
            var offset = menuYloc+$(document).scrollTop()+&quot;px&quot;;
            $(name).animate({top:offset},{duration:500,queue:false});
        });
    }); 

    </script>

ေနာက္ဆံုးအဆင့္ကေတာ့ dashboard>>>>>layout>>>>>add a page element>>>>>html/javascript

<div id="floatMenu">
  <ul class="menu1">

    <li><a href="လင့္ခ္ထည့္ရန္#" onclick="return false;"> အမည္ထည့္ရန္ </a></li>
  </ul>
  <ul class="menu2">
    <li><a href="လင့္ခ္ထည့္ရန္#" onclick="return false;"> အမည္ထည့္ရန္ </a></li>
    <li><a href="လင့္ခ္ထည့္ရန္#" onclick="return false;">  အမည္ထည့္ရန္ </a></li>
    <li><a href="လင့္ခ္ထည့္ရန္#" onclick="return false;">  အမည္ထည့္ရန္ </a></li>

  </ul>
  <ul class="menu3">
    <li><a href="လင့္ခ္ထည့္ရန္#" onclick="return false;">  အမည္ထည့္ရန္ </a></li>
  </ul>
</div>

မိမိၾကိဳက္တဲ့ေနရာမွာထားလိုက္ေပါ့ေနာ္ ျပီးပါျပီ၊၊၊၊
မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစျခင္ပါတယ္၊ ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု

kp3နည္းပညာ၊၉၁၊Post တစ္ခုနွင့္တစ္ခုကိုပိုင္းျခားေပးတဲ့ မ်ဥ္းေၾကာင္းေလးထည့္ခ်င္ရင္

ဒါေလးကေတာ့အေရးမၾကီးဘူးဆိုေပမယ့္မိမိဘေလာ့ကိုပိုျပီးလွပေစသလိုပါဘဲ၊ Post တစ္ခု
နွင့္တစ္ခုကိုပိုင္းျခားေပးတဲ့မ်ဥ္းေၾကာင္းေလးေနရာမွာမိမိႏွစ္သက္သည့္ပံုသည္ျဖစ္ေစ ဘာညာ
ေကြ႕ကြေလးထားျခင္ရင္ေပါ့ေနာ္၊တခ်ိဳ႕ဘေလာ့မိတ္ေဆြေတြဆီမွာေတာ့ျမင္ဖူးပါတယ္။ျမန္မာ
စာမေရးတာၾကာျပီမို႕သိပ္အဆင္မေျပေတာ့အားလံုးနားလည္းေအာင္က်ေနာ္နမူနာသံုးျပထားပါတယ္၊
ေရးမွားေျပာမွားရွိရင္လည္းခြင့္လြတ္ၾကလိမ့္မယ္လို႕ေမ်ာ္လင္ပါတယ္။

ေအာက္မွာဥပမာပံုနဲ႕တကြလင့္ခ္ေတြျပထားပါတယ္၊

၁။ Layout.

၂။Edit HTML

ေအာက္မွာအတုိေကာက္ေလးျပထားေပးပါတယ္၊ css ေနရာမွာရွာပါ၊

.post

ေအာက္မွာျပထားပါတယ္

.post {
margin: 0 0 40px 0;
width: 90%
}

ေတြ႕ျပီဆိုရင္အေပၚကအဖြင့္အပိတ္ေလးၾကားမွာေအာက္ကseparator css ေလးေတြထည့္လိုက္ပါ၊

background: url(ဤေနရာမွာမိမိရဲ႕Separator-Image-Urlထည့္ပါ);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;

အနီေရာင္ႏွင့္အဝါေရာင္ကိုေျပာင္းလို႕ရပါတယ္၊ဥပမာ-3.5 (သို႕) 4.5 ေပါ့ေနာ္၊
ေအာက္ကပံုစံအတိုင္ျဖစ္သြားလိမ့္မည္။

.post{
margin: 0 0 40px 0;
width: 90%;
background: url(ဤေနရာမွာမိမိရဲ႕Separator-Image-Urlထည့္ပါ);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;
}

တခုေတာ့သိထားဖို႔လိုအပ္ပါတယ္ဘာလဲဆိုုေတာ့ Blogger Tamplate ဟာလည္းတစ္ခုႏွင့္တစ္ခုမတူပါဘူး။
က်ေနာ္သံုးတဲ့ Tamplate မွာျပထားသည့္အတိုင္းမဟုတ္ပါဘူး၊.post{ ေအာက္က

margin: 0 0 40px 0;
width: 90%

အေပၚက margin:ႏွင့္ width မပါ ဘူးပါ။က်ေနာ္background: url(http://www.imagehost.com/separator.jpg);
ေလးဘဲထပ္ထည့္ေပးလိုက္တာပါ၊

http://4.bp.blogspot.com/_JwD5r652h00/SuttjmoES2I/AAAAAAAAANw/bidxxyqfxww/s1600/barsnake.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvX1Noiy88v4Rw19UaF13ddtKkj8BUt58yxib5DqfZasxMVjKx3W8HpjWd78nrPxtCpRh-sKa1ExdMzkA9W_LOM4uW5wzEU3tYs3hOcwHQPJapJCceVdm9BNP7YM-7oZI9DuLyo-NQ7Cnq/s1600/bar54.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFLQsBlbx9ld9VTukV6Xu1-bXLyynbTKuSAZkl_FwyZ83m91ZPyw_q8yLqFO2X15XEsIoH61R5acpb2pLbrzzZLN31J05z1uG92e44J_cInsIARo7bEB-fwyurJrKqpV427yXnQeal0-8l/s1600/bar48.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFfOQaP3E0bThkVlbup4AiZvvcxRrlUJPcaMnMSAQShdd3RJfhNLMuqUoTrYPtirYCe0bz0488EMZH1sesaXWYHZ0MiapnPf1pZKukH1Q_ENX1J-iwdow3Yx71uxowX9KXCtU4OQ-Sm8ZA/s1600/bar47.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4aGRQyf6MUbCumpsEPRJqU1Xh9-5R4cg6bp_USrTmgy7K_L-fXQspSq1fr68WxIwh6a_nIPKzAo-ZQi-FMq_aQb0g5FNLq6_IPiyoj6vNLAk5h-QdR5Yr5DCuzGHOHiW11tZJQhIEJ-AO/s1600/astarl7s.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPmLW7FfZFo7BeSCmLU3GNapge2uqCedU7_Bzr92S1LxXijLch-xbl8KjJ-eII3ghfFmZXMs-XnIdkX7FvnLUMIMi0-NbDR7Oe9ZRE3lBGwH3i_JJpI1vNaJHTwjN9c9wo1AhA41B4iVS4/s1600/dividers_129.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRMElT7H9QFZNdEBx132-o7hKWlITGpdYbv9P7UYFJcH6d2aZY7cF6ZU-cUAE_Qd6XUK31nhKZ7LKdY65gJyl6V1zNmTCrQIX3LU3lZVyY1HcxPfChVG_3_cOtRqJ055vHD5q4ZUN0fRPg/s1600/dividers_96.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAyg8YFEBrlznds8vejYr13MegH2Dg6rsF-BFqF1EJDn-EIHhtkfkjWVPfrrUUjfPev_F7wDRIuMSGtAuyG5DyPhCPHK2RUVBkxXt5KIRlgl_Xzyl1VtF1ICmSuOzAu5wxA9B4jPO6J7Mj/s1600/clipart-heart-border.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIRMH0p43_l7GqULwOSn6NMCLZwPYcq3738bK1HPJwNNbW-rfY-1LGblUCJE3Ie9ltqvhoKfDk8uWNOvQ5FHarlBdMKjOCEzd4I7J_COFSWSURJ4hdJhHS2Di_F4_KxSG9QDHc9NPPpLAq/s1600/chain.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikufnl6yNmEtCQvhjHFr0B1bP9cnefgmqpkNEwuWhvZwwZg2MCTMvcwJSHJPG44C8-1qqIDC4rJTdrJBp-VJvThrX_4GATrM7cec53SeZwCeJTw__d0l8oAdfw7L5xXK9XJLmz94W8XnY3/s1600/bloodrose.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdn5ckCYfFTY2yQ88vVgOWs3c6203PiPhBZ_rvFdeVsCnnJxIF6PIC4a5kxPDO9169MDf_LfYRK53a96x8OfqSbGi9uJphBoQsu3Uhe5ORd0B0u07Ci9MhHqhthdF7qenwVgw93czljxeK/s1600/stonebar.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSxVleYD1HDqaABsN-fUufWL1EBPPBvAms2wLgjwuoLGPgLcjl1JaBRtHmJjR6YZqS7gjS_3ULa9W1WZ2XYcQ2uA5DXpFUqJa1crq06m8d8CY6A_vtqktX7O4t1M5CjluxXzVqgWHeKeyj/s1600/resfiles_sdfp.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfYVig3LH_ZFiUy0K8aHgNxbcEO7Oxezvr8IuxueTgXWu4MJeNM8Mar-oUiXkFxLRx-I4sx47hIaNF-l9EpZWLRJlU7jHJzAhk0_DT9dDakcBJpwcabIcxLoQdrR6Xxz5BInb0lHbAOpbw/s1600/resfiles_output.php.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiC2tShz1_2WNJVwdDgvZ06DjxjLs4yWVqldaRPZ5BdVPqhv9jSGFM3Sntsy_Cysdfwk974TNfcxDV4NOYuGqnEYf7UwGuZTCWWhtetT2Y7AIAiEbEmBTQ7IHKmrgPEJ8__xBMZODPja_G/s1600/pumpkin-border-hth.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuJKE0GC1ULw7a32tZ-SXiEhyphenhyphenM0OhwdJ-Wivw1_zNoJuE4gZXTQGA5Y_IvkxRlEHdVX3tDIPmUL53GXTyh5XVx6zmmo2I-Xjm3RGJH0CyLQk3Onqg2srGKrc-MiANJ2kpOQxwJ98TvV653/s1600/irish-border4.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje8sFfkiVFgmdSb4vh0PzYwn8tILOTMWTJC_4nd87WL2we9LDZfVDf5ll_w3ADSkmY07KRiPiaI8-PXrR2ImzxYBAmX2lQfcdVKCtr_6kQgypkR38yXBDYtW20WxqYTawid1c7WX1gWzYG/s1600/ivy.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKYnYwzlkJz_wUFs4Iz2Y-I5FgG66Da6xbY-giXfsod-NCMhh93lZu-p7M7VnTWM3Jzt9lEUlIzSliTa5tZgAxzkIY_m465NoqYksx7wrrSYnh7D8WX7UObep3vChMFSO9oGsipbsgR56r/s1600/irish-border1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGaWya16kEBSpIlaICgoiW97kPDlPePDkrOp3Q_MJUbX8xr-SvYXG3QIiNKAEnlso9MSbFko9CAfmPeqFYUGIJ54xuZo-bYNKSXAykIfgooTr3knvcRa8T9FP-yyc9W5ioIkOWaQPIECjk/s1600/frog54.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigVBDNAe5TpVq5c4BE1ti_fQQz-JefkVAug2MZDHKQAaEV-0GUrSOezDvslAZdHMtxoBoxja_eKgJ2sd5Ce8tcDhnYr4MrdvNGyjsgH9OmZTiZjkz1mjXH_Q7ry9hDFIsAV3lL8vIX08_K/s1600/flowerbar.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA0rPD9nFjqos09yvFZy4FG0k3TowOkgWutuzGOFUmtjO-Npvui2eVXWlmM2svZFlQTYRkFgB7VFH8qoUHAE9DhyTaVqZgXyXx0Pe_iaRgvdMwAUlBZzXyNVb9HgmaqVKM3jWMBweQ-P_7/s1600/drawing-separator.gif

ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု

kp3နည္းပညာ၊၉ဝ၊Email Subscrtiption Form

ဒီေန႕တင္တာေလးကေတာ့အခုဘေလာ့ဂါေလာကမွာေခတ္စားေနတဲ့Email Subscrtiption Form
ေလးပါ၊သိျပီးၾကတဲ့မိတ္ေဆြေတြလည္းမ်ားပါတယ္။တခ်ိဳ႕ဘေလာ့မွာလည္းျမင္ဖူးပါတယ္၊ဒါေပမယ့္
ဘေလာ့ေတာ္ေတာ္မ်ားမ်ားမွာေတာ့မေတြ႕လိုက္မိဘူး၊မၾကိဳက္ၾကလို႕လားေတာ့မသိပါဘူး၊သူမ်ား
ေတြထားသလိုထားျခင္ခဲ့သူေတြရိွခဲ့ရင္ပါ၊ဘေလာ့မိတ္ေဆြအားလံုးကိုလည္းေလးစားလၽွက္ပါ။
ေအာက္မွာအဆင့္ဆင့္ပံုနဲ႕တကြျပထားပါတယ္။

အီးေမးလ္ Subscription Form ကိုဘေလာ့မွာဘယ္လိုထည့္မွာလဲဆိုရင္ေအာက္ပံု




မိမိမွာ FeedBurner Account ရွိျပီးသားဆိုရင္၊တျခားသူေတြက subscribe လုပ္လိုုက္ရင္,
မိမိက Post အသစ္တင္လိုက္တိုင္းမွာသူတိုရဲ႕အီးေမးလ္ထဲကို Auto ေရာက္ေအာင္ပို႕ေပး
ပါတယ္။မိမိရဲ႕ဘေလာ့ကိုအျမဲလာဖတ္ၾကတဲ႕သူငယ္ခ်င္းေတြအတြက္ပါအဆင္ေျပတာေပါ့
ေနာ္၊၊၊


အဆင့္ ၁။FeedBurner accountထဲကို Sign in ဝင္လိုက္မယ္ေနာ္၊ သင့္မွာ FeedBurner Account မရိွေသးဘူးဆိုရင္အရင္ဆံုးregisterလုပ္ဖို႕ရန္ ဒီမွာ အရင္သြားပါ။


အဆင့္ ၂။My Feeds ကို Click ႏိုပ္လိုက္ပါေအာက္ပံု။ေအာက္မွာေပၚလာလိမ့္မည္မိမိရဲ႕ဘေလာ့နာမည္ ေလးကိုႏိုပ္လိုက္ပါ။




အဆင့္ ၃။မိမိရဲ႕ဘေလာ့နာမည္ေလးကိုႏိုပ္ျပီးရင္ Menu Tab က Publicize tab ကိုႏိုပ္လိုက္ပါ၊ ေအာက္ပံု




အဆင့္ ၄။ဆိုက္ဘားမွာျမင္ရပါလိမ့္မည္ Email Subscriptions ကိုႏိုပ္လိုက္ပါ၊ေအာက္ပံု




အဆင့္ ၅။ေအာက္ပံုအတိုင္းျမင္ရပါလိမ့္မည္။



အဆင့္ ၆။ေအာက္မွာ Code ေပၚလာလိမ့္မည္။ေအာက္ပံု



္အဆင့္ ၇။ေအာက္က Code ကို Copy လုပ္ျပီး၊မိမိရဲ႕ဘေလာ့ထဲကိုျပန္ဝင္မယ္

dashboard>>>>>layout>>>>>add a page element>>>>>html/javascript

မိမိၾကိဳက္တဲ့ေနရာမွာထားလိုက္ေပါ့ေနာ္ ျပီးပါျပီ၊၊၊၊

မသိေသးတဲ႔မိတ္ေဆြေတြကိုအသိေပးမ်ွေဝေစျခင္ပါတယ္၊

ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ kp3မိသားစု