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

» 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://blogh3b.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/AVvXsEirIktmyIMzpiOSAPJiClTfPGOb_fgD7aWWhz-hnJYttiTCzcXlpDMt5TnVaBqSYQ1cWMEXgojNLzSmVlHNrpTLrUr1SrjKtbXm4Qz3g8m5mVGpJxmZBZZjqEcehmf-3TaUe7_oOcMmHPeq/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/AVvXsEiNSQox-EoBu7AaQVTTQwWe_DCBjJhq_cw1phyvEac-PyYFnkFZfmCOBDeh-BX8SK68NyHVRPfFpCYW0PsMNNbBQKfKX6bPMu39FprlS8V-FmMZrfJLbmSgPOTsFbu-WR7_OS1ysxYuuuxu/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/AVvXsEi7wEtzc2626Lj5yQ6JBnPooV7Wf8QsKXP04mr-USe6WHx1kMgMjnkzxWdbk3YLNaGB-2ltqQ4FOm4Ynz1qJDL7YSBiaI0vZ83qno85ungPDVjp4QjAdfr_Kl6njz4aHdvpOsWs60TBpS-F/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/AVvXsEhZBsPoaKULgmV0pVfNgj9uS6yLl4jBrYrDhniJS7zPkk9WlMM_qZ0BB8vOaXyxafazVfidIuRmQ-C-DEWgV4uFp9P2Hf-zGUwiWiJTyjSnekgirdpbFCrdn3RygFAUu9BzbTpo7PYtBXjj/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/AVvXsEirIktmyIMzpiOSAPJiClTfPGOb_fgD7aWWhz-hnJYttiTCzcXlpDMt5TnVaBqSYQ1cWMEXgojNLzSmVlHNrpTLrUr1SrjKtbXm4Qz3g8m5mVGpJxmZBZZjqEcehmf-3TaUe7_oOcMmHPeq/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://blogh3b.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/AVvXsEihRI2ClHaHyi1iiwZ_UypXv9oUreAYnOsnTky-Re-zL0hMIOdDMrgaAdtzAY7hdBkoK3zWEIqGBCmSxTv_uEq6w1vyhVkupArPkv08XVaBPx5vn8Hkz9W9V_PyoH0Ttj-ZSruggIFBzgbG/s1600/icon_home-namkna-2.png' style='margin-top:-3px'/></a>
<div class='sub ms1'>
<div class='cont cs11'>
<a href='/2011/04/tac-gia-linh-dung.html'>Tác giả</a>
<a href='/p/thong-bao-cua-linhdungvncom.html'>Thông báo</a>
<a href='/2012/09/ra-mat-linhdungvncom-blog-ve-mmo.html'>BlogH3b.blogspot.COM</a>
<a href='/search/label/Tin%20t%E1%BB%A9c?max-results=10'>Tin tức MMO</a>
<a href='/p/lien-he.html'>Thông tin liên hệ</a>
<a href='/p/chinh-sach-comment.html'>Chính sách comments</a>
<a href='/p/quy-inh-su-dung.html'>Đ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='/2012/09/dang-ky-va-verify-payza-alertpay-cu.html'>Đăng ký và verify</a>
<a href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqNVC6LAH8L_r6GjeBPuTa533jrWdVsKz72qcBiLHVqDiK6073zpxJrSy_6i-W6Hdw5QPtedO29Swrsb0TP3FNdvxheZg8v8beN3O97pmvMBs6i4_NtU0U9jq2D766kVPLPwimHyES33g/s1600/fee-PZ-VN.png' 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='/2012/09/huong-dan-dang-ky-tai-khoan-liberty-reserve.html'>Hướng dẫn đăng ký</a>
<a href='http://3.bp.blogspot.com/-WZ_S_9xLVXk/T5rT0EauLeI/AAAAAAAAEC4/ojGYqcTLpKM/s1600/fee%2Blr.png' rel='prettyphoto'>Một số loại phí</a>
</div>
<div class='cont cs212'>
<c3>Paypal</c3>
<a href='/2011/10/dang-ky-va-verified-tai-khoan-paypal.html'>Hướng dẫn đăng ký</a>
<a href='/2012/10/mot-so-luu-y-khi-su-dung-paypal.html'>Một số lưu ý</a>
</div>
<div class='cont cs213'>
<c4>WebMoney</c4>
<a href='/2012/09/huong-dan-tao-tai-khoan-dien-tu-webmoney.html'>Hướng dẫn đăng ký</a>
</div>
<div class='cont cs214'>
<c5>Egopay</c5>
<a href='/2012/10/huong-dan-dang-ky-tai-khoan-egopay.html'>Hướng dẫn đăng ký</a>
</div>
<div class='cont cs215'>
<c6>Perfect Money</c6>
<a href='/2012/10/huong-dan-dang-ky-tai-khoan-perfect-money.html'>Hướng dẫn đăng ký</a>
<a href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjscMaPG9S91AKTRK6WQLm5MAUFDOUpQin00bMWS3rR_Uqqnl-A1AXbh_0lEHDn5hl3kjcizjt2_InZS5Q-3yGrXp01a5Bqyd1eT9RPdhMgpAVXnp89YqbXdbLB52h9w7go1UJbUSYGWFI/s1600/fee-pm.png' rel='prettyphoto'>Một số loại phí</a>
</div>
<div class='cont cs216'>
<c7>Thông tin</c7>
<a href='/2012/09/zip-code-postal-code-cac-tinh-thanh.html'>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='http://blog.linhdungvn.com/2013/03/huong-dan-kiem-tien-voi-rut-gon-link-adfly.html'>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/C%C4%83n%20b%E1%BA%A3n?max-results=10'>Giới thiệu căn bản</a>
<a href='/search/label/Thủ thuật?max-results=10'>Thủ thuật</a>
<a href='/search/label/Thi%E1%BA%BFt%20k%E1%BA%BF?max-results=10'>Hướng dẫn thiết kế</a>
<a href='/search/label/Thi%E1%BA%BFt%20k%E1%BA%BF?max-results=10'>Kỹ năng</a>
<a href='/search/label/SEO?max-results=10'>SEO</a>
</div>
<div class='cont cs411'>
<a href='/search/label/Hosting?max-results=10'>Hosting</a>
<a href='/search/label/CSS?max-results=10'>CSS</a>
<a href='/search/label/HTML?max-results=10'>HTML</a>
<a href='/search/label/Mã giảm giá?max-results=10'>Mã giảm giá</a>
<a href='http://software.linhdungvn.com/search/label/Templates?max-results=10'>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='/2012/12/roboform-cong-cu-dien-form-nhanh-chong.html'>Roboform</a>
</div>
<div class='cont cs511'>
<c11>Blogspot</c11>
<a href='/p/code-converter.html'>Code Converter</a>
<a href='/p/blog-page.html'>Hex Color Codes</a>
</div>
</div></li>
<li class='sitemap'><a href='/p/sitemap_4.html' title='Sơ đồ trang web'></a></li>
<div id='search'>
<form action='/search' class='search' id='searchform' method='get'>
<div>
<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'/>
</div>
</form>
</div>
</ul>
</div>
</div>
<div class='clear'>
4. Lưu mẫu lại và xem kết quả nha.
Labels: ,

0 comments:

Đang Online

Portfolio Themes
© Copyright 2013 Nhân Văn, All rights reserved Gia sư nhân văn quận 2