Đó là nó trong ba bước, bạn đã làm xong. Luôn luôn Ghi Trước khi chỉnh sửa mẫu của bạn Thực hiện một sao lưu mẫu (làm thế nào để thực hiện một mẫu sao lưu).
1. Tới Blogger của bạn Bảng điều khiển >> Mẫu >> Chỉnh Sửa Mẫu >> Tiến Nhấn phím Ctrl + F và dán đoạn mã sau vào mẫu của bạn.
]]> </ b: skin>
2. Dán đoạn mã sau trước / trên "]]> </ b: skin>"
/*Start Drop Down CSS by http://bl0gger-tricks.blogspot.com*/
.nav{
width:100%;
height:36px;
background:#f9f9f9;
border-top:1px solid #e4e4e4;
border-bottom:1px solid #e4e4e4;
box-shadow: 0 2px 2px #eee;
z-index:1;
}
.menu{
width:1050px;
list-style:none;
font:16px Source Sans Pro,Arial,Verdana;
font-weight: normal;
text-align:center;
margin:0 auto;
}
.menu a{
float:left;
color:#000000;
text-decoration:none;
width:100px;
line-height:36px;
-moz-transition:.2s linear;
-webkit-transition:.2s linear;
transition:.2s linear;
-o-transition:.2s linear;
}
.menu a:hover,li.menuhover a{
color:#111;
background:#efefef;
-moz-transition:.2s linear;
-webkit-transition:.2s linear;
transition:.2s linear;
-o-transition:.2s linear;
}
.menu li,.menu li span{
position:relative;
float:left;
width:100px;
z-index:2;
border-left:1px solid #e3e3e3;
}
.menu li span{
border-right:1px solid #e3e3e3;
border-left:none;
}
.menu ul{
display:none;
position:absolute;
font:normal 16px Source Sans Pro,Arial,Verdana;
font-weight: normal;
top:36px;
left:0;
background:#fbfbfb;
display:none;
list-style:none;
box-shadow:0 2px 3px #ccc;
}
.menu ul li{
float:none;
border-top:1px solid #ccc;
width:150px;
}
.menu ul li a{
float:none;
display:block;
background:none;
line-height:36px;
width:137px;
text-align:left;
padding-left:10px;
color:#444;
}
.menu ul li a:hover{
background:#fbfbfb;
color:#000000;
border-left:5px solid #088A4B;
-webkit-transition:ease-in 0.15s all;
-moz-transition:ease-in 0.15s all;
-o-transition:ease-in 0.15s all;
-ms-transition:ease-in 0.15s all;
transition:ease-in 0.15s all;
text-shadow:0 1px 0 #fefefe
}
/*End Drop Down CSS*/
Lưu ý: Trong phần CSS bạn có thể chỉnh sửa kích thước chữ, Font style, màu chữ, màu nền. Nếu bạn muốn chỉnh sửa lại bình luận của bạn dưới đây.
3. Tìm đoạn mã sau vào mẫu của bạn.
</head>
4. Dán Script sau trước / trên "</ head>"
<script type='text/javascript'>
//<![CDATA[
var dropd={};function T$(i){return document.getElementById(i)}function T$$(e,p){return
p.getElementsByTagName(e)}dropd.dropdown=function(){var p=
{fade:1,slide:1,active:0,timeout:200},init=function(n,o){for(s in o){p[s]=o[s]}
p.n=n;this.build()};init.prototype.build=function(){this.h=[];this.c=[];this.z=1000;var s=T$
$('ul',T$(p.id)),l=s.length,i=0;p.speed=p.speed?p.speed*.1:.5;for(i;i<l;i++){var h=s
[i].parentNode;this.h[i]=h;this.c[i]=s[i];h.onmouseover=new Function(p.n+'.show('+i
+',1)');h.onmouseout=new Function(p.n+'.show('+i+')')}};init.prototype.show=function(x,d){var
c=this.c[x],h=this.h[x];clearInterval(c.t);clearInterval(c.i);c.style.overflow='hidden';if(d)
{if(p.active&&h.className.indexOf(p.active)==-1){h.className+=' '+p.active}if(p.fade||p.slide)
{c.style.display='block';if(!c.m){if(p.slide)
{c.style.visibility='hidden';c.m=c.offsetHeight;c.style.height='0';c.style.visibility=''}else
{c.m=100;c.style.opacity=0;c.style.filter='alpha(opacity=0)'}c.v=0}if(p.slide){if(c.m==c.v)
{c.style.overflow='visible'}else{c.style.zIndex=this.z;this.z++;c.i=setInterval(function()
{slide(c,c.m,1)},20)}}else{c.style.zIndex=this.z;this.z++;c.i=setInterval(function(){slide
(c,c.m,1)},20)}}else{c.style.zIndex=this.z;c.style.display='block'}}else{c.t=setTimeout
(function(){hide(c,p.fade||p.slide?1:0,h,p.active)},p.timeout)}};function hide(c,t,h,s){if(s)
{h.className=h.className.replace(s,'')}if(t){c.i=setInterval(function(){slide(c,0,-1)},20)}
else{c.style.display='none'}}function slide(c,t,d){if(c.v==t){clearInterval(c.i);c.i=0;if
(d==1){if(p.fade){c.style.filter='';c.style.opacity=1}c.style.overflow='visible'}}else{c.v=(t-
Math.floor(Math.abs(t-c.v)*p.speed)*d);if(p.slide){c.style.height=c.v+'px'}if(p.fade){var
o=c.v/c.m;c.style.opacity=o;c.style.filter='alpha(opacity='+(o*100)+')'}}}return{init:init}}();
//]]>
</script>
5. Thêm Code HTML để hiển thị MENU DROP - thêm vào nơi bạn cần muốn SHOW MENU trên trang chủ.
<!-- Start - Navigation Menu -->
<div class='nav'>
<ul class='menu' id='menu'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='#>Blogger</a></li>
<li><a href='#>Adsense</a></li>
<li><a href='#>SEO Tips</a></li>
<li><a href='#'>Templates</a></li>
<li><a href='#'>Widgtes</a></li>
<li><a href='#>Downloads</a></li>
<li><a href='#'>Tools»</a>
<ul>
<li><a href='#>HTML Editor</a></li>
<li><a href='#>Escape Tool</a></li>
<li><a href='#>ParseTool</a></li>
<li><a href='#>Color Code</a></li>
</ul>
</li>
</ul>
</div>
<!-- End - Navigation Menu -->
<script type='text/javascript'>
var dropdown=new dropd.dropdown.init("dropdown", {id:'menu',
active:'menuhover'});
</script>
Lưu Lại và Xem Kết Quả.
Các widget là rất dễ dàng để được chỉnh sửa. Để thay đổi các liên kết tiêu đề chỉ đơn giản là thay thế các văn bản với tiêu đề trang của bạn và thay thế các dấu thăng "#" với các liên kết tương ứng.
Cần giúp! ...
Đối với bất kỳ sự giúp đỡ thêm xin vui lòng gửi ý kiến của bạn trong hộp bình luận dưới đây. Đừng quên để đăng ký Rss Email Dịch vụ của chúng tôi hoặc theo tôi trên mạng xã hội.
Nguồn: My Blogger Tricks