Tạo Menu ngang màu sắc độc đáo xổ dọc với JQuery cho Blogspot
(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 :
Ả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ả
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
Share This:
Blog Tự Động Hóa 68
Tôi là Đại Thành. Tôi thích chia sẽ đam mê về Điện Tự Động Hóa, Điện Lạnh Và Internet....Bài viết có thể chưa thật sự hoàn hảo nhưng hy vọng sẽ giúp ích được cho các bạn. Cảm ơn đã ghé trang.
Mời bạn bình luận cho bài viết " Tạo Menu ngang màu sắc độc đáo xổ dọc với JQuery cho Blogspot "