Blog Menu အလြယ္လုပ္မယ္

ဘေလာ့နဲ႔ ပတ္သက္တာ ေရးဖုိ႔ ေျပာထားတာ ၾကာပါၿပီ။ မိမိသိသေလာက္ ေရးသားေပးလုိက္ပါတယ္။ ဒီတစ္ခါ Menu လုပ္တဲ့ေနရာမွာ HTML ေတြမွာ ဟုိၾကား ဒီၾကား ထည့္စရာ မလုိပဲ လြယ္ကူရွင္းလင္းတဲ့ နည္းလမ္းေလးကုိ ေဖာ္ျပေပးလုိက္ပါတယ္။ ေအာက္က အတုိင္း လုပ္ေဆာင္ပါ။

(၁) ဦးစြာ Layout မွာ Add a Gadget က HTML/JAVA ထဲကုိ ဒီဖုိင္ထဲကုဒ္ေလး ကူးထည့္လုိက္ပါ။

(၂) ေအာက္က အတုိင္းေလး ေပၚမွာ ျဖစ္ပါတယ္။ ႏွိပ္ၾကည့္ႏုိင္ပါတယ္။

ပင္မစာမ်က္ႏွာ  Software မ်ား

(၂) http://mgsaytanar.blogspot.com ဆုိေသာ ေနရာမ်ားတြင္ မိမိတုိ႔ရဲ႕ ဘေလာ့လင့္ကုိ ထည့္ပါ။

(၃) ေနာက္တစ္ခု လုပ္ခ်င္ရင္ အဲဒီလင့္ကုိ ျပန္ကူးၿပီး မိမိတို႔ရဲ႕ Label လင့္ေတြ ေျပာင္းလုိက္ရင္ ရပါၿပီ။

(၄) မိမိတုိ႔ႏွစ္သက္ရာ ေနရာမွာ ေရႊ႕ထားႏုိင္ပါတယ္။ အေပၚမွာ တင္တင္ ေဘးမွာ ထားထား။

<a href="http://mgsaytanar.blogspot.com/"><button>?????????????</button></a>

<a href="http://mgsaytanar.blogspot.com/search/label/Software%20%E1%80%99%E1%80%BA%E1%80%AC%E1%80%B8"><button><span style="color: rgb(51, 51, 255);">??????????</span></button></a>

ေမာင္ေစတနာ

--------------------------------------------------------

ႏွင္းေတြ ေ၀

ေဆာင္းရာသီက ေနရာတုိင္းမွာ ႏွင္းေတြ ေ၀ေနပါတယ္။ ေတာင္ေပၚေဒသေတြဆုိ ပုိဆုိးတာေပါ့။ ေနရာတုိင္း ႏွင္းေ၀ေနတဲ့အခ်ိန္မွာ မိမိတုိ႔ရဲ႕ ဘေလာ့ေလးမွာ ႏွင္းေတြ ေ၀ခ်င္တယ္ဆုိရင္ ဒါမွမဟုတ္ သစ္ရြက္ေလး ျပဳတ္က်လာေစခ်င္ရင္ ေအာက္က ကုဒ္ေတြကုိ ယူလုိက္ပါ။ 

1;   <script language="JavaScript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/falling_snowflakes.js">

      <br /></script>

2;   <script language="JavaScript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/falling_leaves.js">

     <br /></script>

3;   <script type="text/javascript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/snowstorm.js">

     <br /><!-- now, we'll customize the snowStorm object -->

     <br /><script type="text/javascript">

     <br />snowStorm.snowColor = '#99ccff'; <span style="color: blue;">// blue-ish snow!?</span>

     <br />snowStorm.flakesMaxActive = 96;  <span style="color: blue;">// show more snow on screen at once</span>

     <br />snowStorm.useTwinkleEffect = true; <span style="color: blue;">// let the snow flicker in and out of view</span>

     <br /></script>

ၿပီးရင္ Layout ရဲ႕ Add a Gadget က HTML/JAVA ထဲမွာ ထည့္လုိက္ရင္ ရပါၿပီ။ သစ္ရြက္ပဲ ေ၀ေ၀၊ ႏွင္းပဲေ၀ေ၀ ေ၀ခ်င္ရာ ေ၀ႏုိင္ပါၿပီ။ ေပ်ာ္ရႊင္ဖြယ္ ႏွစ္သစ္ျဖစ္ပါေစ။ 

