Thursday, 4 June 2015

ဘေလာ့ထဲက Label နဲ႔ Archive ေတြကို Scroll Box ေလးနဲ႔ထားနည္း

Posted by Paing Thu Kha - No comments | labels- Blog Scroll Code, Blog Tab Menu

ဒီနည္းက တစ္ခုလုပ္တတ္တာနဲ႔ တျခားတစ္ခုကို လုပ္တတ္ပါတယ္ ..
ဒီပို႔စ္မွာေတာ့ ကၽြန္ေတာ္က Blog Archive ကို Scroll Box ေလးနဲ႔
ထားတဲ့နည္းကို မွ်ေ၀ေပးပါမယ္ ..

Label ကို Scroll Box နဲ႔ထားခ်င္ရင္လည္း ဒီနည္းအတိုင္းပဲ လုပ္ေပးလိုက္႐ံုပါပဲ ...

ကဲ .. စၾကစို႔ ...
အရင္ဆံုး Blogger ကို Sign In ၀င္လိုက္ပါ
ၿပီးရင္ Layout ကိုသြားပါ

Blog Archive မထည့္ရေသးဘူးဆိုရင္ Add a widget ကေန Blog Archive ကိုေရြးၿပီး Save လုပ္ပါ
တကယ္လို႔ Blog Archive ထားၿပီးသားဆိုရင္ေတာ့ အဲဒီ Blog Archive ရဲ႕ နံမည္ကို ဘယ္လိုထားထားသလဲဆိုတာကို မွတ္ခဲ့ပါ
ေအာက္ကပံုထဲမွာေတာ့ ကၽြန္ေတာ္က ရွာရလြယ္ေအာင္ Archive In This Blog လို႔ နံမည္ေပးထားပါတယ္

Blog Archive ကို Save လုပ္ၿပီးၿပီဆိုရင္ေတာ့ Template ကိုသြားပါ
Edit HTML ကိုႏွိပ္ပါ
ပြင့္လာတဲ့ Template Coding ေတြထဲက ကိုယ္ေပးထားတဲ့ Blog Archive ရဲ႕နံမည္ကို လိုက္ရွာပါ
ကၽြန္ေတာ္ကေတာ့ Archive In This Blog ဆိုတာကို ရွာလိုက္ပါမယ္

ေတြ႕ၿပီဆိုရင္ေတာ့ အဲဒီ Code ေတြကို ျဖန္႔ေပးရပါမယ္ ..
ဆိုလိုတာက ကၽြန္ေတာ္တို႔ျမင္ေနတဲ့ကုဒ္ေတြဟာ ခ်ံဳ႕ထားတာပါ ..
ဘယ္ေနရာေတြမွာခ်ံဳ႕ထားတာလဲဆိုေတာ့ > .... </widget> အဲဒီလိုမ်ိဳးပံုစံထဲက အစက္ကေလးေတြထဲမွာ ကုဒ္ေတြကို ခ်ံဳ႕ထားတာပါ ..
သူ႕ကိုျဖန္႔ခ်င္ရင္ အဲဒီ အစက္ကေလးေတြေပၚမွာ ကလစ္တစ္ခ်က္ႏွိပ္ေပးလိုက္ရင္ ကုဒ္ေတြက်လာပါမယ္
အဲဒီလိုက်လာတဲ့ကုဒ္ေတြထဲက <div class='widget-content'> ကို ရွာပါ
ေတြ႕ၿပီဆိုရင္ အဲဒီကုဒ္ရဲ႕ေနာက္နားမွာ ကလစ္တစ္ခ်က္ေပးၿပီး Enter ႏွိပ္လိုက္ရင္ ေအာက္မွာတစ္ေၾကာင္းစာ လြတ္သြားပါမယ္
အဲဒီလြတ္သြားတဲ့တစ္ေၾကာင္းေနရာမွာ ေအာက္က ကုဒ္ကို ေကာ္ပီကူးၿပီးထည့္လိုက္ပါ

အဲဒီလိုထည့္လိုက္တဲ့အခါမွာ ေလာေလာဆည္ ကုဒ္မွားေနတဲ့အတြက္ ေအာက္မွာရွိတဲ့ </...> ပံုစံကုဒ္ေတြဟာ အနီေရာင္ေတြ ျဖစ္ကုန္ပါမယ္ ..
စိုးရိမ္စရာမရွိပါဘူး ...
ေနာက္ထပ္ အဲဒီ ကုဒ္အုပ္စုထဲက

</div>

အဲဒီလို ႏွစ္ခုထပ္ေနတဲ့ေအာက္မွာ တစ္ေၾကာင္းစာေနရာေပးၿပီး ေနာက္ထပ္ </div> တစ္ခုထပ္ထည့္ေပးလိုက္ပါ
အဲဒီလိုဆိုရင္

</div>

<b:include name='quickedit'/>

အဲဒီလို သံုးခုဆင့္သြားပါမယ္
ဒါဆိုရင္ မွားေနတဲ့ကုဒ္အနီေရာင္ေတြအားလံုး အစိမ္းေရာင္ ျပန္ေျပာင္းသြားပါမယ္ ..
ေအာက္ပံုကေတာ့ လိုအပ္တဲ့ကုဒ္ေတြ ထည့္ၿပီးသားပံုပါ

အားလံုးၿပီးရင္ေတာ့ Save template ကိုႏွိပ္လိုက္ပါ ...
ဒါဆိုရင္ ဘေလာ့ထဲက Archive List ေလးေတြဟာ Scroll Box ေလးထဲမွာ သပ္သပ္ရပ္ရပ္ ရွိေနတာကို ေတြ႕ုရပါလိမ့္မယ္ ...
ကဲ .. အဆင္ေျပပါေစဗ်ာ

နည္းပညာလမ္းေၾကာင္းေပၚကသူငယ္ခ်င္းေတြအားလံုးကို ေလးစားခင္မင္လွ်က္
အိုင္တီမုဆိုး

ေအာင္ေအာင္(မကစ) ရဲ႕ ဘေလာ့ခရီးသည္ေလးအား အားေပးေနၾကတဲ့အတြက္ ေက်းဇဴးအထူးတင္ပါတယ္.. လိ္ုျခင္တာကို ၾကိဳက္ႏွစ္သက္သလို ယူေဆာင္သုံးစြဲနိဳင္ပါတယ္.... အဆင္မေျပတာမ်ားရွိခဲ့ပါက...cbox မွာ ေျပာခဲ့ၾကပါေနာ္..

<<<မန္ဘာ၀င္ျပီး...Fb Like ျခင္းျဖင့္ အားေပးၾကပါေနာ္>>>

ေအာင္ေအာင္(မကစ) ပိုင္ဆိုင္ေသာ ေနရာေလးမ်ားကိုလာလည္ၾကပါ။

ဘေလာ့ခရီးသည္သို႕ { ဒီမွာ } သြားလိုက္ပါ
ဘေလာ့ဆုိင္ရာနည္းပညာမ်ား{ ဒီမွာ } သြားလိုက္ပါ
စြယ္စုံစာအုပ္စင္{ ဒီမွာ } သြားလိုက္ပါ

Tuesday, 2 June 2015

ဘေလာ့မွာSmooth-Navigational-Menu-ေလးသံုးခ်င္၇င္

Posted by Paing Thu Kha - No comments | labels- Blog Tab Menu

