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

Đâ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/AVvXsEjmEILAX6aeIE7Pt1yDC5EjTlc0efyuzJhLLKlFcKynI05GoQ0b2WGo4h2AlyoIvMRG3ckTQNfMMQR_AFZYwPCsqMAsHxTmsskKZ9p0vR69kM2hLKhxuA9TevzlylgMWL8dErUYS1mAR2Vz/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/AVvXsEiCQXUBaYbrQ1NLEtVKw41-xA9lvuVNd74W6hLipoS2aXBMO6_lGN-BeKy9iCtONKW7RiPhyphenhyphenBn7B_LG0o2ATvYp460CbMr71pM3YNWm-xyoSkzdkVcXbPrAJqdKqVLX-enEvTplY-3EeMI/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/AVvXsEjIoLpmMc-1x65ePr35TWchvL_kUQ5_Y8xR73w2mJkhhTJDrPz59_f3Zujh2Kv-daJrwuCtrygQi1bWjNwRl8u5lyw-Jdj0B-kHh_EI2jXtACgQhejGKrADIuSrQzaz26eqnLn55OwbrLbO/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/AVvXsEgttEt3IV2liptsS5RQobINfg38bCRU8VGVszg5kRLX4IhczkfOYHuB_vKLsJON3LHG6hUpf0ecY8Z2hJN4nvsUXNH-TGSyDCW3E6bQUmh7V_pAgE7HgceGbQ5IB3HV3Q9Wrpdvm_RaAfnp/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/AVvXsEh99T0undkalA9dCfuYvyU1JmLGEUio8Ahhoc1bfBT8XQKqCLLCJR8QxRhSWo8IrZSzT1NJS2Ve7tQgXvGpdONFHwCeAthBuP_qcUzczcK-7e_TCu7MLRo_m9RXZwa4ap3HriDVWDVHuRY/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/AVvXsEh9JD_KDL33VAPSPqD6d2J0fSt7aujBtMvA8oXzgc4EqnCYNz_dSe7GwMXXCPKKHaoWKK7pBFJbve0fgXtUKx-Szj5hFiJ0X9E1ZnggRVLy6eQSbeyz3_4_4laS5pJ9oocwtwvKeFaJ_TgY/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/AVvXsEhpZVaadN1kKubGYeFbIq_-jy6AYmiVh70-mHfe4ThGz4pz3Xd0aT2N5BDLFeortQZdAHddib8LYkphYkQ5upzrENwlWw8xGlXC5GRAZ50FoJ1EPZHNsYpW4HLo5hvGOvkdEa0H1yx56w/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/AVvXsEirKiB7-GEM5svTUwzwgf7Gv4t_3KjKDkQ-pRO37xgeToQ0nHVrs_65mI7t8bIAoj1iR1asu2mnGBCcO5-ueOJ4hcuvlhxn47UZweLRlTK4HyGHTaGuObQ3cx5OQFMBe3tQ0TihiClX-2Y/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/AVvXsEj-uGLG82CcCSa_n3z4xCCDdCRONINo2-ko1Su-5ZJNYOBQaAeQmlfyQV9LwW6XLeky7z_iAb_GyhMixbDXnMAy82so-kHNF64keuub0dvUm0D37u8iMIlIln-53lrfYjsZNMtA_j_S_J_W/s22/hot.gif'/>Khuyến mại</a></li><li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3J6gMGsjAQ8TmDj-zWRd5BNaLyxa9oEEL7JAdPanbStRqmrGvYDvnTBGHj07OEMHH4i7S2DAJNveQyMh3ufU-6x3dwp_4Sm6WXnxIULyOq3vuLu9I5XQc6ZPDD2XMsgt7P58ZbxyHACDf/s25/icon_gioithieu.png'/>Cửa hàng</a></li><li><a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6mrDMqqkpqnbBHLr52HpI8OR3MEFFtvYI59Zldqb_-Q4x9vvKu0v53c-HADBw4c22o0ESXNuHl0I6XLqo-pGlku56RVbCFl7RPAylgPfIUlIzeOntk-AtSWDmWLo_XLD_Eet_xVV3B2ge/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 !
post-edit

1 nhận xét:

- Không chèn liên kết Spam quảng cáo. có thể xem ở đây Liên Kết Bạn Bè
- Nội dung nên liên quan tới bài viết.
- Hãy đóng góp ý kiến của bạn để Blogger Việt hoàn thiện hơn.