[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> và chèn trước ]]></b:skin>. 

#abt-nav,#abt-nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#abt-nav {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXRsVDrJ8Z-tHLYL1BQ9pXU4GXAwifvE-9KOjLuSjG2xnW5K0gzItN09GD_i52uA_sPhzoveqkqKvjxFgqMDSTv-RZGKumILcB9LaQ_UKXpoGxoCsT0LBei8tkM8gf913DEvvwTKEGHBdq/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjwomCKbPZ8PSB4tiE2Dm96uB-lAliCRBAogICHELjrXc4YnECz6TRXAzP3nmHIXfiaMXd9JNWWMyPHsLw0S9mP_MvfUeEYCnFLUAeCg9Im_CeYnIYQ1kdQ2H8dhcqtwWA3EZgVlxu8nKL/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhecWBbEEC2owr9YQ63j2_CH2XfzaQwDsIUdiesBzKHyJ4S2muZLSO3Z2WE0sQr4H8ZH5tNRTdozoAUFsXKOaljRc-2Wzq8C1qXQNtaEV7gpz551KaR6eTS6EqBZt_P2bfMOwFWDSp4Xy0O/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/JavaScript và copy đoạn mã sau vào khung và Save 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