blogger ညီအကိုေမာင္ႏွမမ်ားအတြက္ Menu Horizontal ဒီဇိုင္းမ်ား

ကြ်န္ေတာ္ဒီေန ့ေတာ့ blogger ညီအကိုေမာင္ႏွမမ်ားအတြက္ မိမိတို့ရဲ ့ blog မွာ Menu Horizontal အသံုးၿပဳခ်င္ၾကတဲ့ သူငယ္ခ်င္းမ်ားအတြက္ Menu Horizontal ဒီဇိုင္းေပါင္း၉ခုကိုတင္ေပးလိုက္ပါတယ္ ထည့္နည္းကေတာ့ေတာ္ေတာ္ေလးကို လြယ္ပါ မိမိတို ့ၾကိုက္တဲ့ပံုရဲ့ေအာက္ကကုတ္ကို copy လုပ္၍ယူပါ copy လုပ္မရပါက မိမိကြန္ၿပဴတာ ကီးဘုတ္မွ ( Ctrl+ C ) ကို ႏွိပ္ၿပီး ယူနိုင္ပါတယ္ခင္ဗ်ာ လင့္ထည့္ရန္ဆိုတဲ့ေနရာနဲ ့လင့္အမည္ေရးရန္ ဆိုတဲ့ေနရာေတြမွာမိမိထားလိုေသာ လင့္ ႏွင့္ လင့္အမည္ၿဖည့္ၿပီး မိမိဘေလာ့ကို Login လုပ္ပါ ( 1 ) Dashboard ( 2 ) Layout ( 3 ) Add a Gadget ( 4 ) HTML/Javascript မွာဝင္ေရာက္ထည့္ေပးလိုက္ရံုပါပဲခင္ဗ်ာ Edit Html ကိုဝင္ၿပီးထည့္ေပးစရာမလိုပဲ HTML/Javascript မွာဝင္ေရာက္ထည့္ေပးလိုက္ရင္ရပါၿပီခင္ဗ်ာ height: 154px; line-height: 1.5em; padding: 5px; width: 384px; width:100%; background:#EFF4FA; font: bold 7.5pt Verdana; line-height:normal; ေနရာေတြမွာမိမိဘာေလာ့နဲ ့ကိုက္ညီမဲ ့height နဲ ့width ကိုလိုသလို ၿပဳၿပင္လို ့ရပါတယ္ ခင္ဗ်ာ

<style> #tabsI { float:left; width:100%; background:#EFF4FA; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #DD740B; } #tabsI ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsI li { display:inline; margin:0; padding:0; } #tabsI a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGJs10SUwt0wc9Krwaj4CtN3HbLq0fWo8Fi3nhbM5elO5XSIMh2CvaXwRzU0XcHnhPZVTv5UDajhB_Q0lWlk0n2eugq7yrEXg81579ABrImaL14mAPC9uzS_hbTg8oHw_fw661AyzvSO0/s1600/tableftI.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsI a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_RBkUE94TP0IzO8r94gEDZb-G9bQb9-g1p6zWAXGRrqrmoOwYnb2kgTT5BPSoUgvcBilZdc8am6bEwJ_tdY6lkw5BtCxiRbuiSnhvBTXJacB47c-a1ohOUPqyCRbrSUlnlMgD2ZB8cKQ/s1600/tabrightI.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsI a span {float:none;} /* End IE5-Mac hack */ #tabsI a:hover span { color:#FFF; } #tabsI a:hover { background-position:0% -42px; } #tabsI a:hover span { background-position:100% -42px; } </style> <div id="tabsI"> <ul> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> </ul> </div>

<style> #tabsF { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabsF ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsF li { display:inline; margin:0; padding:0; } #tabsF a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBb4kXAq9s9CHgxGEuWFCrGvUUHwJMChjTZldPwPEJzetwHbOfU2O1eRMRdumJnwNfyaDAxNl4-vk8SVI9CeR6iD4VLzQJnwtrVBFQJXn9SC6D883PJ7wiPXQub3aVe4PvK7NYWI0tFa4/s1600/tableftF.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsF a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA6rTMCiH1Rz6HtK4NR-FFq5FuEmPrSHvYIgvyO5XeEUdDoR4_Aagty6XQO-utsAyzgtIRUO7UxF9y8uw4rPFZjkdbEn54q9-AuNskTixtE1I4M9sfB5IqzWACRD3mTMBugTkS19pOiNg/s1600/tabrightF.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsF a span {float:none;} /* End IE5-Mac hack */ #tabsF a:hover span { color:#FFF; } #tabsF a:hover { background-position:0% -42px; } #tabsF a:hover span { background-position:100% -42px; } </style> <div id="tabsF"> <ul> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> </ul> </div>

