▀▄▀▄▀▄▀▄▀▄▀▄ Các bài đăng mới ▀▄▀▄▀▄▀▄▀▄▀
    Kenh sctv1 Kenh sctv1 Kenh sctv1
    Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1 Kenh sctv1
    Kenh sctv1 Kenh sctv5 Kenh HTV2 Kenh SCTV16




Xem truyền hình trực tuyến (Click here)

MENU NGANG CÓ LOGO PHÍA TRƯỚC

Cũng giống các menu ngang khác, các tab ở menu này sẽ đổi màu khi bạn rê chuột và sẽ dẫn bạn đến một trang Web/blog nào đó khi bạn bấm vào "nó".
Đặc biệt hơn, trước mỗi tab bạn có thể gắn Logo bất kỳ để minh hoạ cho tiêu đề mà mình gắn trên menu.
Bạn bấm vào "Xem thử" phía dưới để thấy rõ hơn hiệu ứng của menu này.




Xem thử

Thủ thuật này cũng khá đơn giản, bạn chỉ việc đăng nhập vào Blog > Chọn thiết kế > Thêm tiện ích HTML (đối với các bạn đang sử dụng giao diện blog mới thì bạn đăng nhập vào Blog > Chọn Bố cục > Thêm tiện ích HTML) rồi dán code phía dưới vào.


<style type="text/css">

.shadowblockmenu{
font-weight: bold;
font-size: 85%;
width: 100%;
}

.shadowblockmenu ul{
border: 1px solid #BBB;
border-width: 3px 0; /* Show only top and bottom border for main menu container */
padding: 0;
margin: 0;
overflow: hidden;
}

.shadowblockmenu ul li{
display: inline;
margin:0;
padding:0;
}

.shadowblockmenu ul li a{
display:block;
float:left;
text-transform: uppercase;
color: #494949;
padding: 8px 15px 8px 9px;
margin: 0;
text-decoration: none;
border-right: 1px solid #BBB; /*right border between menu items*/
-moz-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4); /* Add inset shadow to each menu item. First 3 values in (114,114,114, 0.4) specifies rgb values, last specifies opacity */
-webkit-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4);
box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4);
text-shadow: 0 -1px 1px #cfcfcf; /* CSS text shadow to give text some depth */
-moz-transition: all 0.2s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}


.shadowblockmenu li:nth-of-type(1) a{ /* Extra style for first menu link */
border-left: 1px solid #BBB; /* add border to left side of first menu link */
padding-left:25px;
background: url(Link ảnh của Logo) 1px center no-repeat; /* Link ảnh của logo */
}

.shadowblockmenu li:nth-of-type(2) a{ /* Extra style for 2nd menu link */
padding-left:25px;
background: url(Link ảnh của Logo) 1px center no-repeat; /* Link ảnh của logo */
}

.shadowblockmenu li:nth-of-type(3) a{ /* Extra style for 2nd menu link */
padding-left:25px;
background: url(Link ảnh của Logo) 1px center no-repeat; /* Link ảnh của logo */
}

.shadowblockmenu li:nth-of-type(4) a{ /* Extra style for 2nd menu link */
padding-left:25px;
background: url(Link ảnh của Logo) 1px center no-repeat; /* Link ảnh của logo */
}

.shadowblockmenu li:nth-of-type(5) a{ /* Extra style for 2nd menu link */
padding-left:25px;
background: url(Link ảnh của Logo) 1px center no-repeat; /* Link ảnh của logo */
}

.shadowblockmenu li:nth-of-type(6) a{ /* Extra style for 2nd menu link */
padding-left:25px;
background: url(Link ảnh của Logo) 1px center no-repeat; /* Link ảnh của logo */
}

.shadowblockmenu ul li a:hover{
color: black;
-moz-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6); /* Add 2 inset shadows to each menu item  */
-webkit-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
}

