Các bạn có thể xem ảnh minh họa:
1- Đăng nhập (login) vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sử HTML (Edit HTML) => Tiếp tục (Proceed) => Xem vdeo:
4- Thêm đoạn code bên dưới vào sau thẻ <head>.
<script src='http://dl.dropbox.com/u/66256041/Menu/viettin365-blogspot-menu-doc-xo-ngang/jquery-pack-colourful.js' type='text/javascript'></script>
<script src='http://dl.dropbox.com/u/66256041/Menu/viettin365-blogspot-menu-doc-xo-ngang/jcarousel-colourful.js' type='text/javascript'> </script>
<script src='http://dl.dropbox.com/u/66256041/Menu/viettin365-blogspot-menu-doc-xo-ngang/mt-colourful.js' type='text/javascript'></script> 5- Bây giờ tìm thuộc tính quy định phần thân blog (body). Bạn có thể tìm kiếm nó với từ khóa làbody { hoặc body{ . Nó thường có dạng như sau:
body {
---
---
} - Và thêm 2 thuộc tính màu xanh vào như bên dưới: body {
margin:0px;
padding:0px;
---
---
} 6- Tìm kiếm đoạn code sau:<body>- Hoặc (với các mẫu simple của blogger thì như sau):<body expr:class='"loading" + data:blog.mobileClass'>=> Thêm vào ngay sau đoạn mã vừa tìm được<!--START OF COLOURFUL TABS BY MBT-->
<style>
/*------- Colourful Tabs Menu by www.MyBloggerTricks.com -------*/
.MBT-Nav-container {
border: 1px solid #cfcfcf;
background: #fff url() bottom left repeat-x;
position: relative;
margin: 0; padding: 0;
border: 1px solid #cfcfcf;
}
ul#nav {
border-left: 1px solid #cfcfcf;
border-right: 0px solid #cfcfcf;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAzQlT__m-VpeDsG4sE2E_fCuWrNLIEsCapj7WU5HCYe1awQBs5yg292lqxWpZpDE_F7CHFwENl0Dc04ZRVqa295QM4RdtpT7IXadq0wLMssESUtajbhkGT5yKB0mpMhyUdK88bQ_1tt8/s1600/menu-bgd-quangvietmkt-blogspot-com.png) bottom left repeat-x;
position: relative;
font-size: 12px; font-family: helvetica, arial, sans-serif;
list-style: none; margin: 0 auto; padding: 0;
width: 960px;
}
#nav ul {
margin: 0;
}
:focus {
outline: 0;
}
*html ul#nav { clear: both; height: 1%; }
ul#nav li a {
display: block;
float: left;
text-transform: uppercase;
font-weight: bold;
line-height: 33px;
padding: 0 13px 0 10px;
color: #333;
text-decoration: none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqfhWiuIdaBOV9XRwPab84WRbAcDrKqbXaZ0E4sIZmO6-ujBY96TuXh_mjzsOWZgjZqTmNJ3tVZoFdTd48QwveHhB6LZNnaeKg5eNeNQpe6jIYhRp-6ISHecXrxtG2jhjCIsNvGYv8wgw/s1600/menu-rule-quangvietmkt-blogspot-com.png) right 2px no-repeat;
}
*html ul#nav li.top-link { float: left; margin: 0px 0 -13px 0; padding-top: 2px; }
*:first-child+html ul#nav li.top-link { float: left; margin: 0px 0 -13px 0; padding-top: 2px; }
ul#nav li a:hover, ul#nav li a.open { color: #fff; }
ul#nav li#mbt a:hover, ul#nav li#mbt a.open { background: #0f1f37; }
ul#nav li#link-entertainment a:hover, ul#nav li#link-entertainment a.open { background: #b70943; }
ul#nav li#link-news a:hover, ul#nav li#link-news a.open { background: #cf3c02; }
ul#nav li#link-life a:hover, ul#nav li#link-life a.open { background: #724375; }
ul#nav li#link-technology a:hover, ul#nav li#link-technology a.open { background: #02b0cf; }
ul#nav li#link-top10 a:hover, ul#nav li#link-top10 a.open { background: #353533; }
ul#nav li#links-1 a:hover, ul#nav li#links-1 a.open { background: #b70943; }
ul#nav li#links-2 a:hover, ul#nav li#links-2 a.open { background: #289728; }
ul#nav li#links-3 a:hover, ul#nav li#links-3 a.open { background: #666666; }
ul#nav li#links-4 a:hover, ul#nav li#links-4 a.open { background: #b70943; }
ul#nav li#link-home a {
padding: 0 33px 0 10px;
text-indent: -9999px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5MqVqX4DY-fo7fiHvaz1uBeOe98WGDYh8mLNcR6t4XWythRptDPv7wmAA3uY9ZwI4hAtDDCi7hUPIKhCpS3CQKQ2Bg6FdJy1FmzURZHUsyW7e2D1bSI5NwTmc18eWd0XUe1MK-IJ8ER0/s1600/home-icon-namkna-blogspot-com.png) right 0px no-repeat;
}
*html ul#nav li#link-home a { padding: 0; width: 43px; }
ul#nav li#link-home a:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5MqVqX4DY-fo7fiHvaz1uBeOe98WGDYh8mLNcR6t4XWythRptDPv7wmAA3uY9ZwI4hAtDDCi7hUPIKhCpS3CQKQ2Bg6FdJy1FmzURZHUsyW7e2D1bSI5NwTmc18eWd0XUe1MK-IJ8ER0/s1600/home-icon-quangvietmkt-blogspot-com.png) right -33px no-repeat; }
/* Sub-Vertical Navigation */
ul.sub-nav {
position: absolute;
top: 33px;
left: -1px;
overflow: hidden;
width: 960px;
display: none;
z-index: 999;
list-style: none;
padding-left:0px;
}
ul#nav li#mbt ul.sub-nav { background: #6f7987 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuM4ZXq-n1snLSlhplYQSsXjHMQ1ljtuoy-OV1yP7iHxponXcXkDwEPAOvCSg685aQrugJluSIsIGZqquO1MiNgekmmFkgeh4l5WT-erENUTGbBRcu3z1yhCCDSXgzICs4ilRkRPnjlHA/s1600/business-subnav-bgd-namkna-blogspot-com.png) top left repeat-x; }
ul#nav li#link-entertainment ul.sub-nav { background: #d46b8e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnq-twYWED39NmQYiit5IH2NY-cu4NjrRxdFrp5hhiTj8dGq1YKgURvpxcAB2kFBmbPrSirmdwGm90zcu9nFhGJgXJ5t5ZGecBPajzDkNSXQvR8AcA5akwQnD0k5JTjSSqpafLUDRuJ3w/s1600/entertainment-subnav-bgd-quangvietmkt-blogspot-com.png) top left repeat-x; }
ul#nav li#link-news ul.sub-nav { background: #e28a67 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzH2ivPDST2imN4PHLhhzsFnt28kiStPgD4UcdrbdSwgF0XVJj5mn_GtYxqMWUJonlp2vFzFYhM-8GHgUOvlZg3YVMJF_c14Kr4rLFSDlacf_T1JuPAbTR5B9uCAr07GMHIgBjA2qLG2U/s1600/news-subnav-bgd-namkna-blogspot-com.png) top left repeat-x; }
ul#nav li#link-life ul.sub-nav { background: #aa8eac url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi03La9q36k_lu8yqp2c3tnXp8p1hTe_850kUQ7_QYlLfwNXUDELE6zCxlY9QJz_3jRQX9pk9iqzpk7WjknAKkikkaaN4nVHnZgioWXXmN1U94-iXbJF9GNyIrHBpPkyek1RzpheNNwcQQ/s1600/life-subnav-bgd-namkna-blogspot-com.png) top left repeat-x; }
ul#nav li#link-technology ul.sub-nav { background: #67d0e2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjfXywaBWXce1POUCdoGNkTD8_myg2VlRf0ruxrNSC7RaDCgVrC2IJf6a9T9zzXHoCC6CUdJvpNl-ICxtlsRnBUo2z4Q7lkIE9O5o9Py1xf2xrtKuHm_WC38YRoEih-wdT1T_3aGYoA44/s1600/technology-subnav-bgd-quangvietmkt-blogspot-com.png) top left repeat-x; }
ul#nav li ul.sub-nav li { float: left; }
ul#nav li ul.sub-nav li a {
float: none;
background: none;
font-size: 11px;
text-transform: none;
color: #fff;
line-height: 25px;
}
ul#nav li#mbt ul.sub-nav li a:hover, ul#nav li#mbt ul.sub-nav li a.active-cat{ background: #0f1f37 !important; }
ul#nav li#link-entertainment ul.sub-nav li a:hover, ul#nav li#link-entertainment ul.sub-nav li a.active-cat { background: #b70943 !important; }
ul#nav li#link-news ul.sub-nav li a:hover, ul#nav li#link-news ul.sub-nav li a.active-cat { background: #cf3c02 !important; }
ul#nav li#link-life ul.sub-nav li a:hover, ul#nav li#link-life ul.sub-nav li a.active-cat { background: #724375 !important; }
ul#nav li#link-technology ul.sub-nav li a:hover, ul#nav li#link-technology ul.sub-nav li a.active-cat { background: #02b0cf !important; }
</style>
<div class='MBT-Nav-container'>
<ul id='nav'>
<li class='non-vertical-link top-link' id='link-home'><a class='open' href='#'>Home</a></li>
<li class='top-link' id='mbt'><a href='#'>TAB 1</a>
<ul class='sub-nav'>
<li><a href='#'>SUB TAB 1.1</a></li>
<li><a href='#'>SUB TAB 1.2</a></li>
<li><a href='#'>SUB TAB 1.3</a></li>
<li><a href='#'>SUB TAB 1.4</a></li>
</ul>
</li>
<li class='top-link' id='link-entertainment'><a href='#'>TAB 2</a>
<ul class='sub-nav' style='display: none;'>
<li><a href='#'>SUB TAB 2.1</a></li>
<li><a href='#'>SUB TAB 2.2</a></li>
<li><a href='#'>SUB TAB 2.3</a></li>
<li><a href='#'>SUB TAB 2.4</a></li>
<li><a href='#'>SUB TAB 2.5</a></li>
</ul>
</li>
<li class='top-link' id='link-news'><a href='#'>TAB 3</a>
<ul class='sub-nav' style='display: none;'>
<li><a href='#'>SUB TAB 3.1</a></li>
<li><a href='#'>SUB TAB 3.2</a></li>
<li><a href='#'>SUB TAB 3.3</a></li>
<li><a href='#'>SUB TAB 3.4</a></li>
</ul>
</li>
<li class='top-link' id='link-life'><a href='#'>TAB 4</a>
<ul class='sub-nav' style='display: none;'>
<li><a href='#'>SUB TAB 4.1</a></li>
<li><a href='#'>SUB TAB 4.2</a></li>
<li><a href='#'>SUB TAB 4.3</a></li>
<li><a href='#'>SUB TAB 4.4</a></li>
<li><a href='#'>SUB TAB 4.5</a></li>
<li><a href='#'>SUB TAB 4.6</a></li>
<li><a href='#'>SUB TAB 4.7</a></li>
</ul>
</li>
<li class='top-link' id='link-technology'><a href='#'>TAB 5</a>
<ul class='sub-nav' style='display: none;'>
<li><a href='#'>SUB TAB 5.1</a></li>
<li><a href='#'>SUB TAB 5.2</a></li>
<li><a href='#'>SUB TAB 5.3</a></li>
<li><a href='#'>SUB TAB 5.4</a></li>
<li><a href='#'>SUB TAB 5.5</a></li>
</ul>
</li>
<li class='non-vertical-link top-link' id='link-top10'><a href='#'>TAB 6</a></li>
<!-- <li class='non-vertical-link top-link' id='links-1'><a href='#'>TAB 7</a></li> -->
<!-- <li class='non-vertical-link top-link' id='links-2'><a href='#'>TAB 8</a></li> -->
<!-- <li class='non-vertical-link top-link' id='links-3'><a href='#'>TAB 9</a></li> -->
<!-- <li class='non-vertical-link top-link' id='links-4'><a href='#'>TAB 10</a></li> -->
<li style='clear: both;'/>
</ul>
</div>
<!--END OF COLOURFUL TABS BY MBT-->7- Lưu mẫu lại. Và quay lại xem thành quả nha.Tuỳ chỉnh Code: Các mã được viết bằng một cách gọn gàng để cho bất kỳ ai có thể dễ dàng thay đổi, thêm hoặc xóa các tab.
- Thay thế # thành liên kết (URL) của trang
- Thay thế các tên TAB màu xanh thành tiêu đề trang
- Để thay đổi độ rộng của menu chỉnh sửa width: 960px (có 2 đoạn width: 960px)
- Để tạo ra một tab mới trong bất kỳ sub menu hãy dán mã bên dưới ở trên thẻ đóng </ ul>
<li><a href='#'>SUB TAB</a></li>- Tab 7 đến Tab 10 bị vô hiệu hóa. Nếu bạn muốn kích hoạt bất kỳ một trong số đó thì chỉ cần loại bỏ các thẻ <!-- và --> ở trước và sau nó
Để sử dụng lâu dài bạn hãy Download 3 file javarscip về và Upload lên host Google coderiêng để dùng lâu dài nha. Tải về tại đây:
Không có nhận xét nào:
Đăng nhận xét