ဘေလာ့မွာ Smooth-Navigational-Menu- သံုခ်င္တဲ့ဘေလာ့ဂါမိတ္ေဆြေတြအတြက္ပါအ၇မ္းရွင္းပါတယ္၊ က်ေနာ္ေအာက္မွာပံုနဲ႕တကြျပထားေပးပါတယ္၊ဒီ Smooth-Navigational-Menu ကႏွစ္မ်ိဳးရိွပါတယ္ !! တစ္ခုကအလ်ွာလိုက္နွင့္ေဒါင္လိုက္ေပါ့ေနာ္၊တစ္ခုထဲမွာလင့္ခ္ေတြကိုအမ်ားၾကီးထည့္လို႕၇ပါတယ္။

ဘေလာ့ဆိုက္ဘားမွာထည့္ဒါထက္ပိုျပီးၾကည့္လို႕လည္းလွတာေပါ့ေနာ္၊က်ေနာ္ေအာက္မွာသြားၾကည့္လို႕ ၇ေအာင္လည္း DEMO လင့္ခ္လည္းေပးထားပါတယ္။အခုက်ေနာ္သံုေနတဲ့ Navigational-Menu ကလည္း က်ေနာ္စိတ္တိုင္းက်လုပ္ထားတာပါ၊ Menu maker ကေနၾကိဳက္၇င္လည္းေျပာၾကပါ၊ တင္ေပးဖို႕စိတ္ကူးထားပါတယ္၊မအားေသးလို႕ပါ ။

၁။Layout

၂။Edit HTML

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

<head>

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

<link href='http://www.ibizeye.com/Menu-in-Blogger/dropdown-menu-blogger/ddsmoothmenu.css' rel='stylesheet' type='text/css'/>
<link href='http://www.ibizeye.com/Menu-in-Blogger/dropdown-menu-blogger/ddsmoothmenu-v.css' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://www.ibizeye.com/Menu-in-Blogger/dropdown-menu-blogger/ddsmoothmenu.js' type='text/javascript'>
/***********************************************
* Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<script type='text/javascript'>
ddsmoothmenu.init({
mainmenuid: "smoothmenu1", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
ddsmoothmenu.init({
mainmenuid: "smoothmenu2", //Menu DIV id
orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
//customtheme: ["#804000", "#482400"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
</script>

၃။ Save Setting ကိုႏိုပ္လိုက္ပါ။

၄။Layout

၅။Page Element

၆။Add a gadget သြားမယ္၊ေအာက္က

၇။Html/java script မွာေအာက္က Code ကိုထည့္လိုက္ပါ။

ေအာက္မွာနွစ္ခုစလံုးေပးထားပါတယ္ၾကိဳက္တဲ့ဟာကိုယူသံုးၾကပါ။

ဒါကေတာ့အလ်ွာလိုက္ရဲ႕ Code ပါ။

<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="#">Folder 0</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>

ဒါကေတာ့ေဒါင္လိုက္ရဲ႕ Code ပါ။

<div id="smoothmenu2" class="ddsmoothmenu-v">
<ul>
<li><a href="http://www.dynamicdrive.com">Item 1</a></li>
<li><a href="#">Folder 0</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.dynamicdrive.com/style/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>

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

ဆရာ kp3 မွ.....

သည္ဆိုဒ္ေလး ျဖစ္ဖို႕ က်ေနာ္ စိတ္ကူးယဥ္ခဲ့တာ ျကာပါျပီဗ်ာ.. စုေဆာင္းထားသမွ်ေလးေတြနဲ႕ ျကိဳးစားထူေထာင္လိုက္ပါျပီ။ က်ေနာ့္ရဲ႕ ျမင္ဆရာ kp-3 ကိုအားက်မိလို႕ပါ။ အားေပးမွဳကိုအစဥ္ေလးစားလွ်က္ပါ။ တုန္ျပန္မွဳေလးတစ္ခုအေနနဲ႕...စကားေလးတစ္ခြန္းဘဲ ခ်န္ခဲ့ရင္ ေက်နပ္ပါျပီ။ ေအာင္ေအာင္(မကစ)

Monday, 1 June 2015

သိပ္လွပတဲ့ cloud menu ေလးလုပ္နည္း

Posted by Paing Thu Kha - No comments | labels- Blog Tab Menu

ဘေလာ့ကာ၀င္လုိက္ပါ Dashboard > Settings > Layouts
ေနာက္ Add a Gadget > Labels ကိုကလစ္ပါ
အဲထဲက Cloud ဆိုတာကို ေရြးခ်ယ္ေပးးရမယ္
ေရြးခ်ယ္ပါ display 25 labels
Save widget.လိုက္ပါ ဆက္ျပီးေတာ့ Settings > Template
Backup your template. လုပ္ခဲ့ပါ...
Edit HTML > Proceed ဆိုျပီးသြားလိုက္ပါ ေနာက္..
CTRL+F အကူျဖင့္ ]]></b:skin> ကုဒ္ရွာလုိက္ပါ..
ေတြ႕တာနဲ႕ သူ႕အေပၚမွာ ေအာက္က ကုဒ္ေတြကို ထည့္ေပးလိုက္ပါ။။

/*-----Custom Labels Cloud widget by www.MyBloggerTricks.com----*/ .label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #C6C6C6; border-radius: 3px; float:left; text-decoration:none; font-size:10px; color:#666; } .label-size:hover { border:1px solid #6BB5FF; text-decoration: none; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-transform: rotate(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; } .label-size a { text-transform: uppercase; float:left; text-decoration: none; } .label-size a:hover { text-decoration: none; }

မွတ္ခ်က္ ။ ။ မိတ္ေဆြမ်ား သည္နည္းလမ္းမွာ အခက္ေတြ႕ေစတာကေတာ့ တက္ပလက္ေတြရဲ႕ html က႑ကိုအသစ္ေျပာင္းလဲလုိက္ျခင္းပါ သည္ေတာ့ တခ်ိဳ႕ကုဒ္ေတြ ရွာ မရျဖစ္တတ္ပါတယ္.. ခုနည္းလမ္းက ]]></b:skin> သည္ကုဒ္ဆို လုံး၀ရွာမရပါဘူးးး ဒါကိုကြ်န္ေတာ္

အသဲအသန္လုူိက္ရွာေဖြမိတယ္... ေခါင္းစားရပါတယ္.. ေနာက္ေတာ့ ကုဒ္ကို အမ်ိဳးမ်ိဳး ေရးထည့္ရွာရတယ္

</b:skin> ဆိုျပီး ထည့္ရွာပါ အဲတာေတြ႕တဲ့ စာတိုင္မွာ ၾကည့္လုိက္ပါ မွ်ာအနက္ေလးနဲ႕ နံပါတ္ ၂၁ မွာ ျဖစ္မယ္ အဲတာကို ကလစ္ေပးလုိက္တာနဲ႕ သက္ဆိုင္ရာ ကုဒ္ေတြ ထပ္က်လာတယ္.. သေဘာကေတာ့ သူကကုဒ္ေတြကို ေခါက္သိမ္းထားတဲ့သေဘာ ရွိပါတယ္.. သည္ေတာ့ ရွာရသူ ရြာလည္ေစတာေပါ့... ေအာက္ကပုံေလးကိုၾကည့္ လုပ္ပါ.....

ေနာက္ေတြ႕လိုက္ပါျပီ....သူဖြက္သိမ္းထားတဲ့ ကုဒ္ေလးကိုေပါ့.....သြားးးးးးးးးးးးးလူဆိုးးးခ်ာလုိက္ရတာ...

10. Save template လုပ္လိုက္ပါ။

အဆင္ေျပပါေစေနာ္....

စကားေလးတစ္ခြန္းနဲ႕ fb like ေလးနဲ႕ဘဲ တုန္႕ျပန္မွဳေလးရရင္ ေက်နပ္ပါျပီ

