Multi Color Menu Bar For Blogger

 

 

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

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

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

 

 

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

 

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

 

Light menu

<ul class="cbdb-menu">

  <li><a href="#" class="red">Home</a> </li>
  <li><a href="#" class="green">Download</a></li>
  <li><a href="#" class="yellow">Design</a></li>
  <li><a href="#" class="cyan">About Us</a> </li>
  <li><a href="http://www.bloggertrix.com/" class="blue">Contact Us</a></li>

</ul>

 

Dark menu

<ul class="cbdb-menu">
  <li><a href="#" class="red dark">Home</a> </li>
  <li><a href="#" class="green dark">Download</a></li>
  <li><a href="#" class="yellow dark">Design</a></li>
  <li><a href="#" class="cyan dark">About Us</a> </li>
  <li><a href="http://www.bloggertrix.com/" class="blue dark">Contact US</a></li>
  </li>
</ul>

 

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

 

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

 

/* The CSS Code for the menu starts here bloggertrix.com */
.cbdb-menu li {
    display: block;
    float: left;
    line-height: 35px;
    list-style:none;
    margin: 0 5px;}
.cbdb-menu li a {
    /* This generators the gradient on top of the solid color */
    background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0, rgba(255,255,255,.5)),
        color-stop(1, rgba(0,0,0,.1))
    );
    background-image: -moz-linear-gradient(
        center top,
        rgba(255,255,255,.5) 0%,
        rgba(0,0,0,.1) 100%
    );
    color: #f4f4f4; /* IE */
    color: rgba(255, 255, 255, 0.8);
    display: block;    
    font: bold 18px "Myriad Pro","Lucida Grande",Helvetica,Arial,sans-serif;        
    outline:none;
    padding: 5px 15px;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
    -moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);
    -webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.65);    }
    .cbdb-menu li a:active {
        background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0,rgba(255,255,255,.5)),
            color-stop(.1,rgba(255,255,255,.2)),
            color-stop(.85, rgba(0,0,0,.2)),
            color-stop(100, rgba(0,0,0,.4))
        );
        background-image: -moz-linear-gradient(
            center bottom,
            rgba(255,255,255,.5) 0%,
            rgba(255,255,255,.2) 10%,
            rgba(0,0,0,.2) 85%,
            rgba(0,0,0,.4) 100%
        );
    }
/* Dark Text */
.cbdb-menu li a.dark {
    color: #333; /* IE */
    color: rgba(0, 0, 0, 0.8);
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.4);
}
/*********** COLORS *************/
/* Create your own class for your own colors */
.red {
    background: #B80202;
    border: #B80202 1px solid}
    .red:hover, .red:focus{
        background-color:#e30606
   }
.green {
    background: #46c431;
    border: #46c431 1px solid}
    .green:hover,.green:focus {
        background-color:#44e329
    }
.yellow {
    background: #D9CE1C;
    border: #D9CE1C 1px solid}
    .yellow:hover,.yellow:focus {
     background-color:#eee117}
.cyan {
    background: #23c6de;
    border: #23c6de 1px solid}
    .cyan:hover,.cyan:focus {
     background-color:#18d8f4
    }
.blue {
    background: #3271d9;
    border: #3271d9 1px solid}
    .blue:hover,.blue:focus {
     background-color:#377ef2
    }
   

လုပ္ေဆာင္ခ်က္မ်ားအားလံုးျပီးဆံုးသြားပါျပီ အဆင္ေျပၾကပါေစေနာ္။