Diễn Đàn SEO - vnseo.edu.vn - Tạo Responsive Menu cho blogspot với khả năng hiển thị tốt trên tất cả các thiết bị như mobile, tablet và desktop dường như đang là một nhu cầu khá lớn của đông đảo các bạn đọc cũng như các webmaster. Responsive Navigation Menu for Blogspot Để có thể tạo Responsive Navigation theo ý của mình các bạn cần phải biết một chút HTML cơ bản, CSS3 và một ít kiến thức về jQuery nữa. Tuy nhiên trong bài này các bạn chỉ cần làm theo là cũng có thể có một Responsive Menu khá đẹp có thể hiển thị cực tốt trên các thiết bị di động cũng như trên máy tính để bàn. Vậy Responsive Menu và Responsive Web Design là gì? Thực ra để giải thích khái niệm này khá dài dòng và cũng đã có quá nhiều website nói về vấn đề này rồi. Các bạn chỉ cần hiểu đơn giản rằng khi ứng dụng Responsive Web Design vào blog, website thì website được áp dụng đó sẽ hiển thị rất tốt trên hầu hết mọi thiết bị như mobile, tablet và desktop. Để kiển tra website có thể tương thích trên hầu hết tất cả các thiết bị hay chưa bạn chỉ cần thu nhỏ kích cỡ trình duyệt tùy ý và xem sự biến đổi trong trang là sẽ hiểu. Tại sao cần tạo Responsive Menu và ứng dụng Responsive Web Design? Trong bài viết này chỉ là một phần nhỏ khi ứng dụng Responsive Web Design vì tổng thể thì cần phải áp dụng trên toàn trang. Tuy nhiên không phải Site có hỗ trợ Responsive tức là sẽ có một Responsive Navigation đẹp. Chúng ta cần áp dụng Responsive Web Design bởi vì như thế Google đánh giá mức độ thân thiện (Friendly Site) của website cao hơn. Đây cũng là một trong những đánh giá của google có liên quan đến vấn đề seo cho website. Responsive Navigation này hình dáng thế nào? Hình ảnh demo mình chụp trực tiếp trên màn hình: Responsive Navigation for Blogspot Live Demo Làm sao để tạo một Responsive Menu cho Blogspot? Bước 1: Đăng nhập vào trang quản lý của blogspot, chọn Mẫu (Template)—>Chỉnh sửa HTML (Edit HTML) Bước 2: Thêm code jQuery cho Responsive Navigation Tìm đoạn code: Xem Code Thêm vào bên trên: Xem Code Bước 3: Code HTML cho Responsive Navigation Bước này các bạn cần biết được hiện tại thì menu của blogspot đang ở phần nào. Thường thì menu sẽ được sử dụng một phần tử div để bao gọn nó và trong đó là một danh sách sử dụng ul và li. Nếu các bạn đã thêm và từng chỉnh sửa menu cho blog của mình các bạn sẽ biết nó nằm ở vị trí nào. Như trên Blog của tôi code menu cũ sẽ như thế này: Xem Code Và code HTML cho Responsive Navigation mới (thay toàn bộ code cũ bằng code mới): Xem Code Bước 4: Thêm CSS cho Responsive Navigation Các bạn tìm đoạn code Xem Code Thêm vào bên trên: Xem Code Và bây giờ hãy ra trang chủ để xem Responsive Menu mới nhé. Hình chụp demo: Mẫu trên mobile này mặc định menu sẽ ẩn. Muốn hiện danh sách menu các bạn cần phải nhấn vào chữ menu để ẩn hoặc hiện. Responsive Navigation trên Mobile Responsive Navigation trên Tablet Responsive Navigation trên Desktop Trong bài viết sau mình sẽ giới thiệu với các bạn một vài công cụ để các bạn có thể xem trực tiếp trên các thiết bị di động khác nhau thì website, blog của bạn sẽ hiển thị ra sao nhé! Trích Nguồn: tohaitrieu.net
