Home » Thiết Kế Menu

Menu xổ dọc với màu tabs

23:43 |

Menu xổ dọc với màu tabs thay đổi cho blogger

Xem minh họa:          
Các bạn có thể xem ảnh minh họa:
Menu xổ dọc thay dổi màu tabs cho blogger
☼ Cách tiến hành:

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/namkna-blogspot-menu-doc-xo-ngang/jquery-pack-colourful.js' type='text/javascript'></script>
<script src='http://dl.dropbox.com/u/66256041/Menu/namkna-blogspot-menu-doc-xo-ngang/jcarousel-colourful.js' type='text/javascript'> </script>
<script src='http://dl.dropbox.com/u/66256041/Menu/namkna-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='&quot;loading&quot; + 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: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjL9z6RLXZmjdUm-Lu2vIfBhVUYSEIT_p061f0dXcmN8F2RxdzRtGUz2_mExOOxqEzbcfM9-bdzrvrFJ0wrTGLP_NRvM9faGENtF9KpZNsJBb_3hjENaq0w9OCcth81kBXxE-oYxOZLEg/s1600/menu-bgd-namkna-blogspot-com.png) 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/AVvXsEhjL9z6RLXZmjdUm-Lu2vIfBhVUYSEIT_p061f0dXcmN8F2RxdzRtGUz2_mExOOxqEzbcfM9-bdzrvrFJ0wrTGLP_NRvM9faGENtF9KpZNsJBb_3hjENaq0w9OCcth81kBXxE-oYxOZLEg/s1600/menu-bgd-namkna-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/AVvXsEhCmOlGftED4CaNydint07lCtHh8c-tYzcPoYAgM9mZcSuEj_nAzQOyIR-jfEYuGDLQQlyUymqpCljRGW-N7BxyGNb5ciWcYyMkPwj2eJ_m4k_Elz8xmMXIl988QhISSubeJXR5s7ceDUk/s1600/menu-rule-namkna-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/AVvXsEjraw8N_DSTEMtIRW6wkoNNZdLOJ9ORE-F9Awy80LPeGosnra_86Vi7pY4EPgfBg5mXQrsLifeZk-u3HV72Q_wLJDIaz3GoVkG0PgKmiJtLcDAg5tXbf-T3Mp3m1P3Jc_NMGsCnA-rsBkk/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/AVvXsEjraw8N_DSTEMtIRW6wkoNNZdLOJ9ORE-F9Awy80LPeGosnra_86Vi7pY4EPgfBg5mXQrsLifeZk-u3HV72Q_wLJDIaz3GoVkG0PgKmiJtLcDAg5tXbf-T3Mp3m1P3Jc_NMGsCnA-rsBkk/s1600/home-icon-namkna-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/AVvXsEijAGf5hJ3K9YglcSXTtVKphLzxC6BNnKbHkqXzFLVLkNXxNhvU94SwvYQxQjS-GBNPKyDZmZ6OspY72ryKeCY7YzE3SwrnOtwY22v1RDZjDqUPBuVB3VYqPFWp0M0jgjVjf_0MhzzAwJA/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/AVvXsEhOzLLinrcACwdYVL3CVMG2LDwIfExfNPfWW56eDyOa1bOm3JVBWF-JFQBCqfl_0RJhm2OtnuGYqU8Z3hNWusk9UC3HRWz_yV4o77OZwWAOpYjD0B3Si_RJ0WGm5WPtRdiJaYtBwXwC30c/s1600/entertainment-subnav-bgd-namkna-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/AVvXsEjMhPTPd7YtZsdaYwR8ni0IRGtNIE0wfbXQ84SnEbTd-bq1csZAotKIqbjCAoI9o-jkyuCBo6L1W7BVQTtku1oNx0DwFR-g0X6xyff4a8013GeCdaB6fCSTkKkMYFTDCOZPQfsQQ_iUi-M/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/AVvXsEh-e4dSFlZBRVPMOiFLOpIuobksZaPi-_PHUc5ww2vwPsml5SufHD1UjjlmPMmbG8nSnNN4WKYgyY0XN6IapWhlN56FLVur3jJy0LOVghHNqvaBSrP0GoziJ9ulG-pHLdxuMiWVulxrG-M/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/AVvXsEjjaXH6MlTQ2OtzAFuI_yHFK_HMHx3LwuuIqRVDjFnycs-y7ZaaqmEoy5UIe-EPi2ibpQwqccpX94EaVmgh7g0LhCfZRQMn9YMdtQ2zAklI1r5SPqkRBj0Qolt0fa954fWbXNPuX9EUP5c/s1600/technology-subnav-bgd-namkna-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:
  1. jquery-pack-colourful.js
  2. jcarousel-colourful.js
  3. mt-colourful.js
