• Giới thiệu
  • Liên hệ
  • Điều khoản
  • Bảo mật
Tech News, Magazine & Review WordPress Theme 2017
  • Home
  • Designer
    • PHOTOSHOP
      • Tutorial
      • Download
    • ILLUSTRATOR
      • Tutorial
      • Download
    • LIGHTROOM
      • Tutorial
      • Download
    • PHOTOGRAPHY
  • Blogspot
    • Template Blogspot
    • Thủ Thuật Blogspot
  • WordPress
    • Plugin WordPress
    • Theme WordPress
    • Thủ Thuật WordPress
  • Thủ Thuật
    • Công Nghệ
    • Web
    • Windows
  • Tài Liệu
    • Lập Trình
    • Khóa học
    • Phần mềm
    • Tiktok
  • GAME
    • Game Offline
    • Game Online
No Result
View All Result
  • Home
  • Designer
    • PHOTOSHOP
      • Tutorial
      • Download
    • ILLUSTRATOR
      • Tutorial
      • Download
    • LIGHTROOM
      • Tutorial
      • Download
    • PHOTOGRAPHY
  • Blogspot
    • Template Blogspot
    • Thủ Thuật Blogspot
  • WordPress
    • Plugin WordPress
    • Theme WordPress
    • Thủ Thuật WordPress
  • Thủ Thuật
    • Công Nghệ
    • Web
    • Windows
  • Tài Liệu
    • Lập Trình
    • Khóa học
    • Phần mềm
    • Tiktok
  • GAME
    • Game Offline
    • Game Online
No Result
View All Result
Tin Tức Tổng Hợp
No Result
View All Result

Tạo menu phụ cho blogspot trên giao diện mobile

admin by admin
Tháng Chín 23, 2022
Home Blogspot

Chào các bạn, hiện nay trải nghiệm người dùng đang được những người làm website quan tâm. Mỗi người đều có những ý kiến khác nhau về trải nghiệm người dùng. Tuy nhiên, quan trọng nhất vẫn là sở thích của mỗi người. Ngày hôm nay mình sẽ hướng dẫn các bạn cách Tạo menu phụ cho blogspot trên giao diện mobile.

Tạo menu phụ cho blogspot
Tạo menu phụ cho blogspot

Chả là có người xem web thường xuyên thấy khó chịu về việc không tìm thấy menu nó ở chỗ nào. Rồi thì là và mà tại sao không làm cho cái menu nó fix luôn ở trên đi bla bla bla. Vấn đề là làm vậy nó sẽ che mất một ít nội dung và nhìn cũng không đẹp lắm. Tuy nhiên có người lại thích như vậy nên mình sẽ hướng dẫn các bạn một cách làm cực kỳ đơn giản. Các bạn có thể dùng để hiển thị menu hay thông tin liên hệ đều được. Đặc biệt, cách này có thể áp dụng cho blogspot hay wordpress đều ok và rất nhẹ nhàng không làm web bị năng khi tải trang.

Nội dung

  • Tạo menu phụ cho blogspot trên giao diện mobile
  • Kết luận
    • Bài viết liên quan:

Tạo menu phụ cho blogspot trên giao diện mobile

Code HTML

Các bạn paste đoạn html vào trước thẻ </body>

<div class="fixmenu">
 <input type="button" id="btn1" value="Menu" style="width: 25%; height: 50px;"/>
 <div id="menudichvu" class="an">
  <a class="dichvu" href="#">Dịch vụ 1</a>
  <a class="dichvu" href="#">Dịch vụ 2</a>
  <a class="dichvu" href="#">Dịch vụ 3</a>
  <a class="dichvu" href="#">Dịch vụ 4</a>
  <a class="dichvu" href="#">Dịch vụ 5</a>
  <a class="dichvu" href="#">Dịch vụ 6</a>
 </div>
        <script language="javascript">
   var x = document.getElementById("menudichvu");
            document.getElementById("btn1").onclick = function () {
    if (x.className === "an") {
                 document.getElementById("menudichvu").style.display = 'block';
     x.className ="hien";
    } else {
     document.getElementById("menudichvu").style.display = 'none';
     x.className ="an";
    }
            };
        </script>
 </div>

Code CSS

Đoạn CSS các bạn chèn vào trong trước </b:skim> (đối với blogspot) hoặc chèn vào trong file style.css (đối với wordpress).

#menudichvu {display:none;}
a.dichvu {display:block; background:#dedbdb;color: black;margin-bottom:2px;text-align:center;padding: 15px 5px 15px 5px;text-decoration:none}
a:hover.dichvu {background:#a3a3a3;color:white;}
#menudichvu {background-color:#63687a;min-height: 180px;}
.fixmenu {display:none;position: fixed;top: 15px;left: 0;width: 100%;z-index: 1000;}
#btn1 {margin-left: 79%;}
@media only screen and (max-width:800px) {
  .fixmenu {display:block;}
}

Kết luận

Chỉ vậy thôi là xong, có thể với các giao diện khác nhau nó sẽ bị xô lệch đi chút ít, các bạn sửa một chút kích thước trong CSS là được. Các bạn có thể chỉnh CSS cho đẹp hơn hoặc sử dụng nó như môt tiện ích khác trên website chứ không nhất thiết là phải dùng làm menu nhé. 

Đánh giá bài viết
[Total: 0 Average: 0]

Bài viết liên quan:

  1. Chia Sẻ Bộ Social Icons Tuyệt Đẹp Cho Blogspot
  2. Tạo trang chuyển hướng liên kết ngoài cho blogspot
  3. How to Create a Blogger Account?
  4. Customizable Related Posts Widget for Blogger
  5. How to Add Font Awesome Social Icons in Blogger
Tags: Tạo menu phụ cho blogspot
admin

admin

Next Post
Cập nhật các khóa học UDEMY miễn phí

Cập nhật các khóa học UDEMY miễn phí

Free PSD cổ trang siêu đẹp

Free PSD cổ trang siêu đẹp (3GB)

So sánh Google Adsense và MGID

So sánh Google Adsense và MGID

Login
guest
guest
0 Góp ý
Inline Feedbacks
Xem tất cả các bình luận

Ân sủng là gì? Sự ân sủng là gì?

Misoa là ai? Nữ MC lên tiếng “bị bạn trai tác động vật lý”

DQ là số điện thoại của ai? Vì sao gọi cho bạn?

M3p là ai? Làm nghề gì?

Quỷ Satan Là Ai? Sức Mạnh Của Quỷ Satan Là Gì?

Satan là ai? 4 câu truyện đáng sợ liên quan đến Satan

  • Viết BLog
    • Giới thiệu
    • Liên hệ
    • Điều khoản
    • Bảo mật

    © 2021 Đoàn Hải Blog

    No Result
    View All Result
    • Home
    • Designer
      • PHOTOSHOP
        • Tutorial
        • Download
      • ILLUSTRATOR
        • Tutorial
        • Download
      • LIGHTROOM
        • Tutorial
        • Download
      • PHOTOGRAPHY
    • Blogspot
      • Template Blogspot
      • Thủ Thuật Blogspot
    • WordPress
      • Plugin WordPress
      • Theme WordPress
      • Thủ Thuật WordPress
    • Thủ Thuật
      • Công Nghệ
      • Web
      • Windows
    • Tài Liệu
      • Lập Trình
      • Khóa học
      • Phần mềm
      • Tiktok
    • GAME
      • Game Offline
      • Game Online

    © 2021 Đoàn Hải Blog

    wpDiscuz
    0
    0
    Rất thích suy nghĩ của bạn, hãy bình luậnx
    ()
    x
    | Reply