Tạo menu bo tròn góc cho blogspot

Bài viết này mình sẽ giới thiệu một style dropdown menu với hiệu ứng bo tròn góc cho Blogger bằng CSS3. Các bạn có thể xem hình minh họa bên trên. 

Ảnh minh họa :

Các bước thực hiện: 

1. Đăng nhập Blog

2. Chọn bố cục --> Thêm tiện ích HTML\Javascript và dán code bên dưới vào

<!--Round Corner Dropdown
Menu by QuangViet'Blog--> <style> #dtmenu { width:800px;
background:#0874fe; border-bottom: 5px solid #1A1A1A; border-top: 1px solid
#1A1A1A; clear: both; overflow: hidden; -moz-box-shadow: 2px 3px 5px #000000;
-webkit-box-shadow: 2px 3px 5px #000000; box-shadow: 2px 3px 5px #000000;
border:none 5px #000000; -moz-border-radius-topleft: 16px;
-moz-border-radius-topright:16px; -moz-border-radius-bottomleft:16px;
-moz-border-radius-bottomright:16px; -webkit-border-top-left-radius:16px;
-webkit-border-top-right-radius:16px; -webkit-border-bottom-left-radius:16px;
-webkit-border-bottom-right-radius:16px; border-top-left-radius:16px;
border-top-right-radius:16px; border-bottom-left-radius:16px;
border-bottom-right-radius:16px; } #dtmenu ul { float: left; width: 100%; }
#dtmenu li { float: left; list-style-type: none; } #dtmenu li a {
background:#0874fe; color: #fff; display: block; font-size: 14px; padding: 5px
17px 5px 15px; position: relative; text-decoration: none; } #dtmenu li a:hover
{ background:#0874fe; color: #fff; } #dtmenu li li a { background: none;
background-color: #c32751; border: 1px solid #1A1A1A; border-top-width: 0;
color: #fff; font-size: 14px; padding: 5px 10px; position: relative;
text-transform: none; width: 130px; } #dtmenu li li a:hover { background: none;
background-color: #111111; } #dtmenu li ul { height: auto; left: -9999px;
margin: 0 0 0 -1px; position: absolute; width: 160px; z-index: 9999; } #dtmenu
li:hover ul { left: auto; } </style> <a style=" font-size:2px;
color:#eeeeee; text-decoration:none;" href="http://www.đoàntrịnh.vn">Dropdown
Menu by đoàntrịnh.vn</a> <div id="dtmenu">
<li><a href="#">Home</a></li> <li><a
href="#">Sub Menu 1</a> <ul> <li><a
href="#"> Menu 1</a></li> <li><a
href="#"> Menu 2</a></li> <li><a
href="#"> Menu 3</a></li> </ul> </li>
<li><a href="#">Sub Menu 2</a> <ul>
<li><a href="#"> Menu 1</a></li>
<li><a href="#"> Menu 2</a></li>
<li><a href="#"> Menu 3</a></li> </ul>
</li> <li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li> <li><a
href="#">Menu 3</a></li> <li><a
href="#">Menu 4</a></li> <li><a
href="#">Menu 5</a></li> </div> <!--/Round
Corner Dropdown Menu by QuangViet'Blog-->

Điều chỉnh cho hợp với blog của bạn

3. Lưu lại và xem kết quả