မဂၤလာပါခင္ဗ်ာ :::: ကၽြန္ေတာ္တင္သမွ် Post ေလးမ်ားသည္ ကၽြန္ေတာ္ေလ႕လာဖူးသမွ်ကို ျပန္လည္မွ်ေ၀ေပးျခင္းျဖစ္ပါတယ္။ သူငယ္ခ်င္းအားလံုးလည္း ကၽြန္ေတာ္႕ site မွႀကိဳက္ႏွစ္သက္တဲ႕ မည္႕သည္႕ Post ကိုမဆို ျမန္မာ IT နည္းပညာဖြံ႕ၿဖိဳးတိုးတက္ေရးအတြက္ ျပန္လည္မွ်ေ၀ေပးေစလိုပါတယ္ဗ်ာ။ ::::

Dashboard

Monday, September 17, 2012

Colourful Attractive Slate CSS Menu Menu Bar

 

    

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

Facebook ရဲ႕ Like button ကိုႏွိပ္ျခင္းျဖင္႕ မိမိရဲ႕ Facebook ေပၚမွာ ဒီ Post ေလးေရာက္သြားမွာပါ။ 
ဒီ Post ေလးကိုသေဘာက်တယ္ဆိုရင္လည္း Like Button ေလးကိုႏွိပ္ခဲ႕ေပးပါေနာ္။

ဒီေနရာကေနစျပီေနာ္။ေသခ်ာေလးဖတ္ျပိးလိုက္လုပ္ၾကည္႕ေပးပါ။ လြယ္ပါတယ္။
 
drop down menu
HTML JAVASCRIPT A simple Drop Down Menu For Blogger


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


<div class="blue">
<div id="slatenav">
<ul>
<li><a href="လင္႕ထည္႕ရန္" title="css menus" class="current">အမည္ထည္႕ရန္</a></li>
<li><a href="လင္႕ထည္႕ရန္" title="css menus" class="current">အမည္ထည္႕ရန္</a></li>
<li><a href="လင္႕ထည္႕ရန္" title="css menus" class="current">အမည္ထည္႕ရန္</a></li>
<li><a href="လင္႕ထည္႕ရန္" title="css menus" class="current">အမည္ထည္႕ရန္</a></li>
<li><a href="လင္႕ထည္႕ရန္" title="css menus" class="current">အမည္ထည္႕ရန္</a></li>
<li><a href="လင္႕ထည္႕ရန္" title="css menus" class="current">အမည္ထည္႕ရန္</a></li>
</ul>
</div>
</div>



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

/* ---------------------- Blueslate nav ---------------------- */
.blue #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHnhuOwcsm3s7ki9mPIm-MZ-LqhHNwonXsZbk8E6V5WycZRwSMYThC2lmXULXquuEyINfd6Dae4TpaO1EKEFyILAgesfhPuIkFsJyBFpejZerES9p0onszkh0QAO_iHpUu_VpuhiQPTgU/s1600/blueslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.blue #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.blue #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.blue #slatenav ul li a{display:block;float:left;color:#D5F1FF;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.blue #slatenav ul li a:hover,.blue #slatenav ul li a.current{color:#fff;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyIud7fFSMxnOJP9tOcBfeyiSHp_SvU5g6zp3ZcVIIflkH86gZ1jhGhyphenhyphenVnf_u__Xp_U3BdqZ6uKPZ8mgNYVZWEyWP_mqZpwaY_SQ75H5oSeSxFjSKd5s6t0EZYMZEaf-iG2aG1BGoyqMw/s1600/blueslate_backgroundOVER.gif) no-repeat top center;}
/* ---------------------- END Blueslate nav ---------------------- */

/* ---------------------- Greenslate nav ---------------------- */
.green #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhURLorwfSm1UNhIu2_3LC12Ujk9VLZgOpSwIRHO1BmyEizOzfogQengHvvqRf-1-4rFd5CdiJMGbKOacuXbgHeNsuR0c0KrMjdGCZCchn8K24CCvibFzd-ZhcLZZCjfb9Pupy2L9qwqWU/s1600/greenslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.green #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.green #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.green #slatenav ul li a{display:block;float:left;color:#EEFFDF;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.green #slatenav ul li a:hover,.green #slatenav ul li a.current{color:#fff;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm3jEel5lmiGfGHG2Z5YiZZdlSfZ4JFco9-3auxJTlPUoPK_UTEhixCA5bIhxo1awITmxKQnjbbRxm_BM5RxU00V7UIzfvu9EsiSzy4JJeT66YDqCP83eUrlaY8dtykcz4dTJcxJP49z0/s1600/greenslate_backgroundOVER.gif) no-repeat top center;}
/* ---------------------- END Greenslate nav ---------------------- */

