Blog မွာ Sub menu လုပ္နည္း။

Blog မွာ Sub menu လုပ္နည္း။

Q: UPW: စံပီးေရ...ဆရာ့ www.thupyadict.com မွာ sub menu bar ေတြထည့္မလို႔။ ကူညီညႊန္ျပေပးပါဦး။
A: ဟုတ္ကဲ ဆရာ..ေအာက္ပါအတိုင္း
1) သိျပီးသားျဖစ္တဲ႔ blogger မွာ ID နဲ႔ password ၀င္ျပီး။
2) Design-Edit Html မွာ သြားပါ။ Expand Widget Templates ကိုလဲ အမွန္ျခစ္ေပးပါ။
3) ျပီးေနာက္ Backup/restore template ေအာက္မွာ Download full template ကိုႏွိပ္ျပီး template ကို
   backup လုပ္ထားပါ။
4) ျပီးေတာ႔ Ctrl+ F ကိုႏွိပ္ျပီး </b:skin> ကိုရွာပါ။
5) ေတြ႔ရွိရင္ </b:skin> ေအာက္မွာ ေအာက္ပါ code ကိုထည့္ပါ။
.ddsmoothmenu{<br /> font: bold 12px Verdana;<br /> background: #414141; /*background of menu bar (default state)*/<br /> width: 100%;<br /> }<br /> <br /> .ddsmoothmenu ul{<br /> z-index:100;<br /> margin: 0;<br /> padding: 0;<br /> list-style-type: none;<br /> }<br /> <br /> /*Top level list items*/<br /> .ddsmoothmenu ul li{<br /> position: relative;<br /> display: inline;<br /> float: left;<br /> }<br /> <br /> /*Top level menu link items style*/<br /> .ddsmoothmenu ul li a{<br /> display: block;<br /> background: #414141; /*background of menu items (default state)*/<br /> color: white;<br /> padding: 8px 10px;<br /> border-right: 1px solid #778;<br /> color: #2d2b2b;<br /> text-decoration: none;<br /> }<br /> <br /> * html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/<br /> display: inline-block;<br /> }<br /> <br /> .ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{<br /> color: white;<br /> }<br /> <br /> .ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/<br /> background: black;<br /> color: white;<br /> }<br /> <br /> .ddsmoothmenu ul li a:hover{<br /> background: black; /*background of menu items during onmouseover (hover state)*/<br /> color: white;<br /> }<br /> <br /> /*1st sub level menu*/<br /> .ddsmoothmenu ul li ul{<br /> position: absolute;<br /> left: 0;<br /> display: none; /*collapse all sub menus to begin with*/<br /> visibility: hidden;<br /> }<br /> <br /> /*Sub level menu list items (undo style from Top level List Items)*/<br /> .ddsmoothmenu ul li ul li{<br /> display: list-item;<br /> float: none;<br /> }<br /> <br /> /*All subsequent sub menu levels vertical offset after 1st level sub menu */<br /> .ddsmoothmenu ul li ul li ul{<br /> top: 0;<br /> }<br /> <br /> /* Sub level menu links style */<br /> .ddsmoothmenu ul li ul li a{<br /> font: normal 13px Verdana;<br /> width: 160px; /*width of sub menus*/<br /> padding: 5px;<br /> margin: 0;<br /> border-top-width: 0;<br /> border-bottom: 1px solid gray;<br /> }<br /> <br /> /* Holly Hack for IE \*/<br /> * html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/<br /> <br /> <br /> /* ######### CSS classes applied to down and right arrow images ######### */<br /> <br /> .downarrowclass{<br /> position: absolute;<br /> top: 12px;<br /> right: 7px;<br /> }<br /> <br /> .rightarrowclass{<br /> position: absolute;<br /> top: 6px;<br /> right: 5px;<br /> }<br /> <br /> /* ######### CSS for shadow added to sub menus ######### */<br /> <br /> .ddshadow{<br /> position: absolute;<br /> left: 0;<br /> top: 0;<br /> width: 0;<br /> height: 0;<br /> background: silver;<br /> }<br /> <br /> .toplevelshadow{ /*shadow opacity. Doesn't work in IE*/<br /> opacity: 0.8;<br /> }

6) ျပီးေနာက္ </head> ကိုရွာပါ။ျပီးေနာက္ ေအာက္ပါ code ကို </head> ေအာက္မွာထည့္ပါ

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://btemplatescripts.googlecode.com/files/ddsmoothmenu.txt' type='text/javascript'/>

