banner

Trang được xây dựng với nội dung giải trí dành cho tuổi thơ, giúp các bé hiểu biết thêm về ngôn ngữ, lịch sử, sự vật đời sống... thông qua các câu truyện Cổ tích, Truyền thuyết dân gian, nghệ thuật vẽ tranh, hài hước... từng bước xây dựng nền tảng trí tuệ cho bé. Trang cũng dành một phần nội dung cho bậc làm cha mẹ như: Đặt tên cho con - Tưởng dễ mà khó, sứ khỏe, nấu ăn, bài thuốc hay... Chúc các bé cùng phụ huynh thư giãn vui khỏe! Bé nào muốn có tranh, video, vui cười... muốn đăng lên trang này, nhờ bố mẹ gửi vào hộp thư: phungban@gmail.com để duyệt nội dung trước khi được đăng nhé!
Bài ngẫu nhiên
Bé nào có tranh đẹp, video hay, vui cười,... muốn đăng trên trang này thì nhờ bố mẹ gửi vào hộp thư: phungban@gmail.com để duyệt trước khi được đăng.
20 tháng 5, 2013
Trang chủ > THỦ THUẬT > Me nu đẹp

Me nu đẹp



 Bạn có thể xem Demo của mình ở đây.


Sau đây là các bước thực hiện.

Bước 1. Đặt đoạn code dưới đây vào trước thẻ </head>
<script src="http://hacodeproject.googlecode.com/files/ddtabmenu.js" type="text/javascript"></script>
<script type="text/javascript">
//SYNTAX: ddtabmenu.definemenu("tab_menu_id", integer OR "auto")
ddtabmenu.definemenu("ddtabs", 0) //initialize Tab Menu with ID "ddtabs1" and select 1st tab by default
</script>