/* ---------------------- Redslate nav ---------------------- */
.red #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Ei3jKLlxdK_IbnrJji2zFem8eOr4s4mqghrKzr9JX4TuuUPsbDTeFE0rYcMbI6rShir1lEVewpxUa959OQ8FD0YL7RFyAuzt2mSyH8Slg5jqAm6U_Cru8ofCCPxkzaZzoaH04rlAbOY/s1600/purpleslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.red #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.red #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.red #slatenav ul li a{display:block;float:left;color:#FECCC3;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.red #slatenav ul li a:hover,.red #slatenav ul li a.current{color:#fff;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAgO0I4kXOy-voszx1wx26MGVahzeZAUx3hgEXeGb2JQ0_tHkNwcDrpjjxfrXamdW-3B5WDVgXGzsie-Jk6mWUMr5zq8uV6gDzMYem1HU6_f0POyNCqHGcV1iq5U4nQrKeHHPNcKx0ynU/s1600/purpleslate_backgroundOVER.gif) no-repeat top center;}
/* ---------------------- END Redslate nav ---------------------- */

/* ---------------------- Purpleslate nav ---------------------- */
.purple #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZdkJDS_bad1rG96A6n_3KuMrWte6th5ZVxbR3I2S9693dkrNJo4JFG6afAahdVlilfEh5SQHavwLQW5UYTWI6f2KfNUWeOZb5Y-sNMYCqkhj4QeGMLY4AFUW0ss9XagDlGwzUnSGg-GQ/s1600/redslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase;}
.purple #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.purple #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.purple #slatenav ul li a{display:block;float:left;color:#FBDAFA;text-decoration:none;padding:14px 22px 0 22px;height:28px;}
.purple #slatenav ul li a:hover,.purple #slatenav ul li a.current{color:#fff;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWttAdVIvxJXYJJnUNaxbV7w6hBIjvWFOGSKtppNylxISOddlOuydw7jverYpu-YmGtMq5905iSJ9bXY-UPsp979KCnUth71n7t0sXqBi-c5STCosM02mKRSTOGZp1FFbfjGm0qfmsKZg/s1600/redslate_backgroundOVER.gif) no-repeat top center;}
/* ---------------------- END Purpleslate nav ---------------------- */


ကၽြန္ေတာ္က နမူနာအေနနဲ႕ အျပာေရာင္ေလးကိုသံုးျပထားပါတယ္။ ေနာက္ထပ္တျခားအေရာင္ၾကိဳက္

တယ္ဆိုရင္ <div class="blue"> အဲဒီကုတ္မွာ အစားထိုးေပးပါေနာ္။ ေအာက္မွာ အစားထိုးရမယ္႕
Code နဲ႕ အေရာင္ေလးေတြကို ေရးေပးထားပါတယ္ဗ်ာ။ အားလံုးဘဲအဆင္ေျပၾကပါေစေနာ္။


     <div class="blue">


   <div class="green">

   <div class="red">

  <div class="purple">

2 comments:

  1. Read more ထည့္တာေလးလည္းေျပာေပးပါ။ေက်းဇူးပါ။

    ReplyDelete
  2. ကုိျပည့္ျဖိဳးေရ။ခုလို .com ၀က္ဆိုက္ေတြမွာ blogspot ရဲ ့ဟာေတြသံုးရေအာင္ဘယ္လိုလုပ္ရတာလဲဟင္။
    ကြ်န္ေတာ္လဲခုမွစေလ့လာေနတာပါ။ကြ်န္ေတာ္သိတာကblogspotမွာပဲသံုးရတယ္ထင္ေနတာ။အကို ့၀က္ဆိုက္မွာ
    လုပ္ထားတာေတြ ့မွသံုးလို ့ရမွန္းသိတာ။အဲ ့ဒါ blogger cms ကိုသံုးလို ့လားဗ်၊အဲလိုဆိုရင္၀က္ဆိုက္အသစ္
    တခုမွာဘယ္လိုအဲ ့cms ထည့္ရတယ္ေျပာျပေပးပါလားဗ်ာ။ကြ်န္ေတာ့ေမးက freshsmile298@gmail.com ပါ။
    အကုိ့၀က္ဆိုက္ကစာအုပ္တခ်ိဳ ့နဲ ့ေဆာ့၀ဲေတြလဲေဒါင္းသြားပါတယ္။ေက်းဇူးတင္ပါတယ္ဗ်ာ။

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...