7) ျပီးေတာ႔
<div id='header-wrapper'><b:section class='header' id='header' maxwidgets='1' showaddelement='no'><br /> <b:widget id='Header1' locked='true' title='Testing templates (Header)' type='Header'/><br /> </b:section><br /> </div>
ကိုရွာရမွာပါ။ေတြ႔ျပီးဆိုရင္ ဒီ code ရဲ႔ေအာက္မွာ ေအာက္က code ကိုထည့္ေပးပါ။
<div class='ddsmoothmenu' id='smoothmenu1'><ul><li><a href='http://www.anshuldudeja.com'>Item 1</a></li> <li><a href='#'>Folder 0</a><br /> <ul><li><a href='#'>Sub Item 1.1</a></li> <li><a href='#'>Sub Item 1.2</a></li> <li><a href='#'>Sub Item 1.3</a></li> <li><a href='#'>Sub Item 1.4</a></li> <li><a href='#'>Sub Item 1.2</a></li> <li><a href='#'>Sub Item 1.3</a></li> <li><a href='#'>Sub Item 1.4</a></li> </ul></li> <li><a href='#'>Folder 1</a><br /> <ul><li><a href='#'>Sub Item 1.1</a></li> <li><a href='#'>Sub Item 1.2</a></li> <li><a href='#'>Sub Item 1.3</a></li> <li><a href='#'>Sub Item 1.4</a></li> <li><a href='#'>Sub Item 1.2</a></li> <li><a href='#'>Sub Item 1.3</a></li> <li><a href='#'>Sub Item 1.4</a></li> </ul></li> <li><a href='#'>Item 3</a></li> <li><a href='#'>Folder 2</a><br /> <ul><li><a href='#'>Sub Item 2.1</a></li> <li><a href='#'>Folder 2.1</a><br /> <ul><li><a href='#'>Sub Item 2.1.1</a></li> <li><a href='#'>Sub Item 2.1.2</a></li> <li><a href='#'>Folder 3.1.1</a><br /> <ul><li><a href='#'>Sub Item 3.1.1.1</a></li> <li><a href='#'>Sub Item 3.1.1.2</a></li> <li><a href='#'>Sub Item 3.1.1.3</a></li> <li><a href='#'>Sub Item 3.1.1.4</a></li> <li><a href='#'>Sub Item 3.1.1.5</a></li> </ul></li> <li><a href='#'>Sub Item 2.1.4</a></li> </ul></li> </ul></li> <li><a href='http://www.anshuldudeja.com/'>Item 4</a></li> </ul><br style='clear: left'/><br /> </div>

8) အားလံုးအဆင္ေျပတယ္.ဆိုရင္ေအာင္ျမင္ပါျပီး။
အၾကံတခုျပဳျခင္တာကေတာ႔ code တခုကို ထည့္ျပီးတိုင္း template ကို ​save လုပ္ေပးပါ။
ဒါမွ code တခုခုထည့္တဲ႔ ဟာတိုင္းဟာ မွန္ကန္တယ္ဆိုတာသိရပါမယ္။ ဒါမွမဟုတ္ဘဲ အားလံုးထည့္ျပီးမွ
save လုပ္လို႔မရရင္ ဘယ္ဟာမွားမွန္းမသိေတာ႔ရင္ ျပင္ရခက္ပါတယ္။ဒါေၾကာင့္ code တခု ထည့္တိုင္းမွာ
save လုပ္ေပးပါ။ copy ကူးျပီးထည့္တာေတာင္း တခါတေလ. > ေလးက်ခဲ႔တာနဲ႔ save လုပ္လို႔မရတက္ပါဘူး.ဒါေၾကာင့္ ေသေသခ်ာခ်ာေလး ကူးျပီး save ေပးပါ အဆင္ေျပပါလိမ့္မယ္။

Note: ဒီဟာက normal နည္းျဖစ္ပါတယ္။ ကၽြန္ေတာ္ရဲ႔ template မွာေတာ႔ လုပ္မလုပ္ပါဘူး.ဒါေၾကာင့္
မရခဲ႔ရင္ ကၽြန္ေတာ္ျပန္ေရးေပးပါမယ္။ ပထမစဥ္းစားတေတာ႔ ဒီပိုစ့္တခုထဲမွာ ေပါင္းေရးမလို႔ဘဲ ဒါေပမဲ႔
တအားရႈပ္သြားမွာဆိုးလို႔ ေနာက္ထပ္ အသစ္နဲ႔ ျပန္ေရးေပးပါမယ္။

SBSangpi(စံပီး)