Menu ngang xổ xuống đẹp cho blogspot

Tweet

Đây là mẫu Menu ngang xổ dọc cho blogspot sử dụng css nên tốc độ load rất nhanh, không ảnh hưởng tới template.




- Cách thực hiện như sau:
- Trước tiên bạn chèn đoạn CSS sau trên ]]></b:skin>

#menuthaiaiti {width: 100%;margin: 0 auto;padding: 9px 0 0 0;}.home-icon1 {float: left;overflow: hidden;margin-top:7px;}#menuwrapperpic1{background:#169DC5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRH6wqfl1FXWRZOpmrCRNX1uFUs7kTnwwu5o7HNTkCy8w_gKsQ4hVCxNNQwCVEhreXHs2v_7hYoPMi26Besyq7Qrhrs29xU7MUmVg7CmbPrsWQEvnNZHBUh1OCzuOMIKa38itc4F1-CpZ1/h120/newhearder1+copy.JPG) repeat-x;width:100%;margin:0 auto;height:36px;overflow: hidden;}#menuwrapper1{width:940px;height:36px;margin:0 auto;overflow: hidden;}.trigger{background-image:url(#);background-repeat:no-repeat;background-position:right center;padding:11px 24px 11px 12px}#menubar1{width:100%;}#menubar1 ul {width: 304px;float: left;overflow: hidden;}#menubar1 ul li {float: left;width: 151px;overflow: hidden;border-right: 1px solid #e1651a;border-bottom: 1px solid #e1651a;border-radius: 0 !important;}#menubar1,#menubar1 ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}#menubar1 a{display:block;text-decoration:none;font:bold 13px arial;text-transform:none;color:#fff;padding:12px 12px 10px}#menubar1 li{float:left;position:static;margin-top: -2px;width:auto;background-image: url(#);background-position: right 11px;background-repeat: no-repeat;}#menubar1 ul li a{text-align:left;color:#fff !important;font:bold 12px !important;float: left;width: 100%;height: 17px;}#menubar1 li ul{float:left;z-index:100;position:absolute;display:none;background:#f37021;}#menubar1 li:hover a,#menubar1 a:active,#menubar1 a:focus,#menubar1 li.hvr a{color:#fff !important;}#menubar1 li:hover ul,#menubar1 li.hvr ul{display:block;z-index: 99991;border-radius: 0 0 8px 8px;}#menubar1 li:hover ul a,#menubar1 li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}#menubar1 ul a:hover{background-color:#9b3124!important;color:#fff!important;text-decoration:none}#fdmega-menu {background: url(http://hotrovon24h.com/templates/w1-08b/images/bg_main_menu.png) repeat-x;width: 100%;margin: 0 auto;}#fdmega-menu ul {list-style: none;}#search{box-shadow:0 0 7px #ddd inset;-moz-border-radius:3px;border-radius:3px;float:right;border:1px solid #ccc;margin:0 0 0 0;background:#fff;width:210px}#search input.text{background:transparent;-moz-border-radius:3px;border-radius:3px;float:left;border:0;padding:4px 30px 4px 5px;width:140px;height:16px;line-height:16x;font-size:13px;color:#666}#search input.submit{float:right;text-indent:-999em;margin:0;border:0;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaYMYdnvdIDgdXbNUm1sNeMpnFWcK-_A4_1ARCXLiMzczrg5ef_ZCGeHG-0yLfXr4N06Asb8pn-OcRdEDYfe4791jQJ9H7-KlLGRKfej9k736TU5W5JdeIqZAg1ALdpHOWAUgamf5C83k/s37/search.gif) no-repeat 0 0;width:19px;height:21px}#search .submit:hover{background-position:-20px 0}.tatcadanhmuc {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ8fAR09SLJt2aQQ5OOzyrqkhdtSmoT8hALKHc2urvIuyMlGo9Xlg7g0Z7Le44JpE4o7vumwd1RvLyvrQgQGHNkAjvda_sXqcj80eK7zacZU_yGNK_3u-Tar_rYxtpRlj8RBRgJtA-TV1y/h120/muitenvang.png) no-repeat;text-transform: uppercase;background-position: 145px;float: left;width: 135px;}ul#topnav {width: 960px;position: relative;height: 36px;margin: 0 auto;}ul#topnav li {float: left;height: 36px;padding: 0px;background: url(#) no-repeat top right;}ul#topnav li a {padding: 10px 15px;display: block;color: #fff;font: bold 13px arial;text-decoration: none;}#topnav li img {float: left;margin-top: -4px;margin-right: 0px;}ul#topnav li a:hover {color:#ffe447}.itemkhoagiaodien {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPYLyWuYi4cgXaDaWGS8KpAtbqpA_NaAxDA-KUF054tehBE4pT4NnHWOZiLvU6BBhol0U4xrf9-oWQiqVRuDXw45lTBATvBECcnzWx6G2pr2-aVjPOUWbqyMqt3rBKs8B5Aa_YqFk-dnto/h120/saleoff.png) no-repeat;margin-left: -10px;position: absolute;width: 53px;height: 43px;margin-top: -26px;}ul#topnav li:hover {background:url(#) repeat-x top left;}ul#topnav li.mg-home {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPatkWLQMauLi1AjbFD7ApaEL4en3exMctF9g7gqUgqHoE-KEZX7nGt0OJ8SVBJSln48HolJJUG_dmCf66DjkNANcDXhfzoyLSTJkuvblK0UcXq81fKqLZNJwxZdm5PACulOWoYHYU8pI/s0/home-icon.png) no-repeat !important;float: left;margin-top: 8px;overflow: hidden;width: 20px;height: 25px;background-size: 100% !important;margin-left: 15px;margin-right: 10px;}ul#topnav li.mg-home a {height:19px;}ul#topnav li div.sub {position: absolute;z-index: 9999;margin-left: -7px !important;overflow: hidden;top: 36px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLriUi6JnYhUV6Bneab_TVSBG2T1NnTHX99WdnvH3h-e_T_XymAAf2771m8PZ1Ao_X9Z7sq0Cn9XXn5dDbwV-DI3fApetsa__FtD_iDbStlGOKA-7c4gwcifQtY0MkKqfJW29_a0YnAFhh/s0/bgthaiaiti.jpg) no-repeat;background-position: right bottom;padding:5px;display: none;border-right:4px solid #0082ff;border-left:4px solid #0082ff;border-bottom:4px solid #0082ff;color:#333;}ul#topnav li:hover div.sub {display: block;}ul#topnav li div.sub p {margin-bottom:5px;text-align:justify;}ul#topnav li div.sub div.cont {float: left;padding:5px;}ul#topnav li div.sub div.cont h3 {padding-bottom: 5px;}ul#topnav li div.sub div.cont a{display:block; margin:0;padding:0;padding:0 0 5px;color:#666;font: 12px arial;}ul#topnav li div.sub div.cont a:hover{color:#039;text-decoration: underline;}ul#topnav li div.ms1 {}ul#topnav li div.ms2 {width:942px;left: 7px;}ul#topnav li div.ms3 {width:260px;left: 195px;}ul#topnav li div.ms4 {}ul#topnav li div.ms5 {width:400px;left: 16px;background:#ff7d00 url(sub6-bg.png) no-repeat bottom right;}ul#topnav li div.sub div.cs21 {width:178px;}ul#topnav li div.sub div.cs31 {width:120px;}#menuleft_home {background:#fff;}#menuleft_home h1 {background:#102e50 url(../images/leftmenu_top.png) no-repeat;font-size:13px;text-transform:uppercase;text-align:center;color:#FFF;padding:10px 5px;}#menuleft_home h2 {background:url url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7EWzw2mA3t98IwDkdPJFS_4XJS0kzIwxQyK6gPkTNqowGQ-XtmrbQLHgqpJMMUlzgnbh5QTalJ7wia7-mBzX_BIFGjbqVSew81kVxV3WDPNujIdciD8tjrbAVn3qvB4BUWEFd1EXMKA/h120/item_menuleft.png) 5px 7px no-repeat;font-size:12px;text-transform:uppercase;color:fff;padding:7px 5px 7px 25px;font-weight:bold;}#menuleft_home li {padding:7px;padding-left:15px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF8K-ezE9y4qYghNkLNYqaKHIxT8zxn1YwVlfqYEMCJNrx7x3n5BWV2r37svKixCSn8ItCU8i1qeX9bs0a-cBdJ1ELbD1cPGGQ9os-IEBrRg0uSu-rafIUCOIMktCaQNMSt2hkmkX_luA/s0-w80/icon_catalogies.gif) no-repeat 2px;border-top: 1px solid #686868;}#menuleft_home li a {color: #007217;font-weight: 700;}
- Chèn đoạn HTML sau vào nơi bạn cần hiển thị:

