san-giao-dich-binance

Tạo Menu ngang màu sắc độc đáo xổ dọc với JQuery cho Blogspot

Freedom-Network

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

san-giao-dich-binance
Like , G+ và Share ủng hộ Vietmkt360 nhé ! ❤ Cám ơn ❤
Chia sẻ:

Không có nhận xét nào:

Chào bạn ! Nếu có bất cứ thắc mắc, ý kiến nào hãy để lại bình luận.
Mỗi nhận xét của bạn đều rất quan trọng. Tôi rất vui nếu bạn viết bằng tiếng Việt có dấu.

Chat với chúng tôi