ဘေလာ့မွာ Drop Down Menu ေလးလုပ္နည္း

Posted by Paing Thu Kha - 1 comment | labels- Blog Tab Menu

Blogger ၀ါသနာရွင္ မိတ္ေဆြအေပါင္းတို႕အတြက္ Drop Down Menu ေလးတစ္ခု ထပ္ျပီး တင္ေပးလိုက္ပါတယ္ေနာ္...။
ျပဳလုပ္ပံုနည္းလမ္းအဆင္႕ဆင္႕တို႕ကိုလည္း ေအာက္မွာ အေသးစိတ္ ရွင္းျပေပးထားပါ

ပုံေလးေတြ ၾကည့္ျပီးးလုိက္ စမ္းၾကည့္လိုက္ပါ

အဆင့္ 1 ဘေလာ့ကာ၀င္လိုက္ပါ > Page Elements >Layout> Add a Gadget ကိုအဆင့္ဆင့္သြားလုိက္ပါ။
အဆင္႕ 2 Eidt HTML ကုိေရြးေပးပါ။ ျပီးသြားရင္ က်လာတဲ့ေဘာက္ထဲမွာ ေအာက္က Code ကိုကူးထည္႕ေပးပါ။
အဆင္႕ 3 Save ႏွိပ္ေပးပါ။

<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">facebook</a></li>
<li><a href="#">gmail-gtalk</a>
        <ul>
        <li><a href="#">Level 1</a></li>
        <li><a href="#">Level 2</a></li>
        <li><a href="#">Level 3</a></li>
        <li><a href="#">Level 4</a></li>
        <li><a href="#">Level 5</a></li>
        </ul>
</li>
<li><a href="#">Three Levels</a>
        <ul>
        <li><a href="#">Level 1</a></li>
        <li><a href="#">Level 2</a></li>
        <li><a href="#">Level 3</a>
                <ul>
                <li><a href="#">Level 1</a></li>
                <li><a href="#">Level 2</a></li>
                <li><a href="#">Level 3</a></li>
                <li><a href="#">Level 4</a></li>
                <li><a href="#">Level 5</a></li>
                <li><a href="#">Level 6</a></li>
                <li><a href="#">Level 7</a></li>
                </ul>
        </li>
        <li><a href="#">Level 4</a></li>
        <li><a href="#">Level 5</a></li>
        </ul>
</li>
<li><a href="#">contact me</a></li>
</ul>
</div>

ၿပီးသြားရင္ေအာက္ကအဆင္႕အတိုင္းလုိက္လုပ္ေပးပါ။ HTML ၀င္လုိက္ပါ...

အဆင္႕ 4 ဘေလာ့ကာရဲ႕ Template > Edit HTML >process> Expand Widget Templates မွာအမွန္ျခစ္ေပးပါ။
အဆင္႕ 5 Ctrl + F ကိုႏွိပ္ျပီး ဒီကုတ္ေလးကိုရွာပါ ]]></b:skin>
အဆင္႕ 6 ေတြ႕ျပီဆိုရင္ ]]></b:skin> ရဲ႕ အေပၚမွာေအာက္က Code ကို ကူးထည္႕ေပးပါ။
အဆင္႕ 7 အရင္ဆံုး Preview နဲ႕အရင္ၾကည္႕ပါ။ အဆင္ေျပျပီဆိုမွ Save ႏွိပ္ေပးပါ။

#nav {   float: left;
        font: bold 12px Arial, Helvetica, Sans-serif;
        border: 1px solid #121314;
        border-top: 1px solid #2b2e30;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        overflow: hidden;}
#nav ul {
        margin:0;
        padding:0;
        list-style:none;}
#nav ul li {
        float:left;}
#nav ul li a {
        float: left;
        color:#d4d4d4;
        padding: 10px 20px;
        text-decoration:none;
        background:#3C4042;
        background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(59,63,65)), color-stop(0.55, rgb(72,76,77)), color-stop(0.78, rgb(75,77,77)) );
        background: -moz-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
        background: -o-linear-gradient( center bottom, rgb(59,63,65) 9%, rgb(72,76,77) 55%, rgb(75,77,77) 78% );
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 0 5px rgba(0, 0, 0, 0.1) inset;
        border-left: 1px solid rgba(255, 255, 255, 0.05);
        border-right: 1px solid rgba(0,0,0,0.2);
        text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);}
#nav li ul {
        background:#3C4042;
        background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
        background-image: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
        background-image: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
        border-radius: 0 0 10px 10px;
        -moz-border-radius: 0 0 10px 10px;
        -webkit-border-radius: 0 0 10px 10px;
        left: -999em;
        margin: 35px 0 0;
        position: absolute;
        width: 160px;
        z-index: 9999;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
        -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
        -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4) inset;
        border: 1px solid rgba(0, 0, 0, 0.5);
}

#nav li ul a {
        background: none;
        border: 0 none;
        margin-right: 0;
        width: 120px;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        border-bottom: 1px solid transparent;
        border-top: 1px solid transparent;
}
#nav ul li a:hover,
#nav ul li:hover > a {
        color: #252525;
        background:#3C4042;
        background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(77,79,79)), color-stop(0.55, rgb(67,70,71)), color-stop(0.78, rgb(69,70,71)) );
        background: -moz-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
        background: -o-linear-gradient( center bottom, rgb(77,79,79) 9%, rgb(67,70,71) 55%, rgb(69,70,71) 78% );
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2), 0 -1px #000;

}

#nav li ul a:hover,
#nav ul li li:hover > a  {
    color: #2c2c2c;
        background: #5C9ACD;
        background: -webkit-gradient( linear, left bottom, left top, color-stop(0.17, rgb(61,111,177)), color-stop(0.51, rgb(80,136,199)), color-stop(1, rgb(92,154,205)) );
        background: -moz-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
        background: -o-linear-gradient( center bottom, rgb(61,111,177) 17%, rgb(80,136,199) 51%, rgb(92,154,205) 100% );
        border-bottom: 1px solid rgba(0,0,0,0.6);
        border-top: 1px solid #7BAED9;
        text-shadow: 0 1px rgba(255, 255, 255, 0.3);
}

#nav li:hover ul {
        left: auto;
}

#nav li li ul {
        margin: -1px 0 0 160px;
        -webkit-border-radius: 0 10px 10px 10px;
        -moz-border-radius: 0 10px 10px 10px;
        border-radius: 0 10px 10px 10px;
        visibility:hidden;
}

#nav li li:hover ul {
        visibility:visible;
}

ေခါင္းစဥ္ Menu လွလွေလး လုပ္လိုပါက

Posted by Paing Thu Kha - No comments | labels- Blog Tab Menu

သည္နည္းေလးကေတာ့ ဘေလာ့မိတ္ေဆြမ်ားအတြက္ ေါခင္းစဥ္ေလးေတြကို လွလွပပေလးနဲ႕
မိမိတို႕ဘေလာ့ေဘးကေန ထားျခင္တယ္ဆိုရင္ ယူလုိက္ၾကပါေနာ္..ပုံေလးျပထားသလိုပါဘဲ..
အရမ္းလွပါတယ္ဗ်ာ... အေပၚမွာ မထားျခင္ဘဲ ေဘးမွာ သည္လိုေလး လွလွပပထားမယ္ဆိုလည္း
သင့္ဘေလာ့ေလး လွပေနမွာေသျခာပါတယ္..စမ္းၾကည့္ပါေနာ္..