Read more…

Menu ngang xổ dọc xuống nhiều cấp (kiểu 1)

21:59 |

Nếu blog của bạn có quá nhiều trang riêng lẻ, các nhãn, các chủ đề thì các menu đơn giản hoặc menu drop 1 cấpkhông thể đáp ứng được do vậy vấn đề đặt ra là ta phải có một menu chứa được tất cả các chủ đề đó nhưng vẫn đảm bảo blog gọn gàng đẹp mắt.


Mẫu Menu ngang xổ dọc hôm nay mình giới thiệu sẽ giúp bạn làm cho blog của bạn trở nên khoa học hơn. với việc từ một menu chính sẽ xổ ra rất nhiều Sub menu con làm cho blog của bạn đẹp hơn và bắt mắt hơn.
    View
Hoặc xem hình minh hoạ sau:
Menu ngang xổ dọc xuống nhiều cấp

☼ Cách tiến hành:

1- Đầu tiên, bạn đăng nhập vào Blog
2- Chọn Mẫu (Template)
3- Chọn chỉnh sửa HTML (Edit HTML)
4- Dán đọn code sau vào trước thẻ: ]]></b:skin>  (Mẹo: bấm Ctrl+F để mở hộp tìm kiếm và gõ vào)
/* Drop menu by http://thegioitinhoconline.com/ */
/* ddsmoothmenu */
.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*Màu nền của thanh menu phần khi chưa có Menu con*/
width: 100%;
}
.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #414141; /*Màu nền của thanh menu khi chứa menu con*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;/*Màu chữ */
text-decoration: none;
}
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}
.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black; 
color: white;
}
.ddsmoothmenu ul li a:hover{
background: black; /*background of menu items during onmouseover (hover state)*/
color: white;
} 
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}
/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}
/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
/* ######### CSS classes applied to down and right arrow images  ######### */
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
/* ######### CSS for shadow added to sub menus  ######### */
.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}
.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
opacity: 0.8;
}
/* ddsmoothmenu-v */
.ddsmoothmenu-v ul{
margin: 0;
padding: 0;
width: 170px; /* Main Menu Item widths */
list-style-type: none;
font: bold 12px Verdana;
border-bottom: 1px solid #ccc;
}
.ddsmoothmenu-v ul li{
position: relative;
}
/* Top level menu links style */
.ddsmoothmenu-v ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}
.ddsmoothmenu-v ul li a:link, .ddsmoothmenu-v ul li a:visited, .ddsmoothmenu-v ul li a:active{
background: #414141; /*background of menu items (default state)*/
color: white;
}
.ddsmoothmenu-v ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black; 
color: white;
}
.ddsmoothmenu-v ul li a:hover{
background: black; /*background of menu items during onmouseover (hover state)*/
color: white;
}
/*Sub level menu items */
.ddsmoothmenu-v ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
font-weight: normal;
visibility: hidden;
}
/* Holly Hack for IE \*/
* html .ddsmoothmenu-v ul li { float: left; height: 1%; }
* html .ddsmoothmenu-v ul li a { height: 1%; }
/* End */
- Để đổi màu Menu bạn đổi mã màu mà mình đã tô màu đỏ (#414141) ở bên trên nha. bạn có thể lấy các mã màu Tại đây.
5.  Bạn dán đoạn code bên dưới vào trước thẻ  </head>  :Menu ngang xổ dọc xuống nhiều cấp (kiểu 1) - Update 15/03/2012
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script src='http://namkna-tratt.googlecode.com/files/ddsmoothmenu-namkna.js' type='text/javascript'></script>
<script type='text/javascript'>
 
ddsmoothmenu.init({
mainmenuid: "smoothmenu1", //menu DIV id
orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu', //class added to menu's outer DIV
//customtheme: ["#1c5a80", "#18374a"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})
 
ddsmoothmenu.init({
mainmenuid: "smoothmenu2", //Menu DIV id
orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
//customtheme: ["#804000", "#482400"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
}) 
</script>
6- Tiếp theo tìm thẻ  </header>  rồi copy tất cả các code bên dưới dán vào trên dòng lệnh đó như hình này: 
- Nếu blog của bạn không có thẻ </header> thì bạn hãy tạo một widget HTML/Javarscipt dưới header và pate code bên dưới vào 
<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="http://thegioitinhoconline.com">Home</a></li>
<li><a href="#"> Tên menu </a>
  <ul>
  <li><a href=" địa chỉ trang "> Tên trang </a></li>
  <li><a href=" địa chỉ trang "> Tên trang </a></li>
  <li><a href=" địa chỉ trang "> Tên trang </a></li>
  <li><a href=" địa chỉ trang "> Tên trang </a></li>
  <li><a href=" địa chỉ trang "> Tên trang </a></li>
  <li><a href=" địa chỉ trang "> Tên trang </a></li>
  <li><a href=" địa chỉ trang "> Tên trang </a></li>
  </ul>
</li>
<li><a href="#"> Tên menu </a>
  <ul>
  <li><a href=" địa chỉ trang "> Tên trang </a></li>
  <li><a href=" địa chỉ trang "> Tên trang </a></li>
  <li><a href=" địa chỉ trang "> Tên trang </a></li>
  <li><a href=" địa chỉ trang "> Tên trang </a></li>
  <li><a href=" địa chỉ trang "> Tên trang </a></li>
  <li><a href=" địa chỉ trang "> Tên trang </a></li>
  <li><a href=" địa chỉ trang "> Tên trang </a></li>
  </ul>
</li>
<li><a href=" địa chỉ trang "> Tên menu </a></li>
<li><a href="#"> Tên menu </a>
  <ul>
  <li><a href=" địa chỉ trang "> Tên trang </a></li>
  <li><a href="#"> Tên trang </a>
    <ul>
    <li><a href=" địa chỉ trang "> Tên trang </a></li>
    <li><a href=" địa chỉ trang "> Tên trang </a></li>
    <li><a href="#"> Tên trang </a>
  <ul>
      <li><a href=" địa chỉ trang "> Tên trang </a></li>
      <li><a href=" địa chỉ trang "> Tên trang </a></li>
      <li><a href=" địa chỉ trang "> Tên trang </a></li>
      <li><a href=" địa chỉ trang "> Tên trang </a></li>
      <li><a href=" địa chỉ trang "> Tên trang </a></li>
  </ul>
    </li>
    <li><a href=" địa chỉ trang "> Tên trang </a></li>
    </ul>
  </li>
  </ul>
</li>
<li><a href=" địa chỉ trang "> Tên trang </a></li>
</ul>
<br style="clear: left" />
</div>
Tùy chỉnh code Menu:
  • Thay http://thegioitinhoconline.com thành địa chỉ trang chính của bạn.
  • Dòng Địa chỉ trang thành liên kết đến các trang, bài viết hoặc nhãn của bạn.
  • Dòng Tên trang là tên hiển thị ở các Menu con mà khi bạn Click chuột vào tên đó thì trang của bạn xẽ load đến trang bạn gắn cho liên kết màu đoe ở trên.
7- bấm Lưu mẫu và trở lại Blog để "thưởng thức" thành quả.


- Ps: Các bạn nên Download 2 file JS và CSS về Tại đây sau đó Upload lên Host riêng để tránh bị die host.nếu chưa có host bạn hãy sử dụng host.
Read more…

Menu ngang xổ dọc xuống nhiều cấp (Kiểu 2)

21:57 |
Hình ảnh minh họa:
Cách tạo Drop Menu ngang xổ dọc xuống nhiều cấp liên tiếp cho blogspot
1- Bạn đăng nhập vào Blog 
2- Chọn Mẫu (Template)
3- Chọn chỉnh sửa HTML (Edit HTML)
4- Tìm thẻ <head> (Mẹo: bấm đồng thời cặp phím Ctrl+F để mở hộp tìm kiếm và gõ vào khung dòng lệnh <head>). Dán đoạn code bên dưới thẻ <head> vừa tìm được:.
<style type='text/css'>
html .jqueryslidemenu{height: 1%;}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/66256041/Menu/namkna-blogspot-menu-xo-doc-2/drop_menu.js' type='text/javascript'/>
Do hiện tại host goole code của mình bị ban từ nhà cung cấp do vậy các bạn chịu khóDownload 2 File JS về TẠI ĐÂY sau đó Upload lên Hosting riêng để dùng, nếu chưa có host thì bạn chịu khó xem host miễn phí.
5-  Save template lại

6- Vào Bố cục (Layout) => Tạo thêm 1 HTML/Javascript ở dưới phần header và dán code bên dưới vào:
<style>
.jqueryslidemenu{
font: bold 12px Verdana;
background:#153E7E;   /* màu nền của menu*/
width: 100%;
}
.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;z-index:30;
}
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}
.jqueryslidemenu ul li a{
display: block;
background:#15317E; /* màu nền của thư mục chính*/
color: white; /*màu text thư mục chính*/
padding: 8px 10px;
border-right: 1px solid #778;
text-decoration: none;
}
* html .jqueryslidemenu ul li a{
display: inline-block;
}
/*.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: #ff0066; //màu cchữ các menu
}*/
.jqueryslidemenu ul li a:hover{
background:#2B60DE; /* màu hiệu ứng khi rê chuột vào các link*/
color: white; /*màu text khi rê chuột*/
}
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}
.jqueryslidemenu ul li ul li ul{
top: 0;
}
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px;
padding: 5px;
margin: 0px;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{
background: #eff9ff;
color: black;
}
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}</style>

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="#">Cuộc sống</a></li>
<li><a href="#">Học tập</a></li>
<li><a href="#">Thủ thuật</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul></li>

