1.Đăng nhập vào bảng điều khiển blogger của bạn -> bố trí -> Edit HTML
2.Kéo xuống đến nơi bạn nhìn thấy </ head> tag. Hoặc nhấn F3 đánh vào chữ </ head>
3.Copy dưới mã và dán nó ngay trước thẻ </ head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){ $("ul.subnav").parent().append("<span/>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav $("ul.topnav li span").click(function() { //When trigger is clicked... //Following events are applied to the subnav itself (moving subnav up and down) $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click $(this).parent().hover(function() { }, function(){ $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up }); //Following events are applied to the trigger (Hover events for the trigger) }).hover(function() { $(this).addClass("subhover"); //On hover over, add class "subhover" }, function(){ //On Hover Out $(this).removeClass("subhover"); //On hover out, remove class "subhover" }); }); </script> <style type='text/css'> ul.topnav { list-style: none; padding: 0 20px; margin: 0; float: left; width: 100%; background: #222; font-size: 1.2em; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNRtzOO9GMrEYmuiB-h-m5QK84RZCPxWfmgzhUORonN9FwtFrXrg_tzjWpsuPnQyO4zqh-ac98uR93d4o5MzPQ8SH632A1ncCW-jXM3vmP_vJIiEKkELLXAxo9w3QozdQFnPaqDAUcOqp1/) repeat-x; } ul.topnav li { float: left; margin: 0; padding: 0 15px 0 0; position: relative; /*--Declare X and Y axis base--*/ } ul.topnav li a{ padding: 10px 5px; color: #fff; display: block; text-decoration: none; float: left; } ul.topnav li a:hover{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz-aUU6TYSKef9luH4fwJzIDOOkV1TZH525oT0_g1oZTDwaSARnscIihND_vrQokZERSUfdlo_xS9OGpAncTDaP6x0pgS25fOtJHY9YhPNAKxXAkL_S6oFpuFStAx8aCc1FEKui8OeVVw-/) no-repeat center top; } ul.topnav li span { /*--Drop down trigger styles--*/ width: 17px; height: 35px; float: left; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH3M7ScEXokUUlzE5aYHm7IU5BhJC4KgaE0Zn8bwKkWtjdcq8uoeNZeSL4uvi9yYTroBfgtIGjGT9WLAOn9nu7BOwIN5_yzvoQv1Aee1NihbZtUSxS49IWIproVz4nNYeKBaV8Qc5rxUdt/) no-repeat center top; } ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/ ul.topnav li ul.subnav { list-style: none; position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/ left: 0; top: 35px; background: #333; margin: 0; padding: 0; display: none; float: left; width: 170px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; border: 1px solid #111; } ul.topnav li ul.subnav li{ margin: 0; padding: 0; border-top: 1px solid #252525; /*--Create bevel effect--*/ border-bottom: 1px solid #444; /*--Create bevel effect--*/ clear: both; width: 170px; } html ul.topnav li ul.subnav li a { float: left; width: 145px; background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBvzx3cU8xV0nAUKtmPahOoBil7wbCXf2cBxC9F5GyYLDnbkAfMOR6sXQgNhZY8V987GFmanB5rmoar7MWjsRPuG9_Udro4ZtOF1rDIfrYCwVU6lQ8pHKS1Aa_aTcgmW4BqPdxCkrVzC-V/) no-repeat 10px center; padding-left: 20px; } html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/ background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBvzx3cU8xV0nAUKtmPahOoBil7wbCXf2cBxC9F5GyYLDnbkAfMOR6sXQgNhZY8V987GFmanB5rmoar7MWjsRPuG9_Udro4ZtOF1rDIfrYCwVU6lQ8pHKS1Aa_aTcgmW4BqPdxCkrVzC-V/) no-repeat 10px center; } #header img { margin: 20px 0 10px; } </style>
4.Save lại.
5.Bây giời chúng ta đi vào Layout -> Phần tử Trang và nhấn vào "Thêm một tiện ích".
6.Chọn "html / java script" và thêm đoạn code dưới đây và bấm vào lưu.
<ul class="topnav"> <li><a href="#">Home</a></li> <li> <a href="#">Tutorials</a> <ul class="subnav"> <li><a href="#">HTML Tutorials</a></li> <li><a href="#">CSS Tutorials</a></li> <li><a href="#">PHP Tutorials</a></li> <li><a href="#">SQL Tutorials</a></li> <li><a href="#">jQuery Tutorials</a></li> </ul> </li> <li> <a href="#">Templates</a> <ul class="subnav"> <li><a href="#">1 Column</a></li> <li><a href="#">2 Column</a></li> <li><a href="#">3 Column</a></li> <li><a href="#">4 Column</a></li> <li><a href="#">Premium</a></li> <li><a href="#">Buy Now</a></li> </ul> </li> <li><a href="#">About Us</a></li> <li><a href="#">Advertise</a></li> <li><a href="#">Subscribe</a></li> <li><a href="#">Contact Us</a></li> </ul>
Save lại .Chúc bạn thành công.
2.Kéo xuống đến nơi bạn nhìn thấy </ head> tag. Hoặc nhấn F3 đánh vào chữ </ head>
3.Copy dưới mã và dán nó ngay trước thẻ </ head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){ $("ul.subnav").parent().append("<span/>"); //Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav $("ul.topnav li span").click(function() { //When trigger is clicked... //Following events are applied to the subnav itself (moving subnav up and down) $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click $(this).parent().hover(function() { }, function(){ $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up }); //Following events are applied to the trigger (Hover events for the trigger) }).hover(function() { $(this).addClass("subhover"); //On hover over, add class "subhover" }, function(){ //On Hover Out $(this).removeClass("subhover"); //On hover out, remove class "subhover" }); }); </script> <style type='text/css'> ul.topnav { list-style: none; padding: 0 20px; margin: 0; float: left; width: 100%; background: #222; font-size: 1.2em; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNRtzOO9GMrEYmuiB-h-m5QK84RZCPxWfmgzhUORonN9FwtFrXrg_tzjWpsuPnQyO4zqh-ac98uR93d4o5MzPQ8SH632A1ncCW-jXM3vmP_vJIiEKkELLXAxo9w3QozdQFnPaqDAUcOqp1/) repeat-x; } ul.topnav li { float: left; margin: 0; padding: 0 15px 0 0; position: relative; /*--Declare X and Y axis base--*/ } ul.topnav li a{ padding: 10px 5px; color: #fff; display: block; text-decoration: none; float: left; } ul.topnav li a:hover{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz-aUU6TYSKef9luH4fwJzIDOOkV1TZH525oT0_g1oZTDwaSARnscIihND_vrQokZERSUfdlo_xS9OGpAncTDaP6x0pgS25fOtJHY9YhPNAKxXAkL_S6oFpuFStAx8aCc1FEKui8OeVVw-/) no-repeat center top; } ul.topnav li span { /*--Drop down trigger styles--*/ width: 17px; height: 35px; float: left; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH3M7ScEXokUUlzE5aYHm7IU5BhJC4KgaE0Zn8bwKkWtjdcq8uoeNZeSL4uvi9yYTroBfgtIGjGT9WLAOn9nu7BOwIN5_yzvoQv1Aee1NihbZtUSxS49IWIproVz4nNYeKBaV8Qc5rxUdt/) no-repeat center top; } ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/ ul.topnav li ul.subnav { list-style: none; position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/ left: 0; top: 35px; background: #333; margin: 0; padding: 0; display: none; float: left; width: 170px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; border: 1px solid #111; } ul.topnav li ul.subnav li{ margin: 0; padding: 0; border-top: 1px solid #252525; /*--Create bevel effect--*/ border-bottom: 1px solid #444; /*--Create bevel effect--*/ clear: both; width: 170px; } html ul.topnav li ul.subnav li a { float: left; width: 145px; background: #333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBvzx3cU8xV0nAUKtmPahOoBil7wbCXf2cBxC9F5GyYLDnbkAfMOR6sXQgNhZY8V987GFmanB5rmoar7MWjsRPuG9_Udro4ZtOF1rDIfrYCwVU6lQ8pHKS1Aa_aTcgmW4BqPdxCkrVzC-V/) no-repeat 10px center; padding-left: 20px; } html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/ background: #222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBvzx3cU8xV0nAUKtmPahOoBil7wbCXf2cBxC9F5GyYLDnbkAfMOR6sXQgNhZY8V987GFmanB5rmoar7MWjsRPuG9_Udro4ZtOF1rDIfrYCwVU6lQ8pHKS1Aa_aTcgmW4BqPdxCkrVzC-V/) no-repeat 10px center; } #header img { margin: 20px 0 10px; } </style>
4.Save lại.
5.Bây giời chúng ta đi vào Layout -> Phần tử Trang và nhấn vào "Thêm một tiện ích".
6.Chọn "html / java script" và thêm đoạn code dưới đây và bấm vào lưu.
<ul class="topnav"> <li><a href="#">Home</a></li> <li> <a href="#">Tutorials</a> <ul class="subnav"> <li><a href="#">HTML Tutorials</a></li> <li><a href="#">CSS Tutorials</a></li> <li><a href="#">PHP Tutorials</a></li> <li><a href="#">SQL Tutorials</a></li> <li><a href="#">jQuery Tutorials</a></li> </ul> </li> <li> <a href="#">Templates</a> <ul class="subnav"> <li><a href="#">1 Column</a></li> <li><a href="#">2 Column</a></li> <li><a href="#">3 Column</a></li> <li><a href="#">4 Column</a></li> <li><a href="#">Premium</a></li> <li><a href="#">Buy Now</a></li> </ul> </li> <li><a href="#">About Us</a></li> <li><a href="#">Advertise</a></li> <li><a href="#">Subscribe</a></li> <li><a href="#">Contact Us</a></li> </ul>
Save lại .Chúc bạn thành công.
