Chào bạn! VeoSpot.Com tiếp tực chia sẻ miễn phí thủ thuật blogger (blogspot) Menu Ngang, Dọc khá đẹp mắt để bạn áp dụng và trang web của mình nhìn nó đẹp hơn.
 |
| Menu Blogspot Ngang, Dọc Đẹp Gọn Gàng Sạch Sẽ Trên Mobile Và PC |
Menu code Ngang, dọc và cách sử dụng.
Menu Ngang dọc trên PC này khá đơn giản , chúng ta không cần phải dán theo tùng vũng của mã code, mà chúng ta chỉ dán sau thẻ mở <body> là được.
 |
| Ảnh demo trên PC menu blogspot |
Trước khi áp dụng thì chúng ta sẽ ẩn đi phần Header hoặc tùy biến và nơi mà bạn muốn nó hiển thị, sử dụng bộ code CSS hoặc thẻ điều kiện Javascript.
- Cách làm menu này: Copy code bên dưới và dán sau thẻ <body>
| <!--MENU TRÁI--> | |
| <style> | |
| div.fixed-navbar {z-index:9999;position: fixed; top: 0; left: 0;text-align: left;width: 100%;} | |
| .menutrai{position:absolute;left:5px;top:3px;padding:10px 14px;color:#fff;background:#222;font-weight:400;font-size:18px;line-height:20px;cursor:pointer;z-index:9999;transition:background-color .3s ease 0s} | |
| #css-menu{position:fixed;top:0;left:-250px;z-index:9999;background:#eee;height:100%;transition:all .5s ease-in-out;} | |
| #cssmenu,#cssmenu ul,#cssmenu li,#cssmenu a{margin:0;padding:0;border:0;list-style:none;font-weight:normal;text-decoration:none;line-height:1;font-family:"Open Sans",sans-serif;font-size:13px;position:relative} | |
| #cssmenu a{line-height:1.3;padding:12px 15px} | |
| #cssmenu{width:240px} | |
| #cssmenu >ul >li{cursor:pointer;background:#efefef;} | |
| #cssmenu >ul >li:first-child{border-top:none} | |
| #cssmenu >ul >li >a{font-weight:600;font-size:13px;display:block;color:#16A085;background:#eee;padding:12px 15px;transition:initial} | |
| #cssmenu >ul >li >a:hover{text-decoration:none;background:#fafafa;color:#34495e;transition:initial} | |
| #cssmenu >ul >li.active{font-weight:400} | |
| #cssmenu >ul >li.home .close-menu{background:#16A085;color:#fff;font-size:14px;padding:15px 15px 15px 60px;display:block;text-transform:uppercase;font-weight:bold} | |
| #cssmenu >ul >li.home .close-menu:before{content:'\f00d';display:inline-block;font-family:FontAwesome;line-height:20px;margin-right:5px;transform:rotate(0);font-size:20px;font-style:normal;font-weight:normal;top:3px;left:5px;position:absolute;padding:8px 15px;color:#fff;background:rgba(0,0,0,0.1)} | |
| #cssmenu >ul >li.has-sub >a:after{content:'';position:absolute;top:15px;right:10px;border:5px solid transparent;border-left:5px solid #666;transition:initial} | |
| #cssmenu >ul >li.has-sub >a:hover:after{border-left:5px solid #444} | |
| #cssmenu >ul >li.has-sub.active >a:after{right:14px;top:17px;border:5px solid transparent;border-top:5px solid #666;transition:initial} | |
| #cssmenu >ul >li.has-sub.active >a:hover:after{border-top:5px solid #444} | |
| #cssmenu ul ul{padding:0;display:none} | |
| #cssmenu ul ul.expand{max-height: 250px;overflow:auto} | |
| #cssmenu ul ul a{background:#34495e;display:block;color:#fff;font-size:13px;transition:initial} | |
| #cssmenu ul ul a:hover{background:#16A085;color:#fff;transition:initial} | |
| #cssmenu ul ul li:first-child{border-top:none} | |
| #cssmenu ul ul li:last-child{border-bottom:none} | |
| #cssmenu ul ul li{border-bottom:1px solid #34495e} | |
| .form-control{display:block;width:100%;height:34px;padding:6px 12px;font-size:14px;line-height:1.42857143;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s} | |
| .form-control:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)} | |
| .form-control::-moz-placeholder{color:#999;opacity:1} | |
| .form-control:-ms-input-placeholder{color:#999} | |
| .form-control::-webkit-input-placeholder{color:#999} | |
| .form-control::-ms-expand{background-color:transparent;border:0} | |
| .form-control[disabled],.form-control[readonly],fieldset[disabled] .form-control{background-color:#eee;opacity:1} | |
| .form-control[disabled],fieldset[disabled] .form-control{cursor:not-allowed} | |
| textarea.form-control{height:auto} | |
| input[type=search]{-webkit-appearance:none} | |
| </style> | |
| <div class='fixed-navbar'> | |
| <div class='menutrai'><i class='fa fa-bars'></i></div> | |
| </div> | |
| <div id='css-menu'> | |
| <nav id='cssmenu'> | |
| <ul> | |
| <li class='home'><span class='close-menu' title='Đóng Menu'> Đóng Menu</span></li> | |
| <li><a href='/' title='Trang Chủ'><span><i class='fa fa-home'></i> Trang Chủ</span></a></li> | |
| <li class='active'><a href='/search/label/Wordpress Themes' title='Woredpress Themes'><span> Wordpress Themes</span></a></li> | |
| <li class='active'><a href='/search/label/Blogger Template' title='Blogger Template'><span> Blogger Template</span></a></li> | |
| <li class='has-sub'><a href='#' title='Thủ Thuật'><span><i class='fa fa-code'></i> Hướng Dẫn</span></a> | |
| <ul class='expand'> | |
| <li><a href='/p/huong-dan-cai-dat-blogger-template.html'><i class='fa fa-plus-circle'></i> Cài Đặt Blogger Template</a></li> | |
| <li><a href='#'><i class='fa fa-plus-circle'></i> Sub Menu 2</a></li> | |
| <li><a href='#'><i class='fa fa-plus-circle'></i> Sub Menu 3</a></li> | |
| </ul> | |
| </li> | |
| <li class='has-sub'><a href='#' title='Tiện ích online'><span><i class='fa fa-life-ring'></i> Tiện Ích Online</span></a> | |
| <ul class='expand'> | |
| <li class='even'><a href='/p/responsive-design.html' target='_blank'><i class='fa fa-plus-circle'></i> Test Responsive</a></li> | |
| <li class='even'><a href='/p/up-anh.html' target='_blank'><i class='fa fa-plus-circle'></i> Up Ảnh</a></li> | |
| <li class='even'><a href='/p/nen-anh.html' target='_blank'><i class='fa fa-plus-circle'></i> Nén Ảnh</a></li> | |
| <li class='even'><a href='/p/dem-ky-tu.html' target='_blank'><i class='fa fa-plus-circle'></i> Đếm Ký Tự</a></li> | |
| <li class='even'><a href='/p/test-code.html' target='_blank'><i class='fa fa-plus-circle'></i> Test Code</a></li> | |
| <li class='even'><a href='/p/ma-hoa-code.html' target='_blank'><i class='fa fa-plus-circle'></i> Mã Hóa Ký Tự</a></li> | |
| <li class='even'><a href='/p/nen-css.html' target='_blank'><i class='fa fa-plus-circle'></i> Nén CSS</a></li> | |
| <li class='even'><a href='/p/ma-hoa-code-web.html' target='_blank'><i class='fa fa-plus-circle'></i> Mã Hóa Code Web</a></li> | |
| <li class='even'><a href='/p/ma-hoa-javascript.html' target='_blank'><i class='fa fa-plus-circle'></i> Mã Hóa Javascript</a></li> | |
| <li class='even'><a href='/p/ma-hoa-va-giai-ma-url-base64-hex.html' target='_blank'><i class='fa fa-plus-circle'></i> Mã Hóa Base64</a></li> | |
| <li class='even'><a href='/p/bang-ma-mau.html' target='_blank'><i class='fa fa-plus-circle'></i> Bảng Mã Màu</a></li> | |
| <li class='even'><a href='/p/photoshop-online.html' target='_blank'><i class='fa fa-plus-circle'></i> Photoshop Online</a></li> | |
| </ul> | |
| </li> | |
| <li class='has-sub'><a href='#' title='Về Chúng Tôi'><span><i class='fa fa-user'></i> Về Chúng Tôi</span></a> | |
| <ul class='expand'> | |
| <li class='active'><a href='#' target='_blank' title='Giới Thiệu'><span><i class='fa fa-info-circle'></i> Giới Thiệu</span></a></li> | |
| <li class='active'><a href='#' target='_blank' title='Liên Hệ'><span><i class='fa fa-envelope'></i> Liên Hệ</span></a></li> | |
| <li class='active'><a href='/p/sitemap.html' target='_blank' title='Sitemaps'><span><i class='fa fa-sitemap'></i> Sitemaps</span></a></li> | |
| <li class='active'><a href='#' target='_blank' title='Phản Hồi Độc Giả'><span><i class='fa fa-comments'></i> Phản Hồi Độc Giả</span></a></li> | |
| </ul> | |
| </li> | |
| <li><a href='/p/blogger-template-pack.html' itemprop='url'><span itemprop='name'><i class='fa fa-folder-open'></i> Blogger Template Pack</span></a></li> | |
| <li><a> | |
| <form action='/search' itemprop='potentialAction' itemscope='itemscope' itemtype='https://schema.org/SearchAction' method='get' role='search'><meta content='/search?q= { q; } ' itemprop='target'/> | |
| <div class='form-group'> | |
| <input class='form-control' itemprop='query-input' name='q' placeholder='Tìm kiếm...' required='required' type='text'/> | |
| </div></form></a></li> | |
| </ul> | |
| </nav> | |
| </div> | |
| <script type='text/javascript'> | |
| //<![CDATA[ | |
| //Side Menu | |
| $('#cssmenu ul ul li:odd').addClass('odd'); | |
| $('#cssmenu ul ul li:even').addClass('even'); | |
| $('#cssmenu > ul > li > a').click(function() { | |
| $('#cssmenu li').removeClass('active'); | |
| $(this).closest('li').addClass('active'); | |
| var checkElement = $(this).next(); | |
| if((checkElement.is('ul')) && (checkElement.is(':visible'))) { | |
| $(this).closest('li').removeClass('active'); | |
| checkElement.slideUp('normal'); | |
| } | |
| if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { | |
| $('#cssmenu ul ul:visible').slideUp('normal'); | |
| checkElement.slideDown('normal'); | |
| } | |
| if($(this).closest('li').find('ul').children().length == 0) { | |
| return true; | |
| } else { | |
| return false; | |
| } | |
| }); | |
| $(function() { | |
| $('.menutrai').click(function () { | |
| $('#css-menu').css({left:'0'}); | |
| }); | |
| $('.close-menu').click(function() { | |
| $('#css-menu').css({left:'-400px'}); | |
| }); | |
| }); | |
| //]]> | |
| </script> | |
| <!--MENU TRÁI--> | |
| <!--MENU PC--> | |
| <style> | |
| .maxwrap {max-width:1200px;margin:0 auto;} | |
| .nav_wrapper{position:fixed;left:0;top:0;width:100%;transition:top .2s ease-out} | |
| #menu{background:#34495e;display:block;margin:0 auto;padding:0;word-wrap:break-word;width:100%;position:fixed;z-index:99;height:46px;line-height:46px;-webkit-transform:translateZ(0);transform:translateZ(0);box-shadow:0 1px 5px rgba(0,0,0,0.1);border-bottom:1px solid rgba(0,0,0,0.16);} | |
| .scroll{top:-90px} | |
| .no-scroll{top:0;z-index:9999} | |
| @media only screen and (max-width: 1200px){ | |
| #menupc{margin:0 0 0 50px} | |
| } | |
| @media only screen and (max-width: 768px){ | |
| #menupc{display:none} | |
| } | |
| #menupc{font-size:0;padding:0;float:left} | |
| #menupc ul.menus{height:auto;overflow:hidden;position:absolute;z-index:99;display:none} | |
| #menupc a{display:block;height:46px;line-height:46px;color:#fff;font-size:14px;overflow:hidden;padding:0 7px;text-transform:uppercase;transition:initial} | |
| #menupc ul > li a i {color:#fff} | |
| #menupc ul > li a:hover i {color:#fff} | |
| #menupc ul{margin:0 auto;padding:0;float:left} | |
| #menupc ul li{position:relative;margin:0;list-style:none} | |
| #menupc ul > li {float:left;} | |
| #menupc input {display:none;margin:0;padding:0;width:80px;height:45px;opacity:0;cursor:pointer} | |
| #menupc label {display:none;width:55px;height:48px;line-height:48px;text-align:center} | |
| #menupc label span {font-size:16px;position:absolute;left:55px} | |
| #menupc ul.menus li {display:block;width:100%;text-transform:none;text-shadow:none;} | |
| #menupc ul.menus a {color:#ee9622;line-height:55px} | |
| #menupc li ul{display:none;background:#34495e;margin:0;height:auto;position:absolute;top:99%;left:0;z-index:12;box-shadow:1px 2px 5px rgba(0,0,0,0.1);} | |
| #menupc li:hover ul.menus,#menupc li:hover > ul{display:block;} | |
| #menupc li:hover ul.menus,#menupc li:hover > ul{visibility:visible;opacity:1;} | |
| #menupc li li{display:block;float:none;font-size:13px;height:auto;clear:both;margin-left:0;line-height:36px;} | |
| #menupc li li:last-child {border:0;} | |
| #menupc li ul ul {left:100%;top:0} | |
| #menupc li li > a{background:#34495e;color:#fff;display:block;margin:0;text-decoration:none;text-transform:none;min-width:180px;height:36px;line-height:36px;padding:0 10px;font-size:14px;margin-top:0;transition:initial;} | |
| #menupc li li a:hover{background:rgba(0,0,0,0.1);color:#fff} | |
| #search-us{float:right;margin:0;padding:0;overflow:hidden;width:180px} | |
| #search-us table{width:100%;margin:0;position:relative;height:30px} | |
| #search-us td.search-boxy1{color:#cbd1e1!important} | |
| #search-us input#search-boxy1[type="text"]{background:rgba(255,255,255,1);height:30px;line-height:30px;margin:0;padding:0 10px;width:100%;border:0;border-radius:3px;font-size:13px;color:rgba(0,0,0,.65)!important} | |
| #search-us input#search-boxy1[type="text"]:hover{color:rgba(0,0,0,.95)!important;} | |
| #search-us input#search-boxy1[type="text"]:focus{outline:none;color:rgba(0,0,0,.95)!important} | |
| @media only screen and (max-width: 768px){ | |
| #search-us{margin:0 20px 0 0} | |
| } | |
| </style> | |
| <div class='nav_wrapper' id='menu' itemscope='itemscope' itemtype='http://schema.org/WPHeader'> | |
| <div class='maxwrap'> | |
| <nav id='menupc' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'> | |
| <ul id='simplify-click'> | |
| <li><a class='active' href='/'><span itemprop='name'><i class='fa fa-home'></i> Trang Chủ</span></a></li> | |
| <li><a href='/search/label/Wordpress Themes' itemprop='url'><span itemprop='name'><i class='fa fa-wordpress'></i> Wordpress Themes</span></a> | |
| <ul> | |
| <li><a href='/search/label/Premium Wordpress Themes' itemprop='url'><span itemprop='name'><i class='fa fa-plus-circle'></i> Premium Themes</span></a></li> | |
| <li><a href='/search/label/Wordpress Themes Tin Tức - Tạp Chí' itemprop='url'><span itemprop='name'><i class='fa fa-plus-circle'></i> Tin Tức - Tạp Chí</span></a></li> | |
| <li><a href='/search/label/Wordpress Themes Cá Nhân' itemprop='url'><span itemprop='name'><i class='fa fa-plus-circle'></i> Cá Nhân</span></a></li> | |
| <li><a href='/search/label/Wordpress Themes Bán Hàng' itemprop='url'><span itemprop='name'><i class='fa fa-plus-circle'></i> Bán Hàng</span></a></li> | |
| <li><a href='/search/label/Wordpress Themes Video - Phim' itemprop='url'><span itemprop='name'><i class='fa fa-plus-circle'></i> Video - Phim</span></a></li> | |
| <li><a href='/search/label/Wordpress Themes Manga - Anime' itemprop='url'><span itemprop='name'><i class='fa fa-plus-circle'></i> Manga - Anime</span></a></li> | |
| <li><a href='/search/label/Wordpress Themes Landing Page' itemprop='url'><span itemprop='name'><i class='fa fa-plus-circle'></i> Landing Page</span></a></li> | |
| </ul> | |
| </li> | |
| <li><a href='/search/label/Blogger Template' itemprop='url'><span itemprop='name'><i class='fab fa-blogger'></i> Blogger Template</span></a> | |
| <ul> | |
| <li><a href='/search/label/Premium Blogger Template' itemprop='url'><span itemprop='name'><i class='fa fa-plus-circle'></i> Premium Template</span></a></li> | |
| <li><a href='/search/label/Blogger Template Tin Tức - Tạp Chí' itemprop='url'><span itemprop='name'><i class='fa fa-plus-circle'></i> Tin Tức - Tạp Chí</span></a></li> | |
| <li><a href='/search/label/Blogger Template Cá Nhân' itemprop='url'><span itemprop='name'><i class='fa fa-plus-circle'></i> Cá Nhân</span></a></li> | |
| <li><a href='/search/label/Blogger Template Bán Hàng' itemprop='url'><span itemprop='name'><i class='fa fa-plus-circle'></i> Bán Hàng</span></a></li> | |
| <li><a href='/search/label/Blogger Template Landing Page' itemprop='url'><span itemprop='name'><i class='fa fa-plus-circle'></i> Landing Page</span></a></li> | |
| <li><a href='/search/label/Blogger Template Landing Profile' itemprop='url'><span itemprop='name'><i class='fa fa-plus-circle'></i> Landing Profile</span></a></li> | |
| <li><a href='/search/label/Blogger Template Video - Phim' itemprop='url'><span itemprop='name'><i class='fa fa-plus-circle'></i> Video - Phim</span></a></li> | |
| <li><a href='/search/label/Blogger Template Manga - Anime' itemprop='url'><span itemprop='name'><i class='fa fa-plus-circle'></i> Manga - Anime</span></a></li> | |
| <li><a href='/search/label/Blogger Template Hình Ảnh' itemprop='url'><span itemprop='name'><i class='fa fa-plus-circle'></i> Hình Ảnh</span></a></li> | |
| <li><a href='/search/label/Blogger Template Sách' itemprop='url'><span itemprop='name'><i class='fa fa-plus-circle'></i> Sách</span></a></li> | |
| <li><a href='/search/label/Blogger Template Forum' itemprop='url'><span itemprop='name'><i class='fa fa-plus-circle'></i> Template Forum</span></a></li> | |
| <li><a href='/search/label/Blogger Template Đếm Ngược' itemprop='url'><span itemprop='name'><i class='fa fa-plus-circle'></i> Đếm Ngược</span></a></li> | |
| </ul> | |
| </li> | |
| <li><a href='/search/label/Other Template' itemprop='url'><span itemprop='name'><i class='fa fa-download'></i> Other Template</span></a> | |
| <ul> | |
| <li><a href='/search/label/HTML Template' itemprop='url'><span itemprop='name'><i class='fa fa-plus-circle'></i> HTML Template</span></a></li> | |
| <li><a href='/search/label/PSD Template' itemprop='url'><span itemprop='name'><i class='fa fa-plus-circle'></i> PSD Template</span></a></li> | |
| </ul> | |
| </li> | |
| <li><a href='#' itemprop='url'><span itemprop='name'><i class='fa fa-code'></i> Hướng Dẫn</span></a> | |
| <ul> | |
| <li><a href='/p/huong-dan-cai-dat-blogger-template.html' itemprop='url'><span itemprop='name'><i class='fa fa-plus-circle'></i> Cài Đặt Blogger Template</span></a></li> | |
| <li><a href='#' itemprop='url'><span itemprop='name'><i class='fa fa-plus-circle'></i> Cài Đặt Wordpress Theme</span></a></li> | |
| <li><a href='#' itemprop='url'><span itemprop='name'><i class='fa fa-plus-circle'></i> Cài Đặt HTML Template</span></a></li> | |
| </ul> | |
| </li> | |
| <li><a href='/p/blogger-template-pack.html' itemprop='url'><span itemprop='name'><i class='fa fa-folder-open'></i> Blogger Template Pack</span></a></li> | |
| </ul> | |
| </nav> | |
| <form action='/search' id='search-us' method='get'> | |
| <table> | |
| <tbody> | |
| <tr> | |
| <td class='search-boxy1'> | |
| <input id='search-boxy1' 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...'/> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </form> | |
| </div> | |
| </div> | |
| <div class='clear'></div> | |
| <!--MENU PC--> |
Trên đây là bộ code menu ngang, dọc mà bạn có thể sử dụng để áp dụng vào trang web blog của bạn.
💖Chuc bạn thành công!
THÔN TIN HỖ TRỢ.
- Tên tài khoản: A VÈO
- Số tài khoản: 0761002363632
- Ngân hàng TMCP Ngoại thương Việt Nam (Vietcombank) - Chi nhánh Kon Tum
- Điện thoại: 036 211 3321 (momo )
- Hỗ trợ cài đặt facebook: fb.com/levinhteam
- Hỗ trợ cài đặt qua zalo: zalo.me/0365114434
- Nội dung hỗ trợ theme cho khách hàng:
- + Theme không mã hóa bản quyền
- + Cài đặt và hướng dẫn sử dụng theme
- + Sửa lỗi theme ( nếu có )
- + Giao full theme ( theme + data )