Colourful Attractive Slate CSS Menu Menu Bar

 

    

                  Blogger ညီကိုမ်ားအတြက္ ေနာက္ထပ္ Menu လွလွေလးေတြထပ္ေတြ႕ထားလို႕ ျပန္လည္

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

ဆိုမွ ျပန္ျပီးတင္ေပးလိုက္တာျဖစ္ပါတယ္။ အဲဒါေၾကာင္႕သေဘာက်ခဲ႕တယ္ဆိုရင္ေတာ႕ စိတ္ခ်လက္ခ်

ကူယူအသံုးျပဳႏိုင္ပါတယ္။ ေအာက္မွာ ပံုနဲ႕တကြရွင္းျပထားပါတယ္ဗ်ာ။

Facebook ရဲ႕ Like button ကိုႏွိပ္ျခင္းျဖင္႕ မိမိရဲ႕ Facebook ေပၚမွာ ဒီ Post ေလးေရာက္သြားမွာပါ။ 

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

ဒီေနရာကေနစျပီေနာ္။ေသခ်ာေလးဖတ္ျပိးလိုက္လုပ္ၾကည္႕ေပးပါ။ လြယ္ပါတယ္။

 

အဆင့္ 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/AVvXsEi-7NXE2iemQShw74s3UOJtHBkRCBBb6nKQ366_reAjiQ2VptLriC7xvgroF6GJCR9U1Nt3xgj3VA38QF7XY3jY3ENRI1lCIDfMii7YspjiSvjFiCwcaZ7kPV5h2pgIGE2p5H_11KfUqAY/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/AVvXsEjwhgIY57hIkf6XawN8kHmHD_-Eu9OT3MC0QdcIvyCGabnnl2xfMRFLa_zVvfNI2aS4qH9TQCXxfLMPuaGH_3aEtxzif5kOwhYk45ciw9aY0q9yYuW2dIUOfqQvgZTMSfVW70kgPcDSwEc/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/AVvXsEgIjCsj8hGbXLUJ-mpi2T3BUBlRsG82gxkGs-lT3NNEAAhk8V68gn43aloBHTkSgB4cjJDZg_ylP4EpWhR5LMgUVGf8FdxY7q7lKHn07cUKaomyoMck3tjJrVDu6EsiFW4Bv_9TSc9xzfg/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/AVvXsEjdslJFYNmTQBox6C6byAjg8rdbEMsZqtsdQxAF8_zWnmZUAOszqORROygAez7pdmTbvEwRsa99FdWI4dbYzyzx5QM40SSE9MZJkPpa78EYCc4DiBNoxyWijjKR63Pao4ORiu7CIMnlsJM/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/AVvXsEiu5xSMYHtDinZ78if7j_wZCp0UWqdHOJ-p1S-w7DwTYqY_qKH9Wc-xVjklx6l9Gh5GgYVbgzNU4ggalo_xumIy-S6uqVBLfNSGnwl4hkOLbeNpNHbRjV75Jv0UagiBphdVRayjDv6sRBg/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/AVvXsEjuHikTPTUVEWiS0nzhmBZ1QjKB3sOdQoqfSsYOfkhFyIBXVi1vHUAesJSjtpLryy0KDR9FWISkPEOMOaQm_GQLnN22fus41z_Et1OTMdLInF_CpsXWXWMYLQknwnRLDwgVyS93LdpCcc8/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/AVvXsEjrxkO0_dmUnyrIV1oFMQW8FcRObBzdTy6Csb_FAnM1Li8IvoyRScy0SzEMFees2TO-jwwOuCJTN-V6iO5MSnNK9C9e_2ghqAFuBRNyt1tuEQTHYLpHRrgArQWsHn4riAhyphenhyphenbaTmWg5fvpw/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/AVvXsEh9zTLjFORus1mnmQkr5lfyKZYDOgRCrB_w24kXcnHHAv1oGvKU8FFhzLkfckhyphenhyphenm4p3Kqdq6aWZxkyzaBQ0otkbIhnHvDk06rjkg8KIPy5rvyqHCfXqR0XsGpd4tmM8zE8iovWd6Z9Wq-Y/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">