Hôm nay, Vinll sẽ hướng dẫn các bạn thủ thuật blogspot tạo một Menu đẹp mang phong cách mạnh mẽ cho blogspot. Loại Menu này rất thích hợp dành cho các trang tin về game, công nghệ,… hay dành cho các bạn có cá tính mạnh mẽ. Để thực hiện thủ thuật blogspot tạo Menu này cực kỳ đơn giản, các bạn chỉ cần thực hiện theo các bước mà Vinll hướng dẫn sau đây 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 ]]></b:skin> và chèn đoạn code dưới đây vào 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/AVvXsEh-LXAg_eBrfbD-5-bPmaAe1LfOjWChk8LR5toyAxEKKXXGRuCOUlgQkTWpOWRzdzbM-VUBoZOWb03FVSj-0B3WVANfB_m60zrWEJluNqpjahDANh3B-igJzdWdhBgJt5EMi7kGzU9OaAYQ/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/AVvXsEgyc2f_CwO463X_3QpICXjhx44XoX68wKl2Py0u-4jtA93Izclld9ppPyQPhHpXIijSgFf0zFMbrboElCPMGjwZbxi3-4KL4gR2ZuQUCyzywFvIFoQz0jIV0LvOQEtz0a-loMmM47sS4VbJ/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/AVvXsEgk6lz8VLAsuN-mVQX8Ax-ELx_u1LNLH4Kd-X6GWt_d_f_VvXtaQQRUPef7objibyvuYNeOU8F2aoKDfk4DNB5lxpKuOfZwNXhuu9mqPhbIkw3-ywIdcKU7QEnvYMlnHbXNJyzLTIm60YOF/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 dưới đây vào một widget HTML ngang ở trên cùng, hoặc vào HTML chính của trang và tìm đến chổ bạn muốn đặt vị trí menu.
Cách 1 – Chèn vào một widget HTML/Javascript
Đầ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.
<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.vinll.blogspot.com/">Back</a></li>
<div id="lavalamp"></div>
</ul>Cách 2 - Chèn trực tiếp vào HTML của website
Ở đây, Vinll 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ã trên vào dưới <body> nhé! sau đó chèn đoạn mã trên vào dưới nhé!
Vậy là đã xong thủ thuật blogspot tạo Menu đẹp cho blogspot của bạn rồi! Chúc các bạn thành công với hướng dẫn mà Vinll đã chia sẻ ở trên nhé!
Tags:
thu-thuat-blogspot