ထည့္နည္းကေတာ့ ရိုးရွင္းလြယ္ကူလွပါတယ္..
    ►1. Login လုပ္လုိက္ပါ ဘေလာ့ကာကို
   ►2. Layout ကိုကလစ္ရပါ့မယ္ မိမိတို႕ Dashboard ကေနေပါ့
   ►3. Page Elements
   ►4. Add a Gadget ကိုကလစ္ေပးလုိက္ပါ
   ►5. HTML/Javascript. ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာဘဲ
   ►6. ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ ထည့္လိုက္ပါ

<center><div id="menu">
<ul>
<li><a class="current" href="http://aungsanmks.blogspot.com">မူလစာမ်က္ႏွာ</a></li>
<li><a href="http://aungsanmks.blogspot.com">ကဗ်ာ</a></li>
<li><a href="http://aungsanmks.blogspot.com">ေဆာင္းပါး</a></li>
<li><a href="http://aungsanmks.blogspot.com">ဗဟုသုတ</a></li>
<li><a href="http://aungsanmks.blogspot.com">သီခ်င္း</a></li>
<li><a href="http://aungsanmks.blogspot.com">ေဆာ့၀ဲလ္</a></li>
<li><a href="http://aungsanmks.blogspot.com">ဘေလာ့ပညာ</a></li>
<li><a href="http://aungsanmks.blogspot.com">contact us</a></li>
</ul>
</div></center>
<style>
/* --------------------------
AUTHOR : STYLED MENUS
URL : http://www.styledmenus.com
Copyrights by STYLED MENUS
Widget From http://bloggerstop.Net
----------------------------*/
*{
margin:0;
padding:0;
}
#menu{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOM_KRI58MlfzulTvoBfd15gW1rXMmptprzA0ng6uO7-IanqdYnpX7wnWb-HjEaijocvdfnSivLeI4faAaOVOcGrNxgyDeAwFpMdncMVJX3ogEuPvvKLU0_XK9XlFux3TfIlw9raVB3RQ/s1600/menu_026_bg.jpg) no-repeat;
width:172px;
height:191px;
padding:15px;
}
#menu ul{
list-style:none;
padding:0 0 0 8px;
}
#menu li{
list-style:none;
display:block;
padding:10px 0;
}
#menu li a{
list-style:none;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1vwIFB6Kf-VRzm1zA3Jshu9Kb_LCsYIZV8dotGma4ZI88ZBqg5CpLjfUq4zsJPNznMUxRu4boWBMvHCXYx0Dzg6Q7-lSoZd49f8qml7lpD_mNBnE3Fb4U56ZclIcE0QahDyDh7cFKGAU/s1600/menu_026_b.gif) no-repeat left center;
color:#ffe991;
font-weight:bold;
text-transform:uppercase;
font-size:11px;
line-height:1.2em;
text-decoration:none;
padding:0 5px 0 25px;
}
#menu li a:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1iqbjIKS_bM_ElRY5uzpUvJ2us837NbeaIBuDMZ35EaeF5_H1wFhU0WhQP5wYeBZOtuzGz2MdXQLeGTguyHzwHGo0kPth4ShPlY5UiaYrD7cmqQAtLSDfF1KJ_rsrtlLdTquTjff0BMA/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;
}
#menu li .current{
list-style:none;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1iqbjIKS_bM_ElRY5uzpUvJ2us837NbeaIBuDMZ35EaeF5_H1wFhU0WhQP5wYeBZOtuzGz2MdXQLeGTguyHzwHGo0kPth4ShPlY5UiaYrD7cmqQAtLSDfF1KJ_rsrtlLdTquTjff0BMA/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
font-weight:bold;
text-transform:uppercase;
font-size:11px;
text-decoration:none;
padding:0 5px 0 25px;
}
#menu li a.current, #menu li a:hover.current{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1iqbjIKS_bM_ElRY5uzpUvJ2us837NbeaIBuDMZ35EaeF5_H1wFhU0WhQP5wYeBZOtuzGz2MdXQLeGTguyHzwHGo0kPth4ShPlY5UiaYrD7cmqQAtLSDfF1KJ_rsrtlLdTquTjff0BMA/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;
}
</style>

မွတ္ခ်က္ ။ ။http://aungsanmks.blogspot.com ေနရာမွာ သင့္ဘေလာ့ လိပ္စာအစားထိုးပါ။ ေခါင္းစဥ္ေတြကို လိုအပ္သလို ေကာ္ပီယူ ပြါးနိဳင္ပါတယ္...

ကဗ်ာ-ေဆာင္းပါး-ဗဟုသုတ အသရွိတဲ့ ေနရာမွာ သင္ထည့္လိုရာေရးပါ

လွပေသသပ္တဲ့ menu ေလးပိုင္ဆိုင္ပါျပီ။

ေအာင္ေအာင္(မကစ) ရဲ႕ ဘေလာ့ခရီးသည္ေလးအား အားေပးေနၾကတဲ့အတြက္ ေက်းဇဴးအထူးတင္ပါတယ္.. တုန္႕ျပန္မွဳအေနနဲ႕ fb like ေလးေတာ့ လုပ္ေပးခဲ့ၾကပါေနာ္.. တတ္စြမ္းသမွ် ေတြ႕ ရွိသမွ်ေလးေတြကို ျပန္လည္ မွ်ေ၀ေနပါ့မယ္...။ အဆင္မေျပတာမ်ားရွိခဲ့ပါက...

ဘေလာ့ေခါင္းစဥ္ေတြကလစ္တာနဲ႕ စာမ်က္ႏွာအသစ္နဲ႕ေပၚေအာင္

Posted by Paing Thu Kha - No comments | labels- Blog Tab Menu, Blogger Beginner

မဂၤလာပါဗ်ာ ဒါေလးကေတာ့ အမွတ္တမဲ့နဲ႕ သတိမမူဂူမျမင္ျဖစ္တတ္တဲ့ နည္းပညာေလးတစ္ခုပါဘဲ

လုံး၀လြယ္ကူလြန္းေတာ့ လူေတြကအမွတ္မထားၾကတတ္ပါဘူးး က်ေနာ္ကုိယ္တိုင္ မွတ္မွတ္ရရ ရွိခဲ့ဖို႕ ဘေလာ့ သုံးခုေလာက္လုပ္ျပီးမွ မွတ္သားခဲ့မိလို႕ပါ...ဘာလဲဆိုေတာ့... မိမိတို႕ဘေလာ့ကေခါင္းစဥ္ေတြကို ကလစ္လိုက္တာနဲ႕ ရွိေနတဲ့ စာမ်က္ႏွာမွ မဟုတ္ဘဲ စာမ်က္ႏွာအသစ္နဲ႕ New Tab လို႕ေခၚမလား New Window ေခၚမလားး ၾကိဳက္တာေခၚ... ေျပာျခင္တာေတာ့ ေနာက္စာမ်က္ႏွာတစ္ခုနဲ႕ သြားပြင့္တာကိုပါ...အဲတာကေတာ့ မိမိတို႕ menu link ေတြကို စာလုံးေလး ႏွစ္လုံးေလာက္ တိုးထည့္ေပးယုံေလးပါဘဲ....

ကဲလိုျခင္သူယူေပါ့ဗ်ာ........မလိုေတာ့လဲ ေက်ာ္လုိက္ေပါ့..

မိမိတို႕ Tab Menu Link ေတြကသည္လိုရွိပါတယ္... သည္မူရင္းလင့္ကိုဘဲ target="new" ဆိုတာေလး ထပ္ေပါင္းထည့္ေပးလို္ကတာပါဘဲ...

< href="http://aungsanmks.blogspot.com">ဘေလာ့ပညာ< /a >

