Thanh Menu xổ xuống đèn mờ bí ẩn cho Blogspot Blogger
![[Tips] - Thanh Menu xổ xuống đèn mờ bí ẩn cho Blogspot Blogger](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUv_Ni2kbQwPodqbtfN6ei0naqeYaN1RbwI40nyUXTx0-XjBjLzxP4FmGVJ-3CvJ-3P07Hgdyb8z98XRNtlX9r7E-z6EF3FTMEhvdYq4m0_iA0jrHV2HrsC8Gxcf6px02XpEmwNohFGlN-/s1600/menu.png "[Tips] - Thanh Menu xổ xuống đèn mờ bí ẩn cho Blogspot Blogger")
Hôm nay mình 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ẽ.
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 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ímCtrl + 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/AVvXsEi6sNr7zosUA9YU5pvnDgYTm1NrToL37YbS5Ax-llHGrQpNbbttkLMX5v5R1WOVoTN5zVmHq4mC9yQvU89Mk8QT-Y5UEQiOj6oy3T9dPOL35tWWSjp4-RTI2zHyV6wNXtwmrtreXdeuqGA1/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/AVvXsEjW6rB9q5CR1G_3SOtDVxAHinYzobNSp_-QJYDXgkmxtSbc5hJpdO3wPP6pkht4vF9FlxKPhpUEPNQ9qODiGA8OrEcRc7ibLgfju1LyI5VbEjvl2k2gA1fVTCKJnnfqTHEBOomEZJtcOF39/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/AVvXsEi8c8ojcwhCqYFpSyWEbBjM7elvwBVkklMeXuL3vMDSGSaBILhmULrRxvmta4cLrZARHVzryz0dTFdHYMsTUo3tfvukpaZN7tqy0vksmGFoESUKcMEPwM_fja8IQ-0otPfKk_5lqYqLoea-/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.
Share This:
Khóc Cười24h
Chào mừng các bạn đến với Blog Khóc Cười24h. Thông qua blog mình chia sẻ nhiều clip hài hước, nhạc, ảnh vui... Mình rất mong được sự ủng hộ nhiệt tình của các bạn bằng cách comment bài viết, chia sẻ bài viết hoặc liên hệ với mình qua blog này! Mình xin cảm ơn!
No Comment to " Thanh Menu xổ xuống đèn mờ bí ẩn cho Blogspot Blogger "