<li><a href="#">Giải trí­</a></li>

<li><a href="#">Blogspot</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>  </li> </ul></li>

<li><a href="#">Vườn thơ</a></li>

<li><a href="#">Hình ảnh</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
</ul></li>

<li><a href="#">Download</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Sub Item 2.2</a></li>
</ul></li>

</ul><br style="clear: left" /> 
</div>.

Tùy Chỉnh code:

  • Bạn hãy dựa vào các dòng chữ màu xanh lá ở trên để chỉnh sửa màu nền và text theo ý bạn
  • Những dòng màu đỏ đậm trong code trên chính là tên của các thư mục chính, bạn hãy thay đổi cho phù hợp với blog của bạn.
  • Thay chữ  màu xanh dương là tên của những thư mục con cấp 1 của menu chính
  • Thay chữ màu xanh nhạt là tên của thư mục con cấp 2 của thư mục chính
  • Thay chữ  màu cam là thư mục con cấp 3 của thư mục chính, bạn hãy sửa tên các thư mục trên cho phù hợp với blog của bạn.
  • Thay các dấu "#" thành những đường dẫn tương ứng với tên của thư mục
  • ¤ Trong đoạn code sau:
    .jqueryslidemenu ul li ul li a{
    font: normal 13px Verdana;
    width: 160px;
    padding: 5px;
    margin: 0px;
    border-top-width: 0;
    border-bottom: 1px solid gray;
    }
    • Bạn chỉnh padding: 5px; để điều chỉnh độ rộng cuả Menu
    • Chỉnh margin: 0px; để điều chỉnh khoảng cách giữa các Sub menu. Có thể lấy các giá trị âm và dương. Nếu khoảng các giữ các Menu con lớn thì lấy giá trị âm (Ví dụ: margin: -3px;), Nếu các Menu con chồng lên nhau thì lấy giá trị dương (Ví dụ margin: 5px;), Nếu khoảng cách giữ các Menu con là sát nhau thì giữ nguyên margin: 0px; (Xem hình)
    Tạo Menu ngang xổ dọc nhiều cấp liên tiếp cho blogspot

    ¤  Ở trên mình chỉ giới thiệu cho bạn tạo 7 thư mục, bạn có thể thêm nhiều hơn hoặc bớt đi tùy ý. Nhưng bạn cần phải lưu ý khi xóa đi hoặc thêm vào thư mục nào thì phải kiểm tra lại thẻ đóng của chúng cho phù hợp.

    Cách tạo menu con: ví dụ bạn muốn tạo thư mục con cấp 2 cho thư mục "Download" tại thư mục Sub Item 2.2 thì bạn làm như bên dưới:
    <li><a href="#">Download</a>
    <ul>
    <li><a href="#">Sub Item 2.1</a></li>
    <li><a href="#">Sub Item 2.2</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.2.2</a></li>
    </ul>
    </li>
    </ul></li>
    Bạn muốn tạo cho các thư mục khác thì làm tương tự, chú ý các thẻ <li>, <ul> đóng chúng cho phù hợp.

    ¤  Nếu muốn thêm thư mục không cần có thư mục con bạn chỉ việc thêm code như bên dưới và vị trí bạn muốn. ví dụ thêm như mục "Cộng cụ" vào sau thư mục "Học tập" bạn làm như sau:
    <li><a href="#">Học tập</a></li>
    <li><a href="#">Công cụ</a></li>
    Chúc thành công!

