Blogger ညီကိုမ်ားအတြက္ ေနာက္ထပ္ Menu Bar အလန္းေလးတစ္ခု မွ်ေ၀ေပးလိုက္ပါတယ္
ဗ်ာ။ Vertical Menu ကိုဒါနဲ႕ဆိုတင္တာ ႏွစ္ခုရွိသြားပါျပီ။ ဒါေလးကအရင္ဟာထက္ပိုမိုက္တယ္ဗ်ာ။ အခု
တင္ေပးလိုက္တဲ႕ Menu ေလးကလည္း အခုမွစတဲ႕ Blogger ညီကိုမ်ားအတြက္ အဆင္ေျပေျပလိုက္လုပ္
ႏိုင္ပါတယ္။ ေအာက္မွာလည္း သူငယ္ခ်င္းမ်ား အဆင္ေျပေျပနဲ႕ လိုက္လုပ္ႏိုင္ေအာင္လို႕ Code ေတြကို ပံုနဲ႕တကြ အေသးစိတ္ရွင္းျပေပးလိုက္ပါတယ္ဗ်ာ။ လြယ္လြယ္ေလးပါ။
Facebook ရဲ႕ Like button ကိုႏွိပ္ျခင္းျဖင္႕ မိမိရဲ႕ Facebook ေပၚမွာ ဒီ Post ေလးေရာက္သြားမွာပါ။
ဒီ Post ေလးကိုသေဘာက်တယ္ဆိုရင္လည္း Like Button ေလးကိုႏွိပ္ခဲ႕ေပးပါေနာ္။
ဒီေနရာကေနစျပီေနာ္။ေသခ်ာေလးဖတ္ျပိးလိုက္လုပ္ၾကည္႕ေပးပါ။ လြယ္ပါတယ္။
အဆင့္ 1 Design > Page Elements > Add a Gadget ကိုႏွိပ္ပါ။
အဆင္႕ 2 Eidt HTML ကုိေရြးေပးပါ။ ျပီးသြားရင္ ေအာက္က Code ကိုကူးထည္႕ေပးပါ။
အဆင္႕ 3 Save ႏွိပ္ေပးပါ။
အဆင္႕ 2 Eidt HTML ကုိေရြးေပးပါ။ ျပီးသြားရင္ ေအာက္က Code ကိုကူးထည္႕ေပးပါ။
အဆင္႕ 3 Save ႏွိပ္ေပးပါ။
<ul id="pyaephyo_box_menu"> <li><a href="#">Menu List 1</a> <ul> <li><a href="#">Menu List 1.1</a></li> <li><a href="#">Menu List 1.2</a></li> <li><a href="#">Menu List 1.3</a></li> <li><a href="#">Menu List 1.4</a></li> </ul> </li> <li><a href="#">Menu List 2</a> <ul> <li><a href="#">Menu List 2.1</a></li> <li><a href="#">Menu List 2.2</a></li> <li><a href="#">Menu List 2.3</a></li> <li><a href="#">Menu List 2.4</a></li> <li><a href="#">Menu List 2.5</a></li> <li><a href="#">Menu List 2.6</a></li> </ul> </li> <li><a href="#">Menu List 3</a> <ul> <li><a href="#">Menu List 3.1</a></li> <li><a href="#">Menu List 3.2</a></li> </ul> </li> <li><a href="#">Menu List 4</a> <ul> <li><a href="#">Menu List 4.1</a></li> <li><a href="#">Menu List 4.2</a></li> <li><a href="#">Menu List 4.3</a></li> <li><a href="#">Menu List 4.4</a></li> <li><a href="#">Menu List 4.5</a></li> <li><a href="#">Menu List 4.6</a></li> </ul> </li> <li><a href="#">Menu List 5</a> <ul> <li><a href="">Menu List 5.1</a></li> <li><a href="">Menu List 5.2</a></li> <li><a href="">Menu List 5.3</a></li> <li><a href="">Menu List 5.4</a></li> <li><a href="">Menu List 5.5</a></li> <li><a href="">Menu List 5.6</a></li> <li><a href="">Menu List 5.7</a></li> <li><a href="">Menu List 5.8</a></li> </ul> </li> <li><a href="#">Menu List 6</a> <ul> <li><a href="#">Menu List 6.1</a></li> <li><a href="">Menu List 6.2</a></li> <li><a href="#">Menu List 6.3</a></li> <li><a href="#">Menu List 6.4</a></li> <li><a href="#">Menu List 6.5</a></li> <li><a href="#">Menu List 6.6</a></li> <li><a href="#">Menu List 6.7</a></li> <li><a href="#">Menu List 6.8</a></li> </ul> </li> <li><a href="#">Menu List 7</a> <ul> <li><a href="#">Menu List 7.1</a></li> <li><a href="#">Menu List 7.2</a></li> <li><a href="#">Menu List 7.3</a></li> <li><a href="#">Menu List 7.4</a></li> <li><a href="#">Menu List 7.5</a></li> <li><a href="#">Menu List 7.6</a></li> <li><a href="#">Menu List 7.7</a></li> <li><a href="#">Menu List 7.8</a></li> </ul> </li> <li><a href="#">Menu List 8</a> <ul> <li><a href="#">Menu List 8.1</a></li> <li><a href="#">Menu List 8.2</a></li> <li><a href="#">Menu List 8.3</a></li> <li><a href="#">Menu List 8.4</a></li> <li><a href="#">Menu List 8.5</a></li> <li><a href="#">Menu List 8.6</a></li> </ul> </li> </ul>
ၿပီးသြားရင္ေအာက္ကအဆင္႕အတိုင္းလုိက္လုပ္ေပးပါ။
အဆင္႕ 4 Design > Edit HTML > Expand Widget Templates မွာအမွန္ျခစ္ေပးပါ။
အဆင္႕ 5 Ctrl + F ကိုႏွိပ္ျပီး ဒီကုတ္ေလးကိုရွာပါ ]]></b:skin>
အဆင္႕ 6 ေတြ႕ျပီဆိုရင္ ]]></b:skin> ရဲ႕ အေပၚမွာေအာက္က Code ကို ကူးထည္႕ေပးပါ။
အဆင္႕ 7 အရင္ဆံုး Preview နဲ႕အရင္ၾကည္႕ပါ။ အဆင္ေျပျပီဆိုမွ Save ႏွိပ္ေပးပါ။
အဆင္႕ 5 Ctrl + F ကိုႏွိပ္ျပီး ဒီကုတ္ေလးကိုရွာပါ ]]></b:skin>
အဆင္႕ 6 ေတြ႕ျပီဆိုရင္ ]]></b:skin> ရဲ႕ အေပၚမွာေအာက္က Code ကို ကူးထည္႕ေပးပါ။
အဆင္႕ 7 အရင္ဆံုး Preview နဲ႕အရင္ၾကည္႕ပါ။ အဆင္ေျပျပီဆိုမွ Save ႏွိပ္ေပးပါ။
/* The CSS Code for the menu starts here pyaephyo.com */ #bloggertrix_box_menu{padding:0;margin:0;width:245px;list-style:none outside none} #bloggertrix_box_menu li{background:#252525;position:relative;border-bottom:1px solid #110f0e;border-top:1px solid #3d3732;} #bloggertrix_box_menu li ul{position:absolute;padding:0;margin:0;left:245px;top:-1px;display:none;width:160px;list-style:none outside none;z-index:9990;background:#00CC33} #bloggertrix_box_menu li a{background:url(http://4.bp.blogspot.com/-Z2rx2h9tJd8/UNv6FN_L0II/AAAAAAAAGFQ/ty4e9b5auHQ/s1600/bt-arrow-right-icon.png) no-repeat 5px 10px;display:block;min-height:30px;line-height:30px;margin:0;padding:0 5px 0 25px;text-decoration:none;color:#777;color:#b69786;font-size:14px;border-right:4px solid #35322c;cursor:pointer;transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out} #bloggertrix_box_menu li a:hover{border-right-color:#665d54;text-decoration:none;color:#ddd;background:#38332d url(http://4.bp.blogspot.com/-Z2rx2h9tJd8/UNv6FN_L0II/AAAAAAAAGFQ/ty4e9b5auHQ/s1600/bt-arrow-right-icon.png) no-repeat 5px 10px;} #bloggertrix_box_menu li:hover ul, #bloggertrix_box_menu li.over ul{display:block}
အားလံုးဘဲအဆင္ေျပၾကပါေစေနာ္။
