Trong thiết kế blogger để phần header thích hợp với các trình duyệt khác nhau rất quan trọng và phần quan trọng nhất của header là menu chính cung cấp liên kết hữu ích bên trong của bạn. Hôm nay mình sẽ hướng dẫn cách thiết kế một menu thả xuống linh hoạt cho Blogspot mà không cần sử dụng một scripts hoặc hình ảnh! Phần đặc biệt là nó không chỉ là một trình đơn ngang mà nó có thể biến thành một danh sách thả xuống. Đơn giản chỉ cần sử dụng mã HTML5, thẻ <nav> và CSS3 : bạn có thể kiểm tra tại đây, Mình sẽ giới thiệu một menu của mybloggertricks mà tôi hy vọng sẽ có ích cho cộng đồng blogger vì nó thực sự là một trình đơn hiệu quả đó là tương thích với tất cả các trình duyệt và sử dụng không Jquery!
Các ảnh chụp màn hình dưới đây được chụp bằng iPhone cá nhân của tôi để cung cấp cho bạn một cái nhìn tổng quát về blog của bạn sẽ như thế nào trong các kích cỡ màn hình khác nhau. Menu tự động điều chỉnh chính nó sử dụng CSS3 truy vấn phương tiện truyền thông mà chúng ta đã thảo luận trong phần đầu tiên của loạt bài này.
Bạn có thể vào blog demo bên dưới sau đó thu nhỏ chiều ngang của trình duyệt nhỏ lại để xem menu sẽ biến dổi thế nào nha.
VIEW DEMO
» Bước 1: Tắt trình duyệt mobile mặc định của blogger
1.1- Đăng nhập Blogger
1.2- Bấm vào icon chỉnh sửa ở mục điện thoại di dộng.
1.3- Tại mục seleck chọn no.=> Lưu lại và tiến hành bước tiếp theo.
» Bước 2: Thêm Responsive menu vào template
2.1- Vào Mẫu
2.2- Chọn Chỉnh sửa HTML
2.3- Tìm trong template đoạn code như bên dưới (đoạn này thường nằm trước thẻ <head>)
<b:if cond='data:blog.isMobile'> <meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/> <b:else/> <meta content='width=1100' name='viewport'/> </b:if>
- Thay thế nó thành đoạn code bên dưới (Nếu không tìm thấy đoạn code trên thì dán đoạn code bên dưới vào trước thẻ <head>)
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/> <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>2.4- Dán đoạn code bên dưới trước thẻ: ]]></b:skin>
/*-----Responsive Drop Down Menu by MBT ----*/ body { margin: 0px; } #menu{ background: #50B7DC; color: #FFF; height: 40px; border-bottom: 2px solid #DDD; box-shadow: 1px 2px 9px #B1B1B1; border-top: 2px solid #DDD; } #menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none} #menu ul{height:45px;width:1024px} #menu li{float:left;display:inline;position:relative;font:bold 0.9em Arial;text-shadow: 1px 2px 4px #838383;} #menu a{display: block; line-height: 40px; padding: 0 14px; text-decoration: none; color: #FFF; } #menu li a:hover{ color: #E4E4E4; -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; background: #5FC6EB; } #menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer} #menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center} #menu label span{font-size:16px;position:absolute;left:35px} #menu ul.menus{ height: auto; overflow: hidden; width: 170px; background: #50B7DC; position: absolute; z-index: 99; display: none; } #menu ul.menus li{ display: block; width: 100%; font:normal 0.8em Arial; text-transform: none; text-shadow: none; border-bottom: 1px dashed #31AFDB; } #menu ul.menus a{ color: #FFF; line-height: 35px; } #menu li:hover ul.menus{display:block} #menu ul.menus a:hover{ background: #5FC6EB; color: #FFF; -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; } @media screen and (max-width: 800px){ #menu{position:relative} #menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none} #menu ul.menus{width:100%;position:static;padding-left:20px} #menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;} #menu input,#menu label{position:absolute;top:0;left:0;display:block} #menu input{z-index:4} #menu input:checked + label{color:white} #menu input:checked ~ ul{display:block} }
» Tùy chỉnh
- #50B7DC Là màu nền của menu
- #FFF Là màu chữ hiển thị trên menu chính.
- 1024px Chiều rộng của thanh menu
- #5FC6EB Màu sub menu khi rê chuột vào
- max-width: 800px Khi màn hình có chiều rộng dưới 800px menu tự động chuyển sang dạng dropdown
2.5- Dán code bên dưới sau thẻ <body> hoặc vị trí bạn muốn thêm menu.
<nav id='menu'> <input type='checkbox'/> <label>≡<span>Namkna Blog</span></label> <ul> <li><a href='/'>Home</a></li> <li><a href='#'>About</a></li> <li><a href='#'>Drop Down <font size='1'>▼</font></a> <ul class='menus'> <li><a href='#'>Tab 1</a></li> <li><a href='#'>Tab 2</a></li> <li><a href='#'>Tab 3</a></li> <li><a href='#'>Tab 4</a></li> <li><a href='#'>Tab 5</a></li> <li><a href='#'>Tab 6</a></li> </ul> </li> <li><a href='#'>Contact</a></li> <li><a href='#'>Drop Down <font size='1'>▼</font></a> <ul class='menus'> <li><a href='#'>Tab 1</a></li> <li><a href='#'>Tab 2</a></li> <li><a href='#'>Tab 3</a></li> </ul> </li> <li><a href='#'>Advertise</a></li> </ul> </nav>» Tùy chỉnh:
- Thay Namkna Blog thành tiêu đề blog của bạn.Nếu giữa tên có ký tự khoảng trống bạn dùng ký tự   để thay cho dấu cách.
- Thay các dấu thăng màu đỏ (#) thành liên kết tới bài viết hoặc nhãn của bạn.
- Bạn có thể dùng nút xổ dọc ▼ bằng các chèn ký tự sau ▼ .
Dán đoạn mã bên dưới vào sau thẻ <ul> hoặc trước thẻ </ul> để tạo một menu thả xuống.
<li><a href='#'>Drop Down <font size='1'>▼</font></a> <ul class='menus'> <li><a href='#'>Tab 1</a></li> <li><a href='#'>Tab 2</a></li> </ul> </li>
Menu trên sẽ chỉ tạo ra có một danh sách thả xuống và không thả xuống danh sách đa cấp bởi vì nó làm phức tạp các bố trí mẫu trên các thiết bị di động. Giữ nó đơn giản là tốt nhất.
» Cần giúp đỡ?
Trong ví dụ trên, Menu chính sẽ tự động được thiết lập hiển thị khi chiều rộng kích thước màn hình dưới hoặc bằng 800px. Tôi sử dụng hộp kiểm để giới thiệu các hiệu ứng chuyển đổi. Vì vậy, ngay sau khi kích thước màn hình đạt giảm 800px hoặc hơn nữa, các thuộc tính CSS truy vấn phát hiện ra nó và tự động thiết lập chế độ của hộp để kiểm tra và áp dụng các style. Đây là một kỹ thuật thú vị mà chúng tôi sử dụng ở đây mà loại bỏ sự cần thiết cho chức năng chuyển đổi JQuery.
Tôi đã sử dụng chỉ có hai điểm break quan trọng và đó là chiều rộng: 1024px cho màn hình máy tính để bàn và 800px cho các thiết bị bao gồm máy tính bảng, iPad và điện thoại thông minh. Vì vậy, toàn bộ quá trình được thực hiện rất dễ dàng. Mình chắc chắn những người hiểu các hướng dẫn ở trên sẽ thấy nó thực sự thú vị để tùy chỉnh nhiều hơn nữa và thêm các yếu tố thêm vào menu giống như một hộp tìm kiếm đáp ứng ở góc hoặc một biểu tượng RSS, vv
Xin vui lòng cho tôi biết nếu bạn muốn bất kỳ trợ giúp ở đây. Tôi hy vọng kỹ thuật này sẽ tiếp tục giúp các nhà phát triển để tạo ra các mẫu blogger thú vị hơn và đóng góp nhiều hơn cho cộng đồng thế giới blog. Tôi rất thích nghe phản hồi của bạn về điều này. Xin vui lòng cho chúng mình biết quan điểm quý báu của bạn để chúng tôi có thể cải thiện nó hơn nữa nếu cần thiết.
Nhận xét
hay vậy,để tôi bóc tem thử xem .thanks nhìu
Trả lờiXóaNhớ cho mình biết kết quả nha :)
Xóaem làm xong 7 cái menu nó không nằm trên 1 hàng, 1 cái chạy xuống dưới giờ phải làm sao anh.giúp em với.thanks
Trả lờiXóaDo tiêu đề các menu quá dài em nên đặt tên ngắn thôi nha để tránh bị xuống dòng.
Xóaanh ơi, cái dấu # em thay bắng nhãn nhưng khi test ko được nó kêu trang ko tồn tại
Trả lờiXóaDấu thăng em phải thay bằng link nhãn ví dụ như sau:
XóaTrước khi thay
<li><a href='#'>Tab 1</a></li>
sau khi thay:
<li><a href='http://namkna.blogspot.com/search/label/Blogspot-tips'>Tab 1</a></li>
mình muốn làm như của namkna mà không biết làm thế nào,blog của mình có menu rồi không muốn thay nó ,chỉ muốn thêm menu thả xuống như của namka vừa mới thay đấy
Trả lờiXóaChỉ cần thay id class trong xml và trong đoạn sau:
Xóa@media screen and (max-width: 800px){
#menu{position:relative}
#menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
#menu ul.menus{width:100%;position:static;padding-left:20px}
#menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + label{color:white}
#menu input:checked ~ ul{display:block}
}
Nhận xét này đã bị quản trị viên blog xóa.
Xóalàm sao để ẩn mọi tiện ích, chỉ chừa lại cái menu
Trả lờiXóađể chèn ứng dụng vào
như trang này vậy!!!
http://namkna.blogspot.com/p/photo-editor-online-photoshop-online_24.html
thanks bạn!
Bạn xem bài này nha: Tên
Xóahttp://namkna.blogspot.com/2012/02/sidebar-khi-xem-bai-viet.html
Xóathanks pạn!!^^
Trả lờiXóanhưng hình như nó chỉ ẩn sidebar thui,
và nó áp dụng cho toàn bộ pài viết thì phải,!!
làm sao để thực hiện chỉ với những pài chỉ định,
và ẩn lun cả phần phía trên và dưới lun như trang này của pạn vậy!?
http://namkna.blogspot.com/p/photo-editor-online-photoshop-online_24.html
thanks pạn!
Bạn muốn ẩn phần nào chỉ cần tìm ID và CLASS phần đó sau đó dán vào cú pháp sau:
Xóa#ID,.CLASS{display:none !important}
#main-wrapper{width:100% !important}
ví dụ:
#footer-wrapper,#header-wrapper,#nav,.sidebar,#footer, {display:none !important},#sidebar-wtengah
#main-wrapper{width:100% !important}
thêm vào đâu pạn?
XóaThêm vào tiện ích HTML/Javácripts
XóaDemo thu nhỏ trình duyệt đẻ xem DEMOnha:
cái này chèn vào đâu pạn!?
Xóa#footer-wrapper,#header-wrapper,#nav,.sidebar,#footer, {display:none !important},#sidebar-wtengah
#main-wrapper{width:100% !important}
Trước thẻ: ]]></b:skin>
Xóachỉ áp dụng cho những bài đăng nhất định dc ko pạn!?
XóaTất nhiên là được bạn ak. Bạn xóa đoạn:
Xóa@media screen and (max-width: 800px){
#menu{position:relative}
#menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
#menu ul.menus{width:100%;position:static;padding-left:20px}
#menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + label{color:white}
#menu input:checked ~ ul{display:block}
}
Và khi muốn áp dụng với bài viết nào bạn chỉ cần dán đoạn mã sau vào phần HTML của bài viết.
<style>
@media screen and (max-width: 800px){
#menu{position:relative}
#menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
#menu ul.menus{width:100%;position:static;padding-left:20px}
#menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + label{color:white}
#menu input:checked ~ ul{display:block}
}
</style>
chỉ áp dụng để ẩn những thành phần này cho bài đăng nhất định dc ko bạn!?
Xóa#footer-wrapper,#header-wrapper,#nav,.sidebar,#footer, {display:none !important},#sidebar-wtengah
#main-wrapper{width:100% !important}
Tất nhiên là được bạn chỉ cần thêm chúng vào giữa cặp thẻ style và dán vào phần HTML của bài viết đó thôi :)
XóaĐúng vậy.
Xóaanh ơi cái menu chạy xuống cuối trang giờ làm sao anh
Trả lờiXóaEm lưu ý chèn sau thẻ mở <body> chứ không phải thẻ đóng </body>
XóaMình thả vào thẻ body thì thanh menu nhảy tót lên trên top trang nằm, nhìn xấu lắm, mình cắt nó ra và cho vào một widget riêng đưa nó trên featured post thì thấy nó đẹp, mà ko biết được k Nam http://www.yeutienganh123.com/
Trả lờiXóaTất nhiên là được bạn có thể dán nó ở đâu tùy thích nha,
XóaLink ảnh đó của em bị xóa bởi tác giả của nó em nên thay bằng link ảnh khác của em nha em :)
Trả lờiXóaanh nam ơi kiểm tra hộ em với
Trả lờiXóablog :http://tinnet3s.blogspot.com/
tại sao trên các liên kết ở menu và các chỗ khác trong tranh đều có gạch chân bên dưới - em muốn gỡ nó ra mà không biết -
nhừ anh giúp em -
thanks anh
Em chỉ cần thêm thuộc tính text-decoration:none vào thẻ a:link thôi em ak. Em sửa đoạn code bên dưới:
Xóaa, a:visited{text-decoration:none;color: #004D99}
thành:
a:link, a:visited{text-decoration:none;color: #004D99}
được rồi anh ạ - thanks anh nhieu
Trả lờiXóaKhong có gì đâu e ak.
XóaDùng mẫu mobile mặc định thì có ổn trong SEO không ad nhỉ, còn nữa là em kiểm tra bằng tool.pingdom thấy trang chủ bị load 2 lần, site e là nhacthieunhi.biz. A fix giúp e với, cảm ơn a nhiều
Trả lờiXóaAnh kiểm tra không thấy hiện tượng đó của em. Mẫu mặc định của blogger cũng ổn tuy nhiên cần tùy biến lại đôi chút cho phù hợp với nội dung là lượng từ khóa sử dụng nha.
Xóaem có hai lỗi liên quan đến menu nhờ anh giúp cho :
Trả lờiXóa1.phần banner trên lấn qua phân menu
2.menu sổ dọc bị khuất bởi slide ảnh nằm bên dưới (làm sao cho các menu sổ xuống nó nằm trên slide ảnh)
blog em là : http://www.giasuvinh24h.com/
Nhận xét này đã bị tác giả xóa.
Trả lờiXóadòng thứ nhất em đã mày mò sửa đực rồi ạ - anh giúp em sửa dòng 2 thôi ạ :
Trả lờiXóa2.menu sổ dọc bị khuất bởi slide ảnh nằm bên dưới (làm sao cho các menu sổ xuống nó nằm trên slide ảnh)
blog em là : http://www.giasuvinh24h.com/
2 câu hỏi trên em đã mò ra - an cho em hỏi thêm - với menu này muốn chữ ở các tab1-2-3-4.. lớn hơn thì có cách nao ngoài cách đặt cho từng cái không anh
Trả lờiXóaEm sửa 3 đoạn CSS sau:
Xóa#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none}
#menu ul{height:45px;width:1024px}
#menu li{float:left;display:inline;position:relative;font:bold 0.9em Arial;text-shadow: 1px 2px 4px #838383;}
thành:
#menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none;font-size:18px;}
#menu ul{height:45px;width:1024px}
#menu li{float:left;display:inline;position:relative;font:bold 0.9em Arial;text-shadow: 1px 2px 4px #838383;
font-size:14px;}
font-size:18px; là cỡ chữ của sub menu
font-size:14px; là cỡ chữ trên menu chính.
Hãy chỉnh lại theo ý muốn của em nha.
thế màu nên khi dê chuột trên mỗi tab là gì vậy anh- chỉnh ở đâu ạ
Trả lờiXóaEm chỉ cần thay đổi mã màu color và màu nền background ở các đoạn bắt đầu bằng thẻ css a:hover Trong bài anh đã có nói qua nó rồi đó.
XóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaanh xem hình giúp em tí -
Trả lờiXóahttp://2.bp.blogspot.com/-RSxS2PBByYc/Ut520I9GXsI/AAAAAAAAAnI/4wFd7g8T-Mw/s1600/1.jpg
Ys em hỏi tại thời điểm con chuột ở vị trí B đó anh ạ
Trả lờiXóaTrong đoạn code có chú thích rồi đó em. E chỉnh lại phần
Xóa#menu li a:hover{
color:#FFFFFF;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
background:#007700; /*màu menu khi rê chuột - trên menu chính*/
}
Ý em là khi mình dê chuột xuống các tab nhỏ sổ dọc xuống dưới - thì màu menu khi trên chuột ở trên vẫn không thay đổi - ví dụ trong hnhf ảnh em gửi đó : thì khi em dê chuột vào "danh mục gia sư" nó có màu giống như các tab bên dưới - nhưng khi em dê xuống tab bên dưới (vd:đội ngũ gia sư-gia sư giỏi...) thì màu ở "đội ngũ gia sư nó mất" không giống với các tab nữa - ý em muốn màu ở "danh mục gia sư" không thay đổi khi (giống như ở các tab) khi mình đang dê chuột trên khu vực các tab ạ !!!
Trả lờiXóaOke, Em sửa đoạn:
Xóa#menu li a:hover{
color:#FFFFFF;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
background:#007700;/*màu menu khi rê chuột - trên menu chính*/
}
Thành:
#menu li:hover, #menu li a:hover{
color:#FFFFFF;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
background:#007700;/*màu menu khi rê chuột - trên menu chính*/
}
Lưu lại là được nha.
cảm ơn anh đã nhiệt tình giúp đỡ - rất đúng với ý của em ạ ---
Trả lờiXóabây giờ nhìn đẹp hơn nhiều :http://www.giasuvinh24h.com/
KHông có gì đâu em ak.
Xóaanh ơi có thể thêm menu thành ba cấp được khôn anh - anh chỉ giúp em với
Trả lờiXóaEm có thể xem thêm bài hướng dẫn này để thực hiện nha: XEM
XóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaanh xem ảnh giúp em tí
Trả lờiXóahình ảnh đây ạ
trang blog của em là : http://lukhachtran.blogspot.com/
Trả lờiXóaanh giúp em chỉnh cho cân tí nhé-
hình ảnh đây ạ
Em tìm đoạn:
Xóa#footer{background:#fff;border-bottom:0px solid #000;border-top:0px solid #111;width:100%;padding:0;box-shadow: 0 2px 6px rgba(0,0,0,0.2);margin:3px}
và thay thế nó thành:
#footer{background:#fff;border-bottom:0px solid #000;border-top:0px solid #111;width:100%;padding:0;box-shadow: 0 2px 6px rgba(0,0,0,0.2);margin:0 auto;}
thanks anh - tiện thể nhờ anh chỉnh menu này cân em với :
Trả lờiXóahttp://2.bp.blogspot.com/-CEk9K0-bnr0/U2kaUipVlGI/AAAAAAAAAP0/BvSY9EteiFk/s320/p.jpg
- E Sửa đoạn:
Trả lờiXóa.masmenu{background: #ffffff;background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);color:#333;font:bold 12px Arial;text-shadow: 1px 1px 1px rgba(255,255,255,0.8);display:inline-block;width:100%;border:1px solid #ccc;box-shadow:0 2px 5px rgba(0,0,0,.1)}
thành:
.masmenu{background: #ffffff;background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);color:#333;font:bold 12px Arial;text-shadow: 1px 1px 1px rgba(255,255,255,0.8);display:inline-block;width:100%;border:1px solid #ccc;box-shadow:0 2px 5px rgba(0,0,0,.1);margin:0 auto}
và nhớ chỉnh lại width ở phần dưới nha:
.masmenu ul{width:970px;padding:0;margin:0 auto}
không hiểu sao - em làm theo như anh mà vẫn không được anh ạ !!!
Trả lờiXóaA đã kiểm tra các thẻ bao ngoài padding đều bằng 1 như vậy có thể phần e nhì thấy do hiệu ứng text-shadow: 1px 1px 1px rgba(255,255,255,0.8) gây ra ta có thể viết lại thành: text-shadow: 1px rgba(255,255,255,0.8)
Xóanếu vẫn không có tác dụng thì em dùng đoạn:
.masmenu{background: #ffffff;background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);color:#333;font:bold 12px Arial;text-shadow: 1px 1px 1px rgba(255,255,255,0.8);display:inline-block;width:100%;border:1px solid #ccc;box-shadow:0 2px 5px rgba(0,0,0,.1);margin-left:-5px;}
chỉnh lại phần in đậm.
HTML của mình không có <Body>. Chỉ tìm đc body của dòng lệnh này
Trả lờiXóa<body expr:class='"loading" + data:blog.mobileClass'>
Mình cũng không biết thêm như thế nào. Nam giải đáp giúp mình với
2 đoạn này là một nha bạn
XóaMình đã tự sửa được rồi. Nhưng nếu như mình muốn dời thanh menu này về vị trí giống như thanh menu blog của nam thì mình đặt nó ở đâu Nam nhỉ ??
Trả lờiXóaĐể URL trang của bạn ở đây để mình kiểm tra cho. Trong tiểu sử Google của bạn khong có trang của bạn nên mình không chỉ đoạn cụ thể cho bạn được.
XóaAnh à, em làm như anh chỉ thì lại bị chừa thanh menu ra bên ngoài một chút, em đã chỉnh kích thước chiều rộng xuống còn 900 và 700 nhưng mà kết quả vẫn thế. Anh giúp em sửa nhé. Đây là link ạ: http://www.accu-tech.com.vn/
Trả lờiXóaDo thuộc tính padding trong phần outer-wrapper blog của em. Khắc phục bằng 2 cách:
XóaCách 1: Xóa Padding
TÌm đoạn bên dưới:
#outer-wrapper {
width: 960px;
background:#fff;
margin:0 auto;
padding:5px 20px 15px 20px;
text-align:left;
font:normal 14px Arial;
}
và sửa thành:
#outer-wrapper {
width: 960px;
background:#fff;
margin:0 auto;
text-align:left;
font:normal 14px Arial;
}
Cách 2 thêm margin:
Tìm đoạn bên dưới:
#menu{
background: #50B7DC;
color: #FFF;
height: 40px;
border-bottom: 2px solid #DDD;
box-shadow: 1px 2px 9px #B1B1B1;
border-top: 2px solid #DDD;
}
Và sửa thành:
#menu{
background: #50B7DC;
color: #FFF;
height: 40px;
border-bottom: 2px solid #DDD;
box-shadow: 1px 2px 9px #B1B1B1;
border-top: 2px solid #DDD;
margin-left:-10px;
}
Chỉnh lại margin-left:-10px; cho thích hợp là được:
Cảm ơn anh nhiều ạ :)
Xóa
Trả lờiXóaThanks For Sharing This Website. Really Thanks For This Post.
Kingtricks
No problem. i hope this post usefull with you.
Xóathank vissited!
như blog mình: http://aliensf.blogspot.com/ , muốn tạo thêm menu con cấp 2 nữa thì viết code ntn b? vì mình ko am hiểu lắm về cách viết nav
Trả lờiXóaBạn có thể xem bài hướng dẫn này nha: Hướng Dẫn Chi Tiết Tạo Drop Menu Nhiều Cấp
XóaChào anh, cảm ơn vì bài viết rất tuyệt. Em đã áp dụng thành công trên blog của mình, nhưng em muốn trên thiết bị có kích thước nhỏ hơn 800px menu không tự xổ xuống khi rê tay trúng mà phải nhấp vào lần nữa mới xổ thì làm sao vậy anh?
Trả lờiXóaNhận xét này đã bị tác giả xóa.
Trả lờiXóaMình đã áp dụng để chỉnh sửa menu hiện tại của mình theo cách này. Còn một số lỗi mình k biết chỉnh sửa thế nào, mong bạn giúp đỡ.
Trả lờiXóaKhi co trình duyệt nhỏ lại thì menu của mình đã tự động chuyển đổi, nhưng nó không hiện ngay, phải kéo chuột xuống một chút nó mới hiện ra. Và nó chỉ hiện ra thôi, còn không click vào menu được.
Bạn chỉnh giúp mình với, blog của mình là http://nhahanoi68.blogspot.com/
mình có gần 20 dropdown làm cách nào để chúng chuyển sang thành nhiều cột không nhìn dropdown dài quá
Trả lờiXóamình muốn làm dropdown kiểu dạng như trang này hittravel.vn bạn chỉ cho mình đc ko. thanks
Trả lờiXóaa ơi e hỏi này, cái menu của e thì e làm ok rồi, hôm qua vẫn bình thường, hôm nay tự dưng vào bằng di dộng thì chữ "menu" nó nhảy mất xuống dưới :(( a vào vncino1.net xem giúp em nhé, em cảm ơn ạ,
Trả lờiXóaBạn cho mình hỏi muốn đổi màu thanh menu thì phải làm sao ?
Trả lờiXóa