kp3နည္းပညာ၊၁၃၁၊ဘေလာ့ Post မွာ Scrollbars အသံုးျပဳနည္း

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

Post အားလံုးကို Scroll လုပ္ခ်င္ရင္ေအာက္ကအတိုင္းသြားပါ။
၁။Layout

၂။Edit HTML

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

.post {

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

.post { height:200px; overflow:auto; }

၃။Save Template button.ႏိုပ္ပါ။။

ေနာက္တခုကေတာ့မိမိၾကိဳက္တဲ့ေနရာကေနScrollလုပ္မယ္ဆိုရင္ေတာ့

.post {

အေပၚမွာေအာက္က Code ကိုထည့္လိုက္ပါ၊က်ေနာ္နမူနာသံုးျပထားပါတယ္ေအာက္ကအတိုင္းပါ။

.scrollbox {
height:100px;
width:400px;
overflow:auto;
}

height:100px; မိမိၾကိဳက္သလိုျပန္ေျပာင္းလို႕ပါရတယ္။

width:400px; မိမိၾကိဳက္သလိုျပန္ေျပာင္းလို႕ပါရတယ္။

မိမိScrollလုပ္ခ်င္သည့္စာဘယ္မွာေ၇းမယ္ဆိုတာကိုေအာက္မွာပံုနဲ႕တကြ Code ေပးထားပါတယ္၊
<div class="scrollbox">ဤေန၇ာမွာစာေ၇းပါ</div>

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

kp3နည္းပညာ၊၁၃ဝ၊ဘေလာ့လင့္ခ္ေတြမွာ Multi-Color Effect ခ်င္ရင္

ဒီေန႕တင္မယ့္ POst ေလးကေတာ့ဘေလာ့လင့္ခ္ေတြမွာ Multi-Color Effect လို႕ေခၚတဲ့
ဘေလာ့လင့္ခ္ေတြကို Mouse နဲ႕ေထာက္ရင္အေရာင္ေတြအမ်ိဳးမ်ိးးေျပာင္းေအာင္ထည့္ျခင္တဲ့ဘေလာ့
မိတ္ေဆြေတြအတြက္ပါ၊ေအာက္မွာပံုနဲ႕တကြ Code ေပးထားပါတယ္။ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအ
စဥ္ျမဲေလးစားလၽွက္ kp3မိသားစု၊ဥပမာသြားၾကည့္လို႕ရေအာင္Demoလင့္ခ္ထည့္ေပးထားပါတယ္။


DEMO
၁။Layout

၂။Edit HTML

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

</head>

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

<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>

၃။Save Template button.ႏိုပ္ပါ။။

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

kp3နည္းပညာ၊၁၂၉၊ဘေလာ့ Post Title Font ကိုအၾကီးအေသးေျပာင္းနည္း

အခုတင္တဲ့ Post ေလးကေတာ့လိုအပ္ရင္ေတာ့အသံုးဝင္ပါတယ္၊မလိုအပ္ရင္ေတာ့အသံုးမဝင္
ဘူးေပါ့ေနာ္..ဟီး..ဘေလာ့ Post Title Font ကိုအၾကီးအေသးေျပာင္းနည္းေလးပါ၊က်ေနာ္လည္းအား
လံုးၾကည့္လို႕ရေအာင္အၾကီးနဲ႕နမူနာေျပာင္းသံုးထားပါတယ္။ေအာက္မွာေျပာင္းရမယ့္ေနရာေလးျပေပး
ထားပါတယ္။

၁။Layout

၂။Edit HTML

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

.post h3 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font- weight:normal;
  line-height:1.4em;
  color:$titlecolor;
}

၃။Save Template button.ႏိုပ္ပါ။။

ေတြျပီဆိုရင္ Font-size မိမိၾကိဳက္သလိုေျပာင္းေပးလိုက္ပါ,

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

kp3နည္းပညာ၊၁၂၈၊မိမိရဲ့ဘေလာ႔Header ပံုလုပ္ရန္အတၢက္ Xheader maker

http://download.cnet.com/3001-2191_4-10900367.html?spi=a65fe1e93753f8bbaba4b5cbdcfe0096&part=dl-10900367လာပါျပီဗ်ာဘေလာ့မိတ္ေဆြမ်ားအားလံုးၾကိဳက္ၾကမယ္လိုေတာ့ထင္ပါတယ္၊ရွယ္ဘဲဗ်ာ
Software ေလးတစ္ခုပါလမ္းမွာေတြ႕လို႕ေကာက္လာတာသံုးရတာလြယ္ကူတယ္ဆိုျပီးဘေလာ့
မိတ္ေဆြေတြအတြက္တဆင့္ျပန္တင္လိုက္တာပါ၊ဘာလဲဆိုေတာ့ Xheader maker လို႕ေခၚပါ
တယ္။မိမိရဲ႕ဘေလာ့ Header မွာထားခ်င္တဲ့ပံုေတြ၊စာေတြေပါ႕မိမိၾကိဳက္သလိုလုပ္ခ်င္ရင္ေတာ့
ေအာက္မွာ Software၊ပံုနဲ႕Demo youtube လင့္ခ္ပါထည့္ေပးထားပါတယ္။






အသံုးျပဳနည္းဒီမွာသြားၾကည့္ပါ၊ Demo youtube

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

ဒီPost ေလးကလည္းမိမိရဲ့ဘေလာ့လင့္ခ္ကို Google Search မွာရွာရလြယ္ေအာင္မိမိရဲ႕
ဘေလာ့လင့္ခ္ေလးကိုထည့္တဲ့ Google site ေလးပါ။လုပ္သင့္တာေလးေတြမို႕တင္ရျခင္းပါဘဲ၊
ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ပါလို႕ထပ္ခါတလဲလဲေျပာခ်င္ပါတယ္၊
ေအာက္မွာသြားရမယ့္လင့္ခ္ေလးေပးထားပါတယ္။လင့္ခ္ထဲဝင္ျပီးသြားရင္Your blog's address
ေရးထားတာေတြ႕ရလိမ့္မယ္မိမိရဲ့ဘေလာ့ URL လိပ္စာေလးေရးျပီး Submit blog button ေလး
ႏိုပ္လိုက္ပါ။ရိုးရိုးရွင္းရွင္းေလးပါ။ လင့္ခ္ကေတာ့ပံူေပၚမွာဘဲထားလိုက္တယ္
ဒီPost ေလးကလည္းမိမိရဲ့ဘေလာ့လင့္ခ္ကို Google Search မွာရွာရလြယ္ေအာင္မိမိရဲ႕
ဘေလာ့လင့္ခ္ေလးကိုထည့္တဲ့ Google site ေလးပါ။လုပ္သင့္တာေလးေတြမို႕တင္ရျခင္းပါဘဲ၊
ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ပါလို႕ထပ္ခါတလဲလဲေျပာခ်င္ပါတယ္၊
ေအာက္မွာသြားရမယ့္လင့္ခ္ေလးေပးထားပါတယ္။လင့္ခ္ထဲဝင္ျပီးသြားရင္Your blog's address
ေရးထားတာေတြ႕ရလိမ့္မယ္မိမိရဲ့ဘေလာ့ URL လိပ္စာေလးေရးျပီး Submit blog button ေလး
ႏိုပ္လိုက္ပါ။ရိုးရိုးရွင္းရွင္းေလးပါ။ လင့္ခ္ကေတာ့ပံူေပၚမွာဘဲထားလိုက္တယ္

မိမိရဲ႕ဘေလာ့ Post title ကိုစတိုင္သစ္ေလးနဲ႕လုပ္ၾကရေအာင္

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

<img src="ဤေနရာမွာမိမိရဲ႕Post Title ပံုလင့္ခ္ကိုထည့္ပါ" style="border-width: 0px;" />

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

kp3နည္းပညာ၊၁၂၆၊ဘေလာ့ေနာက္ခံမွာလြယ္ကူစြာပံုထည့္နည္း

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

၁။Layout

၂။Edit HTML

ေအာက္ကCodeကိုရွာပါ၊Press Ctrl + F

body {

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

background: url('ဤေနရာမွာမိမိရဲ႕ေနာက္ခံပံုလင့္ခ္ကိုထည့္ေပးပါ။IMAGE-URLေပါ့ေနာ္') fixed;

ဥပမာေအာက္ကအတိုင္းျဖစ္သြားတာေပါ့ေနာ္၊

body {
background: url('http://rpgwallpapers.com/wallpapers/luna-online-boy-and-dog-1280x960.jpg ') fixed;
margin:0px
auto 0px;
padding:0px;
color:$bodytextcolor;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
}

ေနာက္ခံအေရာင္ေျပာင္းခ်င္ရင္ေတာ့ေအာက္မွာ

body {
background:#ဤေနရာမွာHTML colour codeထည့္လိုက္ပါ;

ဥပမာေအာက္ကအတိုင္းျဖစ္သြားတာေပါ့ေနာ္၊

body {
background:#ffa22f
margin:0px
auto 0px;
padding:0px;
color:$bodytextcolor;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
}

၃။Save Template button.ႏိုပ္ပါ။။

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

kp3နည္းပညာ၊၁၂၅၊မိမိရဲ႕ဘေလာ့Footer Sectionမွာ 4-Columns ထည့္နည္းေလး

ဒါေလးကလည္းၾကိဳက္ၾကမယ္ထင္ပါတယ္မိမိရဲ႕ဘေလာ့Footer Sectionမွာ 4-Columns
ထည့္နည္းေလးပါ၊3-Columnsကသံုးတဲ့သူေတြမ်ားလာေတာ့မတူေအာင္ေျပာင္းသံုးခ်င္တဲ့မိတ္ေဆြ
ေတြအတြက္ေပါ့ေနာ္၊Footer Sectionမွာ3-Columnsထည့္နည္းကေတာ့ kp3နည္ပညာ၊၅ဝ၊ရိွပါတယ္။
ေအာက္မွာပံုႏွင့္တကြ Code ေပးထားပါတယ္။



၁။Layout

၂။Edit HTML

ေအာက္ကCodeကိုရွာပါ၊Press Ctrl + F

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

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

<div id='footer-column-container'>
<div id='footer1' style='width: 225px; float: left; margin:0; '>
<b:section class='footer-column' id='footer-column-1' preferred='yes' style='float:left;'>
<b:widget id='Text1' locked='false' title='About B-G' type='Text'/>

</b:section>
</div>
<div id='footer2' style='width: 225px; float: left; margin:0; '>
<b:section class='footer-column' id='footer-column-2' preferred='yes' style='float:left;'>
<b:widget id='Text4' locked='false' title='About Author' type='Text'/>
</b:section>
</div>

<div id='footer3' style='width: 225px; float: right; margin:0; '>
<b:section class='footer-column' id='footer-column-3' preferred='yes' style='float:right;'>
<b:widget id='Text3' locked='false' title='Subscribe in Reader' type='Text'/>
</b:section>
</div>

<div id='footer4' style='width: 225px; float: right; margin:0; '>
<b:section class='footer-column' id='footer-column-4' preferred='yes' style='float:right;'>
<b:widget id='Text2' locked='false' title='Access B-G on Go' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>

၃။Save Template button.ႏိုပ္ပါ။။
errors တက္မလာဘုူးဆို၇င္cssဘက္သြားၾကေအာင္ေနာ္
ေအာက္ကCodeကိုထပ္ရွာပါ၊

]]></b:skin>

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

#footer-column-container { border: .3px dotted #cccccc;}

.footer-column { margin: 0 10px 0 10px; padding:5px;
color: #666666; line-height: 1.5em; font-size:12px;}

.footer-column h2 {
padding-bottom:.15em; text-align:center;
font:"normal normal 80% 'Comic Sans MS','Lucida Sans Unicode','Trebuchet MS',Sans-serif";
color:#333333;
line-height:1em; letter-spacing:.1em;
border-bottom: 1px solid #cccccc;}

.footer-column ul { list-style:none; margin:0 0 0; padding:0 0 0;}

.footer-column ul li {
background: url(http://i421.photobucket.com/albums/pp296/rnbutpur/bullet-1.gif) no-repeat;
margin:0 0 0; padding-left: 16px;
padding-bottom: 0.5em; line-height:1.2em;}

.footer-column .widget {margin:0 0 .5em; padding:0 0 1em;}

၄။Save Template button.ႏိုပ္ပါ။။ျပီးပါျပီ။။

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

kp3နည္းပညာ၊၁၂၄၊Social Bookmark Icons ေတြကိုအရြတ္ေလးေပၚမွာထားတဲ့Code

အခုတင္တဲ့ Post ေလးကလည္း kp3နည္ပညာ၊၁၂၃၊ကဟာနဲ႕ပံုစံေတြတူပါတယ္၊Icons ပံု
ေတြဘဲကြဲျပားသြားတာပါ၊Social Bookmark Icons ေတြကိုသူမ်ားသံုးတာနဲ႕မတူေအာင္အမ်ိဳးမ်ိဳး
လုပ္ၾကည့္ၾကရေအာင္ေနာ္ေအာက္မွာပံုနဲ႕တကြCode ေတြေပးထားပါတယ္၊Social Bookmark
Icons ေတြကိုအရြတ္ေလးေပၚမွာထားတဲ့Code ေပါ့ေနာ္။



၁။Layout

၂။Edit HTML

၃။Expand Widgets Templateကိုအမွန္ျခစ္ေပးပါ။

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

<data:post.body/>

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

<div style='clear:both; '>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpzUJBHtLk59O_yzKF4Flu_Enay2FMr1GQ4g_FmvvXHVRE0bhAguLyt8TU11AIRMIlibM5FEG2eTNQ-gLdlHespxytQIZNj_ZB_PxdRyHtki1I75I3CoP2rutQG0_9KNOcoPDwVsBdNrZJ/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiS3f1g2u-cAgYkqMKX9exeSrjfuK9Egt6WL6-M2o-09detfYOkl7plWDFHhaTupxove1gGk_kJ4SF5HgPw_xYcNNRoPKCQHa2pEAW8fCyLHh13XxIceIxAWsAbzoTzrrmA0Q8-qP-guzY/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPH9cDvLOCdi0eBEG7xR6Hfl2D8PA_kt3meCYek3gRUcmlE7n4a8eLsbJ1r9eq_Zb2NQf68vFO6BagQJuTWJ7MLqENeWs_a8TEfnFo3ID1JFzKgTygJwdHoZ7W038P6yDi-eZNjjRoKPLL/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtH69j1AYSwWdPk1mItyPWwGHGBGtS6yvOjk_yo4mIhLkOnQg5RLcM1_BZm9vWkyHVc1Uju2LmJ3mat2xxfYCAAbjOfe26V6d5Pq7hfxvFi4gWfZnPFxGci-YW4MBcX2IK_clMcf8X5k_v/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Digg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3Li2Cdv2visD8R7DNDTKk97seHMrbpOh-u74jL815D8mhgeOc9fatHFyBMwvEJpnCZtBb38k9e4KkYtjuD41zI_zvudeXmM9tXSRSx9cWFhbWrV8rDxj1Hl6JAfkC-7xu8GmitLpt9Hdg/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8p49gXZNZ5lCe0V9xyoJlxV6MQNo9l56wCOrIeDGwJW2WDT85tQmDDQ_Xn1OShcGfnuJ4zo_-W9dYhEQgPJF1N7VQE42xVOADvJIdG4k_xyoGY7Km_maHQH5eJwaqqCur5mGEGUGfdyzz/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://reddit.com/submit?&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Reddit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBOmST15T1crQqJCZBHhYCeiRvk8Zy6TqzcPNheiPeUCWFW0A87XBLeU3wQkvxe6ltdvJM3Cd2_Q7SmcxplArrZ6wjh0d8H-Fs4CyP7DIh7rqRtsK16_l6hqRM3GjjCc8hHME_KK33zrmj/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' rel='external nofollow' target='_blank'><img alt='Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGEQrC3Rb-Ty0xm1-1zN-Whw6YY1c4jZmr84DmAfd2HRgrds8zcHqc-F7hyphenhyphenIWzr6n6mdztDv9Z_11DcCzdUSRzpeN-s-vFHxrxER4gYLBxeXJTtCsF1d620q8pIzlZQ3hHtgMNGLDyv6w-/' style='padding:0;margin:0;border:none;'/></a>
</div>
</div>

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

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

kp3နည္းပညာ၊၁၂၃၊Social Bookmark အသစ္ေလးေတြ

ဘေလာ့ဂါမိတ္ေဆြမ်ားအားလံုးခရစၥမတ္ပြဲေန႕မွာကိုယ္စိတ္ႏွလံုးက်န္းမာခ်မ္းသားၾကပါေစ
လို႕kp3မိသားစုမွဆုမြန္ေကာင္းေတာင္းရင္း၊ခရစၥမတ္လက္ေဆာင္အျဖင့္Social Bookmark
အသစ္ေလးေတြတင္ေပးလိုက္ပါတယ္၊သူမ်ားေတြနွင့္မတူေအာင္ေပါ့ေနာ္ႏွလံုးသား Icon ေလး
ကေတာ့ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္လၽွက္ဆိုတဲ့သေဘာပါဘဲ။ Code ကေတာ့
ရိုရိုရွင္းရွင္းေလးပါ DEMO လင့္ခ္ပါထည့္ထားေပးပါတယ္၊နမူနာၾကည့္လို႕ရေအာင္
ေအာက္မွာပံုနဲ႕တကြ Demo လင့္ခ္


DEMO
၁။Layout

၂။Edit HTML

၃။Expand Widgets Templateကိုအမွန္ျခစ္ေပးပါ။

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

<data:post.body/>

သို႕မဟုတ္ေအာက္က Code

<p><data:post.body/></p>

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

<div style='clear:both; '>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsWDNs_-yGXQAYkUZXICdwXzPFmxpWCyotgHG2B3vMW3uJrOvZMywYnw7ug0wcn6lJd5OAu3f8v_YpAGJKpPEbNVMkwGJnyGSFjZ0uig9ysyhhuQlbi_THvoJsbOl6cZusxh2v9H_ZJlVJ/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS8Ip7y8JqtAzAJrpDZqHrGKTtyTMN3dZdJ3Uogz-NNXHsYx2ZMxSymx3zceucC6bWi0nuxdbPV5pZXZjTEIT-V0lAnoJ12a22eTNEeM4h6ax9uZiT_OxQT2ZVjGd3jLD6vPE8QNgYfTaN/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmtnPKNrvMDnPl0ITa5QgeVt3fEhq4t8YHbVekcqlMDv3KCrtHD54emnHtb_e220utwbROFgrjqOxdTkBdMzzkeTpWiEVy-w3MTdsmsEl_wPxfuWtgejvoraGPEjybPrRB2S0Uwzq2sOEf/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBEvbygd3p_n1-ijSsMPQWoDib7V8i-krpQ7VttMj16cW1RTGtD9Jnvtkwjmk68UC8dRuNdBpNGA9iPmVJW-MJd-3cd6fIOeJOBF1e-HxXOENuiWQK8F-SlMc_CKsxvYMbeWxxf22Ez2gA/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfVBh8LH5i8M1BhuPjXdFki1enAfgodJNTM4EPFT4hh2fdvFUfKT6_hYCBwz-Q1CJ6ncidrMTBuzedO_njdAD_y3J8ir2BBtTDPCnEmErQI91RgE95EzwdbTbVIWEhs87xbNAzwJdmdt6Y/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?u=&quot; + data:post.url +  &quot;&amp;=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Yahoo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKRk9ACV5N8iHJKddAEuHrFMo6OT78RKef8sLQQy3rfMXAtu_j68O1x6TtrDTThJNs_qq5GRs6cO-X7lZXJ7jvsgD_Ye8QxiNuvUp44CgMsIFrDA-JPg6Tch5f2XhZAsldutOScuaNvkrM/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://reddit.com/submit?&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Reddit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_cqZj_gGGwro84SUXEk19AY8dT-NW4yAHgiWNxYKMthhazsJ4WfUWWZbLlRQDbSmMgaZFqa9YKLePA0lnRjli8sY6f26pYkIvdXTI_3jhFGCDwnY_UQh87P2TVn0JYiMbZ03n67FtPKSc/' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' rel='external nofollow' target='_blank'><img alt='Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisYc_Zs8W9ddfSJ7t84Xfh4LzZibYMhBbzRpFtBrqxJggW7YUBXVIKm6ZEINiS7ehZVyzwEtd4ouncFZtZYLO2UoYYtsBECzvRthmK8om_NkBN91u1alKTFEgr0oxEcneAZoJQAFZI_7tA/' style='padding:0;margin:0;border:none;'/></a>
</div>
</div>

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

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

kp3နည္းပညာ၊၁၂၂၊Post ေတြမွာ(ဖြင့္/ဖြတ္)Show/Hide ေလးနဲ႕ သံုးခ်င္တဲ့သူေတြအတြက္

အခုတင္တဲ့ Post ေလးကေတာ့က်ေနာ္တို႕ရဲ႕Post ေတြမွာ(ဖြင့္/ဖြတ္)Show/Hide ေလးနဲ႕
သံုးခ်င္တဲ့သူေတြအတြက္ေပါ့ေနာ္၊WIDGEtမွာလည္းသံုးလို႕ရပါတယ္၊ေအာက္မွာဥပမာျပထားေပး
ပါတယ္။ေအာက္မွာဥပမာျပထားပါတယ္ေအာက္က(Show/Hide)ကိုႏိုပ္ၾကည့္လိုပ္ပါ။

Show/Hide

အခုတင္တဲ့ Post ေလးကေတာ့က်ေနာ္တို႕ရဲ႕Post ေတြမွာ(ဖြင့္/ဖြတ္)Show/Hide ေလးနဲ႕
သံုးခ်င္တဲ့သူေတြအတြက္ေပါ့ေနာ္၊WIDGEtမွာလည္းသံုးလို႕ရပါတယ္၊ေအာက္မွာဥပမာျပထားေပး
ပါတယ္။ေအာက္မွာဥပမာျပထားပါတယ္ေအာက္က(Show/Hide)ကိုႏိုပ္ၾကည့္လိုပ္ပါ။

၁။Layout

၂။Edit HTML

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

</Head>

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

<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "hide";
}
}
</script>

ေအာက္ကCode ကိုဒီမွာသြားထားလိုက္ေပါ့ေနာ္ပိုျပီးရွာရလြယ္ေအာင္

<a href="javascript:toggle();" id="displayText">Show/Hide</a>
<div id="toggleText" style="display: none;">ဤေနရာမွာမိမိရဲ႕ဖြင့္/ဖြတ္လုပ္ခ်င္သည့္စာကိုေရးထည့္လိုက္ပါ</div>

၃။Settings

၄။Formatting

၅။Post Template မွာ Paste လုပ္လိုက္ပါ.

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

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

ဖြင့္/ဖြတ္

ဒီPost ေလးကလည္းမိမိရဲ့ဘေလာ့လင့္ခ္ကို Google Search မွာရွာရလြယ္ေအာင္မိမိရဲ႕
ဘေလာ့လင့္ခ္ေလးကိုထည့္တဲ့ Google site ေလးပါ။လုပ္သင့္တာေလးေတြမို႕တင္ရျခင္းပါဘဲ၊
ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ပါလို႕ထပ္ခါတလဲလဲေျပာခ်င္ပါတယ္၊
ေအာက္မွာသြားရမယ့္လင့္ခ္ေလးေပးထားပါတယ္။လင့္ခ္ထဲဝင္ျပီးသြားရင္Your blog's address
ေရးထားတာေတြ႕ရလိမ့္မယ္မိမိရဲ့ဘေလာ့ URL လိပ္စာေလးေရးျပီး Submit blog button ေလး
ႏိုပ္လိုက္ပါ။ရိုးရိုးရွင္းရွင္းေလးပါ။ လင့္ခ္ကေတာ့ပံူေပၚမွာဘဲထားလိုက္တယ္

kp3နည္းပညာ၊၁၂၁၊မိမိရဲ့ဘေလာ့လင့္ခ္ကို Google Search မွာရွာရလြယ္ေအာင္

ဒီPost ေလးကလည္းမိမိရဲ့ဘေလာ့လင့္ခ္ကို Google Search မွာရွာရလြယ္ေအာင္မိမိရဲ႕
ဘေလာ့လင့္ခ္ေလးကိုထည့္တဲ့ Google site ေလးပါ။လုပ္သင့္တာေလးေတြမို႕တင္ရျခင္းပါဘဲ၊
ဘေလာ့ဂါမိတ္ေဆြအားလံုးကိုအစဥ္ျမဲခ်စ္ခင္ေလးစားလၽွက္ပါလို႕ထပ္ခါတလဲလဲေျပာခ်င္ပါတယ္၊
ေအာက္မွာသြားရမယ့္လင့္ခ္ေလးေပးထားပါတယ္။လင့္ခ္ထဲဝင္ျပီးသြားရင္Your blog's address
ေရးထားတာေတြ႕ရလိမ့္မယ္မိမိရဲ့ဘေလာ့ URL လိပ္စာေလးေရးျပီး Submit blog button ေလး
ႏိုပ္လိုက္ပါ။ရိုးရိုးရွင္းရွင္းေလးပါ။လင့္ခ္ကေတာ့ပံူေပၚမွာဘဲထားလိုက္တယ္


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

kp3နည္းပညာ၊၁၂ဝ၊မိမိရဲ႕ဘေလာ့ Post ေအာက္မွာ Printer Button ေလးထည့္နည္း

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

၁။Layout

၂။Edit HTML

၃။Back up လုပ္ေပးပါ။(downloading full template)

၄။Expand Widgets Templateကိုအမွန္ျခစ္ေပးပါ။

၅။Check Expand Widgets Template(CTRL + F)ျဖင့္ရွာပါ၊၊

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

<p><data:post.body/></p>

ေတြ႕ျပီဆိုရင္ေအာက္က Code ႏွင့္အစားထိုးေပးလိုက္ပါ.။

<!-- Add Printer Button by http://kp3family.blogspot.com/-->
<span class='noprint'><p><data:post.body/></p></span>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='javascript:window.print()'>
<img src='http://i1020.photobucket.com/albums/af326/bookwise77/printer-button.gif'/></a></b:if>
<!-- End Add Printer Button by http://kp3family.blogspot.com/-->

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

ေနာက္တခုကေတာ့ေအာက္မွာပံုနဲ႕ Code

<!-- Add Printer Button by http://kp3family.blogspot.com/-->
<span class='noprint'><p><data:post.body/></p></span>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='javascript:window.print()'><img
src='http://i1020.photobucket.com/albums/af326
/bookwise77/printer-button-2.gif'/></a></b:if>
<!-- End Add Printer Button by http://kp3family.blogspot.com/-->

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

kp3နည္းပညာ၊၁၁၉၊မိမိရဲ့ဘေလာ႔Search engines(၁ဝဝ)မွာ Submitလုပ္ၾကရေအာင

ဒါေလးကေတာ့အားလံုးအတြက္အရမ္းကိုအသံုးဝင္ပါတယ္၊ခရစၥမတ္လက္ေဆာင္ေပါ့ေနာ္၊မိမိရဲ႕
ဘေလာ့လင့္ခ္ကို ရွာရလြယ္ေအာင္ SEOscores လို႕ေခၚတဲ့ Search engines(၁ဝဝ)မွာSubmit
လုပ္ၾကရေအာင္ေနာ္၊Search engines Submit လင့္ခ္ကေတာ့ေအာက္ကSEOscores ပံုေပၚမွာ
ဘဲထားလိုက္ပါတယ္၊ဘေလာ့ဂါမိတ္ေဆြအားလံုးလည္းၾကိဳက္ၾကမယ္လို႕ေတာ့ေမ်ာ္လင့္တာဘဲ၊ဟီး..

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

kp3နည္းပညာ၊၁၁၈၊မိမိရဲ႕ဘယ္သူက Comments ဘယ္ေလာက္ေပးတယ္ဆိုတာသိခ်င္ရင္

ဒီေန႕က်ေနာ္တင္မယ့္Post ေလးကေတာ့Top Comments automatically to Blogger
ဘယ္သူက Comments ဘယ္ေလာက္ေပးတယ္ဆိုတာဘေလာ့မွာနာမည္ေလးနဲ႕ေပၚေအာင္
ထားျခင္ရင္ေအာက္မွာလုပ္နည္းနဲ႕တကြ Code

၁။Layout

၂။Page Elements

၃။Add a Gadget

၄။HTML/Javascript' မွာေအာက္က Code ကိုထည္႕လိိုက္ပါ။

<script type="text/javascript">
function pipeCallback(obj) {
 document.write('<ol>');
 var i;
 for (i = 0; i < obj.count ; i++)
 {
 var href = "'" + obj.value.items[i].link + "'";
 var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
 document.write(item);
 }
 document.write('</ol>');
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=47909d73002419d14e697928bd9c4f24&url=http%3A%2F%2Fkp3family.blogspot.com&num=10&filter=yourname" type="text/javascript"></script>
<span style="font-size: 80%">Widget by <a
href="http://kp3family.blogspot.com/2009/12/kp3_17.html">kp3family</a></span>

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


မွတ္ခ်က္။ ။kp3family.blogspot.com ေန၇ာမွာမိမိရဲ႕ဘေလာ့လင့္ခ္ကိုထည့္ပါ။
ဘေလာ့လင့္ခ္ထည့္၇ာတြင္ (http://)ကိုမထည့္ရပါ။။

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

kp3နည္းပညာ၊၁၁၇၊ဘေလာ့ Header မွာပံုေတြထည္႕နည္းေလး

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

၁။Dashboard

၂။Layout

၃။Edit HTML

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

/* Header
-----------------------------------------------
 */

#header {
width:660px;
margin:0 auto 10px;
border:1px solid #ccc;
background: #fff url(ဤေနရာမွာပံုရဲ႕လင့္ခ္ထည့္ေပးပါ) no-repeat top right;
}

သို႕မဟုတ္

/* Header
-----------------------------------------------
 */

#header-wrapper {


  background:url(ဤေနရာမွာပံုရဲ႕လင့္ခ္ထည့္ေပးပါ) no-repeat;
  height:260px;
  width:980px;
  margin-left:-10px;
  margin-top:-16px;
  border:0px solid $bordercolor;
  }

မွတ္ခ်က္။ ။ Codeျဖင့္ထည့္မယ္ဆိုရင္ <style> ႏွင့္ <style> ၾကားမွာထည့္ေပးပါ။

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

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

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


၁။Dashboard

၂။Layout

၃။Edit HTML

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

</head> 

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

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

၄။Layout

၅။Page Elements

၆။Add a Gadget

၇။HTML/Javascript' မွာေအာက္က Code ကိုထည္႕လိိုက္ပါ။

<!-- Code Begins -->
<!-- http://TheUnnecessaryWorld.co.cc -->
<style type="text/css">
/** TUW Font Color and Size Change widget begins **/
#tuw-font-change-widget {width: auto;}
#tuw-font-change-widget h2 {margin: 0 0 8px 0 !important;font: 12px Tahoma !important;font-weight: normal !important;border: 0 !important;}
#tuw-font-change-widget ul {width: auto; overflow: hidden;margin: 0 0 20px !important;padding: 0 !important;list-style; none !important;}
#tuw-font-change-widget ul li {width: 20px !important;height: 20px !important;overflow: hidden;margin: 0 10px 0 0 !important;padding: 2px !important;display: block !important;float: left !important;border: 1px solid #CCCCCC !important;}
#tuw-font-change-widget ul li a {width: 20px !important;height: 20px !important;display: block !important;line-height: 18px !important;text-align: center !important;color: #FFFFFF !important;font-size: 11px !important;font-family: Tahoma !important;text-decoration: none !important; outline: 0 !important;}
#fcw-black { background: #000000 !important; } #fcw-white { background: #FFFFFF !important; } #fcw-blue { background: #0066CC !important; } #fcw-gray { background: #666666 !important; }
#fcw-color a { text-indent: -999px !important; }
#fcw-size a { text-indent: 0 !important; background: #333333 !important; }
/** TUW Font Color and Size Change widget begins **/
</style>
<script type="text/javascript">
$(document).ready(function(){
// Change Font Color -- begins
$(" #fcw-color #fcw-black ").click(function() {
$(" .post-body ").css({ color: "#000000" });
return false;
});

$(" #fcw-color #fcw-white ").click(function() {
$(" .post-body ").css({ color: "#FFFFFF" });
return false;
});

$(" #fcw-color #fcw-blue ").click(function() {
$(" .post-body ").css({ color: "#0066CC" });
return false;
});

$(" #fcw-color #fcw-gray ").click(function() {
$(" .post-body ").css({ color: "#666666" });
return false;
});
// Change Font Color -- ends

// Change Font Size -- begins
$(" #fcw-size #fcw-10 ").click(function() {
$(" .post-body ").css({ fontSize: "10px" });
return false;
});

$(" #fcw-size #fcw-12 ").click(function() {
$(" .post-body ").css({ fontSize: "12px" });
return false;
});

$(" #fcw-size #fcw-14 ").click(function() {
$(" .post-body ").css({ fontSize: "14px" });
return false;
});

$(" #fcw-size #fcw-16 ").click(function() {
$(" .post-body ").css({ fontSize: "16px" });
return false;
});
// Change Font Size -- ends
});
</script>
<!-- TUW Blogger Change Font color and size widget begins -->
<div id="tuw-font-change-widget">
<div class="tuw-fcw">
<h2> Change Font Color </h2>
<ul id="fcw-color">
<li> <a id="fcw-black" href="#">black</a> </li>
<li> <a id="fcw-white" href="#">white</a> </li>
<li> <a id="fcw-blue" href="#">blue</a> </li>
<li> <a id="fcw-gray" href="#">gray</a> </li>
</ul>
</div>

<div class="tuw-fcw">
<h2> Change Font Size </h2>
<ul id="fcw-size">
<li> <a id="fcw-10" href="#">10</a> </li>
<li> <a id="fcw-12" href="#" title="Default Size">12</a> </li>
<li> <a id="fcw-14" href="#">14</a> </li>
<li> <a id="fcw-16" href="#">16</a> </li>
</ul>
</div>
</div>
<!-- TUW Blogger Change Font color and size widget ends -->
<!-- Code ends -->

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

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

kp3နည္းပညာ၊၁၁၅၊မိမိရဲ႕Blog Name Scrolling လုပ္ခ်င္ရင္

မိမိဘေလာ့နာမည္ေလးကိုမရပ္ဘဲသြားေအာင္လုပ္ခ်င္ရင္ေပါ့ေနာ္၊Blog Name Scrolling
လို႕ေခၚပါတယ္။တခ်ိဳ႕ဘေလာ့မိတ္ေဆြေတြတင္ထားေတာ့ျမင္ဖူးပါတယ္၊မတူေလာက္ဘူးလိုု႕ေတာ့
ထင္ပါတယ္။ေအာက္မွာ DEMO လင့္ခ္လုပ္နည္းေလးျပထားပါတယ္။အရမ္းကိုလြယ္ပါတယ္။

၁။Dashboard

၂။ layout

၃။Edit HTML

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

</head>

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

<script type='text/javascript'>
var txt="ဤေနရာမွာမိမိရဲ႕ဘေလာ့နာမည္ေလးေရးလိုက္ပါ ";
var espera=200;
var refresco=null;
function rotulo_title()
{
document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0); refresco=setTimeout("rotulo_title()",espera);
}
rotulo_title();
</script>

နမူနာလင့္ခ္ဒီမွာDEMO

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

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

kp3

dsdsjfsa
dsfaf
afaf
gag
ghgfjkjgkad
fa
fafafa

kp3နည္းပညာ၊၁၁၄၊ဘေလာ့ Post Title ကိုအလည္မွာထားနည္း

အခုက်ေနာ္တင္မယ့္ Post ေလးကေတာ့ဘေလာ့ဂါညီေလးတစ္ေယာက္က kp3နည္းပညာ၊၁ဝ၉
မွာေတာင္းဆိုထားလို႕ပါ။ သိျပီးၾကတဲ့မိတ္ေဆြေတြလည္းအမ်ားၾကီးရွိမွာပါ၊ဒါေပမယ့္မသိၾကေသးတဲ႔
သူငယ္ခ်င္းေတြအတြက္ပါ၊ ဘေလာ့ Post Title ကိုအလည္မွာထားနည္းေလးပါ၊ဘယ္ဘက္ညာဘက္
မွာထားခ်င္ရင္လည္းရပါတယ္၊ ကဗ်ာဘေလာ့ဂါေတြအတြက္ဆိုရင္ပိုျပီးအသံုးဝင္မယ္ထင္ပါတယ္။ ကဗ်ာေခါင္းစဥ္ေတြကေဘးမွာဆိုရင္သိပ္မလွဘူးေပါ့ေနာ္....,,
ေအာက္မွာCodeေတြေပးထားပါတယ္၊လိုအပ္တာရွိရင္ယူသံုးလို႕ရေအာင္ပါ။

မွတ္ခ်က္။။ေအာက္က Code ေတြဟာက်ေနာ္တို႕ဘေလာ့ Post Title ေနရာမွာထည့္ေပးရမွာပါ.။

၁။အလည္မွာထားခ်င္ရင္ေအာက္က Code ကိုသံုးပါ။

<div align="center">ေခါင္းစဥ္ေရးရန္</div>

၂။ဘယ္ဘက္မွာထားခ်င္ရင္ေအာက္က Code ကိုသံုးပါ။

<div align="left">ေခါင္းစဥ္ေရးရန္</div>

၃။ညာဘက္မွာထားခ်င္ရင္ေအာက္က Code ကိုသံုးပါ။

<div align="right">ေခါင္းစဥ္ေရးရန္</div>

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

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

kp3နည္းပညာ၊၁၁၃၊မိမိရဲ႕ဘေလာ့မွာWordpress စတိုင္ Typepad Snapshotsေလးသံုးခ်င္ရင္

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

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

kp3နည္းပညာ၊၁၁၂၊မိမိရဲ႕ဘေလာ့PostမွာBorder Image ျဖုတ္နည္း

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

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

.post img {
padding:4px;
border:1px solid $bordercolor;
}

သို႕မဟုတ္

img{
padding: 4px;
border:1px solid $bordercolor;
}

၂။ေအာက္က Codeေလးကိုျဖဳတ္လိုက္ပါ။

border:1px solid $bordercolor;

သို႕မဟုတ္

border:0px;

ဒီလိုေျပာင္းေပးလိုက္ပါ။

၃။ဒါမွမဟုတ္Border Image ကိုအေ၇ာင္ေျပာင္းခ်င္ရင္

border:1px solid $bordercolor;

ေနရာမွာေအာက္ကအတိုင္းေျပာင္းေပးပါ

border:1px solid #(ဤေနရာမွာHTMl Colour Code ေလးထည့္လိုက္ပါ)

ေအာက္မွာဥပမာ--

border:1px solid #6698FF;

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

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

kp3နည္းပညာ၊၁၁၁၊Comment Form ေလးၾကီးေအာင္လုပ္ခ်င္လားငယ္ေအာင္ေျပာင္းခ်င္လား

ဒါကၾကေတာ့ kp3နည္းပညာ၊၁၁ဝ၊ရဲ႕အဆက္ေပ့ါေနာ္ဟီး..မိမိရဲ႕ဘေလာ့ Comment Form ေျပာင္း
နည္းေလးပါ။မိမိ Comment Form ေလးၾကီးေအာင္လုပ္ခ်င္လားငယ္ေအာင္ေျပာင္းခ်င္လားေအာက္
မွာေျပာင္းေပးမယ့္ေနရာေလး Code နဲတကြေပးထားပါတယ္။



၁။Layout

၂။Edit Html

၃။Expand Widget Templatesမွန္ျခစ္လိုက္ပါ။ေအာက္ကCode ကိုရွာပါ၊(Ctrl+F)

<iframe allowtransparency='true' class='blogger-iframe-colorize'
 frameborder='0' height='275' id='comment-editor' scrolling='auto' 
src='' width='100%'/>

အနီေရာင္ျပထားသည့္နံပါတ္ႏွစ္ကိုမိမိၾကိက္သလိုေျပာင္းႏိုင္ပါတယ္၊Comment Form Sizeပါ။


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

kp3နည္းပညာ၊၁၁ဝ၊Comment Form ကိုဘေလာ့ Post ေအာက္မွာထားနည္း

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

၁။Settings ကိုသြားမယ္ Comments tab ထဲျပန္ဝင္ပါ၊ေအာက္ပံုကိုၾကည့္ပါ၊



၂။Embedded below postကိုႏိုပ္ျပီးျပီဆိုရင္ေအာက္က SAVE SETTINGS ကိုႏိုပ္လိုက္ပါ။

၃။Layout

၄။Edit Html

၅။Expand Widget Templatesမွန္ျခစ္လိုက္ပါ။ေအာက္ကCode ကိုရွာပါ၊(Ctrl+F)

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

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

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

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

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

kp3နည္းပညာ၊၁ဝ၉၊Marque Sliding Effect

အခုက်ေနာ္တင္မယ့္ Post ေလးကေတာ့ Marque Sliding Effect ေတြပါဘဲ၊ဘေလာ့ဂါမိတ္ေဆြ
ေတာ္ေတာ္မ်ားမ်ားတင္ထားတာလည္းေတြ႕ရပါတယ္။kp3နည္းပညာ၊၇၊မွာညီးေလးတစ္ေယာက္က
လည္းေတာင္းဆိုထားေတာ့တိုက္ဆိုင္သြားတာေပါ့ေနာ္၊တခ်ိဳ႕မိတ္ေဆြေတြတင္ထားနဲ႕တူတာလည္း
ပါသလိုမတူတာေတြလည္းအမ်ားၾကီးရွိပါတယ္၊ေအာက္မွာနာမူနာေတြနဲ႕Codeေတြရွိပါတယ္။
အစံုပါဘဲ။
အေပၚကနမူနာေအာက္က Code ပါ။
၁။

ဤေနရာမွာမိမိၾကိဳက္တဲ့စာေရးရန္(မိမိၾကိုက္သေလာက္ေရးႏိုင္ပါသည္၊အရွည္ၾကီးလည္းရပါတယ္)
ဤေနရာမွာမိမိၾကိဳက္တဲ့စာေရးရန္(မိမိၾကိုက္သေလာက္ေရးႏိုင္ပါသည္၊အရွည္ၾကီးလည္းရပါတယ
ဤေနရာမွာမိမိၾကိဳက္တဲ့စာေရးရန္(မိမိၾကိုက္သေလာက္ေရးႏိုင္ပါသည္၊အရွည္ၾကီးလည္းရပါတယ္

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="200" align="center">
ဤေနရာမွာမိမိၾကိဳက္တဲ့စာေရးရန္(မိမိၾကိုက္သေလာက္ေရးႏိုင္ပါသည္၊အရွည္ၾကီးလည္းရပါတယ္)
</marquee>

၂။

   ဤေနရာမွာမိမိၾကိဳက္တဲ့စာေရးရန္   

<marquee direction="left">   ဤေနရာမွာမိမိၾကိဳက္တဲ့စာေရးရန္   </marquee>

၃။

    ဤေနရာမွာမိမိၾကိဳက္တဲ့စာေရးရန္   

<marquee direction="right">   ဤေနရာမွာမိမိၾကိဳက္တဲ့စာေရးရန္   </marquee>

၄။

   ဤေနရာမွာမိမိၾကိဳက္တဲ့စာေရးရန္   

<marquee behavior="alternate">   ဤေနရာမွာမိမိၾကိဳက္တဲ့စာေရးရန္   </marquee>

၅။

   ဤေနရာမွာမိမိၾကိဳက္တဲ့စာေရးရန္    

<marquee direction="up">   ဤေနရာမွာမိမိၾကိဳက္တဲ့စာေရးရန္    </marquee>

၆။

   ဤေနရာမွာမိမိၾကိဳက္တဲ့စာေရးရန္   

<marquee direction="down">   ဤေနရာမွာမိမိၾကိဳက္တဲ့စာေရးရန္   </marquee>

၇။

    ဤေနရာမွာမိမိၾကိဳက္တဲ့စာေရးရန္   

<marquee behavior="alternate" direction="up">   ဤေနရာမွာမိမိၾကိဳက္တဲ့စာေရးရန္   </marquee>

၈။

   ဤေနရာမွာမိမိၾကိဳက္တဲ့စာေရးရန္   

<marquee><marquee direction="down">   ဤေနရာမွာမိမိၾကိဳက္တဲ့စာေရးရန္   </marquee></marquee> 

၉။

   ဤေနရာမွာမိမိၾကိဳက္တဲ့စာေရးရန္   

<marquee><marquee direction="up">   ဤေနရာမွာမိမိၾကိဳက္တဲ့စာေရးရန္   </marquee></marquee>

၁ဝ။

   ဤေနရာမွာမိမိၾကိဳက္တဲ့စာေရးရန္   

<marquee direction="up"><marquee behavior="alternate">   ဤေနရာမွာမိမိၾကိဳက္တဲ့စာေရးရန္   </marquee></marquee&g

၁၁။

   ဤေနရာမွာမိမိၾကိဳက္တဲ့စာေရးရန္   

<marquee behavior="alternate" direction="down"><marquee behavior="alternate">   ဤေနရာမိမိၾကိဳက္တဲ့စာေရးရန္   </marquee></marquee>

၁၂။

   ဤေနရာမိမိၾကိဳက္တဲ့စာေရးရန္ 
ဤေနရာမိမိၾကိဳက္တဲ့စာေရးရန္ 
ဤေနရာမိမိၾကိဳက္တဲ့စာေရးရန္ 
ဤေနရာမိမိၾကိဳက္တဲ့စာေရးရန္    

<marquee direction="right">   ဤေနရာမွာေရးပါ <br> ဤေနရာမွာေရးပါ <br> ဤေနရာမွာေရးပါ <br> ဤေနရာမွာေရးပါ   </marquee&gt

၁၃။

   ဤေနရာမွာမိမိၾကိဳက္တဲ့စာေရးရန္    

<marquee direction="left"><blink>   ဤေနရာမွာမိမိၾကိဳက္တဲ့စာေရးရန္   </blink></marquee>

၁၄။

  ဤေနရာမွာမိမိၾကိဳက္တဲ့စာေရးရန္        ဤေနရာမွာမိမိၾကိဳက္တဲ့စာေရးရန္   

<marquee>   ဤေနရာမွာမိမိၾကိဳက္တဲ့စာေရးရန္   </marquee> <marquee direction="right">   ဤေနရာမွာမိမိၾကိဳက္တဲ့စာေရးရန္   </marquee>

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

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မိသားစု