<div id='menuthaiaiti'><div id='fdmega-menu'><ul id='topnav'><li><a class='tatcadanhmuc' href='#'>Tất cả danh mục</a><div class='sub ms2'><div class='cont cs21'><h3>Blogspot</h3><a href='#'>Template blogspot Pro</a><a href='#'>Template blogspot free</a><a href='#'>Thủ thuật blogspot</a></div><div class='cont cs21'><h3>Photoshop</h3><a href='#'>File Photoshop</a><a href='#'>Mẫu thiệp cưới PSD</a><a href='#'>Thủ thuật</a></div><div class='cont cs21'><h3>Phần mềm</h3><a href='#'>Sub 2.1</a><a href='#'>Sub 2.2</a><a href='#'>Sub 2.3</a></div><div class='cont cs21'><h3>Thủ thuật</h3><a href='#'>Sub 2.1</a><a href='#'>Sub 2.2</a><a href='#'>Sub 2.3</a></div><div class='cont cs21'><h3>Hệ điều hàng</h3><a href='#'>Sub 2.1</a><a href='#'>Sub 2.2</a><a href='#'>Sub 2.3</a></div><div class='cont cs21'><h3>Công cụ</h3><a href='https://sites.google.com/site/thaiaiti1992/Teamview_ThaiAiTi.rar' target='_blank'>Tải teamview</a><a href='#' target='_blank'>Cách Up template</a><a onclick='window.open(&#39;http://whichloadsfaster.com/&#39;,&#39;new&#39;,&#39;resizable=no,toolbar=no,menubar= no,location=no,directories=no,status=no,top=30,left=500,width=500,height=900,scrollbars=no&#39;);return false' src='#'>Ai load nhanh?</a><a onclick='window.open(&#39;http://iphone4simulator.com/&#39;,&#39;new&#39;,&#39;resizable=no,toolbar=no,menubar= no,location=no,directories=no,status=no,top=30,left=500,width=500,height=900,scrollbars=no&#39;);return false' src='#'>Test giao diện</a><a onclick='window.open(&#39;http://ictgroup.vn/HTML_Encoder.htm&#39;,&#39;new&#39;,&#39;resizable=no,toolbar=no,menubar= no,location=no,directories=no,status=no,top=30,left=500,width=500,height=900,scrollbars=no&#39;);return false' src='#'>Mã hóa code</a><a href='http://www.thaiaiti.com/p/form-rut-ngan-css.html'>Tối ưu CSS</a><a href='http://www.thaiaiti.com/2013/09/upload-va-lay-link-flash-on-gian-va.html'>Lấy Link Flash</a><a href='http://www.thaiaiti.com/2013/07/thu-thuat-lay-data-blogspot-cua-nguoi.html'>Lấy data blogger</a><a onclick='window.open(&#39;https://622a1c66-a-62cb3a1a-s-sites.googlegroups.com/site/hohoangthai/color-codes.swf&#39;,&#39;new&#39;,&#39;resizable=no,toolbar=no,menubar= no,location=no,directories=no,status=no,top=30,left=500,width=500,height=400,scrollbars=no&#39;);return false' src='#'>Bảng mã màu</a><a onclick='window.open(&#39;https://622a1c66-a-62cb3a1a-s-sites.googlegroups.com/site/hohoangthai/lay%20code%20flash.swf&#39;,&#39;new&#39;,&#39;resizable=no,toolbar=no,menubar= no,location=no,directories=no,status=no,top=30,left=500,width=500,height=400,scrollbars=no&#39;);return false' src='#'>Lấy code Flash</a><a onclick='window.open(&#39;https://622a1c66-a-62cb3a1a-s-sites.googlegroups.com/site/hohoangthai/photoshop%20online.swf&#39;,&#39;new&#39;,&#39;resizable=no,toolbar=no,menubar= no,location=no,directories=no,status=no,top=30,left=500,width=900,height=600,scrollbars=no&#39;);return false' src='#'>Photoshop Online</a><a onclick='window.open(&#39;http://www.ma-config.com/en/installplugin/0.html&#39;,&#39;new&#39;,&#39;resizable=no,toolbar=no,menubar= no,location=no,directories=no,status=no,top=30,left=500,width=900,height=600,scrollbars=no&#39;);return false' src='#'>Cập nhật Drivers</a><a href='/2013/01/phan-mem-vao-facebook-tot-nhat-tuyet-voi.html'>Cách vào Facebook</a><a href='https://sites.google.com/site/thaiaiti1992/Teamview_ThaiAiTi.rar' target='_blank'>Tải teamview</a><a onclick='window.open(&#39;http://www.dudamobile.com&#39;,&#39;new&#39;,&#39;resizable=no,toolbar=no,menubar= no,location=no,directories=no,status=no,top=30,left=500,width=900,height=600,scrollbars=no&#39;);return false' src='#'>Temp Mobile Blogger</a></div></div></li><li class='mg-home'><a href='/'></a></li><li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_M8yCMJo-krsYUb1XPyFlzsmjB5lT5Aa2m-HnBSwkPAGN5bz5G4CiTY6xnIiTep2pmWrt1ogLElg2IyVrsdtQpkGwaERLS5Fqb7nAMbk2GNHOQLw7Z_LuVp7VLSj92vT5k2Aqyfvn1I6g/s22/hot.gif'/>Khuyến mại</a></li><li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCwuKyaLGQp-WcXiOZom7gzUJcIYJpjuaI2y76ekG0KjS2xjsgo5eS3dzgDX_3s_W0coXKdq3kHVv252CFVM5qMNK_KVVTHDBsa__9UZdXroNReZ1LbgqZ_zMo7wvHydutS6SeozLDM3GA/s25/icon_gioithieu.png'/>Cửa hàng</a></li><li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw2WNsEXLlTw5Ujib7iWmmy8WylHoo0LmmNGHC-0jR8pbAR58LjcnviJj84yr1BD3ybl_8RvEqCLyP8sBSMqgb8gYvn6UNl5SMCj8Af2guR9yv_-e5Crhn2FGz_HgCE7c3fmIdQeYV_qms/s25/icon_lhe.png'/>Liên hệ mua hàng</a></li><li><div class='itemkhoagiaodien'></div><a href='http://cuahangtemplate.blogspot.com/'>Giao diện</a></li><form action='/search' class='left' id='search' method='get'><input class='left gray text' name='q' onblur='if(this.value==""){this.value=this.defaultValue}' onfocus='if(this.value==this.defaultValue){this.value=""}' type='text' value='Tìm kiếm sản phẩm'/><input class='submit' type='submit'/></form></ul></div><div class='clear'></div><div class='sub'></div><div class='clear'></div></div>
- Chúc bạn thực hiện thành công !