6/7/13

Home » 1.Thủ thuật Blogspot » Blogspot Menu » Bài đang xem

Tạo Dropmenu xổ dọc theo cột cho blogspot

Đăng bởi Admin | 6/7/13 | 3 nhận xét
Hôm nay mình sẽ giới thiệu đến cho các bạn một mẫu menu mới hoạt động tốt trên các trình duyệt như IE10, firefox, sarafi, opera,.... Mẫu này có đặc điểm là các menu con sẽ sắp xếp thành từng cột với những chuyên mục lớn và chuyên mục nhỏ.  Các bạn có thể xem ảnh demo bên dưới.

Dropmenu xổ dọc theo cột cho blogger blogspot

VIEW DEMO

» Cách thêm Dropmenu xổ dọc theo cột cho blogger

1. Đăng nhập vào blog
2. Chọn Bố cục (layout)
3. Chọn Thêm Tiện ích (Add widget) => Tạo HTML/Javarscip và dán đoạn code bên dưới vào.
<style>
/* Menu http://namkna.blogspot.com/ */
#menu{width:100%margin:0 auto;padding:5px auto;height:50px;width:100%;margin:0 auto;background-color:#1E75A8;background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#fff), to(#1E75A8)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(80% 20%, closest-corner, #1fff, #1E75A8); /* Firefox 3.6+ */ background: -moz-radial-gradient(80% 20%, closest-corner, #fff, #1E75A8); /* IE 10 */ background: -ms-radial-gradient(80% 20%, closest-corner, #fff, #1E75A8);}
#mega-menu ul {list-style: none;left:0;top:1px;z-index:99}
ul#topnav {float: left;width:98%;position: relative;height: 33px;background: none;}
ul#topnav li {float: left;height: 33px;padding: 0px;}
ul#topnav li a {font-weight:bold;padding:6px 24px 19px 10px;display: block;color: #fff;text-shadow:1px 1px 0 #111;font-size:13px;text-decoration: none;}
ul#topnav li:hover {background: #f5f5f5}
ul#topnav li:hover a#fff1, ul#topnav li:hover a#fff2, ul#topnav li:hover a#fff3, ul#topnav li:hover a#fff4, ul#topnav li:hover a#fff5, ul#topnav li:hover a#fff6{color:#111;text-shadow:none;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ49v-N4Xz78eXiAHsgbvXbezQeqJ4wyQX4deeRGDU-hEDCUvbhvN3EntI48U1aOV8SIrECqbQtC8Uo-G_ol5yFhH0lBObw9jWhaQ6RYnfXE7dxp7fhOav4YTG2rZNEbtDvgWfNjN_zjqn/s1600/arrow_black-namkna-blogspot-com.gif);background-repeat:no-repeat;background-position:right 12px}
ul#topnav li.mg-home {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibsdHr7rNzQrby5d81lBelf73GEeFWpVr1rNnzkpUGmTUP9QieGGjJVzquT85k4gAk2azMtJ74pJTc5LNEXh67b5Si7-4aLedCsid4vckKzDxvXaTUkgLb06yoMFvvBUe9Pf9KlIIj2axT/s1600/home-ld.fw-namkna-blogspot-com.png) no-repeat center center!important;width:45px;margin-top:-2px}
ul#topnav li.sitemap {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj12DrINSxp93fao9NVHNSd8ZmXdnH1FckkBibXksUzw1xuYa2VOPjbShK3y-vJf5tdvFyEtWQjAiSlbcnWTGUXoTRBoE4hY5KtUalRsCX3TGGR7oKQ1wn_MGyBAIbke9DTKQwF0FRZbwrB/s1600/sitemap-namkna-blogspot.png) no-repeat center center!important;width:45px;margin:0}
ul#topnav li.sitemap a {height:15px;}
ul#topnav li.mg-home a {height:15px;}
ul#topnav li div.sub {position: absolute;display: none;top: 42px;background: #fff;padding:-1px -2px 0px;border-right:1px solid #DBDBDB;border-left:1px solid #DBDBDB;border-bottom:1px solid #DBDBDB;color:#000;margin-bottom: 0px;margin-top: -2px;margin-right: -2px;z-index:0}
ul#topnav li div.sub a{font-weight:normal;text-shadow:none}
ul#topnav li:hover div.sub {display: block;}
ul#topnav li div.sub p {margin-bottom:1px;text-align:justify;}
ul#topnav li div.sub div.cont {float: left;width:100%}
ul#topnav li div.sub div.cont c1 {color:#111;padding:7px 4px;border-top:1px solid #fff;border-right:1px solid #DBDBDB;margin-top:0px;height:20px;width:179px;text-align:center;background: #F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block}
ul#topnav li div.sub div.cont c2 {color:#111;border-top:1px solid #fff;border-left:1px solid #DBDBDB;padding:7px 4px;margin-left:-1px;margin-top:0;height:20px;width:150px;text-align:center;background: #F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block}
ul#topnav li div.sub div.cont c3 {color:#111;border-top:1px solid #fff;border-left:1px solid #DBDBDB;padding:7px 4px;margin-left:-1px;margin-top:0px;height:20px;width:153px;text-align:center;background: #F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block}
ul#topnav li div.sub div.cont c4, ul#topnav li div.sub div.cont c5{color:#111;border-top:1px solid #fff;border-left:1px solid #DBDBDB;padding:7px 4px;margin-left:-1px;margin-top:0px;height:20px;width:163px;text-align:center;background: #F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block}
ul#topnav li div.sub div.cont c6{color:#111;border-top:1px solid #fff;border-left:1px solid #DBDBDB;padding:7px 4px;margin-left:-1px;margin-top:0px;height:20px;width:161px;text-align:center;background: #F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block}
ul#topnav li div.sub div.cont c7 {color:#111;border-top:1px solid #fff;border-left:1px solid #DBDBDB;border-right:1px solid #DBDBDB;padding:7px 4px;margin-left:-1px;margin-right:-3px;margin-top:0px;height:20px;width:166px;text-align:center;background: #F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block;z-index:9}
ul#topnav li div.sub div.cont c8 {color:#111;border-top:1px solid #fff;padding:7px 4px;border-right:1px solid #DBDBDB;margin-top:0px;height:20px;width:179px;text-align:center;background: #F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block}
ul#topnav li div.sub div.cont c9 {color:#111;border-top:1px solid #fff;border-left:1px solid #DBDBDB;padding:7px 4px;margin-left:-1px;margin-top:0px;height:20px;width:150px;text-align:center;background: #F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block}
ul#topnav li div.sub div.cont c10 {color:#111;border-top:1px solid #fff;border-left:1px solid #DBDBDB;padding:7px 4px;margin-left:-1px;margin-top:0px;height:20px;width:153px;text-align:center;background: #F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block}
ul#topnav li div.sub div.cont c11{color:#111;border-top:1px solid #fff;border-left:1px solid #DBDBDB;padding:7px 4px;margin-left:-1px;margin-top:0px;height:20px;width:163px;text-align:center;background: #F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block}
ul#topnav li div.sub div.cont c12{color:#111;border-top:1px solid #fff;border-left:1px solid #DBDBDB;padding:7px 4px;margin-left:-1px;margin-top:0px;height:20px;width:164px;text-align:center;background: #F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block}
ul#topnav li div.sub div.cont c13{color:#111;border-top:1px solid #fff;border-left:1px solid #DBDBDB;padding:7px 4px;margin-left:-1px;margin-top:0px;height:20px;width:160px;text-align:center;background: #F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block}
ul#topnav li div.sub div.cont c14 {color:#111;border-top:1px solid #fff;border-left:1px solid #DBDBDB;border-right:1px solid #DBDBDB;padding:7px 4px;margin-left:-1px;margin-right:-3px;margin-top:0px;height:20px;width:166px;text-align:center;background: #F5F5F5;font-family:tahoma;font-size: 13px;font-weight:bold;display:block;z-index:9}
ul#topnav li div.sub div.cont a{display:block; margin-top:0;padding:0;margin-right:-1px;padding:5px;color:#000;border-top:1px solid #DBDBDB;background: #fff}
ul#topnav li div.sub div.cont a:hover{background: #F48829;background: -moz-linear-gradient(top, rgba(244, 150, 75, 1) 0%, rgba(217, 87, 0, 1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(244, 150, 75, 1)), color-stop(100%,rgba(217, 87, 0, 1)));background: -webkit-linear-gradient(top, rgba(244, 150, 75, 1) 0%,rgba(217, 87, 0, 1) 100%);background: -o-linear-gradient(top, rgba(244, 150, 75, 1) 0%,rgba(217, 87, 0, 1) 100%);background: -ms-linear-gradient(top, rgba(244, 150, 75, 1) 0%,rgba(217, 87, 0, 1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#f4964b&#39;, endColorstr=&#39;#d95700&#39;,GradientType=0 );
background: linear-gradient(top, rgba(244, 150, 75, 1) 0%,rgba(217, 87, 0, 1) 100%);color:#fff !important;padding:5px;font-weight:bold}
ul#topnav li div.ms1 {width:183px;left: 0px;}
ul#topnav li div.ms2 {width:1196px;left: 0px;}
ul#topnav li div.ms3 {width:1196px;left: 0px;}
ul#topnav li div.ms4 {width:343px;left: 297px;}
ul#topnav li div.ms5 {width:343px;left: 395px;}
ul#topnav li div.ms6 {}
ul#topnav li div.sub div.cs11 {width:182px}
ul#topnav li div.sub div.cs21 {width:186px}
ul#topnav li div.sub div.cs211 {height:120px;width:156px;border-left:1px solid #dbdbdb;margin-left:1px}
ul#topnav li div.sub div.cs212 {height:120px;width:160px;border-left:1px solid #dbdbdb;margin-left:1px}
ul#topnav li div.sub div.cs213 {height:120px;width:170px;border-left:1px solid #dbdbdb;margin-left:1px}
ul#topnav li div.sub div.cs214 {height:120px;width:170px;border-left:1px solid #dbdbdb;margin-left:1px}
ul#topnav li div.sub div.cs215 {height:120px;width:168px;border-left:1px solid #dbdbdb;margin-left:1px}
ul#topnav li div.sub div.cs216 {height:120px;width:173px;border-left:1px solid #dbdbdb;margin-left:1px;}
ul#topnav li div.sub div.cs31 {width:186px}
ul#topnav li div.sub div.cs311 {height:93px;width:156px;border-left:1px solid #dbdbdb;margin-left:1px}
ul#topnav li div.sub div.cs312 {height:93px;width:160px;border-left:1px solid #dbdbdb;margin-left:1px}
ul#topnav li div.sub div.cs313 {height:93px;width:170px;border-left:1px solid #dbdbdb;margin-left:1px}
ul#topnav li div.sub div.cs314 {height:93px;width:170px;border-left:1px solid #dbdbdb;margin-left:1px}
ul#topnav li div.sub div.cs315 {height:93px;width:168px;border-left:1px solid #dbdbdb;margin-left:1px}
ul#topnav li div.sub div.cs316 {height:93px;width:173px;border-left:1px solid #dbdbdb;margin-left:1px;}
ul#topnav li div.sub div.cs41 {width:170px;}
ul#topnav li div.sub div.cs411 {width:170px;height:145px;border-left:1px solid #dbdbdb;margin-left:1px;}
ul#topnav li div.sub div.cs51 {width:170px}
ul#topnav li div.sub div.cs511 {width:170px;height:93px;border-left:1px solid #dbdbdb;margin-left:1px}
ul#topnav li a.ftt{background:none;font-weight:bold;padding:0 4px 0 7px;display: block;color: #fff;text-shadow:1px 1px 0 #111;font-size:13px;text-decoration: none;margin:6px 7px 0 0}
ul#topnav li:hover a.ftt{color:#111;text-shadow:none;}
ul#topnav a.f1, a.f2, a.f3, a.f4, a.f5{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqRYR97HXqA6__wk-NnbqRh-6eLsTFD4cdsahci-z2AFeUkmTdfR-yjixpoy_yRXtpudmmiVU79wv837KsgjE3wpoDrFY4vEQN-5WxyNrRVSz10bQ5xEp4Yth8DRctrd3ffjchl8bZoIju/s1600/arrow_white-namkna-2.gif);background-repeat:no-repeat;background-position:right 12px}
ul#topnav a.f1:hover, a.f2:hover, a.f3:hover, a.f4:hover, a.f5:hover{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ49v-N4Xz78eXiAHsgbvXbezQeqJ4wyQX4deeRGDU-hEDCUvbhvN3EntI48U1aOV8SIrECqbQtC8Uo-G_ol5yFhH0lBObw9jWhaQ6RYnfXE7dxp7fhOav4YTG2rZNEbtDvgWfNjN_zjqn/s1600/arrow_black-namkna-blogspot-com.gif);background-repeat:no-repeat;background-position:right 12px}
#search{background:transparent;float:right;width:180px;height:19px;margin-top:3px}
#search form{float:left}
#search input[type="text"]{background:#DDD;float:left;border:1px solid #444343;width:146px;margin-top:1px;padding:2px 15px;font-size:12px;text-align:right}
#search input[type="text"]:focus{background:#FFF}
#search input[type="submit"]{display:none}
</style>
<!--Menu Start http://namkna.blogspot.com/ -->
<div id='menu'>
<div id='mega-menu'>
<ul id='topnav'>
 <li><a class='f1' href='/' id='fff1'><img height='25px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEini4Zmo6sPIk-Y8QyH7h8A5Q_dGDNnK39p3ivjrkA5c38fEauRudzvv4NCMCKfayB8_ALM9YTKhUbqHi2yla7TRm8QHUHmT9P91-Nws0Kr7DFYPAqp6ZARMZGogwIRY839FV8HOVFWPzh5/s1600/icon_home-namkna-2.png' style='margin-top:-3px'/></a>
  <div class='sub ms1'>
   <div class='cont cs11'>
    <a href='#'>Tác giả</a>
    <a href='#'>Thông báo</a>
    <a href='#'>Namkna.blogspot.COM</a>
    <a href='#'>Tin tức MMO</a>
    <a href='#'>Thông tin liên hệ</a>
    <a href='#'>Chính sách comments</a>
    <a href='#'>Điều khoản sử dụng</a>
  </div></div></li>
 <li><a class='f2' href='#' id='fff2'>Ngân hàng</a>
  <div class='sub ms2'>
   <div class='cont cs21'>
   <c1>Payza</c1>
    <a href='#'>Đăng ký và verify</a>
    <a href='#' rel='prettyphoto'>Một số loại phí</a>
    <a href='#' rel='prettyphoto'>Hướng dẫn chuyển tiền</a>
   </div>
   <div class='cont cs211'>
   <c2>Liberty Reserve</c2>
    <a href='#'>Hướng dẫn đăng ký</a>
    <a href='#' rel='prettyphoto'>Một số loại phí</a>
   </div>
   <div class='cont cs212'>
   <c3>Paypal</c3>
    <a href='#'>Hướng dẫn đăng ký</a>
    <a href='#'>Một số lưu ý</a>
   </div>
   <div class='cont cs213'>
   <c4>WebMoney</c4>
    <a href='#'>Hướng dẫn đăng ký</a>
   </div>
   <div class='cont cs214'>
   <c5>Egopay</c5>
    <a href='#'>Hướng dẫn đăng ký</a>
   </div>