</style>
<div class="shadowblockmenu">
<ul>
<li><a href="địa chỉ liên kết">Tên hiển thị số 1 </a></li>
<li><a href="địa chỉ liên kết">Tên hiển thị số 2</a></li>
<li><a href="địa chỉ liên kết">Tên hiển thị số 3</a></li>
<li><a href="địa chỉ liên kết">Tên hiển thị số 4</a></li>
<li><a href="địa chỉ liên kết">Tên hiển thị số 5</a></li>
<li><a href="địa chỉ liên kết">Tên hiển thị số 6</a></li>


</ul>
</div>
 Bây giờ, bạn thay đổi các dòng lệnh màu đỏmàu xanh (link màu xanh là link ảnh của Logo với kích thước tối đa là 24x24) để phù hợp với blog mình.

Mở rộng thêm:
Ở đoạn code phía trên có tất cả là 6 tab, vì vậy nếu bạn muốn nhiều hơn thì copy dòng lệnh này:

.shadowblockmenu li:nth-of-type(6) a{ /* Extra style for 2nd menu link */
padding-left:25px;
background: url(Link ảnh của Logo) 1px center no-repeat; /* Link ảnh của logo */
}


Dán vào phía dưới và thay đổi số thứ tự nằm trong ngoặc theo số tiến dần.
Và copy thêm dòng lệnh này:

<li><a href="địa chỉ liên kết">Tên hiển thị số </a></li>


Dán trên dòng lệnh </ul> cuối cùng.
Ví dụ: Ở đoạn code trên hiện có 6 tab, tôi muốn thêm 2 tab nữa là 8 tab, thì code sẽ giống như thế này:

<style type="text/css">

.shadowblockmenu{
font-weight: bold;
font-size: 85%;
width: 100%;
}........
 .shadowblockmenu li:nth-of-type(6) a{ /* Extra style for 2nd menu link */
padding-left:25px;
background: url(Link ảnh của Logo) 1px center no-repeat; /* Link ảnh của logo */
}

.shadowblockmenu li:nth-of-type(7) a{ /* Extra style for 2nd menu link */
padding-left:25px;
background: url(Link ảnh của Logo) 1px center no-repeat; /* Link ảnh của logo */
}

.shadowblockmenu li:nth-of-type(8) a{ /* Extra style for 2nd menu link */
padding-left:25px;
background: url(Link ảnh của Logo) 1px center no-repeat; /* Link ảnh của logo */
}..............

</style>
<div class="shadowblockmenu">
........
<li><a href="địa chỉ liên kết">Tên hiển thị số 7</a></li>
<li><a href="địa chỉ liên kết">Tên hiển thị số 7</a></li>
<li><a href="địa chỉ liên kết">Tên hiển thị số 8</a></li>


</ul>
</div>


Chúc các bạn thành công

▀▄▀▄▀▄ dunghennessy.blogspot.com ▄▀▄▀▄▀

9 nhận xét:

Phinguyen nói...

Hay quá cám ơn bạn nhiều!!!!!1

Phinguyen nói...

Hay quá!!!!Thank bạn

dungheineken nói...

Mình cũng cám ơn bạn đã ghé tham quan và ủng hộ dunghennessy

banmai nói...

Anh cho em xin code được không ạ!
em tìm hoài hết trong blog anh rồi mà không thấy,
Code: bài xem nhiều có mấy hình ảnh chạy giống như anh vậy.
em không biết gọi cái đó là gì cả.
em cám ơn anh trước nha;
email :banmai221991@.gmail.com

dungheineken nói...

Em tham khảo bài này:
MỜI CLICK VÀO ĐÂY

lieu tai nói...

Anh ơi, em muốn các chữ trong menu là chữ thường thì đổi ở chỗ nào vậy anh?

Dung PHAM HOANG nói...

Nếu muốn là chữ thường, bạn đổi chữ uppercase thành lowercase, sau cùng bấm Lưu lại là xong
Chúc bạn thành công

lieu tai nói...

Em đổi rồi nhưng lúc đó lại hoàn toàn là chữ thường, trong khi chữ đầu dòng phải là chữ Hoa mới đẹp chứ anh? Có cách nào nữa không anh Dũng?

Dung PHAM HOANG nói...

Oh...Bạn đổi chữ uppercase thành titlecase nha
Chúc bạn thành công

Đăng nhận xét

 
Powered by by: Blogger