ထည့္လိုက္ျပီေနာ္ သည္လိုေလးျဖစ္လာတယ္...

< href="http://aungsanmks.blogspot.com" target="new">ဘေလာ့ပညာ< /a >

သတိျပဳရမွာက စာလုံးေလးကို မိမိတို႕ ဘေလာ့လင့္ေနာက္က ထည့္တဲ့အခါမွာ ကပ္ထည့္လိုက္ရင္ တခါတရံ လင့္ေတြ အလုပ္မလုပ္တတ္တာ ၾကံဳဘူးပါတယ္..
ထည့္ျပီးတာနဲ႕ Preview နဲ႕ေသျခာ ၾကည့္ေစလိုပါတယ္... အိုေက...တက္ပလက္ အလုပ္မလုပ္ဘူးဆိုပါေတာ့... target="new" စာလုံးေလးကို < href="http://aungsanmks.blogspot.com" ေနာက္မွာ space တခ်က္ျခားထည့္ေပးလိုက္ပါ။
တခ်က္ခြါထည့္တာေပါ့ေနာ္.... က်ေနာ့္ရဲ႕လင့္ေနရာကို မိမိတို႕လင့္နဲ႕ အစားထိုးေပးပါ။

အားေပးေနၾကတဲ့အတြက္ ေက်းဇဴးအထူးတင္ပါတယ္.. တုန္႕ျပန္မွဳအေနနဲ႕ fb like ေလးေတာ့ လုပ္ေပးခဲ့ၾကပါေနာ္.. တတ္စြမ္းသမွ် ေတြ႕ ရွိသမွ်ေလးေတြကို ျပန္လည္ မွ်ေ၀ေနပါ့မယ္...။ အဆင္မေျပတာမ်ားရွိခဲ့ပါက...

Css Menu Bar ေလးတည္ေဆာက္ၾကမယ္

Posted by Paing Thu Kha - 1 comment | labels- Blog Tab Menu

သည္နည္းပညာေလးကေတာ့ Menu လွလွေလးတ္ညေဆာက္လိုသေူတြအတြက္ အေထာက္ကူျပဳေစမဲ့ နည္းလမ္းေလးတစ္ခုပါ... ဘေလာ့မိတ္ေဆြတို႕ သိၾကမွာပါ Menu ဆိုတာ တက္ပလက္တိုင္းေအာ္တိုမပါဘူးဆိုတာေပါ့..အဲလို ေအာ္တိုမပါတဲ့ ဟာေတြနဲ႕ ေတြ႕တဲံအခါ က်ေနာ္တို႕အေနနဲ႕ အခက္ခဲ ျဖစ္ေစပါတယ္.. ဥပမာဗ်ာ... ကိုယ္က သည္တက္ပလက္ဒီဇိုင္းေလးကို
ၾကိဳက္ေနတယ္.. ေဟာ..ဒါေပမယ့္ Menu ေတြပါမလာဘူးးးဆိုပါေတာ့... အဲလိုေတြ႕တဲံအခါ ဒါေလးက အသုံး၀င္လာျပီေလ.. ဒါေၾကာင့္ ဘေလာ့တစ္ခု လုပ္ျပီဆိုရင္ေတာ့ Menu ကိုလည္း ကိုယ္တိုင္ထည့္တတ္မွ ျဖစ္မွာပါ...သည္စိတ္ကူးေလးနဲ႕ Menu Tab ေတြကိုတင္ျပေပးလိုက္တာပါ..
ထည့္နည္းေလးကိုရွင္းျပပါ့မယ္..ေနာ္...

အဆင့္ (၁) ...........
►1- Blogger Singin ၀င္လိုက္ပါ။
►2- DASHBOARD ကိုသြားလိုက္ပါ။
►3- LAYOUT ကိုကလစ္ပါ..။
►4- EDIT HTML ကို၀င္ပါ.
►5- Ctrl+F အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။

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

/* The CSS Code for the menu starts here */
.rhm1{
 width:780px;
 height:64px;
 margin:0 auto;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPpow_A7-atb2feo1rWNWSHQ9JXZgu6n83ieSzbjKhzzydiQZnhB2eEsMeDXkA9wcGYreACjbQXJ8BRZ5iXb7ky5aibP1B7EQkHsiIVR6JEqpzxQNFNvewIR9eILbBdJAq0ZnR6tlJtSo/s1600/rhm1_bg.gif) repeat-x;  
}
.rhm1-left{
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQsxD04JSX53H0t3Sg3GIX1j27CNMhdOJ8GX8LpgPcZ49L2aR_xLdcQ6GCAdnjqzHLWMdQfYz8PRFTFCK1bjzENh63Xiyi1g_tMRUJArkO_dqoOBnoqdO3nplhCJVoJFyvXdmhpBqpyFU/s1600/rhm1_l.gif) no-repeat;
 width:15px;
 height:64px;
 float:left;
}
.rhm1-right{
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifnE7XKzWGpvExVhGMwDuS_abgld0h2HTLwUa_v2ra_85KRh_FXsc5DhCWNcvl5jnLu6DqHcjsynTq8_aQBUNuypY00faGlRna-FNotrti72mIOI1mJe2m4mqI1fblKRwJItLwY5fxTkg/s1600/rhm1_r.gif) no-repeat;
 width:15px;
 height:64px;
 float:right;
}
.rhm1-bg{
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPpow_A7-atb2feo1rWNWSHQ9JXZgu6n83ieSzbjKhzzydiQZnhB2eEsMeDXkA9wcGYreACjbQXJ8BRZ5iXb7ky5aibP1B7EQkHsiIVR6JEqpzxQNFNvewIR9eILbBdJAq0ZnR6tlJtSo/s1600/rhm1_bg.gif) repeat-x;
 height:64px;
}
.rhm1-bg ul{
 list-style:none;
 margin:0 auto;
}
.rhm1-bg li{
 float:left;
 list-style:none;
}
.rhm1-bg li a{
 float:left;
 display:block;
 color:#ffe8cc;
 text-decoration:none;
 font:12px 'Lucida Sans', sans-serif;
 font-weight:bold;
 padding:0 0 0 18px;
 height:64px;
 line-height:40px;
 text-align:center;
 cursor:pointer; 
}
.rhm1-bg li a span{
 float:left;
 display:block;
 padding:0 32px 0 18px;
}
.rhm1-bg li.current a{
 color:#fff;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibK-5ihaV89rmhdIcDIlUPD_ZD0cW9_WycGRkBxvOlnqjB8EFBimpG924Iyn7s6-0iAS-tOc3Ak7cksPEG2RbTZZZPgyH6ZQmcRbpMtd-WOIisjTWdXictVM6BrVZeBm0yHMK35Vm0Xtw/s1600/rhm1_hover_l.gif) no-repeat left 5px;
}
.rhm1-bg li.current a span{
 color:#fff;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwkYd7iek0UGmybRiOkY6xs-1rDA4loPv9iuaxR_G04VJUZXYmgb6kr83xd19DUU4rvWSQ0kySwlMmR38f53IpqPDNweY7AQhb25FU-octtpq5W1sxhRDUpog_Q3tVj1HEM1R9MZnUf6U/s1600/rhm1_hover_r.gif) no-repeat right 5px;
}
.rhm1-bg li a:hover{
 color:#fff;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibK-5ihaV89rmhdIcDIlUPD_ZD0cW9_WycGRkBxvOlnqjB8EFBimpG924Iyn7s6-0iAS-tOc3Ak7cksPEG2RbTZZZPgyH6ZQmcRbpMtd-WOIisjTWdXictVM6BrVZeBm0yHMK35Vm0Xtw/s1600/rhm1_hover_l.gif) no-repeat left 5px;
}
.rhm1-bg li a:hover span{
 color:#ffffff;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwkYd7iek0UGmybRiOkY6xs-1rDA4loPv9iuaxR_G04VJUZXYmgb6kr83xd19DUU4rvWSQ0kySwlMmR38f53IpqPDNweY7AQhb25FU-octtpq5W1sxhRDUpog_Q3tVj1HEM1R9MZnUf6U/s1600/rhm1_hover_r.gif) no-repeat right 5px;
}

