Đặ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.
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.
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 đỏ và 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:
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à 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
