Tạo menu ngang có kèm hình ảnh cho blog rất đẹp

Chào các bạn !
Bài viết hôm nay xin giới thiệu cùng các bạn cách tạo menu ngang có kèm theo hình ảnh rất đẹp với hiệu tạo bóng khi click chuột vào. Hiệu ứng này thích ứng với tất cả cá trình duyệt internet hiện nay. Tiện ích sử dụng CSS và HTML rất dễ dàng thêm vào blog của bạn.
XEM DEMO
* Cách thực hiện:
1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>

/* The CSS Code for the menu starts here bloggertrix.com */

.shadowblockmenu{
font-weight: bold;
font-size: 85%;
width: 687px;
margin:0 auto;
}
.shadowblockmenu ul{
border: 1px solid #BBB;
border-width: 1px 0;
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; 
-moz-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4); (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; 
-moz-transition: all 0.2s ease-in-out;
-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{
border-left: 1px solid #BBB;
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYu1lQz4u0FItnMQBe-5lhnZI5r7lVXOH02O9-sAZiFwXzQD4F9TDvfmokdlLSZ4vWvhwAok1bq7JMZ2cwKYLrwSJ93rzDkFmlNc32ugKBZ6oy9PfqqsBz6Pq8XYtMWgmz-8Xt-S1Esq4/s1600/bt_home.png) 1px center no-repeat; 
}
.shadowblockmenu li:nth-of-type(2) a{ 
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidM55kZ8WKigXmUVpbr3Igzrw3KAd9OZ73OJW1I2TKHVfGE9_R4d3VEKqZVsLj0Y01XyKDBShUkKVIV1De6VRvAVSLDi-BkFNeJViwNoLIMqOcLG7SW9Ay4EyDY8mwOrwJqXn-mD5S2mY/s1600/bt_bulb.png) 1px center no-repeat; 
}
.shadowblockmenu li:nth-of-type(3) a{ 
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSR_Bj8As74u55N5ITF_bMYeRS0YiwwB-3A5KduKQPK8Fr0-e1bYq2IfGrRL9au-JII82AtbDNsikufDPmDE7uAGnpTQyItvr7DW67hldsGi6H3sd4X5ZRKLic-wQAWJSm37ywQoQw1V4/s1600/bt_database_add.png) 1px center no-repeat; 
}
.shadowblockmenu li:nth-of-type(4) a{ 
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmq3xvMYpGcJc7U9mnxDT5DdlnrsqMVHr6QvPgt3XnLI-We9jDFk5RDnR9IAMzFDAaxBsaH-5Vj5PDYfQchGMzOu2nziSfjUK5Evs-ze_jjZqQviihXHnu2fizP-HXJYdnTn3UrlhYwo/s1600/bt_films.png) 1px center no-repeat; 
}
.shadowblockmenu li:nth-of-type(5) a{ 
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTmCJ-gno3qszXzlsmSBYf8Xk83oKCpfn5AZ4UH7ZndfLJiJKBMRNluk1ZdFcDPbhD8ZV4f5aRrlo3KxoH9CnOsKobdPu9vmeAc4WEH5Q69DaftRIUgmmvaurCcx768xCbIYjOP-rLqDU/s1600/bt_mobile-phone.png) 1px center no-repeat; 
}
.shadowblockmenu li:nth-of-type(6) a{ 
padding-left:25px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUrv15q20ekg2IZZQJXgZUmsb0qy_iB5MsOD2mYuTaCGbss1eBWPdZhTUU3-L_xmxxIuKEc1jeQ1FHQNeDWI7vZgYYwVm66UjCkDsWb0-F0yGAXjq7_GiLW1vWVwqs2N3quMAMeQomdzk/s1600/Bt_Help_Circle_Blue.png) 1px center no-repeat; 
}
.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);
-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);
}

5. Save template lại và trở về bố cục (Layout)
6. Thêm 1 HTML/Javascript và thêm vào code bên dưới

* Ở đây các bạn lưu ý các dòng sau:

<li><a href="#">Ứng dụng Mobile</a></li>

Thay # bằng link liên kết, thay các dòng chữ màu xanh bằng tên menu của bạn.

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

Tham khảo từ bloggertrix

Mr Sum