Thư viện

Trải nghiệm

Thứ Sáu, tháng 12 19, 2014

[Tips] - Thanh Menu xổ xuống đèn mờ bí ẩn cho Blogspot Blogger

Thiết kế menu cho blogspot, menu xổ xuống dropmenu cho blogspot cực kỳ dễ dàng, làm menu trượt cho blogger!

Chia sẻ:
[Tips] - Thanh Menu xổ xuống đèn mờ bí ẩn cho Blogspot Blogger
Mẫu Menu rất ấn tượng và mạnh mẽ dành cho các website mạnh mẽ!
Hôm nay Terocket sẽ hướng dẫn các bạn thủ thuật blogspot liên quan đến Menu cho blogspot có tên là [Tips] - Thanh Menu xổ xuống đèn mờ bí ẩn cho Blogspot Blogger. Thủ thuật này dành cho các bạn muốn tạo một menu bí ẩn, mạnh mẽ, xổ xuống tốc độ nhanh và hiện đại. Menu [Tips] - Thanh Menu xổ xuống đèn mờ bí ẩn cho Blogspot Blogger thích hợp dành cho các trang tin game, tin công nghệ hay các hội bí mật...dành cho các bạn nam giới và cực kỳ mạnh mẽ.

Live Demo

Lợi thế của tiện ích menu này chính là nhẹ, được làm hoàn toàn từ CSS và tốc độ tải nhanh, không ảnh hưởng gì đến hiệu năng của website, đặc biệt chuẩn SEO. Giờ thì cùng Terocket chúng tớ thực hiện thủ thuật blogspot [Tips] - Thanh Menu xổ xuống đèn mờ bí ẩn cho Blogspot Blogger này nào. Để thực hiện thủ thuật này cực kỳ đơn giản, các bạn chỉ cần thực hiện theo các bước sau là sẽ thành công.

Bước 1 - Chèn CSS vào HTML chính của website

Đầu tiên các bạn hãy vào Blog Title → Template → Edit HTML. Nhấn tổ hợp phím Ctrl + F. Tìm đến đoạn <b:skin>...</b:skin> và chèn vào giữa nó. Hoặc tìm kiếm ]]></b:skin>chèn trước ]]></b:skin>

#abt-nav,#abt-nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#abt-nav {
    background: url('http://4.bp.blogspot.com/-eJsxOr1111M/VJN8VaELasI/AAAAAAAABV0/pR5gPJawPrI/s1600/Menu1.png') no-repeat scroll 0 0 transparent;
    clear: both;
    font-size: 12px;
    height: 58px;
    padding: 0 0 0 9px;
    position: relative;
    width: 100%;
}
#abt-nav ul {
    background-color: #222;
    border:1px solid #222;
    border-radius: 0 5px 5px 5px;
    border-width: 0 1px 1px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
    left: -9999px;
    overflow: hidden;
    position: absolute;
    top: -9999px;
    z-index: 2;
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -moz-transition: -moz-transform 0.1s linear;
    -ms-transition: -ms-transform 0.1s linear;
    -o-transition: -o-transform 0.1s linear;
    -webkit-transition: -webkit-transform 0.1s linear;
    transition: transform 0.1s linear;
}
#abt-nav li {
    background: url('http://4.bp.blogspot.com/-3KmCMhrXTqg/VJN8Vdc3FaI/AAAAAAAABWA/chuPnYYih2Y/s1600/Menu2.png') no-repeat scroll right 5px transparent;
    float: left;
    position: relative;
}
#abt-nav li a {
    color: #FFFFFF;
    display: block;
    float: left;
    font-weight: normal;
    height: 30px;
    padding: 23px 20px 0;
    position: relative;
    text-decoration: none;
    text-shadow: 1px 1px 1px #000000;
}
#abt-nav li:hover > a {
    color: #00B4FF;
}
#abt-nav li:hover, #abt-nav a:focus, #abt-nav a:hover, #abt-nav a:active {
    background: none repeat scroll 0 0 #121212;
    outline: 0 none;
}
#abt-nav li:hover ul.subs {
    left: 0;
    top: 53px;
    width: 180px;
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}
#abt-nav ul li {
    background: none;
    width: 100%;
}
#abt-nav ul li a {
    float: none;
}
#abt-nav ul li:hover > a {
    background-color: #121212;
    color: #00B4FF;
}
#lavalamp {
    background: url('http://1.bp.blogspot.com/-8IK_bj0a8D8/VJN8VWkwVHI/AAAAAAAABVw/CCv-Pyt7noE/s1600/Menu3.png') no-repeat scroll 0 0 transparent;
    height: 16px;
    left: 13px;
    position: absolute;
    top: 0px;
    width: 64px;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
}
#lavalamp:hover {
    -moz-transition-duration: 3000s;
    -ms-transition-duration: 3000s;
    -o-transition-duration: 3000s;
    -webkit-transition-duration: 3000s;
    transition-duration: 3000s;
}
#abt-nav li:nth-of-type(1):hover ~ #lavalamp {
    left: 13px;
}
#abt-nav li:nth-of-type(2):hover ~ #lavalamp {
    left: 90px;
}
#abt-nav li:nth-of-type(3):hover ~ #lavalamp {
    left: 170px;
}
#abt-nav li:nth-of-type(4):hover ~ #lavalamp {
    left: 250px;
}
#abt-nav li:nth-of-type(5):hover ~ #lavalamp {
    left: 330px;
}
#abt-nav li:nth-of-type(6):hover ~ #lavalamp {
    left: 410px;
}
#abt-nav li:nth-of-type(7):hover ~ #lavalamp {
    left: 490px;
}
#abt-nav li:nth-of-type(8):hover ~ #lavalamp {
    left: 565px;
}

