Remitano

Bài viết cùng chủ đề

(Vietmkt360.com) - Sau nhiều bài gần đây mình chia sẻ đến các bạn về mảng Kiếm tiền trên mạng thì có khá nhiều ý kiến muốn mình chia sẻ cách để tạo ra một website/blog chất lượng và với giao diện (template) đẹp mắt . Hôm nay mình quay lại chủ đề Thủ thuật Blogspot với bài viết chia sẻ đến bạn đọc và fan hâm mộ Blog một thủ thuật tạo thanh Menu rất mới mẻ và độc đáo. Cách tạo thanh Menu xổ dọc này sử dụng JQuery nên các bạn có thể hoàn toàn yên tâm về tốc độ tải trang . Đây theo mình là một thủ thuật khá độc đáo và với màu sắc bắt mắt hy vọng sẽ mang đến cho Blog của các bạn giao diện đẹp mắt hơn rất nhiều . 
Ảnh minh họa :

Các bước thực hiện :
1. Đăng nhập blogger
2. Chọn mẫu ->Chỉnh sửa HTML -> Tìm thẻ </head> và dán code bên dưới trên nó : 
<link href = "http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/boilerplate.css" rel = "stylesheet" type = "text / css">

<link href = "http://preview.bloggertrix.com /coloful_unique_dropdown_menu/js/SpryMenuBarHorizontal.css "rel =" stylesheet "type =" text / css ">

<link href =" http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/SpryMenuBarVertical.css "rel =" stylesheet " type = "text / css">

<link href = 'http:? //fonts.googleapis.com/css gia đình = Noto + Serif' rel = 'stylesheet "type =' text / css">

<script src = "http : //preview.bloggertrix.com/coloful_unique_dropdown_menu/js/respond.min.js "> </ script>

<script src =" http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/SpryMenuBar.js "type =" text / javascript "> </ script>

<style>

