Ribbon Hover Effect Menu Bar For Blogger

                                        


Menu ဒီဇိုင္းဆန္းဆန္ေလးေတြသေဘာက်တဲ.ေဘာ္ဒါေတြအတြက္.. Menu မပါတဲ.Blogger Template ေတြအတြက္..Ribbon Hover Effect Menu Bar အလန္းစားေလးပါ..။ နမူနာႀကည္.ခ်င္ရင္ေတာ.ခုကြ်န္ေတာ္.ဆိုဒ္မွာလဲသံုးထားပါတယ္
ထည္.နည္းေလးေျပာျပပါ.မယ္..Blogger Dashboard>Template>Edit HTML ကိုသြားလိုက္ပါ..
Ctrl+F ကိုနွိပ္ျပီး Search Box ထဲမွာ ]]></b:skin>ဆိုတဲ.ကုဒ္ေလးကိုရိုက္ျပီးရွာပါ..
 ေတြ.ျပီဆိုရင္ေအာက္ကကုဒ္ေတြကိုေကာ္ပီကူးယူျပီးအဲဒီ  ]]></b:skin>   ဆိုတဲ.ကုဒ္ေလးမတိုင္ခင္မွာ Paste ခ်လိုက္ပါ.။

.ribbon span { background:#A81B6A; display:inline-block; line-height:3em; padding:0 1em; margin-top:0.5em; position:relative; -webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */ -moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */ -ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */ -o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */ transition: background-color 0.2s, margin-top 0.2s; } .ribbon a:hover span { background:#FFD204; margin-top:0; } .ribbon span:before { content: ""; position:absolute; top:3em; left:0; border-right:0.5em solid #9B8651; border-bottom:0.5em solid #fff; } .ribbon span:after { content: ""; position:absolute; top:3em; right:0; border-left:0.5em solid #9B8651; border-bottom:0.5em solid #fff; } .ribbon a:link, .ribbon a:visited { color:#000; text-decoration:none; float:left; height:3.5em; overflow:hidden; } .ribbon:after, .ribbon:before { margin-top:0.5em; content: ""; float:left; border: 1.5em solid #A81B6A; } .ribbon:after { border-right-color:transparent; } .ribbon:before { border-left-color:transparent; }

Template ကိုSave လုပ္လိုက္ပါ..။

ေနာက္တစ္ဆင္.အေနနဲ.Blogger Layout> Add A gadget> HTML/Java Script ကိုသြားပါ..ျပီးရင္ေအာက္ကကုဒ္ေတြကိုေကာ္ပီကူးျပီး ထည္.လိုက္ပါ..

<div class='ribbon'>
    <a href='#'><span>Home</span></a>
    <a href='#'><span>Download</span></a>
    <a href='#'><span>HTML</span></a>
    <a href='#'><span>MySQL</span></a>
    <a href='#'><span>Services</span></a>
    <a href='#'><span>Contact</span></a>
</div>

# ေနရာမွာမိမိလင္.နဲ.အစားထိုးပါ..အျပာေရာင္နဲ.ေနရာမွာမိမိထားခ်င္တဲ.ေခါင္းစဥ္နံမည္နဲ.အစားထိုးပါ..

လိုအပ္ရင္ထပ္ျပီးပြါးလို.ရပါတယ္..ျပီးရင္ HTML/Java Script ကို Save လုပ္လို.ရပါျပီ..

http://shweminwun.blogspot.com