ျပီးတာနဲ႕ မိမိတို႕ တက္ပလက္ကို save လိုက္ပါ။

အဆင့္ (၂) ..............
ေနာက္တဆင့္ကေတာ့....သည္လိုေလးေပါ့...
   ►1. Login လုပ္လုိက္ပါ ဘေလာ့ကာကို
   ►2. Layout ကိုကလစ္ရပါ့မယ္ မိမိတို႕ Dashboard ကေနေပါ့
   ►3. Add a Gadget ကိုကလစ္ေပးလုိက္ပါ
   ►4. HTML/Javascript. ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာဘဲ
   ►5. ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ ထည့္လိုက္ပါ

<!--fobbleup.blogspot.comMenuBar Starts-->
<div class="rhm1">
<div class="rhm1-right"></div>
<div class="rhm1-left"></div>
<div class="rhm1-bg">
<ul>
 <li class="current"><a href="#"><span>Home</span></a></li>
 <li><a href="#"><span>ကဗ်ာ</span></a></li>
 <li><a href="#"><span>ဗဟုသုတ</span></a></li> 
 <li><a href="#"><span>တရားေတာ္</span></a></li>  
 <li><a href="#"><span>သတင္း</span></a></li> 
</ul>
</div>
</div>

ဒါဆို မိမိဘေလာ့မွာ လွပတဲ့ menu ေခါင္းစဥ္တန္းေလး ရရွိေနပါျပီေနာ္...

မွတ္ခ်က္ ။ ။ အနီေရာင္ အမည္ေတြမွာ မိမိႏွစ္သက္ရာ ထားေပးပါ..

# သည္ေနရာိကုေတာ့ မိမိတို႕ ဘေလာ့ labels ကလင့္ေတြနဲ႕ အစားထိုးလိုက္ပါ..

လင့္ခ်ိတ္ေပးရမယ္ေပါ့..လင့္ ခ်ိတ္နည္းကို မသိေသးသူမ်ားအတြက္ သည္ေနရာမွာ ေလ့လာနိဳင္တယ္ေနာ္....ခုနည္းလမ္းေလးက ခ်ိတ္ရတာ ပိုလြယ္ကူပါတယ္.. html ထဲကိုသြားစရာေတာင္မလိုပါဘူးး အဆင့္ (၂) မွာ ထည့္ထားတဲ့ Html/Javascript ေလးကို Edit ကေနကလစ္ျပီးဖြင့္ထားလုိက္ပါ... မိမိဘေလာ့ေပၚက Labels ကေန Copy Link Location ယူျပီး

# သည္ေနရာေလးမွာ past ခ်ေပးလိုက္ယုံပါဘဲ...မရွင္းပါက ေအာ္ခဲ့ပါ... ခ်ိတ္နည္း ပို႕စ္ တင္ေပးပါ့မယ္ဗ်ာ...........

ေအာင္ေအာင္(မကစ)

အလြယ္ကူဆုံး Button Tab Menu ထည့္နည္းလာျပီေနာ္

Posted by Paing Thu Kha - No comments | labels- Blog Tab Menu

ကဲဗ်ာ ဘေလာ့ကာ မိတ္ေဆံအေပါင္းတို႕အတြက္ သတင္းေကာင္း နည္းလမ္းေကာင္းေလးတစိခု

မွ်ေ၀ လုိက္ပါရေစ... ဘေလာ့မွာ ေခါင္းစဥ္လို႕ေခၚတဲ့ Tab Menu အတြက္ရင္ေလးေနေစတဲ့သူမ်ားအတြက္ပါ.. ကြ်န္ေတာ္ အရင္ပို႕စ္ေတြမွာလဲ Menu အေၾကာင္းအေတာ္မ်ားမ်ား တင္ျပခဲ့ဘူးပါျပီ... ဒါေလးကေတာ့ သူတို႕နဲ႕မတူ တမူထူးျခားဆိုသလိုေပါ့... အရမ္းကို လြယ္ကူျပီး ရိုးးရွင္းလြန္းလွပါတယ္... အမွန္တကယ္လဲ

လိုအပ္တဲ့ နည္းလမ္းေလးဆို မမွားပါဘူးး ဘာေၾကာင့္ဆိုေတာ့ တက္ပလက္ ေတြဟာ Tab Menu

ေအာ္တိုမပါတတ္သလို ပါလာတာက်ေတာ့လဲ မႏွစ္သက္တတ္ၾကတဲ့ ျပႆနာေလးေတြ ကြ်န္ေတာ္ကိုယ္တိုင္ပင္ ၾကံဳဘူးပါရဲ႕... အဲအတြက္ ေထာက္ထားစာနာလို႕ မွ်ေ၀တင္ျပလိုက္ရပါတယ္... ဒါကေတာ့ ကြ်န္ေတာ့အေနနဲ႕ေတာ့.. ေတြ႕သမွ်...သိသမွ်

အရိုးရွင္းးဆုံးး အလြယ္ကူးဆုံးးလို႕ဘဲ ယူဆမိပါတယ္...သူက Button ပုံစံေလးနဲ႕မို႕

လွလည္းလွတယ္ဗ်ာ.. Dropdown မဟုတ္ေပမယ့့္ အရမ္းလွပါတယ္... အေပၚပုံေလးအတိုင္းပါဘဲ

လုပ္နည္းနဲ႕ ကုဒ္ေတြကို ေအာက္မွာ ေလ့လာပါ...

ထည့္နည္းးးးးးးးးးး

   ►1. Login လုပ္လုိက္ပါ ဘေလာ့ကာကို
   ►2. Layout ကိုကလစ္ရပါ့မယ္ မိမိတို႕ Dashboard ကေနေပါ့
   ►3. Add a Gadget ကိုကလစ္ေပးလုိက္ပါ
   ►4. HTML/Javascript. ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာဘဲ
   ►5. ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ ထည့္လိုက္ပါ

<a href="#"><button>မူလစာမ်က္ႏွာ</button></a>

<a href="#"target="new"><button><span style="color: rgb(51, 51, 255);">ဘေလာ့ပညာမ်ား</span></button></a>

<a href="#"target="new"><button><span style="color: rgb(51, 51, 255);">ေဆာ့၀ဲလ္မ်ား</span></button></a>

<a href="#"target="new"><button><span style="color: rgb(51, 51, 255);">Gmail-Gtalk</span></button></a>

<a href="#"target="new"><button><span style="color: rgb(51, 51, 255);">Facebook</span></button></a>

<a href="#"><button><span style="color: rgb(51, 51, 255);">နည္းလမ္းေထြေထြ</span></button></a>

ေနာက္ထပ္ တိုးပြါးလိုအပ္ပါက ေအာက္ကေန လိုသေလာက္ပြါးးမာ်းနိဳင္ပါတယ္.. ေအာက္ကကုဒ္ကို ယူပြါးလိုက္ၾကပါေနာ္...

<a href="မိမိေခါင္းစဥ္ရဲ႕ URL လင့္"target="new"><button><span style="color: rgb(51, 51, 255);">ေခါင္းစဥ္အမည္</span></button></a>