(Ref: www.bloggerstop.net) 

ေမာင္ေစတနာ

--------------------------------------------------------------------

Botton Page ျပဳလုပ္နည္း

ေမးထားတာေတာ့ ၾကာပါၿပီ။ မိမိ မအားတာနဲ႔ မေရးျဖစ္တာပါ။ အမွန္ေတာ့ ဒီလုပ္နည္းကုိ မေရးခ်င္ပါဘူး။ ဘေလာ့ ေတာ္ေတာ္မ်ားမ်ားမွာ ေရးသားထားတာ ျမင္ဖူးလုိ႔ပါ။ ဒါေပမယ့္ အဲဒီဘေလာ့ေတြကုိ ၫႊန္းဖုိ႔အတြက္ လင့္ေတြ ေမ့ေနတာနဲ႔ မိမိလုပ္ထားတာကုိ ေရးသားေဖာ္ျပလုိက္ပါတယ္။ ေအာက္က အဆင့္ေတြအတုိင္း လုပ္ေပးပါ။

၁) Layout မွာ Add a Gadget က HTML/JAVA ကုိ Click လုပ္ပါ။

၂) ေအာက္က ကုဒ္ေတြကုိ ေကာ္ပီ ကူးထည့္ပါ။

<style type="text/css">.showpageArea a {text-decoration:underline;}.showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}.showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;}.showpage a:hover {text-decoration:none;}.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style><script style="">var pageCount=20;var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";</script><script style="" src="http://sites.google.com/site/hahaheeheesite/Home/blogger-page-nav-v2.js?attredirects=0&d=1"></script>

၃) Save လုပ္ပါ။

၄) Blog Posts ေအာက္ေျခကုိ ေရႊ႕လုိက္ပါ။ ဒါဆုိ ရပါၿပီ။

ေမာင္ေစတနာ

-------------------------------------------------------------------

Search Box ထည့္သြင္းပံု

မိမိတုိ႔ရဲ႕ ဘေလာ့ေတြျဖစ္ျဖစ္၊ Ning Social Group ေတြမွာ ျဖစ္ျဖစ္ Search Box ထည့္ခ်င္တယ္ဆုိ ေအာက္က ကုဒ္ေလးကုိ ယူၿပီး သံုးစဲြႏုိင္ပါတယ္။

 <!-- SiteSearch Google --><br /><center><br /><form action="http://www.google.com/custom" target="google_window" method="get"><br /><table bgcolor="#000000" border="0"><tbody><tr><br /><td align="left" height="32" nowrap="nowrap" valign="top"><br /></td><br /><td nowrap="nowrap"><input value="youthnetworks.ning.com" name="domains" type="hidden"> <input maxlength="255" value="" name="q" size="20" type="text"> <input value="Search" name="sa" type="submit"></td><br /></tr><br /><tr><br /><td><br /></td><br /><td nowrap="nowrap"><table><br /><tbody><br /><tr><br /><td><input checked="checked" value="" name="sitesearch" type="radio"> <span style="color: rgb(255, 255, 255);">Web</span></td><br /><td><input value="youthnetworks.ning.com" name="sitesearch" type="radio"> <span style="color: rgb(255, 255, 255);">youthnetworks</span></td><br /></tr><br /></tbody><br /></table><br /></td><br /></tr><br /></tbody></table><br /></form><br /></center><br />

Ning မွာ ထည့္ခ်င္တယ္ဆုိရင္ေတာ့ Text မွာ ထည့္သြင္းရမွာပါ။ youthnetworks.ning.com ေနရာမွာ မိမိတုိ႔ရဲ႕လင့္ေတြကုိ ေျပာင္းထည့္ရမွာ ျဖစ္ပါတယ္။ ဘေလာ့မွာဆုိရင္ေတာ့ Add a Gadget က HTML မွာ ထည့္သြင္းရမွာပါ။

ေမာင္ေစတနာ

-----------------------------------------------------------------------

လိပ္ျပာေတြ ပ်ံ၀ဲေန

ဒီတစ္ခါေတာ့ ဘေလာ့ေခါင္းစဥ္ေတြမွာ လိပ္ျပာေလးေတြ ပ်ံ၀ဲတဲ့ နည္းလမ္းေလးကုိ ေဖာ္ျပေပးလိုက္ပါတယ္။ လုပ္နည္းကုိ ေအာက္ပါအဆင့္အတုိင္း ျပဳလုပ္ပါ။

