humghn.com
Một blog/website thu hút khách đòi hỏi phải có nội dung độc đáo cùng với một thiết kế chuyên nghiệp và đẹp mắt . Điều đó đòi hỏi sự tích cự từ các bạn , tích cực cập nhật nội dung và tích cực làm hiện đại thiết kế . Trong bài viết này , chuyên mục tiếp tục gia tăng sự lựa chọn thiết kế cho các bạn bằng cách cập nhật mấu menu xổ dọc và chuyển động ... thò ra thụt vào khi hơ chuột qua :v
DEMO
Cách thực hiện
Bước 1 : Đăng nhập vào blogspot , vào mục " Bố cục " và thêm tiện ích " HTML/JavaScript "
Bước 2 : Bạn dán toàn bộ đoạn code sau vào mẫu " HMTL/JavaScript " vừa tạo
<style>
ul.svertical{
width: 200px; /* width of menu */
overflow: auto;
background: black; /* background of menu */
margin: 0;
padding: 0;
padding-top: 7px; /* top padding */
list-style-type: none;
}
ul.svertical li{
text-align: right; /* right align menu links */
}
ul.svertical li a{
position: relative;
display: inline-block;
text-indent: 5px;
overflow: hidden;
background: rgb(54, 100, 139); /* màu sắc của menu khi chưa rê chuột qua */
font: bold 16px Germand;
text-decoration: none;
padding: 5px;
margin-bottom: 7px; /* spacing between links */
color: black;/*Màu chữ*/
-moz-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8); /* inner right shadow added to each link */
-webkit-box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
box-shadow: inset -7px 0 5px rgba(114,114,114, 0.8);
-moz-transition: all 0.2s ease-in-out; /* CSS3 transition of hover properties */
-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;
}
ul.svertical li a:hover{
padding-right: 30px; /* add right padding to expand link horizontally to the left */
color: black;
background: rgb(153,249,75);
-moz-box-shadow: inset -3px 0 2px rgba(114,114,114, 0.8); /* contract inner right shadow */
-webkit-box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
box-shadow: inset -3px 0 5px rgba(114,114,114, 0.8);
}
ul.svertical li a:before{ /* CSS generated content: slanted right edge */
content: "";
position: absolute;
left: 0;
top: 0;
border-style: solid;
border-width: 70px 0 0 20px; /* Play around with 1st and 4th value to change slant degree */
border-color: transparent transparent transparent black; /* change black to match the background color of the menu UL */
}
</style>
<ul class="svertical">
<li><a href="#">Thủ thuật Blog</a></li>
<li><a href="#" >Thủ thuật Yahoo</a></li>
<li><a href="#">Xem tivi</a></li>
<li><a href="#">theme blogspot 247</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">Help</a></li>
</ul>
Trong đoạn mã phía trên , các bạn có thể tiến hành tùy chỉnh màu sắc của thanh menu theo bảng mã màu HTML tại đây Ngoài ra , các bạn cũng có thể tùy chỉnh mẫu trên theo ý muốn , chỉ cần các bạn biết chút xíu về HTML/CSS là được .
Cuối cùng ,xin chúc các bạn thành công !
