a Simple Drop Down Menu In Blogger Blog

မိမိဘေလာ့မွာ Header ထဲ Drop Down Menu ထည့္နည္းကေလးတစ္ခုအေၾကာင္း ေဖာက္သည္ခ်ခ်င္ပါ တယ္။ စာဖတ္သူတို႔ အေနနဲ႔ လိုအပ္ရင္ေတာ့ သံုးၾကည့္ႏိုင္ပါတယ္။ ေအာက္မွာ တစ္ခုခ်င္း ရွင္းျပသြားပါ့ မယ္။ ကဲ စၾကရေအာင္-

၁။ Blogger Dashboard ကို သြားပါ။

၂။ DesignထဲကEdit HTML ႏွိပ္ပါ။ မိမိ Template ကေလးကိုေတာ့
     Back up လုပ္ထားဖို႔ မေမ့နဲ႔ဦးေနာ္။ ကဲၿပီးရင္ ေနာက္တစ္ဆင့္-

၃။ ေအာက္က ကုတ္ေတြကို Copy ကူးရေအာင္။

/*----- Drop Down Menu BY www.realcombiz.com----*/

#rbnavbar {
    background: #2a2626;
    width: 100%;
    color: #FFF;
        margin: 0px;
        padding: 0;
        position: relative;
        border-top:0px solid #7f7777;
        height:35px;
}

#rbnav {
    margin: 0;
    padding: 0;
}
#rbnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#rbnav li {
    list-style: none;
    margin: 0;
    padding: 0;
        border-left:1px solid #333;
        border-right:1px solid #333;
        height:35px;
}
#rbnav li a, #rbnav li a:link, #rbnav li a:visited {
    color: #FFF;
    display: block;
   font:normal 12px Helvetica, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
      
}
#rbnav li a:hover, #rbnav li a:active {
    background: #6c6464;
    color: #FFF;
    display: block;
    text-decoration: none;
        margin: 0;
    padding: 9px 12px 10px 12px;
      
  
      
}
#rbnav li {
    float: left;
    padding: 0;
}
#rbnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#rbnav li ul a {
    width: 140px;
}
#rbnav li ul ul {
    margin: -25px 0 0 161px;
}
#rbnav li:hover ul ul, #rbnav li:hover ul ul ul, #rbnav li.sfhover ul ul, #rbnav li.sfhover ul ul ul {
    left: -999em;
}
#rbnav li:hover ul, #rbnav li li:hover ul, #rbnav li li li:hover ul, #rbnav li.sfhover ul, #rbnav li li.sfhover ul, #rbnav li li li.sfhover ul {
    left: auto;
}
#rbnav li:hover, #rbnav li.sfhover {
    position: static;
}
#rbnav li li a, #rbnav li li a:link, #rbnav li li a:visited {
    background: #6c6464;
    width: 120px;
    color: #FFF;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
  
}
#rbnav li li a:hover, #rbnavli li a:active {
    background: #2a2626;
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
        text-decoration: none;
}

၄။ ၿပီးရင္ Template ထဲက Html Code ေတြၾကားထဲမွာ Click တစ္ခ်က္ခ်ပါ။ 

၅။ ေနာက္ Ctrl+F ကို သံုးၿပီး ]]></b:skin>  ဆိုတဲ့ စာလံုးေလးကို ရုိက္ရွာလိုက္ပါ။

၆။ ေတြ႔ရင္ အဲဒါရဲ႔ ေရွ႔မွာ ေစာနားက Copy ထားခဲ့တဲ့ ကုတ္ေတြကို Paste လုပ္လိုက္ပါ။

၇။ ေနာက္ဆံုးအဆင့္ Template ကို Save  ပါ။

ပထမပိုင္းၿပီးပါၿပီ။

ဒုတိယပိုင္းအေနနဲ႔-

၁။ Layout ကို သြားပါ။

၂။ Header Add Widget JavaScript Copy Paste Save