Одоо блог гэдэг зүйл анх гарч ирсэнээ бодуул асар хурдацтайгаар газар авч байгаа нь илт байна. Манай сайн сайн блог хөтлөгч залуус маань блогоо бараг л муухан вэбээс илүү болгож чадаж байгаа нь сайшаалтай санагддаг. За илүү үг хэрэггүй байх, аягүй бол бөөн алдаатай биччихэнэ. Энэ удаад блогтоо ашиглаж болохуйц тавмэню-ны код орууллаа. Дуртайгаа, таалагдсанаа аваад блогтоо оруулж болно шүү. Амжилт хүсье. Мэнюнүүдийг эндээс харж болно шүү. Хийх зааварчилгаа:
1. Блогын загвар, HTML засахруу орно.
2. <div id="content-wrapper"> гэсэн кодыг ол, тэгээд яг дээр нь мэнюныхаа кодыг оруулна.

Мэнюүүд

<style type="text/css"> /*Powered by M8HXHACAH*/ /*URL: http://www.computer.bblog.mn */ #modernbricksmenu{ padding: 0; width: 100%; background: transparent; voice-family: "\"}\""; voice-family: inherit; } #modernbricksmenu ul{ font: bold 11px Arial; margin:0; margin-left: 40px; /*margin between first menu item and left browser edge*/ padding: 0; list-style: none; } #modernbricksmenu li{ display: inline; margin: 0 2px 0 0; padding: 0; text-transform:uppercase; } #modernbricksmenu a{ float: left; display: block; color: white; margin: 0 1px 0 0; /*Margin between each menu item*/ padding: 5px 10px; text-decoration: none; letter-spacing: 1px; background-color: black; /*Default menu color*/ border-bottom: 1px solid white; } #modernbricksmenu a:hover{ background-color: gray; /*Menu hover bgcolor*/ } #modernbricksmenu #current a{ /*currently selected tab*/ background-color: #D25A0B; /*Brown color theme*/ border-color: #D25A0B; /*Brown color theme*/ } #modernbricksmenuline{ clear: both; padding: 0; width: 100%; height: 5px; line-height: 5px; background: #D25A0B; /*Brown color theme*/ } #myform{ /*CSS for sample search box. Remove if desired */ float: right; margin: 0; padding: 0; } #myform .textinput{ width: 190px; border: 1px solid gray; } #myform .submit{ font: bold 11px Verdana; height: 22px; background-color: lightyellow; } </style> <div id="modernbricksmenu"> <ul> <li style="margin-left: 1px" mce_style="margin-left: 1px"><a href="http://computer.bblog.mn" mce_href="http://computer.bblog.mn" title="Home">Home</a></li> <li id="current"><a href="http://computer.bblog.mn" mce_href="http://computer.bblog.mn" title="New">Computer.bblog.mn</a></li> <li><a href="http://computer.bblog.mn" mce_href="http://computer.bblog.mn" title="Revised">Banjig.net</a></li> <li><a href="http://computer.bblog.mn" mce_href="http://computer.bblog.mn" title="Revised">BBlog.mn</a></li> </ul> </div> <div id="modernbricksmenuline"><fieldset></fieldset></div>

---

