1. Vào template chèn đoạn css sau phía trên thẻ
]]></b:skin>
#topmenu-outer{z-index:30; height:20px;width:100%;background:#545454; color:#fff; text-shadow:1px 1px 1px #000; top:0px;right:0px; position:fixed;padding:5px;}
#topmenu{width:990px;margin:auto;}
#topmenu1{width:790px;float:left;}
#topmenu1 ul{margin:0; padding:0}
#menu h2 {display:none}
.menu,.menu h3,.menu a,.menu ul,.menu li {margin: 0;padding: 0;border: 0;outline: 0;vertical-align: baseline;}
:focus { outline: 0 }
.menu ul,.menu li {font-size:16px; text-align:left; }
.menu h3 {margin-top:7px;margin-bottom:14px;padding-bottom:7px; text-shadow: 1px 1px 1px #FFFFFF;border-bottom:1px solid #888888; color:#000}
.menu { list-style:none;margin:0 auto;}
.menu li {float:left;text-align:center; position:relative;padding:0 10px 4px 10px;border:none;}
.menu li:hover {z-index:2;background:#F4F4F4;}
.menu li.drop0:hover {background:#F4F4F4}
.menu li a {color:#fff; outline:0;text-decoration:none;display:block;text-shadow: 1px 1px 1px #000; }
.menu li:hover a { color:#161616; text-shadow: none; }
.drop1,.drop2 {margin:4px auto; position:absolute;background:#F4F4F4;border:1px solid #aaaaaa;border-top:none;padding:10px 5px; }
.drop1,.drop2 {left:-999em; text-align:left; }
.drop2 {width: 320px;}
.menu li:hover .drop1,.menu li:hover .drop2{left:-1px;top:auto}
.col{display:inline;float: left;position: relative;margin: 0 5px;width:150px;}
.menu li ul { list-style:none; padding:0; margin:0 0 12px 0; }
.menu li ul li {font-size:12px; line-height:24px;position:relative;text-shadow: 1px 1px 1px #ffffff;padding:0;margin:0; float:none;text-align:left;width:150px; }
.menu li ul li:hover {background:none; border:none; padding:0; margin:0; }
#topmenu2{width:200px;float:left;}
.search-text{width:200px; border:none;margin:auto}
2. Tiếp tục chèn đoạn code sau vào bên dưới thẻ mở
<body...> (dấu
... có thể khác nhau hoặc không có tùy blog)
<div id='topmenu-outer'>
<div id='topmenu'>
<div id='topmenu1'>
<b:section class='top-menu' id='top-menu' showaddelement='no'>
<b:widget id='HTML31' locked='true' title='' type='HTML'/>
</b:section>
</div>
<div id='topmenu2'><form action='http://www.google.com.vn/search' method='get' target='_blank'>
<input class='search-text' id='search-text' name='q' onblur='if (this.value == "") {this.value = "Tìm kiếm thủ thuật ...";}' onfocus='if (this.value == "Tìm kiếm thủ thuật ...") {this.value = ""}' tabindex='7' type='text' value='Tìm kiếm thủ thuật ...'/>
<input checked='checked' name='sitesearch' type='hidden' value='quangvinh936.blogspot.com'/>
</form></div>
<div style='clear:both'/>
</div>
</div>
3. Save template lại rồi về mục Phần tử trang bạn sẽ thấy xuất hiện một tiện ích HTML mới ở đầu blog. Bạn chèn đoạn code sau vào tiện ích HTML trên:
<ul class="menu">
<li class="drop0"><a href="http://quangvinh936.blogspot.com">Trang Chủ</a></li>
<li class="drop0"><a href="http://quangvinh936.blogspot.com/p/sitemap.html">Sơ Đồ Blog</a></li>
<li class="drop0"><a href="http://quangvinh936.blogspot.com/p/voquocan.html">About Me</a></li>
<li><a href="http://quangvinh936.blogspot.com/p/sitemap.html" class="drop">Danh sách Label</a>
<div class="drop1">
<ul>
<li><a href="http://quangvinh936.blogspot.com/search/label/Thủ thuật blog?max-results=5">Tất cả thủ thuật</a></li>
<li><a href="http://quangvinh936.blogspot.com/search/label/Blogger?max-results=5">Blogger</a></li>
<li><a href="http://quangvinh936.blogspot.com/search/label/Comments?max-results=5">Comments</a></li>
<li><a href="http://quangvinh936.blogspot.com/search/label/Emoticons?max-results=5">Emoticons (Icons)</a></li>
<li><a href="http://quangvinh936.blogspot.com/search/label/Bookmark?max-results=5">Bookmark</a></li>
</ul>
</div></li>
<li><a href="http://quangvinh936.blogspot.com/p/sitemap.html" class="drop">Bài Viết Xem Nhiều</a>
<div class="drop2">
<div class="col">
<h3>Menu</h3>
<ul>
<li><a href="http://quangvinh936.blogspot.com/2012/03/top-menu.html">Float Menu</a></li>
<li><a href="http://quangvinh936.blogspot.com/2012/02/drop-menu.html">Drop Menu 1</a></li>
<li><a href="http://quangvinh936.blogspot.com/2012/03/top-menu.html">Drop Menu 2</a></li>
</ul>
</div>
<div class="col">
<h3>Template</h3>
<ul>
<li><a href="http://quangvinh936.blogspot.com/2012/02/share-template-01.html">Template 01</a></li>
<li><a href="http://quangvinh936.blogspot.com/2012/03/template.html">HTML</a></li>
<li><a href="http://quangvinh936.blogspot.com/2012/03/css01.html">CSS</a></li>
</ul>
</div>
<div class="col">
<h3>Comments</h3>
<ul>
<li><a href="http://quangvinh936.blogspot.com/2012/02/threaded-comment.html">Comments 6 cấp</a></li>
<li><a href="http://quangvinh936.blogspot.com/2012/01/mot-giao-dien-khac-cho-threaded.html">Comments 2 cấp</a></li>
<li><a href="http://quangvinh936.blogspot.com/2011/12/tao-khung-quick-comments-cho-blog-cbox.html">Quick Comments</a></li>
</ul>
</div>
<div class="col">
<h3>Blogger</h3>
<ul>
<li><a href="http://quangvinh936.blogspot.com/2012/02/link.html">Liên kết blog</a></li>
<li><a href="http://quangvinh936.blogspot.com/2011/01/ask.html">Hỏi - Đáp</a></li>
<li><a href="http://quangvinh936.blogspot.com/2011/12/nhung-ieu-can-luu-y-khi-design-blog.html">Bí Quyết</a></li>
</ul>
</div></div></li></ul>
Save lại là xem như hoàn thành.
4. Thay đổi code:
Đoạn code ở bước 1 là css. Bạn tìm hiểu bài viết này nếu muốn thay đổi về css.
Đoạn code ở bước 2 thay quangvinh936.blogspot.com thành địa chỉ blog của bạn.
Đoạn code ở bước 3 Trong đoạn code này chú ý 1 tí bạn sẽ thấy có 3 class lớn.
» drop0: là không drop menu.
» drop1: là menu drop 1 cột.
» drop2: là menu drop 2 cột
Bạn thay đổi nội dung cho phù hợp là được.
Nếu có vấn đề gì bạn để lại comments bên dưới mình sẽ hướng dẫn trong thời gian sớm nhất có thể. Chúc bạn thành công!
Comments[ 0 ]
Post a Comment