QuangVietMkt - Blog Chia sẻ thủ thuật Online

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ả

Bài viết liên quan

3 nhận xét | Viết lời bình

Bạn đã tham gia kiếm tiền với Aztop chưa? Nếu chưa thì hãy đọc bài viết này nhé: Kiếm tiền đơn giản và hiệu quả với aztop

ban oi.minh muon lap mot blog de chia se nhung video. minh chua biet bat dau tu dau ban co the huong dan cho minh voi duoc ko. mail cua minh: vudjeunhebay@gmail.com. minh cam on ban truoc

Back To Top