<div class='cont cs215'>
<c6>Perfect Money</c6>
    <a href='#'>Hướng dẫn đăng ký</a>
    <a href='#'>Một số loại phí</a>
</div>
<div class='cont cs216'>
<c7>Thông tin</c7>
    <a href='#'>Zip Code</a>
</div>
</div>
</li>
 <li><a class='f3' href='#' id='fff3'>Chương trình</a>
<div class='sub ms3'>
<div class='cont cs31'>
<c8>ADF.LY</c8>
<a href='#'>Hướng dẫn đăng ký</a>
</div>
<div class='cont cs311'>
<c9>Chương trình mới</c9>
</div>
<div class='cont cs312'>
<c10>Đang cập nhật</c10>
</div>
<div class='cont cs313'>
<c11>Chương trình mới</c11>
</div>
<div class='cont cs314'>
<c12>Đang cập nhật</c12>
</div>
<div class='cont cs315'>
<c13>Chương trình mới</c13>
</div>
<div class='cont cs316'>
<c14>Chương trình mới</c14>
</div>
</div></li>
<li><a class='f4' href='#' id='fff4'>Blogspot</a>
<div class='sub ms4'>
<div class='cont cs41'>
    <a href='/search/label/namkna?max-results=10'>Giới thiệu căn bản</a>
    <a href='#'>Thủ thuật</a>
    <a href='#'>Hướng dẫn thiết kế</a>
    <a href='#'>Kỹ năng</a>
    <a href='#'>SEO</a>