Read more…

Menu ngang xổ dọc một cấp cho blogspot Style 2

21:50 |
Hôm nay mình sẽ chia sẻ cho các bạn cách thiết kế 1 menu xổ dọc cấp 1 cho blog(hình dưới)
Menu ngang xổ dọc một cấp cho blogspot Style 2
☼ Cách tiến hành:
   1- Đăng nhập vào Blog
   2- Vào thiết kế
   3- Chọn Chỉnh sử HTML (Không cần mở rộng tiện ích mẫu)
   4- Thêm đoạn code sau vào trước thẻ  ]]></b:skin> .
ul.topnav {
list-style: none;
padding: 0 20px;
margin: 0;
width: 100%;
float: left;
background: #222;
font-size: 1.2em;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLy6OvavsV2rV06f0HKTKtvaj9fROfylTblc_sP1_J-yjpDrLN6Kbfc_OTKeffR9zagcu68ncJSuELwHg50xhS9JF6hU0S9bh2Las3wTD5-EvrDx6itUcwnK-T3LB8FTr8zwxhocY6RrYQ/s1600/topnav_bg-namkna-ngoctra.png) repeat-x;
z-index:100}
ul.topnav li {
float: left;
margin: 0;
padding: 0 15px 0 0;
position: relative; /*--Declare X and Y axis base--*/
z-index:100}
ul.topnav li a{
padding: 10px 5px;
color: #fff;
display: block;
text-decoration: none;
float: left;
}
ul.topnav li a:hover{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZrbjTztw0OypC7ON7MKspquwqlDwCJmejEU257RLu_FSZIcNgLNpRjQvFlMLhp02C7oe_ZFB_v9GztWW8HqRXm2tOxWfY77RJo_9ufG6Jzb4XdkerLTZSVrahKgT8rQpA2zRQ55aslAWX/s1600/topnav_hover-namkna-ngoctra.png) no-repeat center top;
z-index:100}
ul.topnav li span { /*--Drop down trigger styles--*/
width: 17px;
height: 35px;
float: left;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizUMj41I_PWA3SHL7EWRTPo4lrD6iucqTLVVtRPrA4YM8HyYywsEnVAb5b5ati0pBB7TW5ddaBAh7ilIA3j8kptzJpVwV-DWNjGDkw4e0i9CqBmNa2-tpKsu4vHJaxz692Iz1FIdtYLu_N/s1600/subnav_btn-namkna-blogspot-ngoctra.png) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
list-style: none;
position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
left: 0; top: 35px;
background: #333;
margin: 0; padding: 0;
display: none;
float: left;
width: 170px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border: 1px solid #111;
}
ul.topnav li ul.subnav li{
margin: 0; padding: 0;
border-top: 1px solid #252525; /*--Create bevel effect--*/
border-bottom: 1px solid #444; /*--Create bevel effect--*/
clear: both;
width: 170px;
}
html ul.topnav li ul.subnav li a {
float: left;
width: 145px;
background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd7vtuPyYH9N2biCqEuAlDLUUMaDSIwvWZ7EA_D_gg16VGS0myru3hq0KgNl9ybQTMvoVIeV5kxa5A1h-PHqbReqcdt2WvQ1xwCT4e41IdEBq5MaczI3e4G4R6PvNbrwCvO5C8SlQKQRMY/s1600/dropdown_linkbg-namkna-blogspot-ngoctra.png) no-repeat 10px center;
padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd7vtuPyYH9N2biCqEuAlDLUUMaDSIwvWZ7EA_D_gg16VGS0myru3hq0KgNl9ybQTMvoVIeV5kxa5A1h-PHqbReqcdt2WvQ1xwCT4e41IdEBq5MaczI3e4G4R6PvNbrwCvO5C8SlQKQRMY/s1600/dropdown_linkbg-namkna-blogspot-ngoctra.png) no-repeat 10px center;
}
#header img {
margin: 20px 0 10px;
}
 5- Thêm đoạn mã sau vào trước thẻ  </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
 