<style type="text/css"> /*Powered by M8HXHACAH*/ /*URL: http://www.computer.bblog.mn */ .halfmoon{ margin-bottom: 1em; } .halfmoon ul{ padding: 3px 9px 2px 5px; margin-left: 0; margin-top: 1px; margin-bottom: 0; font: bold 12px Verdana; list-style-type: none; text-align: left; /*set to left, center, or right to align the menu as desired*/ border-bottom: 1px solid #929492; } .halfmoon li{ display: inline; margin: 0; } .halfmoon li a{ text-decoration: none; padding: 3px 9px 2px 5px; margin: 0; margin-right: 1px; /*distance between each tab*/ border-left: 1px solid #DDD; color: black; font-size: 13px; background: #ECEEEC url(tabright.gif) top right no-repeat; } .halfmoon li a:visited{ color: black; } .halfmoon li a:hover{ background-color: #CDDADA; color: navy; } </style> <div class="halfmoon"> <ul> <li style="margin-left: 1px" mce_style="margin-left: 1px"><a href="http://computer.bblog.mn" mce_href="http://computer.bblog.mn">Home</a></li> <li><a href="http://computer.bblog.mn" mce_href="http://computer.bblog.mn" id="selected">Computer.bblog.mn</a></li> <li><a href="http://computer.bblog.mn" mce_href="http://computer.bblog.mn" >Banjig.net</a></li> <li><a href="http://computer.bblog.mn" mce_href="http://computer.bblog.mn" >BBlog.mn</a></li> </ul> </div>

---

<style type="text/css"> /*Powered by M8HXHACAH*/ /*URL: http://www.computer.bblog.mn */ #pointermenu{ border-top: 7px solid black; /*optional border across top*/ margin: 0; padding: 0; } #pointermenu ul{ margin: 0; margin-left: 15px; /*menu offset from left edge of window*/ float: left; padding-left: 8px; font: bold 13px Verdana; background-color: black; background: black url(leftround.gif) bottom left no-repeat; /*optional left round corner*/ } * html #pointermenu ul{ /*IE6 only rule. Decrease ul left margin and add 1em bottom margin*/ margin-bottom: 1em; margin-left: 7px; /*menu offset from left edge of window in IE*/ } #pointermenu ul li{ display: inline; } #pointermenu ul li a{ float: left; color: white; font-weight: bold; padding: 2px 11px 7px 7px; text-decoration: none; background: url(pointer.gif) bottom center no-repeat; } #pointermenu ul li a:visited{ color: white; } #pointermenu ul li a:hover, #pointermenu ul li a#selected{ /*hover and selected link*/ color: white; background-color: darkred; } #pointermenu ul li a#rightcorner{ padding-right: 0; padding-left: 2px; background: url(rightround.gif) bottom right no-repeat; /*optional right round corner*/ } </style> <div id="pointermenu"> <ul> <li style="margin-left: 1px" mce_style="margin-left: 1px"><a href="http://computer.bblog.mn" mce_href="http://computer.bblog.mn" >Home</a></li> <li><a href="http://computer.bblog.mn" mce_href="http://computer.bblog.mn" id="selected">Computer.bblog.mn</a></li> <li><a href="http://computer.bblog.mn" mce_href="http://computer.bblog.mn" >Banjig.net</a></li> <li><a href="http://computer.bblog.mn" mce_href="http://computer.bblog.mn" >BBlog.mn</a></li> </ul> </div>

---

<style type="text/css"> /*Powered by M8HXHACAH*/ /*URL: http://www.computer.bblog.mn */ #glowingtabs{ float:left; width:100%; font-size:90%; line-height:normal; border-bottom: 1px solid #7e9fff; /*Add border strip to bottom of menu*/ } #glowingtabs ul{ list-style-type: none; margin:0; margin-left: 5px; /*Left offset of entire tab menu relative to page*/ padding:0; } #glowingtabs li{ display:inline; margin:0; padding:0; } #glowingtabs a{ float:left; background:url(http://blog.banjig.net/files/user_uploads/7814/glowtab-left_b002b785.gif) no-repeat left top; margin:0; margin-right: 5px; /*spacing between each tab*/ padding:0 0 0 9px; text-decoration:none; } #glowingtabs a span{ float:left; display:block; background:url(http://blog.banjig.net/files/user_uploads/7814/glowtab_dd79f279.gif) no-repeat right top; padding: 4px 12px 2px 3px; font-weight:bold; color:#3B3B3B; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #glowingtabs a span {float:none;} /* End IE5-Mac hack */ #glowingtabs a:hover span { color: black; } #glowingtabs #current a{ /*Selected Tab style*/ background-position:0 -82px; /*Shift background image up to start of 2nd tab image*/ } #glowingtabs #current a span{ /*Selected Tab style*/ background-position:100% -82px; /*Shift background image up to start of 2nd tab image*/ color: black; } #glowingtabs a:hover{ /*onMouseover style*/ background-position:0% -82px; /*Shift background image up to start of 2nd tab image*/ } #glowingtabs a:hover span{ /*onMouseover style*/ background-position:100% -82px; /*Shift background image up to start of 2nd tab image*/ } </style> <div id="glowingtabs"> <ul> <li><a href="http://www.computer.bblog.mn" mce_href="http://www.computer.bblog.mn"><span>Home</span></a></li> <li id="current"><a href="http://www.computer.bblog.mn" mce_href="http://www.computer.bblog.mn"><span>Computer.bblog.mn</span></a></li> <li><a href="http://www.computer.bblog.mn" mce_href="http://www.computer.bblog.mn"><span>Banjig.Net</span></a></li> <li><a href="http://www.computer.bblog.mn" mce_href="http://www.computer.bblog.mn"><span>Bblog.mn</span></a></li> </ul> </div>

---

<style type="text/css"> /*Powered by M8HXHACAH*/ /*URL: http://www.computer.bblog.mn */ .solidblockmenu{ margin: 0; padding: 0; float: left; font: bold 13px Arial; width: 100%; border: 1px solid #625e00; border-width: 1px 0; background: black url(http://blog.banjig.net/files/user_uploads/7814/blockdefault_351fb4ff.gif) center center repeat-x; } .solidblockmenu li{ display: inline; } .solidblockmenu li a{ float: left; color: white; padding: 9px 11px; text-decoration: none; border-right: 1px solid white; } .solidblockmenu li a:visited{ color: white; } .solidblockmenu li a:hover, .solidblockmenu li .current{ color: white; background: transparent url(http://blog.banjig.net/files/user_uploads/7814/blockactive_1e0d8481.gif) center center repeat-x; } </style> <ul class="solidblockmenu"> <li><a href="http://www.computer.bblog.mn" mce_href="http://www.computer.bblog.mn"><span>Home</span></a></li> <li id="current"><a href="http://www.computer.bblog.mn" mce_href="http://www.computer.bblog.mn" class="current"><span>Computer.bblog.mn</span></a></li> <li><a href="http://www.computer.bblog.mn" mce_href="http://www.computer.bblog.mn"><span>Banjig.Net</span></a></li> <li><a href="http://www.computer.bblog.mn" mce_href="http://www.computer.bblog.mn"><span>Bblog.mn</span></a></li> </ul>

---

<style type="text/css"> /*Powered by M8HXHACAH*/ /*URL: http://www.computer.bblog.mn */ #ddblueblockmenu{ border: 1px solid black; border-bottom-width: 0; width: 171px; } #ddblueblockmenu ul{ margin: 0; padding: 0; list-style-type: none; font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; } #ddblueblockmenu li a{ display: block; padding: 3px 0; padding-left: 9px; width: 169px; /*185px minus all left/right paddings and margins*/ text-decoration: none; color: white; background-color: #2175bc; border-bottom: 1px solid #90bade; border-left: 7px solid #1958b7; } * html #ddblueblockmenu li a{ /*IE only */ width: 1870px; /*IE 5*/ w\idth: 169px; /*185px minus all left/right paddings and margins*/ } #ddblueblockmenu li a:hover { background-color: #2586d7; border-left-color: #1c64d1; } #ddblueblockmenu div.menutitle{ color: white; border-bottom: 1px solid black; padding: 1px 0; padding-left: 5px; background-color: black; font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif; } </style> <div id="ddblueblockmenu"> <div class="menutitle">Menu</div> <ul> <li><a href="http://www.computer.bblog.mn" mce_href="http://www.computer.bblog.mn"><span>Home</span></a></li> <li id="current"><a href="http://www.computer.bblog.mn" mce_href="http://www.computer.bblog.mn" class="current"><span>Computer.bblog.mn</span></a></li> <li><a href="http://www.computer.bblog.mn" mce_href="http://www.computer.bblog.mn"><span>Banjig.Net</span></a></li> <li><a href="http://www.computer.bblog.mn" mce_href="http://www.computer.bblog.mn"><span>Bblog.mn</span></a></li> </ul> <div class="menutitle">Other</div> <ul> <li><a href="http://www.computer.bblog.mn" mce_href="http://www.computer.bblog.mn"><span>Home</span></a></li> <li id="current"><a href="http://www.computer.bblog.mn" mce_href="http://www.computer.bblog.mn" class="current"><span>Computer.bblog.mn</span></a></li> <li><a href="http://www.computer.bblog.mn" mce_href="http://www.computer.bblog.mn"><span>Banjig.Net</span></a></li> <li><a href="http://www.computer.bblog.mn" mce_href="http://www.computer.bblog.mn"><span>Bblog.mn</span></a></li> </ul> </div>

---

<style type="text/css"> /*Powered by M8HXHACAH*/ /*URL: http://www.computer.bblog.mn */ .buttonmenu{ list-style-type: none; margin: 0; padding: 0; width: 180px; text-align: left; } .buttonmenu li a{ color: white; display: block; width: 100%; padding: 2px 4px; text-decoration: none; font-weight: bold; border: 1px solid; border-color:#D5BFD0 #5A3A54 #5A3A54 #D5BFD0; /*light dark dark light*/ background-color: #704968; text-decoration:none; } .buttonmenu li a:visited{ color: white; } .buttonmenu li a:hover, .buttonmenu li a:active{ color: black; background-color: #CDB4C8; } </style> <ul class="buttonmenu"> <li><a href="http://www.computer.bblog.mn" mce_href="http://www.computer.bblog.mn"><span>Home</span></a></li> <li id="current"><a href="http://www.computer.bblog.mn" mce_href="http://www.computer.bblog.mn" class="current"><span>Computer.bblog.mn</span></a></li> <li><a href="http://www.computer.bblog.mn" mce_href="http://www.computer.bblog.mn"><span>Banjig.Net</span></a></li> <li><a href="http://www.computer.bblog.mn" mce_href="http://www.computer.bblog.mn"><span>Bblog.mn</span></a></li> </ul>

---

<style type="text/css"> /*Powered by M8HXHACAH*/ /*URL: http://www.computer.bblog.mn */ #underlinemenu{ margin: 0; padding: 0; } #underlinemenu ul{ margin: 0; margin-bottom: 1em; padding-left: 0; float: left; font-weight: bold; width: 100%; border: 1px solid #DFDFDF; border-width: 1px 0; } * html #underlinemenu ul{ /*IE only rule. Delete extra margin-bottom*/ margin-bottom: 0; } #underlinemenu ul li{ display: inline; } #underlinemenu ul li a{ float: left; color: gray; font-weight: bold; padding: 2px 6px 4px 6px; text-decoration: none; background: white url(menudivide.gif) top right repeat-y; } #underlinemenu ul li a:hover{ color: black; background-color: #F3F3F3; border-bottom: 4px solid black; padding-bottom: 0; } </style> <div id="underlinemenu"> <ul> <li><a href="http://www.computer.bblog.mn" mce_href="http://www.computer.bblog.mn"><span>Home</span></a></li> <li id="current"><a href="http://www.computer.bblog.mn" mce_href="http://www.computer.bblog.mn" class="current"><span>Computer.bblog.mn</span></a></li> <li><a href="http://www.computer.bblog.mn" mce_href="http://www.computer.bblog.mn"><span>Banjig.Net</span></a></li> <li><a href="http://www.computer.bblog.mn" mce_href="http://www.computer.bblog.mn"><span>Bblog.mn</span></a></li> </ul> </div>

---

<style type="text/css"> /*Powered by M8HXHACAH*/ /*URL: http://www.computer.bblog.mn */ .suckerdiv ul{ margin: 0; padding: 0; list-style-type: none; width: 150px; /* Width of Menu Items */ border-bottom: 1px solid #ccc; text-align: left; } .suckerdiv ul li{ position: relative; } /*1st level sub menu style */ .suckerdiv ul li ul{ left: 149px; /* Parent menu width - 1*/ position: absolute; width: 160px; /*sub menu width*/ top: 0; display: none; } /*All subsequent sub menu levels offset */ .suckerdiv ul li ul li ul{ left: 159px; /* Parent menu width - 1*/ } /* menu links style */ .suckerdiv ul li a{ display: block; color: black; text-decoration: none; background: #fff; padding: 1px 5px; border: 1px solid #ccc; border-bottom: 0; } .suckerdiv ul li a:visited{ color: black; } .suckerdiv ul li a:hover{ background-color: yellow; } .suckerdiv .subfolderstyle{ background: url(http://blog.banjig.net/files/user_uploads/7814/arrow-list_565df84e.gif) no-repeat center right; } /* Holly Hack for IE \*/ * html .suckerdiv ul li { float: left; height: 1%; } * html .suckerdiv ul li a { height: 1%; } /* End */ </style> <mce:script type="text/javascript"><!-- /*Powered by M8HXHACAH*/ /*URL: http://www.computer.bblog.mn */ var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas function buildsubmenus(){ for (var i=0; i<menuids.length; i++){ var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul") for (var t=0; t<ultags.length; t++){ ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle" ultags[t].parentNode.onmouseover=function(){ this.getElementsByTagName("ul")[0].style.display="block" } ultags[t].parentNode.onmouseout=function(){ this.getElementsByTagName("ul")[0].style.display="none" } } } } if (window.addEventListener) window.addEventListener("load", buildsubmenus, false) else if (window.attachEvent) window.attachEvent("onload", buildsubmenus) // --></mce:script> <div class="suckerdiv"> <ul id="suckertree1"> <li><a href="http://www.computer.bblog.mn" mce_href="http://www.computer.bblog.mn"><span>Home</span></a></li> <li><a href="#" mce_href="#"><span>Computer.bblog.mn</span></a> <ul> <li><a href="#" mce_href="#"><span>Software</span></a> <ul> <li><a href="http://www.computer.bblog.mn" mce_href="http://www.computer.bblog.mn"><span>Office 2007</span></a></li> <li><a href="http://www.computer.bblog.mn" mce_href="http://www.computer.bblog.mn"><span>Adobe Photoshop</span></a></li> </ul> </li> <li><a href="#" mce_href="#"><span>Hardware</span></a> <ul> <li><a href="http://www.computer.bblog.mn" mce_href="http://www.computer.bblog.mn"><span>Monitor</span></a></li> <li><a href="http://www.computer.bblog.mn" mce_href="http://www.computer.bblog.mn"><span>CPU</span></a></li> </ul> </li> </ul> </li> <li><a href="http://www.computer.bblog.mn" mce_href="http://www.computer.bblog.mn"><span>Banjig.Net</span></a></li> <li><a href="http://www.computer.bblog.mn" mce_href="http://www.computer.bblog.mn"><span>Bblog.mn</span></a></li> </ul> </div>

---