.menubar {width: 750px; float: left; -moz-box-shadow: 0px 0px 19px # 000000; -webkit-box-shadow: 0px 0px 19px rgb (0, 0, 0); box-shadow: 0px 0px 8px rgb (0, 0, 0); padding: 7px; border-radius: 4px; position: relative; margin-top: 50px; background-color: rgb (255, 255 , 255); margin-left: 23%;

</ style>
3. Tìm thẻ </body> và dán code dưới trên nó
<script type = "text / javascript">
var MenuBar1 = new Spry.Widget.MenuBar ("MenuBar1", {imgDown: "http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/SpryMenuBarDownHover.gif",
MenuBar2 = new Spry.Widget.MenuBar ("MenuBar2",
4. Lưu mẫu
5. Chọn bố cục -> Thêm HTML/Javascript và dán code dưới vào         
<div class = "menubar"> <ul id = "MenuBar1" class = "MenuBarHorizontal"> <style li = "text-indent: 10px; width: 80px; height: 44px; background-color: # 1d75bd";> < một id = "navhd" href = "#"> Home </a> </ li> <li class = "choosedestination"> <a id = "navhd" class = "MenuBarItemSubmenu" href = "http: // www. Vietmkt360.com/ "style =" "> thủ thuật Blogspot </a> <ul id =" destination1 "> <li style =" height: 34px; line-height: 10px; "> <a class =" MenuBarItemSubmenu "href = "#"> mục 3.1 </a> <ul id = "destination1" class = "" style = "margin-left: 175px; margin-top: -2px;"> <li id ​​= "desti_nav"> <a href = "#" class = ""> mục 3.1.1 </a> </ li> <li id ​​= "desti_nav"> <a href="#" class=""> mục 3.1.2 </a> </ li> </ ul> </ li> <li id ​​= "desti_nav"> <a href="#"> mục 3.2 </a> </ li> <li id ​​= "desti_nav"> <a href = "#"> mục 3.3 </a> </ li> <li id ​​= "desti_nav"> <a href="#"> mục 3.3 </a> </ li> <li id ​​= "desti_nav"> <a href = "#"> mục 3.3 </a> </ li> <li id ​​= "desti_nav"> <a href="#"> mục 3.3 </a> </ li> <li id ​​= "desti_nav"> <a href="#"> mục 3.3 </a> </ li> <li id ​​= "desti_nav"> <a href="#"> mục 3.3 </a> </ li> <li id ​​= "desti_nav "> <a href="#"> mục 3.3 </a> </ li> <li id ​​=" desti_nav "> <a href="#"> mục 3.3 </a> </ li> </ ul> </ li> <li class = "holidaytp" style = ""> <a id="navhd" class="MenuBarItemSubmenu" href="http://www.Vietmkt360.com/"> Kiếm tiền trên mạng </a> < ul id = "holidayt"> <li style = "height: 34px; line-height: 10px;"> <a class="MenuBarItemSubmenu" href="#"> mục 3.1 </a> <ul id = "holidayt" style = "margin-left: 175px; margin-top: -2px;"> <li id ​​= "holiday_nav"> <a href="#"> mục 3.1.1 </a> </ li> <li id ​​= "holiday_nav"> <a href="#"> mục 3.1.2 </a> </ li> </ ul> </ li> <li id ​​= "holiday_nav"> <a href="#"> mục 3.2 </a> </ li> <li id ​​= "holiday_nav"> <a href="#"> mục 3.3 </a> </ li> </ ul> </ li> <li class = "retriveb" phong cách = "width: 145px;"> <a id="navhd" class="MenuBarItemSubmenu" href="http://www.Vietmkt360.com/"> Thủ thuật Seo </a> <ul id = "retrivemy"> <style li = "height: 34px; line-height: 10px;"> <a class="MenuBarItemSubmenu" href="#"> mục 3.1 </a> <ul id = "retrivemy" style = "margin-left: 175px; margin-top: -2px; "> <li id ​​=" Retrivebk "> <a href="#"> mục 3.1.1 </a> </ li> <li id ​​=" Retrivebk "> <a href = "#"> mục 3.1.2 </a> </ li> </ ul> </ li> <li id ​​= "Retrivebk"> <a href="#"> mục 3.2 </a> </ li > <li id ​​= "Retrivebk"> <a href="#"> mục 3.3 </a> </ li> </ ul> </ li> <li class = "makeanen" style = "width: 127px;" > <a id="navhd" class="MenuBarItemSubmenu" href="#"> Làm một Enquiry </a> <ul id = "makenanEnquery"> <li style = "height: 34px; line-height: 10px;" > <a class="MenuBarItemSubmenu" href="#"> mục 3.1 </a> <ul id = "makenanEnquery" style = "margin-left: 175px; margin-top: -2px;"> <li id ​​= " mkeinq "> <a href="#"> mục 3.1.1 </a> </ li> <li id ​​=" mkeinq "> <a href="#"> mục 3.1.2 </a> </ li > </ ul> </ li> <li id ​​= "mkeinq"> <a href="#"> mục 3.2 </a> </ li> <li id ​​= "mkeinq"> <a href = "#" > mục 3.3 </a> </ li> </ ul> </ li> <li style = "text-indent: 10px; width: 109px; background-image: repeat-x; margin-left: 1px; "> <a id="navhd" href="#"> Liên hệ </a> </ ul> </ div>    
Các bạn thay link và tiêu đề phù hợp với Blog nhé !
6. Lưu lại và xem kết quả 
Hy vọng các bạn sẽ hài lòng với thủ thuật này 
Cám ơn các bạn và chúc các bạn có những Blog đẹp  mắt

Sàn SnapEx

➤ Tham gia Group để cập nhật các tin tức và cách kiếm tiền online mới nhất: KIẾM TIỀN ONLINE - CỘNG ĐỒNG VIỆT
➤ Nhớ Like, Share và Đăng ký kênh Youtube chính thức: TẠI ĐÂY

Bài viết cùng chủ đề

Trước đây Vietmkt360 cũng chia sẻ đến các bạn một số thủ thuật tạo thanh menu khá bắt mắt và có tính thẩm mỹ :


Hôm nay Vietmkt360 sẽ giới thiệu đến các bạn thêm một Thủ thuật tao thanh menu với hiệu ứng 3D trơn tru với jquery. Với hiệu ứng 3D của thủ thuật này Blog của bạn sẽ hoàn toàn mới lạ và hấp dẫn hơn rất nhiều !


Cách thực hiện :
1. Đăng nhập Blogger
2. Chọn mẫu ==> Chỉnh sửa HTML
3. Dán code dưới đây sau 
]]></b:skin>
<style>

@import url(http://fonts.googleapis.com/css?family=Raleway);

#cssmenu,

#cssmenu ul,

#cssmenu ul li,

#cssmenu ul li a,

#cssmenu #menu-button {margin: 0;padding: 0;border: 0;list-style: none;line-height: 1;display: block;position: relative;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}

#cssmenu:after,

#cssmenu > ul:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}

#cssmenu #menu-button {display: none;}

#cssmenu {width: auto;font-family: Raleway, sans-serif;line-height: 1;}

#cssmenu > ul {background: #3db2e1;}

#cssmenu > ul > li {float: left;-webkit-perspective: 1000px;-moz-perspective: 1000px;perspective: 1000px;}

#cssmenu.align-center > ul {font-size: 0;text-align: center;}

#cssmenu.align-center > ul > li {display: inline-block;float: none;}

#cssmenu.align-right > ul > li {float: right;}

#cssmenu > ul > li > a {padding: 16px 20px;font-size: 14px;color: #ffffff;letter-spacing: 1px;text-transform: uppercase;text-decoration: none;background: #3db2e1;-webkit-transition: all .3s;-moz-transition: all .3s;

  -o-transition: all .3s;transition: all .3s;-webkit-transform-origin: 50% 0;-moz-transform-origin: 50% 0;transform-origin: 50% 0;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;

}

#cssmenu > ul > li.active > a {color: #dff2fa;

}

#cssmenu > ul > li:hover > a,

#cssmenu > ul > li > a:hover {color: #dff2fa;-webkit-transform: rotateX(90deg) translateY(-23px);-moz-transform: rotateX(90deg) translateY(-23px);transform: rotateX(90deg) translateY(-23px);

  -ms-transform: none;

}

