Bạn đang xem bài viết Tạo Menu Xổ Xuống Trong Blogspot, Cách Gắn Link Nhãn Lên Thanh Menu được cập nhật mới nhất trên website Rafs.edu.vn. Hy vọng những thông tin mà chúng tôi đã chia sẻ là hữu ích với bạn. Nếu nội dung hay, ý nghĩa bạn hãy chia sẻ với bạn bè của mình và luôn theo dõi, ủng hộ chúng tôi để cập nhật những thông tin mới nhất.
I. Cách tạo menu xổ xuống và menu con trong blogspot
Cách tạo menu xổ xuống trong blogspot
$(document).ready(function(){ var touch = $(‘#resp-menu’); var menu = $(‘.menu’); e.preventDefault(); menu.slideToggle(); }); $(window).resize(function(){ var w = $(window).width(); menu.removeAttr(‘style’); } }); }); nav { display: block; background: #374147; } .menu { display: block; } .menu li { display: inline-block; position: relative; z-index: 100; } .menu li:first-child { margin-left: 0; } .menu li a { font-weight: 600; text-decoration: none; padding: 20px 15px; display: block; color: #fff; transition: all 0.2s ease-in-out 0s; } color: #fff; background: #F70000; } .menu ul { visibility: hidden; opacity: 0; margin: 0; padding: 0; width: 150px; position: absolute; left: 0px; background: #fff; z-index: 99; transform: translate(0,20px); transition: all 0.2s ease-out; } .menu ul:after { bottom: 100%; left: 20%; border: solid transparent; content: ” “; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-bottom-color: #fff; border-width: 6px; margin-left: -6px; } .menu ul li { display: block; float: none; background: none; margin: 0; padding: 0; } .menu ul li a { font-size: 12px; font-weight: normal; display: block; color: #797979; background: #fff; } background: #F70000; color: #fff; } visibility: visible; opacity: 1; transform: translate(0,0); } .menu ul ul { left: 149px; top: 0px; visibility: hidden; opacity: 0; transform: translate(20px,20px); transition: all 0.2s ease-out; } .menu ul ul:after { left: -6px; top: 10%; border: solid transparent; content: ” “; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-right-color: #fff; border-width: 6px; margin-top: -6px; } visibility: visible; opacity: 1; transform: translate(0,0); } .responsive-menu { display: none; width: 100%; padding: 20px 15px; background: #374147; color: #fff; text-transform: uppercase; font-weight: 600; } .responsive-menu:hover { background: #374147; color: #fff; text-decoration: none; } a.homer { background: #F70000; } @media (min-width: 768px) and (max-width: 979px) { .mainWrap { width: 768px; } .menu ul { top: 37px; } .menu li a { font-size: 12px; } a.homer { background: #374147; } } @media (max-width: 767px) { .mainWrap { width: auto; padding: 50px 20px; } .menu { display: none; } .responsive-menu { display: block; } nav { margin: 0; background: none; } .menu li { display: block; margin: 0; } .menu li a { background: #fff; color: #797979; } background: #F70000; color: #fff; } .menu ul { visibility: hidden; opacity: 0; top: 0; left: 0; width: 100%; transform: initial; } visibility: visible; opacity: 1; position: relative; transform: initial; } .menu ul ul { left: 0; transform: initial; } transform: initial; } } @media (max-width: 480px) { } @media (max-width: 320px) { }
Bước 2 : Chèn đoạn code Sau tại nơi muốn hiển thị menu
II. Cách gắn link nhãn lên thanh menu
Link nhãn hay còn gọi là các thư mục trong blogspot, vậy đầu tiên các bạn cần biết cách tạo thư mục trong blogspot trước đã.
Cách tạo thư mục trong blogspot
Thư mục chính là phần nhãn khi các bạn đăng bài nằm bên phải, các bạn có thể đặt nhiều nhãn và cách nhau bằng dấu , (phẩy) ở đây mình lấy ví dụ 1 nhãn là Thủ thuật blogspot thì sau đó bạn sẽ lấy được đường link nhãn là
Câu hỏi :
Làm sao để gắn link nhãn lên thanh menu
Tạo menu xổ xuống trong blogspot, cách gắn link nhãn lên thanh Menu
Tạo Menu Ngang Đẹp Cho Blogspot
ôm nay, Caocongkien 360 giới thiệu với các bạn cách tạo menu ngang đơn giản (không có menu con xổ xuống). Đặc điểm nổi bật của menu này là đơn giản, đẹp, cài đặt dễ dàng mà không cần phải chèn code vào HTML của blog. Thích hợp với những blog có ít chuyên mục, đặc biệt là các mẫu mặc định của Blogspot và các bạn mới lập blog. Các bạn có thể xem trước mẫu menu này TẠI ĐÂY.
1. Bấm vào “Thiết kế” trên thanh điều khiển sẽ hiện ra giao diện “Trang tổng quan”. Tìm trong giao diện vừa hiện ra nút “Bố cục” và bấm vào đó. Một giao diện khác hiện ra, bấm “Thêm tiện ích” [1]. (Nên chọn vị trí “Thêm tiện ích” ở ngay dưới tiêu đề blog cho tiện.)
2. Trong bảng “Thêm tiện ích” hiện ra – bấm “HTML/Javascript” [2].
Tại giao diện “Định cấu hình HTML/JavaScript” – để trống tiêu đề và dán toàn bộ code trong khung dưới vào vị trí tương ứng.
– Sau khi dán code, các bạn tìm ở phần cuối đoạn mã vừa dán và xóa dòng nhắc nhở này: “Bài gốc: http:// ……………………. Bài viết đã được đăng ký bản quyền. Bạn vui lòng ghi rõ nguồn để thể hiện nhân cách của bạn! Xin cảm ơn!” – Thay phần tô màu đỏ bằng link các nhãn trong blog của các bạn, và phần tô màu xanh thành tên các nhãn tương ứng. – Các bạn chưa quen, có thể tham khảo cách lấy link và dán link tại bài viết:
là một nút bấm dẫn đến các nhãn bài viết hoặc trang tĩnh trong blog. Muốn thêm một nút thì thêm một dòng, muốn xóa bớt một nút thì xóa bớt một dòng như trên. 3. Bấm “Lưu” [3] để lưu lại và hệ thống sẽ tự động trở lại giao diện như ở bước 1 và tại vị trí “Thêm tiện ích” ban đầu đã hiện thị một tiện ích mới với tiêu đề: “
Nguyễn Văn Cường (Caocongkien)
P/S: Các bài viết trong blog này đều đã được đăng ký, bảo vệ bởi: DMCA và Google Author Ship. Nếu sao chép để đăng lại mà không đề tên tác giả và không đặt link dẫn về bài viết gốc đều bị coi là bất hợp pháp.
Tạo Menu Thả Xuống Nhiều Thư Mục Con
(Traidatmui.com) – Hôm nay mình sẽ hướng dẫn các bạn thực hiện một thủ thuật để tạo một menu ngay dạng thả xuống với nhiều cấp bậc con khác nhau. Với menu này bạn có thể tạo thêm rất nhiều thư mục trong menu, vì với một thư mục chính bạn có thể tạo thêm nhiều thư mục con khác. Menu này có sẽ làm cho blog bạn trông đẹp hơn đấy và cũng giúp bạn trong việc chia nhỏ các thư mục trong blog của bạn. Thủ thuật này cũng khá phức tạp, bạn hãy xem hình ảnh bên dưới sẽ thấy rỏ hơn.
1. Đầu tiên đăng nhập vào blog của bạn 2. Vào bố cục chọn chỉnh sửa
HTML
html .jqueryslidemenu{height: 1%;}
4. Save template lại 5. Bây giờ bạn hãy thêm 1
HTML/Javascript
và dán code bên dưới vào .jqueryslidemenu{ font: bold 12px Verdana; background:#153E7E;
/* màu nền của menu*/
width: 100%; }
.jqueryslidemenu ul{ margin: 0; padding: 0; list-style-type: none; }
.jqueryslidemenu ul li{ position: relative; display: inline; float: left; }
.jqueryslidemenu ul li a{ display: block; background:#15317E;
/* màu nền của thư mục chính*/
color: white;
/*màu text thư mục chính*/
padding: 8px 10px; border-right: 1px solid #778; text-decoration: none; }
* html .jqueryslidemenu ul li a{ display: inline-block; }
/*.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{ color: #ff0066; }*/
.jqueryslidemenu ul li a:hover{ background:#2B60DE;
/* màu hiệu ứng khi rê chuột vào các link*/
color: white;
/*màu text khi rê chuột*/
}
.jqueryslidemenu ul li ul{ position: absolute; left: 0; display: block; visibility: hidden; }
.jqueryslidemenu ul li ul li{ display: list-item; float: none; }
.jqueryslidemenu ul li ul li ul{ top: 0; }
.jqueryslidemenu ul li ul li a{ font: normal 13px Verdana; width: 160px; padding: 5px; margin: 0; border-top-width: 0; border-bottom: 1px solid gray; }
.jqueryslidemenuz ul li ul li a:hover{ background: #eff9ff; color: black; }
.downarrowclass{ position: absolute; top: 12px; right: 7px; }
.rightarrowclass{ position: absolute; top: 6px; right: 5px;
Chỉnh code:
– Bạn hãy dựa vào các dòng chữ màu xanh lá ở trên để chỉnh sửa màu nền và text theo ý bạn – Những dòng
màu đỏ đậm
trong code trên chính là tên của các thư mục chính, bạn hãy thay đổi cho phù hợp với blog của bạn. – Code
màu xanh dương
là tên của những thư mục con cấp 1 của menu chính – Code
màu xanh nhạt
là tên của thư mục con cấp 2 của thư mục chính – Code
màu cam
là thư mục con cấp 3 của thư mục chính, bạn hãy sửa tên các thư mục trên cho phù hợp với blog của bạn. – Thay các dấu
“#”
thành những đường dẫn tương ứng với tên của thư mục
Ở trên mình chỉ giới thiệu cho bạn tạo 7 thư mục, bạn có thể thêm nhiều hơn hoặc bớt đi tùy ý. Nhưng bạn cần phải lưu ý khi xóa đi hoặc thêm vào thư mục nào thì phải kiểm tra lại thẻ đóng của chúng cho phù hợp.
Cách tạo menu con:
ví dụ bạn muốn tạo thư mục con cấp 2 cho thư mục
“Download”
tại thư mục
Sub Item 2.2
thì bạn làm như bên dưới:
Nếu muốn thêm thư mục không cần có thư mục con bạn chỉ việc thêm code như bên dưới và vị trí bạn muốn. ví dụ thêm như mục
“Cộng cụ”
vào sau thư mục
“Học tập”
bạn làm như sau:
6. Save lại
Hướng Dẫn Cách Tạo Menu Trong Website WordPress
Cách tạo Menu trong website wordpress nằm trong series WordPress cơ bản. Giúp tự tạo menu website wordpress cơ bản và chi tiết. Sau khi đọc xong bài hướng dẫn này bạn có thể tự tạo được menu cho website của mình.
Menu là gì? Lợi ích của việc tạo menu
Menu là thanh trình đơn giúp hiển thị các liên kết của bài viết, các trang mà chúng ta cố định lên những vị trí cố định của theme, tùy vào mỗi theme khác nhau thì những vị trí của menu cũng khác nhau
Menu giúp điều hướng người dùng, khi người dùng truy cập vào website của bạn, và họ muốn đọc nội dung mà họ đang cần. Thanh menu hiển thị các chuyên mục, những liên kết giúp người dùng dễ dàng hơn trong việc tìm kiếm nội dung của họ
Việc tạo ra menu giúp cho quá trình tối ưu liên kết nội bộ trong SEO trở nên đơn giản hơn. Giúp điều hướng người dùng đến những liên kết, chuyên mục có những bài viết hay, hấp dẫn tăng thời gian onsite.
Cách tạo menu trong website WordPress
Tạo một menu mới
Sau khi tạo được Menu ta cần thêm các thành phần (category, page, link) vào để hiệu chỉnh.
Đối với Trang, Chuyên mục, Bài viết thì ta chỉ cần chọn liên kết muốn hiển thị bằng cách đánh dấu vào hộp chọn sau đó nhấn Thêm vào Menu. Nếu muốn hiển thị tất cả hãy chọn tab Xem tất cả. Nếu muốn tìm kiếm ta chọn tab Tìm kiếm
Sau đó nhấn Lưu Menu
Sau khi ta đã thêm các thành phần vào menu, ta sắp xếp lại vị trí cho phù hợp. Nhấn vào thành phần cần sắp xếp giữ chuột rồi kéo thả.
Chọn vị trí cho menu
Đây là bước chọn vị trí cho menu, số lượng vị trí tùy thuộc vào mỗi theme ví dụ theme của mình có: Primary Location, Secondary Location.
Xóa menu
Nếu bạn muốn thay đổi menu hoặc quá trình tạo menu bạn thấy không vừa ý thì có thể xóa bỏ bằng cách nhấn vào Xóa menu. Sau đó có một thông báo hiện lên bạn hãy nhấn OK là xong.
Bài viết nên xem: Cách sử dụng widget trong website wordpress
Cập nhật thông tin chi tiết về Tạo Menu Xổ Xuống Trong Blogspot, Cách Gắn Link Nhãn Lên Thanh Menu trên website Rafs.edu.vn. Hy vọng nội dung bài viết sẽ đáp ứng được nhu cầu của bạn, chúng tôi sẽ thường xuyên cập nhật mới nội dung để bạn nhận được thông tin nhanh chóng và chính xác nhất. Chúc bạn một ngày tốt lành!