Tin mới

Advertisement

Binance

28 tháng 4, 2014

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

InstaFxCopy

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ả

3 nhận xét:

  1. 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

    Trả lờiXóa
  2. 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

    Trả lờiXóa