မွတ္ခ်က္ ။ ။ # သည္ေနရာမွာ မိမိတို႕ လင့္ေတြကိုအစားထိုးပါ။
ေခါင္းစဥ္အမည္ေတြေတာ့ ၾကိဳက္ရာေရးနိဳင္ပါတယ္...

ဘေလာ့ရဲ႕အလွဆင္တဲ့Lavalamp Menu ေလးေနာ္

Posted by Paing Thu Kha - No comments | labels- Blog Tab Menu

မိတ္ေဆြတို႕ အတြက္ လာျပီေနာ္ Fancy CSS3 & jQuery Lavalamp Menu ဆိုတဲ့ စတိုင္းအလန္းစားေလးေတြပါ..မိမိတို႕ဘေလာ့မွာ စိတ္တိုင္းက် တည္ေဆာက္လို႕ ရပါျပီဗ်ာ...
သိပ္လွတဲ့ Menu ေလးေတြလို႕ေတာ့ လက္ခံၾကမွာပါေနာ္.. စမ္းသတ္ၾကည့္လိုက္ပါ... မိမိရဲ႕
ေဘလာ့ဆိုဒ္ေလး စပါယ္ရွယ္..ဂြမ္းသြားးမယ္...ေိေိ....
လုပ္နည္းနဲ႕တစ္ကြ လိုအ္ပတဲ့ကုဒ္ေတြကို ရွင္းျပထားပါတယ္...

အဆင့္ (၁)   အေနနဲ႕ ၾကည့္လုိက္ပါေနာ္...
►1- Blogger Singin ၀င္လိုက္ပါ။
►2- DASHBOARD ကိုသြားလိုက္ပါ။
►3- LAYOUT    ကိုကလစ္ပါ..။
►4- EDIT HTML ကို၀င္ပါ..
►5- Ctrl+F အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။

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

/*LAVALAMP MENU BY http://www.mrthangming.blogspot.com/ START*/

.lavalamp {
    position: relative;
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 15px;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    border-radius : 10px;
    -moz-border-radius : 10px;
    -webkit-border-radius : 10px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
height: 18px;
        font-family: calibri;
}

.magenta {
background : rgb(190,64,120);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
border: 1px solid #841144;

}

.cyan {
background : rgb(64,181,197);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
border: 1px solid #2f8893;

}

.yellow {
background : rgb(255,199,79);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
border: 1px solid #c08c1f;

}

.orange {
background : rgb(255,133,64);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
border: 1px solid #c04f11;

}

.dark {
background : rgb(89,89,89);
background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
border: 1px solid #272727;

}

.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.40);

}

.lavalamp a {
    text-decoration: none;
    color: #262626;
    line-height: 20px;
}

.lavalamp ul {
    margin: 0;
    padding: 0;
    z-index: 300;
    position: absolute;
}

.lavalamp ul li {
    list-style: none;
    float:left;

    text-align: center;
    }

.lavalamp ul li a {
    padding: 0 20px;
    text-align: center;
    }

.floatr {
    position: absolute;
    top: 10px;
    z-index: 50;
    width: 70px;
    height: 30px;
    border-radius : 8px;
    -moz-border-radius : 8px;
    -webkit-border-radius : 8px;
    background : rgba(0,0,0,.20);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
}

/*LAVALAMP MENU BY http://www.mrthangming.blogspot.com/ END*/

အဆင့္ (၂) အေနနဲ႕ ဆက္ၾကည့္ၾကပါေနာ္.... အေပၚကလိုဘဲ html ထဲမွာေပါ့ေနာ္...
</hrad> ဆိုတာေလးကို ထပ္ရွာပါ..ေတြ႕တာနဲ႕ သူ႕ေအာက္မွာ ကပ္ျပီးး ေပးထားတဲ့ ေအာက္ကကုဒ္ကို ထည့္ေပးလိုက္ပါ။

ေအာင္ေအာင္(မကစ) ပိုင္ဆိုင္ေသာ ေနရာေလးမ်ားကိုလာလည္ၾကပါ။

Sunday, 31 May 2015

Easy Menu For Your Blog

Posted by Paing Thu Kha - No comments | labels- Blog Tab Menu

ဘေလာ့ဆိုတဲ့ နယ္ေျမထဲမွ၀င္ေရာက္စ သူငယ္ခ်င္းေတြအတြက္ အဆင္ေျပေခ်ေမြ႕႔ေစတဲ့ Menu အလြယ္ကူဆုံးထည့္နည္းေလးပါ... ဒါေလးကေတာ့ ဘယ္ html ေတြ ဘာေတြမွလဲ ၀င္စရာမလိုေတာ့ပါဘူး မိမိဘေလာ့ရဲ႕ layout ကေန အလြယ္တကူထည့္နိဳင္မွာ ျဖစ္ပါတယ္..
ကဲ ထည့္နည္းနဲ႕ ကုဒ္ေတြကို ေအာက္မွာ ေပးလို္ကတယ္ေနာ္..အရင္ကလဲ မ်ားစြာ တင္ေပးဘူးပါတယ္.... အလြယ္တကူထည့္နိဳင္တဲ့နည္းလမ္းေတြကိုေပါ့...
ၾကိဳက္တာ ယူသုံးနိဳင္ပါတယ္..

မွတ္ခ်က္ ။ ။ ပုံက သေဘာျပထားတာပါ အဲတိုင္းမဟုတ္ပါဘူးးးဟိဟိ..
# ေနရာမွာမိမိတို႕ လင့္ကိုထည့္ပါ.... link ခ်ိတ္နည္းမသိပါက သည္မွာ ေလ့လာလုိက္ပါ.။

Dropdown Menu လွလွေလးဖန္တီးၾကမယ္

Posted by Paing Thu Kha - No comments | labels- Blog Tab Menu

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

►1- Blogger Singin ၀င္လိုက္ပါ။
►2- Dashboard ကိုသြားလိုက္ပါ။
►3- Template    ကိုကလစ္ပါ..။
►4- Edit Html   ကို၀င္ပါ.. Process ကိုကလစ္ျပီးဆက္၀င္လုိက္ပါ။
►5- Ctrl+F (သို႕မဟုတ္) F3 အကူညီျဖင့္ ေပးထားတဲ့ ကုဒ္ကို ရွာလိုက္ပါ။

   ]]></b:skin>    ကုဒ္ကိုရွာလုိက္ပါ ေတြ႕တာနဲ႕ သူ႕အေပၚမွာ သူမတုိင္မွီေပါ့
ေအာက္ကေပးထားတဲ့ကုဒ္ေတြကို ထည့္ေပးလုိက္ပါေနာ္....မေတြ႕ပါက b:skin ကိုသာရွာလိုက္ပါ ေတြ႕တာနဲ႕ သူ႕ေရွ႕က မွ်ားနက္ေလးကိုကလစ္ ျဖည္လုိက္ပါ ေနာက္ အန္းတား ေခါက္ပါ လိုျခင္ေသာကုဒ္ ေတြ႕ပါျပီ

