Thêm Drop Down Menu Blogger Mượt và Đẹp
Đó 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
About the Author
0 nhận xét