#cssmenu > ul > li > a::before {position: absolute;top: 100%;left: 0;z-index: -1;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;width: 100%;height: 100%;padding: 16px 20px;color: #dff2fa;background: #19799f;content: attr(data-title);

  -webkit-transition: background 0.3s;-moz-transition: background 0.3s;transition: background 0.3s;-webkit-transform: rotateX(-90deg);-moz-transform: rotateX(-90deg);transform: rotateX(-90deg);

  -webkit-transform-origin: 50% 0;-moz-transform-origin: 50% 0;transform-origin: 50% 0;-ms-transform: translateY(- -18px);

}

#cssmenu > ul > li:hover > a::before,

#cssmenu > ul > li > a:hover::before { background: #3db2e1;}

#cssmenu.small-screen {width: 100%;}

#cssmenu.small-screen > ul,

#cssmenu.small-screen.align-center > ul {

  width: 100%;

  text-align: left;

}

#cssmenu.small-screen > ul > li,

#cssmenu.small-screen.align-center {

  float: none;

  display: block;

  border-top: 1px solid rgba(100, 100, 100, 0.1);

}

#cssmenu.small-screen > ul > li:hover > a,

#cssmenu.small-screen > ul > li > a:hover {

  color: #dff2fa;

  -webkit-transform: none;

  -moz-transform: none;

  transform: none;

  -ms-transform: none;

}

#cssmenu.small-screen > ul > li > a::before {

  display: none;

}