/* Flying Css3 menu www.bloggertrix.com*/  #flyingmenubt,#flyingmenubt ul {     list-style: none outside none;     margin: 0;     padding: 0;     height:500px;} #flyingmenubt {     font-family: "Lucida Sans Unicode",Verdana,Arial,sans-serif;     font-size: 13px;     height: 36px;     list-style: none outside none;     margin: 40px auto;     text-shadow: 0 -1px 3px #202020;     width: 980px;     -moz-border-radius:4px;     -webkit-border-radius:4px;     border-radius:4px;     -moz-box-shadow: 0px 3px 3px #cecece;     -webkit-box-shadow: 0px 3px 3px #cecece;     box-shadow: 0 3px 4px #8b8b8b;     background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));     background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);     background-color:#5f5f5f; } #flyingmenubt ul {     left: -9999px;     position: absolute;     top: -9999px;     z-index: 2; } #flyingmenubt li {     border-bottom: 1px solid #575757;     border-left: 1px solid #929292;     border-right: 1px solid #5d5d5d;     border-top: 1px solid #797979;     display: block;     float: left;     height: 34px;     position: relative;     width: 105px; } #flyingmenubt li:first-child {     border-left: 0 none;     margin-left: 5px; } #flyingmenubt li a {     color: #FFFFFF;     display: block;     line-height: 34px;     outline: medium none;     text-align: center;     text-decoration: none;     background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));     background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);     background-color:#5f5f5f; }  /* keyframes #animation1 */ @-webkit-keyframes animation1 {     0% {-webkit-transform: scale(1);}     30% {-webkit-transform: scale(1.3);}     100% {-webkit-transform: scale(1);}} @-moz-keyframes animation1 {     0% {-moz-transform: scale(1);}     30% {-moz-transform: scale(1.3);}     100% {-moz-transform: scale(1);}} #flyingmenubt li > a:hover {      -moz-animation-name: animation1;     -moz-animation-duration: 0.7s;     -moz-animation-timing-function: linear;     -moz-animation-iteration-count: infinite;     -moz-animation-direction: normal;     -moz-animation-delay: 0;     -moz-animation-play-state: running;     -moz-animation-fill-mode: forwards;     -webkit-animation-name: animation1;     -webkit-animation-duration: 0.7s;     -webkit-animation-timing-function: linear;     -webkit-animation-iteration-count: infinite;     -webkit-animation-direction: normal;     -webkit-animation-delay: 0;     -webkit-animation-play-state: running;     -webkit-animation-fill-mode: forwards; } #flyingmenubt li:hover > a {     z-index: 4; } #flyingmenubt li:hover ul.subs {     left: 0;     top: 34px;     width: 150px; } #flyingmenubt ul li {     background: none repeat scroll 0 0 #838383;     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);     opacity: 0;     width: 100%;     /*-webkit-transition:all 0.3s ease-in-out;     -moz-transition:all 0.3s ease-in-out;     -o-transition:all 0.3s ease-in-out;     -ms-transition:all 0.3s ease-in-out;     transition:all 0.3s ease-in-out;*/ }  /* keyframes #animation2 */ @-webkit-keyframes animation2 {     0% {margin-left:185px;}     100% {margin-left:0px;opacity:1;} } @-moz-keyframes animation2 {     0% {margin-left:185px;}     100% { margin-left:0px;opacity:1;} } #flyingmenubt li:hover ul li {     /* css3 animation */     -moz-animation-name: animation2;     -moz-animation-duration: 0.3s;     -moz-animation-timing-function: linear;     -moz-animation-iteration-count: 1;     -moz-animation-direction: normal;     -moz-animation-delay: 0;     -moz-animation-play-state: running;     -moz-animation-fill-mode: forwards;     -webkit-animation-name: animation2;     -webkit-animation-duration: 0.3s;     -webkit-animation-timing-function: linear;     -webkit-animation-iteration-count: 1;     -webkit-animation-direction: normal;     -webkit-animation-delay: 0;     -webkit-animation-play-state: running;     -webkit-animation-fill-mode: forwards;      /*-webkit-transition:all 0.3s ease-in-out;     -moz-transition:all 0.3s ease-in-out;     -o-transition:all 0.3s ease-in-out;     -ms-transition:all 0.3s ease-in-out;     transition:all 0.3s ease-in-out;*/ } /* animation delays */ #flyingmenubt li:hover ul li:nth-child(1) {     -moz-animation-delay: 0;     -webkit-animation-delay: 0; } #flyingmenubt li:hover ul li:nth-child(2) {     -moz-animation-delay: 0.05s;     -webkit-animation-delay: 0.05s; } #flyingmenubt li:hover ul li:nth-child(3) {     -moz-animation-delay: 0.1s;     -webkit-animation-delay: 0.1s; } #flyingmenubt li:hover ul li:nth-child(4) {     -moz-animation-delay: 0.15s;     -webkit-animation-delay: 0.15s; } #flyingmenubt li:hover ul li:nth-child(5) {     -moz-animation-delay: 0.2s;     -webkit-animation-delay: 0.2s; } #flyingmenubt li:hover ul li:nth-child(6) {     -moz-animation-delay: 0.25s;     -webkit-animation-delay: 0.25s; } #flyingmenubt li:hover ul li:nth-child(7) {     -moz-animation-delay: 0.3s;     -webkit-animation-delay: 0.3s; } #flyingmenubt li:hover ul li:nth-child(8) {     -moz-animation-delay: 0.35s;     -webkit-animation-delay: 0.35s; }

ေနာက္ save template လုပ္နိဳင္ပါတယ္...
ျပီးတာနဲ႕ ေနာက္တဆင့္ ထပ္လုပ္ဖို႕ က်န္ပါေသးးတယ္ ေအာက္မွာ ဆက္ေလ့လာပါေနာ္

   ►1. Login လုပ္လုိက္ပါ ဘေလာ့ကာကို
   ►2. Layout ကိုကလစ္ရပါ့မယ္ မိမိတို႕ Dashboard ကေနေပါ့
   ►3. Add a Gadget ကိုကလစ္ေပးလုိက္ပါ
   ►4. HTML/Javascript. ကိုကလစ္ျပီး က်လာတဲ့ ေဘာက္ေလးထဲမွာဘဲ
   ►5. ေအာက္ကေပးထားတဲ့ ကုဒ္ေတြကို ေကာ္ပီယူ ထည့္လိုက္ပါ

<ul id="flyingmenubt">
    <li><a href="http://www.bloggertrix.com/">Home</a></li>
    <li><a class="hsubs" href="#">Menu 1</a>
        <ul class="subs">
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
            <li><a href="#">Submenu 3</a></li>
            <li><a href="#">Submenu 4</a></li>
            <li><a href="#">Submenu 5</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="http://www.bloggertrix.com/">Menu 2</a>
        <ul class="subs">
            <li><a href="#">Submenu 2-1</a></li>
            <li><a href="#">Submenu 2-2</a></li>
            <li><a href="#">Submenu 2-3</a></li>
            <li><a href="#">Submenu 2-4</a></li>
            <li><a href="#">Submenu 2-5</a></li>
            <li><a href="#">Submenu 2-6</a></li>
            <li><a href="#">Submenu 2-7</a></li>
            <li><a href="#">Submenu 2-8</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="#">Menu 3</a>
        <ul class="subs">
            <li><a href="#">Submenu 3-1</a></li>
            <li><a href="#">Submenu 3-2</a></li>
            <li><a href="#">Submenu 3-3</a></li>
            <li><a href="#">Submenu 3-4</a></li>
            <li><a href="#">Submenu 3-5</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    <li><a href="#">Menu 6</a></li>
    <li><a href="http://www.bloggertrix.com/">Back</a></li>
</ul>

ကဲဒါဆို အဆင္ျပသေလာက္ပါျပီေနာ္... လုိအပ္သေလာက္ ေခါင္းစဥ္ေတြကိုလဲ ပြါးနိဳင္ပါတယ္..

<<< မန္ဘာ၀င္ျပီး... Fb Like ျခင္းျဖင့္ အားေပးၾကပါေနာ္ >>>