Chia sẻ thủ thuật - Giải trí tổng hợp
Vũ Steven
Vũ Steven

Thứ Bảy, 2 tháng 11, 2013

Tạo nhiều chuyên mục cho bài viết ở trang chủ.

1. Chèn đoạn css sau phía trên thẻ

]]> .boxhome{width:700px} .boxhome ul {margin:0; padding:0} .box1{overflow:hidden;} .box1-left{width:380px; float:left; height:400px; border-right:1px solid #777; padding:10px} .box1-left h2 {margin-bottom:5px} .box1-left img{margin-bottom:5px; height:250px; width:380px} .box1-right{height:49px; width:279px; float:right; padding: 10px; line-height:23px; border-bottom:1px solid #777; } .box2-right:hover, .box1-right:hover {background:#999} .box2-right:hover a , .box1-right:hover a {color: #fff; text-shadow:1px 1px 3px #000} .box1-right img {float:left; height:49px; width:72px; margin-right:10px} .box2{margin-top:10px; overflow:hidden} .box2-left{width:380px; float:left; height:140px; padding:10px; border-right:1px solid #777; } .box2-left a{font-weight:bold;} .box2-left img{margin-right:5px; height:100px; width:160px;float:left} .box2-right{height:29px; width:289px; float:right; border-bottom:1px solid #777; padding:5px; line-height:15px;} .box2-right img {float:left; height:29px; width:48px; margin-right:5px} .box1-left-info, .box2-left-info{ text-align:justify;} .box1 img, .box2 img {box-shadow: 1px 1px 2px 1px #666;} .menu{overflow: hidden; width: 100%; border-bottom:1px solid #777; background:#eee;} .menu li{float: left; list-style: none;} .menu a{padding: 5px 5px 5px 25px; float: left; text-decoration: none; position: relative;} .menu li:first-child a{padding-left: 15px; background:#888; color:#eee} .menu li:first-child a::after{border-left-color: #888;} .menu li:first-child a:hover{background:#444; color:#fff} .menu li:first-child a:hover::after { border-left-color: #444;} .menu a:hover{background: #aaa;} .menu a::after, .menu a::before{content: ""; position: absolute; top: 50%; margin-top: -1.5em; border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; border-left: 1em solid; right: -1em;} .menu a::after{z-index: 2; border-left-color: #eee;} .menu a::before{border-left-color: #bbb; right: -1.1em; z-index: 1; } .menu a:hover::after{ border-left-color: #aaa;}

  Lưu ý: Mặc định box này được đặt trong class boxhome có chiều rộng 700px. Bạn cần thay đổi chiều rộng này lại cho phù hợp với mẫu template trên blog của bạn. Ở bước 1 mình đánh dấu các đoạn code màu đỏ là chiều rộng của các thành phần bạn thay đổi lại cho phù hợp với blog của bạn. Nếu có chổ nào không hiểu bạn để lại comments bên dưới mình sẽ trả lời trong thời gian sớm nhất có thể. 2. Chèn đoạn code sau phía trên thẻ Hướng dẫn xem tại :
Hãy nhấn like nếu bài viếc có ích
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

0 nhận xét

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
Posts RSSComments RSSBack to top
Copyright © 2013 by Demo vusteven New5
Ghi rõ nguồn vusteven.info khi phát hành lại thông tin từ trang này.