၁) အရင္ဦးစြာ Layout ရွိ Edit HTML ကုိ ဖြင့္ပါ။

၂) ေအာက္ပါ ကုဒ္ေတြကုိ ရွာေဖြပါ။

/* Posts

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

h2.date-header {

margin-top:0;

margin-$endSide:28px;

margin-bottom:0;

margin-$startSide:43px;

font-size:85%;

line-height:2em;

text-transform:uppercase;

letter-spacing:.2em;

color:$dateHeaderColor;

}

.post {

background:url("http://dl7.glitter-graphics.net/pub/474/474167l68h9nknqq.gif") no-repeat 50px .5em;

margin:.3em 0 25px;

padding:0 13px;

border:1px dotted $borderColor;

border-width:1px 0;

}

၃) အျပာေရာင္ျပထားေသာ လင့္ေလးကုိ Copy ယူ၍ ျပထားသည့္ ေနရာတြင္ past လုပ္ပါ။

၄) Save ။

ဒါဆုိရင္ မိမိတို႔ရဲ႕ ဘေလာ့ေခါင္းစဥ္ေလးေတြမွာ လိပ္ျပာေလးေတြ ပ်ံ၀ဲေနမွာပါ။ တစ္ျခားပံုေတြလဲ Upload တင္ၿပီး လုပ္ႏုိင္ပါတယ္။ အဆင္ေျပပါေစ။

ေမာင္ေစတနာ

------------------------------------------------------------------------

Blog Menu Tab ျပဳလုပ္ပံု အဆင့္ဆင့္

မိမိတုိ႔ရဲ႕ ဘေလာ့မွာ Menu Tab ေလးေတြ လုပ္ခ်င္သူမ်ားအတြက္ ေဖာ္ျပေပးလုိက္ပါတယ္။ လုပ္နည္းေတြ ကေတာ့ ေအာက္က အတုိင္း ျပဳလုပ္ပါ။

အဆင့္(၁)

၁) ဒီလင့္ေလးကုိ ဖြင့္ၿပီး ပံုကုိ ေဒါင္းလုပ္ယူပါ။ (မိမိတုိ႔ ႏွစ္သက္ရာ ပံုကုိ တင္ႏုိင္သည္)

http://sites.google.com/site/hahaheeheesite/Home/menu1.jpg?attredirects=0

၂) ၿပီးလွ်င္ မိမိတုိ႔ႏွစ္သက္ရာ ဆုိက္တစ္ခုတြင္ upload တင္ပါ။

အဆင့္(၂)

၁) ဒီေအာက္ကကုဒ္မ်ား Copy ယူၿပီး Layout မွ Add a gadget တြင္ HTML ကုိ ေရြးပါ။

<div id="tabshori">

<ul>

<!-- Change the links with your own links -->

<li style="color: rgb(51, 51, 153);"><a href="http://mgsaytanar.blogspot.com/">?????????????</a></li>

<li style="color: rgb(51, 51, 153);"><a href="http://mgsaytanar.blogspot.com/search/label/%E1%80%A1%E1%80%B1%E1%80%90%E1%80%BC%E1%80%B8%E1%80%85%E1%80%99%E1%80%BA%E1%80%AC%E1%80%B8">??????????</a></li>

<li style="color: rgb(51, 51, 153);"><a href="http://mgsaytanar.blogspot.com/search/label/%E1%80%80%E1%80%97%E1%80%BA%E1%80%AC">????</a></li>

<li style="color: rgb(51, 51, 153);"><a href="http://mgsaytanar.blogspot.com/search/label/%E1%80%9F%E1%80%AC%E1%80%9E">???</a></li>

<li style="color: rgb(51, 51, 153);"><a href="http://mgsaytanar.blogspot.com/search/label/website%20%E1%80%99%E1%80%BA%E1%80%AC%E1%80%B8">website ????</a></li>

<li style="color: rgb(51, 51, 153);"><a href="http://mgsaytanar.blogspot.com/search/label/Software%20%E1%80%99%E1%80%BA%E1%80%AC%E1%80%B8">Software ????</a></li>

<li style="color: rgb(51, 51, 153);"><a href="http://mgsaytanar.blogspot.com/search/label/Game%20%E1%80%99%E1%80%BA%E1%80%AC%E1%80%B8">Game ????</a></li>

<li style="color: rgb(51, 51, 153);"><a href="http://mgsaytanar.blogspot.com/search/label/%E1%80%94%E1%80%8A%E1%80%B9%E1%80%B8%E1%80%9C%E1%80%99%E1%80%B9%E1%80%B8%E1%80%99%E1%80%BA%E1%80%AC%E1%80%B8">????????????</a></li>

<li style="color: rgb(51, 51, 153);"><a href="http://mgsaytanar.blogspot.com/search/label/%E1%80%85%E1%80%AC%E1%80%A1%E1%80%AF%E1%80%95%E1%80%B9">??????</a></li>

<li style="color: rgb(51, 51, 153);"><a href="http://mgsaytanar.blogspot.com/search/label/%E1%80%A1%E1%80%B1%E1%80%91%E1%80%BC%E1%80%B1%E1%80%91%E1%80%BC">???????</a></li>

</ul>

</div>

၂) Copy ကူးထားသည္မ်ားကုိ Past ခ်ပါ။

၃) အထဲတြင္ ရွိေသာ လင့္မ်ားေနရာတြင္ မိမိတုိ႔၏ Label နာမည္မ်ားႏွင့္ လင့္မ်ားကုိ ေျပာင္းလဲပါ။

(ဥပမာ- မူလစာမ်က္ႏွာ ၊ ၎ႏွင့္ဆုိင္ေသာ လင့္)

၄) ၿပီးလွ်င္ Ok ။

အဆင့္(၃)

၁) Layout တြင္ Edit HTML ကုိ ဖြင့္ပါ။

၂) ၿပီးလွ်င္ ေအာက္က ကုဒ္မ်ားကုိ ရွာပါ။

* Footer

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

#footer-wrap1 {

clear:both;

margin:0 0 10px;

padding:30px 0 0;

}

#footer-wrap2 {

color:$titleTextColor;

}

#footer {

padding:8px 15px;

}

#footer hr {display:none;}

#footer p {margin:0;}

#footer a {color:$titleTextColor;}

#footer .widget-content {

margin:0;

}

/** Page structure tweaks for layout editor wireframe */