<style> #tabs6 img { border: none; } #tabs6 { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabs6 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs6 li { display:inline; margin:0; padding:0; } #tabs6 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0NKxrE4nUPCOwWgl4WYSdsQwwHrn3bNX3q_m7Mej3dGegNNhjGZSfkvoXTlLhyJt11LCyAC9nK_NeyjMMkDnB_NMuQh0CtGCBoD4PAGtfHP5L5xm8xj4vLnvXhBqVsa2c_qzRrhoHon0/s1600/tableft6.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs6 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL5OjXObTn28SucEFfbOORQ0zE9DV1UaiXhtx-AOSE6z9XZbILFccLNOSq51EMEKXN_XEh3jPDDhW-xkduAM9OF_y83_61_w-6CtFPG_giohP4GlcZca3R4r-Vv88aXhbREUSsH90RX-E/s1600/tabright6.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs6 a span {float:none;} /* End IE5-Mac hack */ #tabs6 a:hover span { color:#FFF; } #tabs6 a:hover { background-position:0% -42px; } #tabs6 a:hover span { background-position:100% -42px; } #tabs6 #current a { background-position:0% -42px; } #tabs6 #current a span { background-position:100% -42px; } </style> <div id="tabs6"> <ul> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> </ul> </div>

<style> #navcontainer { background: #f0e7d7; margin: 0 auto; padding: .4em 0 .2em 0; font-family: georgia, serif; text-transform: uppercase; font-size: 14px; } /* to stretch the container div to contain floated list */ #navcontainer:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; } ul#navlist { list-style: none; padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em; } ul#navlist li { display: block; float: left; margin: 0; padding-bottom: 2px; } ul#navlist li a { display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> </ul> </div>





<style> #tabsJ { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #24618E; } #tabsJ ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsJ li { display:inline; margin:0; padding:0; } #tabsJ a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqa-T8ApKTomnyf0AwKrNZcsE19WR1pdPbsGx1t4JB9c7qDgnHwsEz0WLslPw79Qxw_WH0ICwjpohoKalg5lNdDvKdYMRHwGlV6V95B0a21LqH7yY0IZpFhK1Y9APnKWUE_JsI583mT-0/s1600/tableftJ.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsJ a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGv94AFq-XAUP1a8i2DKcn4f4Io10vHoPZklOIO0nAfXsToiQVkJssNaB1bFp7QDnLQOChdFfYCxcbUzhyphenhyphenS2_PHlWTRgK6be6G1bJDFHI2g2saWz0AHq4U6kwjxLsRuT0gccRL4_pg09o/s1600/tabrightJ.png) no-repeat right top; padding:5px 15px 4px 6px; color:#24618E; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsJ a span {float:none;} /* End IE5-Mac hack */ #tabsJ a:hover span { color:#FFF; } #tabsJ a:hover { background-position:0% -42px; } #tabsJ a:hover span { background-position:100% -42px; } </style> <div id="tabsJ"> <ul> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> </ul> </div>

