Trong thiết kế blog thì việc sắp xép các laber chủ đề cho blogspot là rất quan trọng. Việc sắp sép của bạn nhìn sẽ hợp lý và đẹp hơn thay vì sử dụng các thanh menu laber có sẵn của blogspot. Namkna đã từng giới thiệu cho các bạn rất nhiều mẫu menu dọc đẹp, nếu thích bạn có thể xem lại tại đây. Hôm nay namkna sẽ giới thiệu cho các bạn thêm một mẫu menu mới.
Các bạn có thể xem Demo:
Hình minh họa.
» Bắt đầu thủ thuật
1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn Chỉnh sửa HTML
4. Thêm đoạn mã trước đây trước thẻ ]]></b:skin>:
#navcontainer { background: #666666; width: 100%; margin: 0 auto; padding:0em 0; font-family: georgia, serif; font-size: 15px; text-align: center; text-transform: uppercase; } ul#navlist { text-align: left; list-style: none; padding: 0; margin: 0 auto; width: 100%; } ul#navlist li { display: block; margin: 0; padding: 0; } ul#navlist li a { display: block; width: 100%; padding: 1em 0 1em 1em; border-width: 2px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #000000; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #0bd500; background: #2c7f0c; border-color: #aaab9c #fff #fff #ccc; }Trong đó:
- background: #666666 là màu của Menu. Nếu muốn đổi màu khác bạn thay mã mày là dduwwocj. Xem các mã màu tại đây hoặc tại đây.
- Nếu muốn chữ viết trên menu dạng in thường thay vì in hoa như Demo thì bạn xóa ddaonj code màu xanh sau: text-transform: uppercase;
5. Bấm Lưu mẫu lại.
6: Bạn quay lại Thiết kế > thêm Tiện ích > chọn thêm HTML/Javacrip và dán đoạn code bên dưới vào:
<div id="navcontainer"> <ul id="navlist"> <li><a href="Link URL">Tên hiển thị 1</a></li> <li><a href="Link URL">Tên hiển thị 2</a></li> <li><a href="Link URL">Tên hiển thị 3</a></li> <li><a href="Link URL">Tên hiển thị 4</a></li> <li><a href="Link URL">Tên hiển thị 5</a></li> </ul> </div>Trong đó:
- Thay thế các Link URL thành URL (địa chỉ liên kết) của các nhãn hoặc bài đăng.
- Thay các tên hiển thị 1 - 5 thành tên nhãn hoặc bài viết (Không nên đặt quá dài nha).
Bây giờ quay lại vào Blog bạn sẽ thấy một menu dọc tuyệt đẹp xuất hiện trên Blog của mình. Xem thêm style khác Tại đây
Chúc thành công!
Nhận xét
Hi bạn, mình muốn tạo menu dọc như menu phim online của bạn thì làm thế nào.?
Trả lờiXóa@ Mẹ cats: bạn có thể tham khảo TẠI ĐÂY :P
Trả lờiXóaChú thành công!
hi bạn, mình tạo được thanh menu như bạn chỉ rồi, giờ khi viết bài minh không biết cho bài đó nằm vào menu mà mình đã tạo. Bạn giúp mính với
Trả lờiXóa@Hoằng Đảm bạn để ý thay ở các đoạn code sau:
Trả lờiXóa<li><a href="Link URL">Tên hiển thị trên menu</a></li>
Thay Link URL thành linh tới bài viết của bạn.
Thay Tên hiển thị trên menu thành tên của bài viết đó.
- Ví dụ như sau:
<li><a href="http://namkna.blogspot.com/search/label/Blogspot Menu">Menu đẹp</a></li>
- Lưu lại là Ok. :3) :3) :3)
thanks bạn nha, nhưng mình vẫn không làm được, vấn đề mình gặp rắc rối là khi mình vào mục " bài đăng mới" thì mình làm sao để cho nó chạy vào menu đã tạo? bạn thông cảm vì mình hỏi hơi nhiều nhé vì mình dốt máy vụ này lắm :( nếu được bạn cho mình nick chát của bạn được không?
Trả lờiXóa@Hoằng Đảm Nguyên lý hoạt động của các menu là tạo liên kết các bài đăng, nhãn nhìn cho logic thôi. bạn không thể đưa một bài viết hay một tiện ích vào menu. Nếu bạn muốn đưa tiện ích bài đăng mới nhất vào Menu thì đó la điều không thể, Theo mình biết hiện nay chưa ai làm được điều này cả, Phần vì thẩm mĩ phần khác là ảnh hưởng rát nhiều đến tốc độ load trang web của bạn.
Trả lờiXóathanks bạn rất nhiều, bạn giúp mình cái này nhé, mình muốn dàn trang cho nó gọn trong thư mục, vd: trong thư mục giải trí mình có đăng bài, nó thể hiện nguyên cả 2 bài luôn nên nhìn dài quá, bạn có cách nào xếp bài thứ 2 , 3..... cho nó gọn lại giống blog yahoo 360 plus không? thanks bạn nhé
Trả lờiXóahttp://anlacquoc.blogspot.com/search/label/Gi%E1%BA%A3i%20Tr%C3%AD
@Fairstar :))
Trả lờiXóaDạo này có nhiều người mới gia nhập Blogger quá nhĩ. :D Toàn hỏi mấy câu cơ bản :D.
Có lẽ nên viết vài bài hướng dẫn cho các bạn ấy.:D
bữa h cũng có mấy bạn pm hỏi cách chèn nhãn vào Menu như thế này không :D
@Nguyễn Doãn Đức uk hay đó hay Đức viết bài hướng dẫn cơ bản đí, mấy hôm nay bận làm đề tài tốt nghiệp cuối tháng này nọp lên lubu quá :3) :3) :3)
Trả lờiXóa@Hoằng Đảm Có chứ bạn. bạn cài Auto readmore cho blog như thế nhìn sẽ đẹp hơn bên yahoo 360 pluss nhiều đó bạn. Xem cách làm Tại đây :3) :3) :3) :3)
Trả lờiXóa@FairstarViết mấy bài Cơ bản đó tuy không có gì mới nhưng có lẽ hiện giờ rất nhiều bạn cần :)) Hút khách đây :))
Trả lờiXóabuồn qua sctv da bi chan roi
Trả lờiXóahi ban, minh da lam theo huong dan, nhung no lai ra nhu vay, minh lam sai cho nao vay ban?
Trả lờiXóahttp://anlacquoc.blogspot.com/search/label/Gi%E1%BA%A3i%20Tr%C3%AD
@Hoằng Đảm Uk không biết bao giờ họ mí mở lại nữa :4) :4)
Trả lờiXóa@Hoằng Đảm Hiện tại phần bài viết đã rút gọn và có hình đại diện rùi đó thôi bạn. Ý bạn là nó bị làm sao.:3) :3) :3) :3)
Trả lờiXóa@Nguyễn Doãn Đức Đúng rồi, mình thấy dạo này lượng người từ bỏ các nền tảng yaho 360 pluss, Opera mini và Wordpress để chuyển sang blogger ngày càng nhiều. Đây là cơ hội để thu hút độc giả đó :3) :3) :3) :3)
Trả lờiXóaThanks bạn nhiều nha, giờ mình làm được rồi. thanks blog http://namkna.blogspot.com rất nhiều!
Trả lờiXóa@Hoằng Đảm Uk chúc mừng bạn nha :3) :3)
Trả lờiXóahi bạn, cho mình hỏi thêm nhé, làm sao mình có thể chèn cột " Xem nhiều tuần qua" giống như của bạn vậy? thanks.
Trả lờiXóahi bạn cho mình hỏi, mình thấy có một khoảng cách giữa bài viết hôm nay va bài ngày hôm qua thì nó co một khoảng cách (khoảng trống) không có dính liền nhau. bạn có cách nào khác phục cái này không ah? thanks
Trả lờiXóa@Hoằng Đảm Để chèn tiện ích xem nhiều tuần qua giống mình bạn làm như sau:
Trả lờiXóa1. đăng nhập vào blog
2. vào tiết kế (design)
3. vào phần tử trang (page element)
4 chọn thêm tiện ích (add widget)
5. Chọn tiện ích Bài đăng phổ biến (popular post)
5. Lưu mẫu lại là Ok.
còn cái này làm sao khắc phục vậy ban? http://anlacquoc.blogspot.com/search/label/Gi%E1%BA%A3i%20Tr%C3%AD?&max-results=7
Trả lờiXóalàm sao cho nó dính liền lại mà không có khoảng cách phân trang xa vậy. Thanks bạn!
@Hoằng Đảm Em vào chỉnh sửa HTML.
Trả lờiXóaEm thay đổi giá trị in đậm bên dưới nha.
.post-outer, .inline-ad {
border-top: 1px solid #38761d;
margin: 0 -0;
padding: 15px 0;
}
.post-outer {
padding-bottom: 10px;
}
vẫn không được bạn ơi, :(,
Trả lờiXóa@Hoằng Đảm Nó chỉ nằm trong thuộc tính
Trả lờiXóapost{... } thôi
bạn hãy gửi tempale vào mail tavannam01@gmail.com mình chỉnh giúp cho. :3) :3) :3)
Thanks bạn, mình đã gửi tempale cho bạn rồi đấy ah! Bạn giúp mình nhé.
Trả lờiXóahok thấy trả lời ? hic hic
Trả lờiXóa@Hoằng Đảm Ở mình mất điện cả 2 ngày nay giờ mới có điện nè:
Trả lờiXóa- Với Tempale của bạn theo mình bạn có thể đổi giao diện bằng cách vào Thiết Kế - Mẫu - Chọn mẫu bạn thích và nâng cấp mẫu lên nhìn sẽ đẹp hơn đó. :3) :3) Tại vì nếu sửa lại thì nó cũng giống với các Template mới nâng cấp đó. :3) :3)
hi bạn, mình đã đổi sang template mới nhưng nó có hai nhược điểm bạn giúp mình nhé.
Trả lờiXóa1. làm sao để mất hai khoảng màu xanh dư thừa hai bên ở phía trên đầu blog?
2. có cách nào kèo giãn chiều ngang cho bố cục blog nó rộng một xíu không bạn?
Thanks
@Hoằng Đảm
Trả lờiXóa1. Phần màu xanh trên header thì tìm đoạn code sau:
#header-inner {
height: 65px;
margin-left: auto;
margin-right: auto;
}
và thay thành như sau:
#header-inner{
background-position:center;
height: 65px;
margin-left:auto;
margin-right:auto}
2. Chiều rộng blog thì điều chỉnh ddaonj code sau:
#outer-wrapper{background:#fff;border:1px solid #FBB117;-moz-box-shadow:0 0 7px #FDD017;width:970px;text-align:left;font:normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif;margin:0 auto;padding:0 10px 0 0}
- tahy width:970px cho thích hợp theo ý bạn. Vừa màn hình là 1000px.
Thanks bạn nhiều nhé!!!
Trả lờiXóaoh, minh lam theo ma khong dc roi, khong thay doi gi ca ban oi, hic
Trả lờiXóa@Hoằng Đảm Phải bạn dùng cho blog http://anlacquoc.blogspot.com/ không thế :C) :C) :C) . CÁi này mình bảo làm cho blog đó đấy, nếu blog khác thì để lại link blog ở đây nha.
Trả lờiXóaĐúng rồi bạn, mình làm theo mà nó cứ trơ trơ, chẳng thay đổi gì cả. hic
Trả lờiXóahttp://anlacquoc.blogspot.com/
@Hoằng Đảm Sory mấy hôm bận quá hôm nay mí vào dduwwocj, nếu bạn chỉnh không được thì gửi template vào email tavannam01@gmail.com mình sẽ chỉnh giúp cho.:3) :3) :3) :3)
Trả lờiXóachào bạn, mình làm thử rồi, nhung mình muốn height của các hàng nhỏ lại thì làm thế nào, cái mẫu này height hơi lớn nên chiếm nhiều diện tích, thanks b
Trả lờiXóabạn tìm đoạn: padding: 1em 0 1em 1em và sử lại theo ý của bạn nha. Có thể dùng số nhỏ hơn ví dụ: 0.5
Xóapadding: 0.5em 0 0.5em 0.5em
Nam cho mình hỏi, mình muốn tạo sub cho menu dọc thì mình phải thêm code như thế nào? Mình không rành code và HTML và CSS nhờ Nam hỗ trợ. Tks Nam
Trả lờiXóaEm xem bài này nha:
XóaMenu dọc xổ ngang nhiều cấp cho blogspot
làm sao để tạo được menu con cấp 2 bạn nhỉ
Trả lờiXóa