Bước 2 - Chèn code sau vào một widget HTML ngang ở trên cùng, hoặc vào HTML chính của trang tìm đến chổ bạn muốn đặt vị trí menu. Thường sẽ ở trên cùng!

Cách 1/ Ở đây Terocket sẽ hướng dẫn các bạn chèn vào một widget HTML/Javascript nhé! Đầu tiên bạn vào Blog Title → Layout → Add Widget → HTML/JavaScriptcopy đoạn mã sau vào khungSave As.

Cách 2/ Hoặc nếu bạn muốn chèn trực tiếp vào HTML của website, ở đây Terocket sẽ hướng dẫn bạn chèn Menu này ở trên cùng của website luôn. Bạn vào Blog Title → Template → Edit HTML. Nhấn tổ hợp phím Ctrl + F và tìm kiếm <body> sau đó chèn đoạn mã sau vào dưới <body> nhé!

<ul id="abt-nav">
    <li><a href="/">Home</a></li>
    <li><a class="hsubs" href="#">Menu 1</a>
        <ul class="subs">
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
            <li><a href="#">Submenu 3</a></li>
            <li><a href="#">Submenu 4</a></li>
            <li><a href="#">Submenu 5</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="#">Menu 2</a>
        <ul class="subs">
            <li><a href="#">Submenu 2-1</a></li>
            <li><a href="#">Submenu 2-2</a></li>
            <li><a href="#">Submenu 2-3</a></li>
            <li><a href="#">Submenu 2-4</a></li>
            <li><a href="#">Submenu 2-5</a></li>
            <li><a href="#">Submenu 2-6</a></li>
            <li><a href="#">Submenu 2-7</a></li>
            <li><a href="#">Submenu 2-8</a></li>
        </ul>
    </li>
    <li><a class="hsubs" href="#">Menu 3</a>
        <ul class="subs">
            <li><a href="#">Submenu 3-1</a></li>
            <li><a href="#">Submenu 3-2</a></li>
            <li><a href="#">Submenu 3-3</a></li>
            <li><a href="#">Submenu 3-4</a></li>
            <li><a href="#">Submenu 3-5</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    <li><a href="#">Menu 6</a></li>
    <li><a href="http://www.terocket.com/">Back</a></li>
    <div id="lavalamp"></div>
</ul>

Thế là đã xong thủ thuật blog [Tips] - Thanh Menu xổ xuống đèn mờ bí ẩn cho Blogspot Blogger này rồi. Chúc các bạn thực hiện thành công và có một blog thật là đẹp và ấn tượng. Bạn nào làm được rồi thì share nha, còn chưa được thì gửi comment ở dưới, mình sẽ vào giải đáp các bạn.