#cssmenu.small-screen #menu-button {

  display: block;padding: 16px 20px;cursor: pointer;font-size: 14px;text-decoration: none;color: #ffffff;text-transform: uppercase;letter-spacing: 1px;background: #3db2e1;}

#cssmenu.small-screen #menu-button:after {

  content: "";position: absolute;right: 20px;top: 17px;display: block;-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;border-top: 2px solid #ffffff;border-bottom: 2px solid #ffffff;width: 22px;height: 3px;

}

#cssmenu.small-screen #menu-button.menu-opened:after {

  border-top: 2px solid #dff2fa;

  border-bottom: 2px solid #dff2fa;

}

#cssmenu.small-screen #menu-button:before {

  content: "";position: absolute;right: 20px;top: 27px;display: block;width: 22px;

  height: 2px;

  background: #ffffff;

}

#cssmenu.small-screen #menu-button.menu-opened:before {

  background: #dff2fa;

}

  </style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script charset='utf-8' src='http://preview.bloggertrix.com/3d_cssmenu/script.js' type='text/javascript'/> 
4. Lưu lại 
5. Chọn bố cục --> Thêm tiện ích HTML/JavaScrip và dán code bên dưới vào

<div id='cssmenu'>

<ul>

   <li class='active'><a href='#'>Home</a></li>

   <li><a href='http://vietmkt360.com/'>Vietmkt360</a></li>

   <li><a href='http://vietmkt360.com/'>Vietmkt360</a></li>

   <li><a href='http://vietmkt360.com/'>Vietmkt360</a></li>

</ul>

</div>
Các bạn sửa lại cho phù hợp với Blog của mình
6. Lưu lại tiện ích HTML/JavaScrip
Chúc các bạn thành công !!!!!!!!!!!!!!!!!!!!!!!

Sàn SnapEx

➤ Tham gia Group để cập nhật các tin tức và cách kiếm tiền online mới nhất: KIẾM TIỀN ONLINE - CỘNG ĐỒNG VIỆT
➤ Nhớ Like, Share và Đăng ký kênh Youtube chính thức: TẠI ĐÂY

Bài viết cùng chủ đề


Bạn đã từng nghĩ sẽ tự tạo cho blog mình một mẫu menu hoàn toàn khác so với các blog khác chư? Nếu chưa thì Viettin365.com chắc chắn bạn sẽ thay đổi các nhìn sau khi đọc bài viết này.

Menu đẹp mờ ảo mang phong cách nữ tính cho blogger
Mẫu meunu xổ dọc hôm nay Viettin365 giới thiệu đến các bạn có điểm đặc biệt là các sub menu mang phong cách hoàn toàn mới đan xen nhau mang lại cảm giác mờ ảo khi nó hiện ra, Màu hồng khá nữ tính nhưng bạn có thể thay đổi nó cho phù hợp với phong cách và màu chủ đạo trong blog của bạn...

Bạn có thể xem demo trực tiếp ở đây:

» XEM DEMO

☼ Thêm Menu hiệu ứng mờ ảo đẹp cho blogger của bạn

1- Đăng nhập vào Blog
2- Vào thẻ Mẫu (Template)
3- Bấm vào nút Chỉnh sửa HTML (Edit HTML)
4- Thêm đoạn code bên dưới vào trước thẻ ]]></b:skin> trong mẫu của bạn:
.aii:before,
.aii:after {
content: " ";
display: table;
}

.aii:after {
clear: both;
}

.aii {
*zoom: 1;
}
/* Menu chính */
.menu {
margin: 50px auto;
width: 800px;
width: fit-content;
}

.menu > li {
background: #FE80DF;
float: left;
position: relative;
transform: skewX(25deg);
}

.menu a {
display: block;
color: #000;
text-transform: uppercase;
text-decoration: none;
font-family: Arial;
font-size: 13px;
}

.menu li:hover {
background: #FE80DF;
}

.menu > li > a {
transform: skewX(-25deg);
padding: 1em 2em;
}