$(&quot;ul.subnav&quot;).parent().append(&quot;<span/>&quot;); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav
 
$(&quot;ul.topnav li span&quot;).click(function() { //When trigger is clicked...
 
//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find(&quot;ul.subnav&quot;).slideDown(&#39;fast&#39;).show(); //Drop down the subnav on click
 
$(this).parent().hover(function() {
}, function(){
$(this).parent().find(&quot;ul.subnav&quot;).slideUp(&#39;slow&#39;); //When the mouse hovers out of the subnav, move it back up
});
 
//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass(&quot;subhover&quot;); //On hover over, add class &quot;subhover&quot;
}, function(){ //On Hover Out
$(this).removeClass(&quot;subhover&quot;); //On hover out, remove class &quot;subhover&quot;
});
 
});
</script>
 6- Lưu lại
   7- Thêm đoạn code bên dưới vào trước thẻ  </header> .

- Nếu blog của bạn không có thẻ </header> thì bạn hãy tạo một widget HTML/Javarsciptdưới header và pate code bên dưới vào 
<ul class='topnav'>
<li><a href='/'>Home</a></li>
<li>
<a href='#'>Menu 1</a>
<ul class='subnav'>
  <li><a href='#'>Menu con 1.1</a></li>
  <li><a href='#'>Menu con 1.2</a></li>
  <li><a href='#'>Menu con 1.3</a></li>
  <li><a href='#'>Menu con 1.4</a></li>
  <li><a href='#'>Menu con 1.5</a></li>