Một số nội dung liên quan đến tạo Menu cho Blogspot tại Terocket

  1. CSS Dropdown Menu cho Blogger
  2. Tạo dropmenu xổ dọc một cấp đẹp cho blogspot
  3. Fly drop Menu đẹp từ CSS cho blogger
  4. Dropmenu tích hợp nhận xét và bài đăng mới nhất cho blogger
  5. Menu ngang với icon ẩn hiện từ CSS3 cho blogger
  6. Menu xổ dọc bằng click chuột cho blogger
  7. Menu xổ dọc một cấp đẹp từ script và css cho blogspot
  8. Menu xổ dọc từ dưới lên trên cho blogspot
  9. CSS Dropdown menu đơn giản cho blogspot
  10. Responsive dropmenu đơn giản từ CSS3 cho blogger
  11. Tạo Responsive Dropdown Menu trong Blogger
  12. Colume Dropmenu có Search cho blogspot
  13. Css3 Flying Drop Down Menubar cho Blogger
  14. Dropmenu xổ dọc theo cột cho blogspot
  15. Dropmenu đa cấp từ CSS3 và icon
  16. Menu sổ nhiều cấp giống facebook cho blogger/blogspot
  17. Menu xổ dọc với 2 cột sub cho blogger
  18. AJAX Navigation Menu drop trượt đẹp cho blogger
  19. Mega Dropmenu từ CSS cho blogger/blogspot
  20. Mega Drop Down Menu từ CSS cho Blogger
  21. Menu xổ dọc với màu tabs thay đổi cho blogger
  22. Menu trượt lên xuống từ CSS3 cho blogspot
  23. Hướng dẫn chi tiết cách tạo menu xổ dọc với CSS 3
  24. Hướng Dẫn Chi Tiết Tạo Drop Menu Nhiều Cấp
  25. 123 Flash menu - Hướng dẫn làm Menu flash cho Blog/website
  26. Menu dọc xổ xuống dạng thư mục từ Jquery style 2
  27. Menu luôn hiển thị trên đầu hoặc chân blogspot
  28. Menu ngang sổ dọc nhiều cấp sử dụng CSS3 - style3
  29. Menu DropDown 1 cấp cho blogspot Style 7
  30. Menu DropDown 1 cấp cho blogspot Style 6
  31. Menu DropDown 1 cấp cho blogspot Style5
  32. Menu Drop Down 1 cấp cho blogspot Style 4
  33. Tạo drop menu kết hợp xổ ngang và sổ dọc
  34. Tạo Drop Menu đơn giản Style 2 Có search
  35. Menu ngang xổ dọc xuống nhiều cấp (Kiểu 2) - Update
  36. Drop Menu ngang xổ dọc một cấp Style 3
  37. Menu ngang xổ dọc một cấp cho blogspot Style 2
  38. Menu ngang xổ dọc xuống nhiều cấp (kiểu 1)
  39. Menu ngang xổ dọc một cấp cho blogspot Style 1
  40. Menu dạng thư mục dơn giản cho blogger
  41. Drop Menu Ngang với hiệu ứng jquery
  42. Tạo Dropdown Menu đơn giản Style 1
  43. Menu "Megaanchor" dạng nén cho mọi website - blogspot với jQuery
  44. Menu dọc chuyển động khi dê chuột - Vertical CSS3 Menus
  45. Menu dọc xổ xuống dạng thư mục từ JQuery cho blogspot
  46. Hướng dẫn tạo menu ngang sổ dọc cho blogspot
  47. Flip Menu - Menu dọc với hiệu ứng lật bằng JQuery
  48. Tạo menu bằng hình ảnh với hiệu ứng Rock & Roll
  49. Menu xổ dọc một cấp Style 3 bằng CSS 3 cho blogspot
  50. Tạo menu giống trang theothao.zing.vn
  51. Sexy Sliding menu sidebar trượt độc đáo sử dụng Mootools
  52. Tạo Menu ngang có hiệu ứng khi rê chuột
  53. Menu dọc xổ ngang nhiều cấp cho blogspot
  54. Tạo 1 menu Drop Down đơn giản
  55. Tạo Menu dọc cho nhãn, trang đặt ở Siderbar
  56. Các mẫu Menu Ngang cho Blogspot
  57. Tạo menu dọc cho blogger
  58. Tạo Menu ngang cho blogspot và CSS menu liDock
  59. Menu dọc với hiệu ứng đẹp mắt ở Sidebar
Trứng Vịt - Terocket

