Thêm Drop Down Menu Blogger Mượt và Đẹp

Trong bài viết này tôi sẽ chia sẻ với một trình đơn thả xuống màu xám tuyệt đẹp được tạo ra với CSS và JavaScript. Tôi cũng sử dụng menu này trên blog của chúng tôi. Trình đơn thả xuống cung cấp điều hướng dễ dàng và gọn gàng bằng cách tổ chức và tính năng liên kết thể loại quan trọng của blog của bạn. Với sự gia tăng sử dụng các loại và các thẻ, tổ chức liên kết trong một menu đơn giản là khó khăn do trình đơn mà chúng tôi chia sẻ hôm nay cung cấp cho bạn dễ dàng kiểm soát và các hàng cột hiển thị của nó. 1. Thêm Drop Down Menu Style Sheet. 2. Thêm JavaScript trong đầu mục. 3. Cuối cùng Thêm HTML Code Đối với Liên kết. 

Đó 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&#187;</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(&quot;dropdown&quot;, {id:&#39;menu&#39;,
active:&#39;menuhover&#39;});
</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

2 comments:

  1. mình đã làm theo hướng dẫn của bạn nhưng không được, đây là site của mình:
    http://cacuocbongdam88.blogspot.com

    ReplyDelete
  2. Chắc code này lâu lắm rồi nên không hiển thị được DROP DOWN đó bạn.. Bạn thử tìm nơi khác thử nhé

    ReplyDelete

Cùng thảo luận - Cùng chia sẻ - Cùng học tập