</ul>
</li>
<li>
<a href='#'>Menu 2</a>
<ul class='subnav'>
  <li><a href='#'>Menu con 2.1</a></li>
  <li><a href='#'>Menu con 2.2</a></li>
  <li><a href='#'>Menu con 2.3</a></li>
  <li><a href='#'>Menu con 2.4</a></li>
  <li><a href='#'>Menu con 2.5</a></li>
  <li><a href='#'>Menu con 2.6</a></li>
</ul>
</li>
<li><a href='#'>Menu 3</a></li>
<li><a href='#'>Menu 4</a></li>
<li><a href='#'>Menu 5</a></li>
<li><a href='#'>Menu 6</a></li>
</ul>
- Trong đó:  

  • Thay dấu # (màu đỏ)bằng liên kết tới nhãn, bài viết
  • Thay dấu # (màu cam) thành liên kết tới nhãn bài đăng thuộc Menu con.
  • Thay chữ màu xanh đậm thành tên nhãn, bài viết thuộc menu chính.
  • Thay chữ màu xanh nhạt thành tên bài viết nhãn thuộc menu con.
8. Lưu tiện ích lại. Nếu ở bước 7 không hiển thị thì bạn vào Phần tử trang Thêm 1 tiện íchHTML/Javarscrip trên phần header và thêm đoạn code ở bước 7 vao:

Read more…