/* Trình Menu thả xuống*/
.submenu {
position: absolute;
width: 200px;
left: 50%; margin-left: -100px;
transform: skewX(-25deg);
transform-origin: left top;
}

.submenu li {
background-color: #FEBFEF;
position: relative;
overflow: hidden;
}

.submenu > li > a {
padding: 1em 2em;
}

.submenu > li::after {
content: '';
position: absolute;
top: -125%;
height: 100%;
width: 100%;
box-shadow: 0 0 50px rgba(0, 0, 0, .9);
}

/* Odd stuff */
.submenu > li:nth-child(odd){
transform: skewX(-25deg) translateX(0);
}

.submenu > li:nth-child(odd) > a {
transform: skewX(25deg);
}

.submenu > li:nth-child(odd)::after {
right: -50%;
transform: skewX(-25deg) rotate(3deg);
}

/* Even stuff */
.submenu > li:nth-child(even){
transform: skewX(25deg) translateX(0);
}

.submenu > li:nth-child(even) > a {
transform: skewX(-25deg);
}

.submenu > li:nth-child(even)::after {
left: -50%;
transform: skewX(25deg) rotate(3deg);
}

/* Xem menu thả xuống */
.submenu,
.submenu li {
opacity: 0;
visibility: hidden;
}

.submenu li {
transition: .2s ease-out transform;
}

.menu > li:hover .submenu,
.menu > li:hover .submenu li {
opacity: 1;
visibility: visible;
}

.menu > li:hover .submenu li:nth-child(even){
transform: skewX(25deg) translateX(15px);
}

.menu > li:hover .submenu li:nth-child(odd){
transform: skewX(-25deg) translateX(-15px);
}
» Tùy chỉnh:
  • background: #FE80DF; là màu nền menu chính khi chưa dê chuột vào
  • background: #FE80DF; Là màu nền của các tiêu đề menu chính và các sub menu xổ xống khi dê chuột lên đó
  • background-color: #FEBFEF; là màu nền của sub menu xổ xuống khi chưa dê chuột lên các submenu con.

5- Lưu mẫu của bạn lại và tiến hành bước tiếp theo.

6- Quay trở lại Bố cục (Layout) blog của bạn và thêm một tiện ích HTML/Javascripts và dán đoạn code bên dưới vào phần nội dung của tiện ích bạn vừa thêm nha (Tất nhiên là bạn có thể thêm nó thẳng vào mẫu (template) của bạn nếu bạn am hiểu về code. Nếu không thì hãy comment ở dưới mình sẽ chỉ vị trí đó cho các bạn).
<ul class="menu aii">
<li><a href="">Menu 1</a></li>
<li>
<a href="">Menu 2</a>
<ul class="submenu">
<li><a href="">Submenu 1</a></li>
<li><a href="">Submenu 2</a></li>
<li><a href="">Submenu 3</a></li>
</ul>
</li>
<li>
<a href="">Menu 3</a>
<ul class="submenu">
<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>
</ul>
</li>
<li><a href="">Menu 4</a></li>
<li><a href="">Menu 5</a></li>
</ul>
7- Lưu tiện ích và xem kết quả
 Chúc các bạn thành công !

Sàn SnapEx

➤ Tham gia Group để cập nhật các tin tức và cách kiếm tiền online mới nhất: KIẾM TIỀN ONLINE - CỘNG ĐỒNG VIỆT
➤ Nhớ Like, Share và Đăng ký kênh Youtube chính thức: TẠI ĐÂY

Bài viết cùng chủ đề

(Viettin365.com) - Với xu hướng để đáp ứng cả về thẩm mĩ và tốc độ load trang rất nhiều nhà thiết kế sử dụng hình ảnh kết hợp với CSS3 trong tiến trình hoạt động của menu. Với kỹ thuật này họ phải tập trung để trang của bạn tải nhanh hơn và tính tương tác cao hơn. Trong hướng dẫn làm meuu này chúng ta sẽ thấy các icon ẩn hiện rất mượt mà khi di chuột trên thanh menu mà không cần sử dụng bất kỳ thư viện JavaScript, tất cả thuần túy chỉ là các biểu tượng và CSS3.
Ảnh minh họa :
Menu ngang hiện Icon khi rê chuột từ CSS3 cho blogger-Viettin365.com

