Hôm nay:

Random Template

Thông báo:

Kính chào quý khách. Hoan nghênh quý khách đã ghé thăm chúng tôi tại: tv-part. Mọi góp ý xin liên hệ: 0985548168. Email: anhtuan_dtgv@yahoo.com

Tìm kiếm nâng cao:

- Tôi làm việc trong lĩnh vực tài chính nên thường xuyên đọc tin tức trên trang Stockbiz.vn. Và tôi lại thích webdesign nên từ lâu đã nghía đến kiểu menu đẹp tại trang này. Vì thế hy vọng một ngày nào đó sẽ giới thiệu cho bạn đọc cách tạo kiểu menu như vậy. Khi tìm hiểu ngọn nguồn mới biết đó là DD Tab Menu do Dynamic Drive phát triển. Bạn có thể xem trang Demo của Dynamic Drive ở đây.
Qua quá trình nguyên cứu tôi đã chỉnh code từ Menu của trang Stockbiz.vn cho gọn gàng hơn, chuyên nghiệp hơn và đặc biệt là dễ cài đặt đối với người chưa biết nhiều về webdesign. Bạn có thể xem Demo của tôi ở đâ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. 
THEO: http://www.bloggerism.tK

« Trang trước Trang chủ Trang sau »

Test 3

V/v: thay đổi số tài khoản ngân hàng và hình thức thanh toán. Hiện nay chúng tôi nhận thanh toán qua Paypal đối với khách hàng nước ngoài. Khách hàng trong nước thanh toán qua tài khoản Agribank. Chúng tôi trân trọng thông báo.

Chính sách bán hàng

Chúng tôi cam kết bán giá hợp lý, đảm bảo chất lượng. Các trường hợp đặc biệt: main, board hiếm quý khách có nhu cầu mua phải đặt cọc trước để chúng tôi đặt hàng về. Ngoài ra, nếu quý khách yêu cầu sửa chữa tv và các thiết bị điện tử tại nhà chúng tôi có đội ngũ kỹ thuật lành nghề, giàu kinh nghiệm phục vụ sửa chữa các thiết bị điện tử tại nhà.
Các chính sách khác chúng tôi đang cập nhật ...

Liên hệ:

Tên

Email *

Thông báo *

Góp ý

Quý khách góp ý xin liên hệ:
Mr Tuấn: 0985548168
Yahoo: anhtuan_dtgv
Email: anhtuan_dtgv@yahoo.com