<style type="text/css">
.basictab{float:left;line-height:normal;/*border-bottom:1px solid #7e9fff;Add border strip to bottom of menu*/}
.basictab ul{list-style-type:none;margin:0;margin-left:5px;/*Left offset of entire tab menu relative to page*/padding:0}
.basictab li{display:inline;margin:0;padding:0}
.basictab a{float:left;background:url(http://bit.ly/hGffu7) no-repeat left top;margin:0;margin-right:5px;/*spacing between each tab*/padding:0 0 0 9px;text-decoration:none}
.basictab a span{float:left;display:block;background:url(http://img411.imageshack.us/img411/421/glowtab.gif) no-repeat right top;padding:5px 12px 3px 3px;font-weight:bold;color:#3B3B3B}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.basictab a span{float:none}
/* End IE5-Mac hack */
.basictab a:hover span{color:White}
.basictab a.current{/*Selected Tab style*/background-position:0 -82px;/*Shift background image up to start of 2nd tab image*/}
.basictab a.current span{/*Selected Tab style*/background-position:100% -82px;/*Shift background image up to start of 2nd tab image*/color:White}
.basictab a:hover{/*onMouseover style*/background-position:0% -82px;/*Shift background image up to start of 2nd tab image*/text-decoration:none}
.basictab a:hover span{/*onMouseover style*/background-position:100% -82px;/*Shift background image up to start of 2nd tab image*/}
.tabcontainer{clear:left;width:998px;/*width of 2nd level sub menus*/height:1.5em;/*height of 2nd level sub menus. Set to largest's sub menu's height to avoid jittering.*/background:#035EB7;height:30px;font-size:11px}
.tabcontent{display:none;color:White;padding-top:5px;padding-left:13px;float:left}
.tabcontent a{color:White;font-size:12px;padding:4px 7px 0 7px;text-decoration:none}

.haSearch{float:right;font-weight:bold;padding-right:5px;padding-top:4px}
.haSearchInput{-moz-background-clip:border;-moz-background-inline-policy:continuous;-moz-background-origin:padding;height:16px;padding:3px;text-align:left;width:200px;font-size:11px;background-color:White}
.haSearchTextBox{border:0 none;float:left;font-size:11px;height:14px;left:24px;width:100px}
.btn{height:15px;width:15px;border-width:0;float:right}
</style>

Trong đoạn code CSS ở trên, bạn cần điều chỉnh tham số width:998px cho phù hợp với chiều rộng phần main của trang web.

Bước 2. Thiết lập cấu trúc HTML như dưới đây và đặt trong phần thân trang web, giữa 2 thẻ <body>, </body>.

<div id="ddtabs" class="basictab">
<ul>
<li><a href='#' rel='sc1'><span>Trang chủ</span></a></li>
<li><a href='#' rel='sc2'><span>Menu I</span></a></li>
<li><a href='#' rel='sc3'><span>Menu II</span></a></li>
<li><a href='#' rel='sc4'><span>Menu III</span></a></li>
<li><a href='#' rel='sc5'><span>Menu IV</span></a></li>
<li><a href='#' rel='sc6'><span>Menu V</span></a></li>
</ul>
</div>

<div class="tabcontainer">

<div id='sc1' class='tabcontent'><a style ='color :#CCCCCC; font-size:12px;' href='/rss.xml'>RSS&nbsp;<img src='http://bit.ly/hjpshO' /></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='#'>Giới thiệu </a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href='#'>Liên hệ</a></div>

<div id='sc2' class='tabcontent'><a style ='color :#CCCCCC; font-size:12px;' href='/rss.xml'>RSS&nbsp;<img src='http://bit.ly/hjpshO' /></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='#'>Submenu I.1</a> |
<a href='#'>Submenu I.2</a> |
<a href='#'>Submenu I.3</a> |
<a href='#'>Submenu I.4</a> |
<a href='#'>Submenu I.5</a> |
<a href='#'>Submenu I.6</a> |
<a href='#'>Submenu I.7</a></div>

<div id='sc3' class='tabcontent'><a style ='color :#CCCCCC; font-size:12px;' href='/rss.xml'>RSS&nbsp;<img src='http://bit.ly/hjpshO' /></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='#'>Submenu II.1</a> |
<a href='#'>Submenu II.2</a> |
<a href='#'>Submenu II.3</a> |
<a href='#'>Submenu II.4</a> |
<a href='#'>Submenu II.5</a> |
<a href='#'>Submenu II.6</a> |
<a href='#'>Submenu II.7</a></div>

<div id='sc4' class='tabcontent'><a style ='color :#CCCCCC; font-size:12px;' href='/rss.xml'>RSS&nbsp;<img src='http://bit.ly/hjpshO' /></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='#'>Submenu III.1</a> |
<a href='#'>Submenu III.2</a> |
<a href='#'>Submenu III.3</a> |
<a href='#'>Submenu III.4</a> |
<a href='#'>Submenu III.5</a> |
<a href='#'>Submenu III.6</a> |
<a href='#'>Submenu III.7</a></div>

<div id='sc5' class='tabcontent'><a style ='color :#CCCCCC; font-size:12px;' href='/rss.xml'>RSS&nbsp;<img src='http://bit.ly/hjpshO' /></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='#'>Submenu IV.1</a> |
<a href='#'>Submenu IV.2</a> |
<a href='#'>Submenu IV.3</a> |
<a href='#'>Submenu IV.4</a> |
<a href='#'>Submenu IV.5</a> |
<a href='#'>Submenu IV.6</a> |
<a href='#'>Submenu IV.7</a></div>

<div id='sc6' class='tabcontent'><a style ='color :#CCCCCC; font-size:12px;' href='/rss.xml'>RSS&nbsp;<img src='http://bit.ly/hjpshO' /></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href='#'>Submenu V.1</a> |
<a href='#'>Submenu V.2</a> |
<a href='#'>Submenu V.3</a> |
<a href='#'>Submenu V.4</a> |
<a href='#'>Submenu V.5</a> |
<a href='#'>Submenu V.6</a> |
<a href='#'>Submenu V.7</a></div>

<div class="haSearch">
<div class="haSearchInput">
<form action='http://www.google.com/custom' id='searchform' method='get' style='display:inline;'>
<input type="hidden" name="sitesearch" value="huynh-nhat-ha.blogspot.com" />
<input class="haSearchTextBox" name='q' onblur='if (this.value == "") {this.value = "Nhập từ cần tìm...";}' onfocus='if (this.value == "Nhập từ cần tìm...") {this.value = ""}' type='text' value='Nhập từ cần tìm...'/>
<input class='btn' name='' src='http://bit.ly/hSgufo' type='image' value='Go'/>
</form>
</div>
</div>

</div>

Trong cấu trúc HTML ở trên, bạn cần đặt tên Menu, Submenu và URL (thay vào vị trí các dấu #) tương ứng.

Kiểu menu này có thể cài đặt cho Blogger dễ dàng tương tự như cách cài đặt đối với website thông thường.
05:23
Người đăng: vào lúc 05:23
  • Nhận xét bằng Blogger
  • Nhận xét bằng Facebook
Item Reviewed: Me nu đẹp Rating: 5 Reviewed By: PHÙNG BẢO KIÊN