Các bước thực hiện
1.Đăng nhập Blogger
2. Chọn bố cục
3. Thêm tiện ích HTML/Javascripts và dán code bên dưới vào       
<style>
#btrix-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
#btrix-nav li {float: left;}
#btrix-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}
#btrix-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#btrix-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#btrix-nav li a:hover {cursor: pointer;}
#btrix-nav li a:hover img {top: -85px;}
#btrix-nav li a:hover .aname {top: 85px;}
#btrix-nav li:nth-child(1) a {background: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#btrix-nav li:nth-child(2) a {background: #9bc704;}
#btrix-nav li:nth-child(3) a {background: #0dc3ff;}
#btrix-nav li:nth-child(4) a {background: #51a2ec;}
#btrix-nav li:nth-child(5) a {background: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;} 
</style>
<div id="btrix-nav">
<li> <a href="#"><span class="aname">Home</span> <img src="http://2.bp.blogspot.com/-vcR6lUGsroY/Ug5ATZk8oZI/AAAAAAAAA00/XENkFMaBgv0/s1600/btrix-home.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Download</span> <img src="http://2.bp.blogspot.com/-TcXder58ssQ/Ug5ASx8pT0I/AAAAAAAAA0o/5UdA4_gLnV8/s1600/btrix-download.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> MySql</span> <img src="http://2.bp.blogspot.com/-umlQ7fKXobk/Ug5AT2bLnnI/AAAAAAAAA08/yrQHl6qPMH8/s1600/btrix-mysql.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> Html</span> <img src="http://2.bp.blogspot.com/-2-iy8RJ92V8/Ug5ASDCru-I/AAAAAAAAA0c/GOBCPpZlA04/s1600/Btrix-html.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Contact</span> <img src="http://4.bp.blogspot.com/-vsm9s0yQr9I/Ug5ASjqawnI/AAAAAAAAA0k/rqb01AbGaFw/s1600/btrix-contact.png" /> </a> </li> </div>
Thay # thành địa chỉ liên kết hoặc địa chỉ nhãn muốn gắn
Màu xanh tùy chỉnh lại cho phù hợp với blog của bạn 
4. Lưu lại và xem kết quả
Chúc các bạn thành công !

Sàn SnapEx

➤ Tham gia Group để cập nhật các tin tức và cách kiếm tiền online mới nhất: KIẾM TIỀN ONLINE - CỘNG ĐỒNG VIỆT
➤ Nhớ Like, Share và Đăng ký kênh Youtube chính thức: TẠI ĐÂY

Bài viết cùng chủ đề

Chào các bạn !
Bài viết hôm nay xin giới thiệu cùng các bạn cách tạo menu ngang có kèm theo hình ảnh rất đẹp với hiệu tạo bóng khi click chuột vào. Hiệu ứng này thích ứng với tất cả cá trình duyệt internet hiện nay. Tiện ích sử dụng CSS và HTML rất dễ dàng thêm vào blog của bạn.


ảnh hiển thị

* Cách thực hiện:
1. Đăng nhập vào tài khoản Blogger
2. Vào phần Mẫu (Template)
3. Chọn chỉnh sửa HTML (Edit HTML)
4. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin>



/* The CSS Code for the menu starts here bloggertrix.com */