21 nhận xét:

  1. WoW, template mới ấn tượng đó ha :D

    Trả lờiXóa
  2. Anh Thành cho em hỏi ngoài chủ đề này chút nha anh. Anh xem va chỉ dùm em cách khắc phục chữ sao nó nhảy lung tung không gọn gàng nhìn nó sao ý. Ở tranh chủ nha anh Thanks anh trước.

    http://rongtienhoitu.blogspot.com/

    Trả lờiXóa
  3. ad cho mình hỏi blog mình bị lỗi gì mà mình làm theo hướng dẫn nó không ra được như ad? blog mình 'http://tinhyeuamthuc.blogspot.com '
    ad giup mình với

    Trả lờiXóa
    Trả lời
    1. Là lỗi font chữ hả bạn ? Blog bạn dùng font Oswald và san-serif. Vậy bạn chỉ cần sửa tất cả tên font đó trong template thành các font tiếng Việt như Arial, Helvetica, Tahoma, Verdana...
      http://www.qdoan.name.vn/

      Xóa
    2. Bạn nên chèn vào vị trí của menu hiện tại nhé ! Phải xóa code của menu cũ rồi paste luôn code menu này vào vị trí đó !

      Xóa
  4. Thưa anh! Cho em hỏi nếu muốn xóa cái thanh menus cũ của template thì làm như thế nào ạ?

    Trả lờiXóa
  5. Anh ơi cho mình hỏi: mình muốn tạo một nút đăng nhập trong blog bằng face thì làm thế nào? Thấy trên trang phát triển của face hướng dẫn tùm lum, về tin mình yếu, tiếng anh thì kém. khổ thân!
    Blogs mình là: www.mathbooksviet.blogspot.com
    Mong được góp ý từ anh!

    Trả lờiXóa
  6. cái này làm với website bình thường thì làm sao vậy admin?

    Trả lờiXóa
  7. cho mình hỏi mình muốn làm như phần chế ảnh giống như cái này http://haivc.com/new cho web của mình http://haivb.blogspot.com/ thì làm thế nào. Mình làm giống như bạn nhưng nó ko co lên thanh menu

    Trả lờiXóa
  8. mình làm xong rồi nhưng không biết làm sao để gắn link vào cái menu đó. bạn có thể giúp mình ko

    Trả lờiXóa
    Trả lời
    1. Mình ví dụ:
      <li><a href="#">Submenu 1</a></li>
      Dấu # bạn sửa thành link !

      Xóa
  9. Menu rất pro, Admin cho mình hỏi muốn đổi nền thanh menu sang màu xanh chẳng hạn thì phải chỉnh code ở chỗ nảo vậy anh? thanks

    Trả lờiXóa
    Trả lời
    1. Bạn sửa dòng này:
      background: url('http://4.bp.blogspot.com/-eJsxOr1111M/VJN8VaELasI/AAAAAAAABV0/pR5gPJawPrI/s1600/Menu1.png') no-repeat scroll 0 0 transparent;

      thành:
      background: #1a7bb7

      Xóa
    2. cám ơn bạn đã chỉ, đã đổi sang nền xanh rồi, nhưng vẫn còn thanh dọc màu đen, nhìn rất xấu, bạn biết cách đổi màu những thanh dọc đen này ko? thanks

      Xóa
  10. Tôi đã làm đúng theo HD, song thanh menu lại nằm dưới đáy và sát lề trái. Muốn nó nằm trên đầu Blog và ở chính giữa thì phải làm sao hả bạn ? MONG !!!

    Trả lờiXóa
  11. chèn rồi mà không hiện ra anh ơi

    Trả lờiXóa
  12. bạn ơi đê di chuyễn vao phần mình cần hiển thị thì làm sao ạ

    Trả lờiXóa
  13. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  14. ạch giao thông vận tải thành phố và quy hoạch chung vùng thủ đô, chuẩn bị trước những khâu, những việc chuẩn bị thực hiện ngay khi quy hoạch đư in tem vỡ tại hà nội
    ng trở thành đề tài bàn tán, các cô bức xúc lắm, nhưng biết làm thế nào được khi họ mọi người khô
    nam ngoc cau
    ba kích
    vừa qua, chồng cô làm tài xế taxi ở TP.HCM đã được hai khách thuê chở nhưng khi vừa lên xe, cô con gái (bị cho là hoa hậu Kỳ Duyên) đã giục đi nhanh. Tuy nhiên, theo yêu cầu của công an, người lái xe buộc phải đi vòng và vì vậy đã khiến hai vị khách không hài lòng.

    Trả lờiXóa
  15. Anh ơi, cho em hỏi cái thanh menu của em nó xổ lên và xổ xuống rất chậm, làm sao để tốc độ nó nhanh hơn ak ?

    Trả lờiXóa