</div>
<div class='cont cs411'>
    <a href='#'>Hosting</a>
    <a href='#'>CSS</a>
    <a href='#'>HTML</a>
    <a href='#'>Mã giảm giá</a>
    <a href='#'>Mẫu Blog</a>
   </div></div></li>
 <li><a class='f5' href='#' id='fff5'>Công cụ</a>
<div class='sub ms5'>
<div class='cont cs51'>
<c11>MMO</c11>
    <a href='#'>Roboform</a>
</div>
<div class='cont cs511'>
<c11>Blogspot</c11>
    <a href='#'>Code Converter</a>
    <a href='#'>Hex Color Codes</a>
</div>
</div></li>
 <li class='sitemap'><a href='#' title='Sơ đồ trang web'></a></li>
<div id='search'>
<form action='/search' class='search' id='searchform' method='get'>
<input name='q' onblur='if (this.value == "") {this.value = "Type and Enter";}' onfocus='if (this.value == "Type and Enter") {this.value ="";}' size='30' type='text' value='Type and Enter'/>
</form>
</div>
</ul>
</div>
</div>
<div class='clear'>
4. Lưu mẫu lại và xem kết quả nha.

»  Tùy chỉnh nâng cao:

 1. Nếu các tiêu đề Menu bị tụt xuống dòng như ảnh bên dưới:
Dropmenu xổ dọc theo cột cho blogspot

=> Khắc phục: hãy thay gí trị top:1px thanhg giá trị khác (Có thể sử dụng giá trị âm ví dụ:top:-10px)
2. nếu giữa tiêu đề menu và sub menu có khoảng cách hãy chỉnh lại  height: 33px cho phù hợp.
Dropmenu xổ dọc theo cột cho blogspot

* Xem thêm:
                                                                                                              Theo: Namkna
                                                                                                              Thu thuat vi tinh

3 nhận xét:

  1. Unknownlúc 15:31 9 tháng 7, 2013

    Cái này rất hay, nhung làm sao để chèn được các thư mục của mình vào được

    Trả lờiXóa
    Trả lời
    1. Ngân Gianglúc 18:04 9 tháng 7, 2013

      Bạn phải tạo các trang để lấy link mà chèn ( dấu # là để chèn link đấy )

      Xóa
  2. Ngân Gianglúc 16:29 9 tháng 7, 2013

    Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa

Cảm ơn bạn đã nhận xét !
- Bạn có thể chèn link vào nhận xét bằng thẻ: <a href="Link" rel="nofollow">Tên link</a>
- Tạo <b>Chữ đậm</b> và <i>Chữ ngiêng</i> cho nhận xét
- Hãy Chuyển đổi mã code trước khi chèn vào nhận xét
- Hãy bấm Theo dõi dưới chân trang để nhanh chóng nhận được phản hồi từ Thủ thuật vi tính
- Những nhận xét nào không lành mạnh hoặc chèn link spam sẽ bị xóa khỏi blog.

Mã hóa Code

Đăng ký: Đăng Nhận xét (Atom)
Support : Trick Blogspot | Ghost win | Website Design | Seo Trick | Ghost win | Software Free | Site Map | Back Link | Contact Advertising | ↑ back to top
Ghi rõ nguồn thuthuatvitinhaz.blogspot.com dưới dạng liên kết khi phát hành lại thông tin từ trang này
Copyright © 2013. Thủ thuật Số - All Rights Reserved
Design by Ngân Giang
Xem tốt nhất ở độ phân giải 1024 x 768 pixel
Template by Dameva