<style> #tabs4 img { border: none; } #tabs4 { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6B78A9; } #tabs4 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs4 li { display:inline; margin:0; padding:0; } #tabs4 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAFa2TECIXu-xAFy8rUR_gZ2pN4pNXtjLUT8Yc6Sb5tLojqyLi7Dr0jQl6TUqFqZ1JD3AMgWzArLv1QXLtmdcMMMG3Ngr_ZB8k9-huRQuZ6inx3tG3r7SPAucDBtOMiO1YvWV1WmtE-kM/s1600/tableft4.gif) no-repeat left top; margin:0; padding:0 0 0 7px; text-decoration:none; } #tabs4 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgCt72Zk5e0ja7ioDxXvHPR5xusqg9K-8WCmU1gwt4zt_LfqheFEwLzC0CkRcZHiIwxCa_bWmIviaVj8pT-XSrtNI2qR8hBTl4q7MRvSx1tYi1K7m-dIKfsuN2ybmry9GEu_f5fJc4Lro/s1600/tabright4.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#6B78A9; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs4 a span {float:none;} /* End IE5-Mac hack */ #tabs4 a:hover span { color:#6B78A9; } #tabs4 a:hover { background-position:0% -42px; } #tabs4 a:hover span { background-position:100% -42px; } #tabs4 #current a { background-position:0% -42px; } #tabs4 #current a span { background-position:100% -42px; } </style> <div id="tabs4"> <ul> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> </ul> </div>

<style> .container { width: 500px; padding: 0 0 5px 0; margin: 3px 0 10px 0; background: #fff; } #nav { margin: 0; padding: 0; border-top: 3px solid #5F6A71; } #nav li { margin: 0; padding: 0; display: inline; list-style-type: none; } #nav a:link, #nav a:visited { float: left; font: bold 7.5pt verdana; line-height: 14px; padding: 9px; text-decoration: none; color: #708491; } #nav a:link.active, #nav a:visited.active, #nav a:hover { color: #666; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRGjhbiAUeSL7YvkVe-hJ0UDQNb4tV4yGp1fGm83XvPx62u4fYVTHNa0ehh47X-HhgblCqK71txg86DvYSKkbmmB5_W0RKJk8IibvifhPhJ3rQmF8rvE5ECb9Xk6MZ8ers4stw30ddb9o/s1600/Inverted.png) no-repeat top center; border-top: 4px solid #5F6A71; } </style> <div class="container"> <ul id="nav"> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> </ul> </div>

<style> #tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsE ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; } #tabsE a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL7pZHwrR6sytZCXckI5WBmz9MWIFnt6cmxDcmBsled8bGbtSSCng_OSMCr5tV2XkW5y1BBbZzISQDlFOxYsV9vgkQ8XvgNVbdDU30BLATr9bw2AL94ziInSR0Y4WwbU-zDgoHWZ92W9Y/s1600/tableftE.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsE a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP-tyy7nEZo5f3fHpQslqgq-XkSKFWvQkZvt8S3Om_Vr3CWx4X9o7Jt2XVp8Ldi6hiYGaIfeOkHh4MakzcxQy5g5-YPVH0i0OxC4SCG-QypQW9WwR1MHd-SiHFnDJ8AorU1gnGMlXZ7Fw/s1600/tabrightE.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsE a span {float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; } #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span { background-position:100% -42px; } </style> <div id="tabsE"> <ul> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> </ul> </div>

<style> #tabsD { float:left; width:100%; background:#FCF3F8; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #F4B7D6; } #tabsD ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsD li { display:inline; margin:0; padding:0; } #tabsD a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidY-K2tUxU9XPhqbeCnqNfVZgeUVdgQgds7fquuNE8QrwTIrlkavUKJ5l5EmFxVZP3_Pb9TaVPApMKkc8PHhYPU9jm3S7TtVgcPMve1LX4OjUToiAop9euJqERvmpfPByjisI6aJFkGXA/s1600/tableftD.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsD a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXf9kCzupIvH6XzZmslLJkxfGNZRD5A1rH7Ys_yReJ0kxsqV8Ynv3_I5cwKY7C_dWihClBsWbZgfbe7k6a0_UXyL9ROVDW-HplPa1qx-p3CoHoTfIAo40_NSSuq3i4J-siHatoic20yl4/s1600/tabrightD.png) no-repeat right top; padding:5px 15px 4px 6px; color:#C7377D; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsD a span {float:none;} /* End IE5-Mac hack */ #tabsD a:hover span { color:#C7377D; } #tabsD a:hover { background-position:0% -42px; } #tabsD a:hover span { background-position:100% -42px; } </style> <div id="tabsD"> <ul> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> <li><a rel="လင့္ထည့္ရန္" href="#"><span>လင့္အမည္ေရးရန္</span></a></li> </ul> </div>