.shadowblockmenu{
font-weight: bold;
font-size: 85%;
width: 687px;
margin:0 auto;
}
.shadowblockmenu ul{
border: 1px solid #BBB;
border-width: 1px 0;
padding: 0;
margin: 0;
overflow: hidden;
}
.shadowblockmenu ul li{
display: inline;
margin:0;
padding:0;
}
.shadowblockmenu ul li a{
display:block;
float:left;
text-transform: uppercase;
color: #494949;
padding: 8px 15px 8px 9px;margin: 0;
text-decoration: none;
border-right: 1px solid #BBB;
-moz-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4); (114,114,114, 0.4) specifies rgb values, last specifies opacity */
-webkit-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4);
box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4);
text-shadow: 0 -1px 1px #cfcfcf;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.shadowblockmenu li:nth-of-type(1) a{
border-left: 1px solid #BBB;
padding-left:25px;
background: url(http://1.bp.blogspot.com/-TcF6-81d5sM/UTRruii2SZI/AAAAAAAAHGQ/p184v3QYYxI/s1600/bt_home.png) 1px center no-repeat;
}
.shadowblockmenu li:nth-of-type(2) a{
padding-left:25px;
background: url(http://4.bp.blogspot.com/-9TWU6nE7Bko/UTRrtri_3XI/AAAAAAAAHGE/Xn5kW1fzTUU/s1600/bt_bulb.png) 1px center no-repeat;
}
.shadowblockmenu li:nth-of-type(3) a{
padding-left:25px;
background: url(http://3.bp.blogspot.com/-fGTbPPbgOdY/UTRrtulU6HI/AAAAAAAAHF8/vog6vQilZl4/s1600/bt_database_add.png) 1px center no-repeat;
}
.shadowblockmenu li:nth-of-type(4) a{
padding-left:25px;
background: url(http://1.bp.blogspot.com/-ope_hCFOD2k/UTRruZAik0I/AAAAAAAAHGI/0jN5ZDoLzXk/s1600/bt_films.png) 1px center no-repeat;
}
.shadowblockmenu li:nth-of-type(5) a{
padding-left:25px;
background: url(http://1.bp.blogspot.com/-0qbYGET2Htw/UTRrujW8UuI/AAAAAAAAHGY/YEZiwVbIhMQ/s1600/bt_mobile-phone.png) 1px center no-repeat;
}
.shadowblockmenu li:nth-of-type(6) a{
padding-left:25px;
background: url(http://4.bp.blogspot.com/-wn3cicRJJGA/UTRrt47smiI/AAAAAAAAHGA/oe_PIlXwrUQ/s1600/Bt_Help_Circle_Blue.png) 1px center no-repeat;
}
.shadowblockmenu ul li a:hover{color: black;
-moz-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
-webkit-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
}


5. Save template lại và trở về bố cục (Layout)
6. Thêm 1 HTML/Javascript và thêm vào code bên dưới


<div class="shadowblockmenu">
<ul>
<li><a href="#">Trang chủ</a></li>
<li><a href="#">Thủ thuật máy tính</a></li>
<li><a href="#">Thủ thuật Web</a></li>
<li><a href="#">Phim hay</a></li>
<li><a href="#">Ứng dụng Mobile</a></li>
<li><a href="http://www.viettin365t.com/">Trợ giúp</a></li>
</ul>
</div>


 * Ở đây các bạn lưu ý các dòng sau:
<li><a href="#">Trang chủ</a></li>
<li><a href="#">Thủ thuật máy tính</a></li>
<li><a href="#">Thủ thuật Web</a></li>
<li><a href="#">Phim hay</a></li>
<li><a href="#">Ứng dụng Mobile</a></li>
<li><a href="http://www.viettin365.com/">Trợ giúp</a></li>
Thay # bằng link liên kết, thay các dòng chữ màu xanh bằng tên menu của bạn.
Chúc các bạn thành công
theo buivansum

Sàn SnapEx

➤ Tham gia Group để cập nhật các tin tức và cách kiếm tiền online mới nhất: KIẾM TIỀN ONLINE - CỘNG ĐỒNG VIỆT
➤ Nhớ Like, Share và Đăng ký kênh Youtube chính thức: TẠI ĐÂY

Chat với chúng tôi