body#layout #main-wrap1,

body#layout #sidebar-wrap,

body#layout #header-wrapper {

margin-top: 0;

}

body#layout #header, body#layout #header-wrapper,

body#layout #outer-wrapper {

margin-$startSide:0,

margin-$endSide: 0;

padding: 0;

}

body#layout #outer-wrapper {

width: 730px;

}

body#layout #footer-wrap1 {

padding-top: 0;

}

ေတြ႕လွ်င္ ၎ေအာက္တြင္ ဒီေအာက္က ကုဒ္မ်ားကုိ Copy ကူးၿပီး ထည့္လုိက္ပါ။

/* Menu Tab Starts Here */

tabshori {

float:left;

width:100%;

background:#0BAB01;

font-size:13px;

border-bottom:1px solid #0BAB01;

line-height:normal;

}

#tabshori ul {

margin:0;

padding:20px 10px 0 50px

list-style:none;

}

#tabshori li {

display:inline;

margin:0;

padding:0;

}

#tabshori a {

float:left;

background:url("your upload link") no-repeat left top;

margin:0;

padding:5px 10px 0 10px;

text-decoration:none;

}

#tabshori a span {

float:left;

display:block;

background:url("your upload link") no-repeat right top;

padding:5px 14px 4px 4px;

color:#0BAB01;

}

/* Commented Backslash Hack hides rule from IE5-Mac \*/

#tabshori a span {float:none;}

/* End IE5-Mac hack */

#tabshori a:hover {

background-position:0% -42px;

}

#tabshori a:hover span {

background-position:100% -42px;

}

]]></b:skin>

၃) အဆုိပါ ကုဒ္ထဲတြင္ your upload link ဆုိသည့္ စာသားေနရာတြင္ အဆင့္(၁)တုန္းက Upload တင္ခဲ့ေသာ ဖုိင္လင့္ကုိ ထည့္လုိက္ပါ။

၄) ၿပီးလွ်င္ Save ။

ဒါဆုိ Menu Tab ျပဳလုပ္တာ ၿပီးေျမာက္ၿပီ ျဖစ္ပါတယ္။ အားလံုးအဆင္ေျပၾကလိမ့္မည္ဟု ေမွ်ာ္လင့္လ်က္ .... ။

[

Posted by Unknown |