15/10/2013

25 mẫu menu dọc cho blogger với CSS và HTML Codes ( phần 4)

Đăng bởi Admin | 15/10/2013 | 0 nhận xét

Thu thuat vi tinh tiếp tục giới thiệu với bạn đọc 5 mẫu ( từ mẫu 16 đến mẫu 20) trong 25 mẫu danh mục thực đơn dọc cho blog. Bạn sẽ thoải mái lựa chọn theo ý thích. 


CSS Menu Tabs 20

Vậy làm thế nào để tạo ra một tab menu điều hướng nằm dọc cho blog? 

Chỉ cần làm theo các bước sau một cách cẩn thận:
1. Đăng nhập vào Blogger , vào Thiết kế -> Edit HTML và đánh dấu hộp kiểm "Expand Widget Templates"  . Back-up mẫu của bạn 

Lưu ý: Tất cả thực đơn Danh mục dưới đây sử dụng hai mảnh mã. 
- Một là các mã CSS mà là chịu trách nhiệm về cái nhìn và cảm nhận của các menu 


- Thứ hai là mã HTML mà là chịu trách nhiệm cho vị trí các trình đơn. Vì vậy, cho phép biết được nơi để thêm mỗi mã! 
2. Dán mã CSS cho Menu lựa chọn của bạn ngay trên  ]]> </ b: skin> 
3. Đối với các mã HTML có thể có hai vị trí một trong hai bên phải hoặc bên trái blogPhụ thuộc vào giao diện blog của bạn .
  • Nếu bạn có một thanh bên phải sau đó dán đoạn mã HTML ngay dưới <div id='sidebar-wrapper'>   hoặc này <div id='sidebar-wrapper-right'>
  • Nếu bạn có một thanh bên trái sau đó dán đoạn mã HTML ngay dưới <div id='sidebar-wrapper-left'>
Lưu ý: Hầu hết các mẫu sử dụng mã hóa khác nhau. 
    4. Cuối cùng lưu mẫu của bạn và xem thành quả. bạn sẽ nhìn thấy một Menu Navigation đẹp treo trên sidebar của bạn

Chỉnh sửa các liên kết trong Menu: Để thay đổi Tab Menu Liên kết và tựa đề, chỉ cần chỉnh sửa phần  in đậm trong mã HTML,
<li> <a href = " # 1 "> Link 1 </ a> </ li> 
<li> <a href = " # 2 "> Link 2 </ a> </ li> 
<li> <a href = " # 3 "> Link 3 </ a> </ li> 
<li> <a href = " # 4 "> Liên kết 4 </ a> </ li> 
<li> <a href = " # 5 "> Link5 </ a> </ p>

Thay thế  # 1, # 2, # 3  vv với bạn  Trang Liên kết / URL  và thay thế  Link1, Link2, link3  vv... với bạn  tiêu đề cho trang . Nếu bạn muốn thêm hoặc xóa một tab nào đó thì chỉ cần thêm hoặc xóa dòng này từ mã HTML,



<li> <a href = " # "> Liên kết </ a> </ p>

MENU # 16

CSS Menu Tabs 16
CSS Code: 

#navcontainer { background: #f0e7d7; width: 30%; margin: 0 auto; padding: 1em 0; font-family: georgia, serif; font-size: 13px; text-align: center; text-transform: lowercase; } ul#navlist { text-align: left; list-style: none; padding: 0; margin: 0 auto; width: 70%; } ul#navlist li { display: block; margin: 0; padding: 0; } ul#navlist li a { display: block; width: 100%; padding: 0.5em 0 0.5em 2em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; }

HTML Code: 



<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><div id="navcontainer">
<ul id="navlist">
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link5</a></li>
</ul>
</div>

MENU # 17

CSS Menu Tabs 17
CSS Code: 

#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #BCD2E6; border-size: 1px; border-width: 1px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #8BADCF; display: block; background: url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze7tGEpoOI/AAAAAAAACq4/S0ZV4ChMjyg/s800/menu3.gif); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #627EB7; background: url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze7tGEpoOI/AAAAAAAACq4/S0ZV4ChMjyg/s800/menu3.gif) 0 -32px; padding: 8px 0 0 10px; }

HTML Code: 



<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><div id="menu3">
<ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link5</a></li>
</ul>
</div>

MENU # 18


CSS Menu Tabs 18

CSS Code: 

#menu11 ul { list-style: none; margin: 0; padding: 0; } #menu11 img { border: none; } #menu11 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #889944; border-size: 1px; border-width: 1px; } #menu11 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu11 li a:link, #menu11 li a:visited { color: #889944; display: block; background: url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze78f0F6lI/AAAAAAAACr4/FJiv57hTmXc/s400/menu11.gif); padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944; background: url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze78f0F6lI/AAAAAAAACr4/FJiv57hTmXc/s400/menu11.gif) 0 -32px; padding: 8px 0 0 27px; }

HTML Code:

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><div id="menu11">
<ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link5</a></li>
</ul>
</div>

MENU # 19

CSS Menu Tabs 19
CSS Code: 


#button { width: 12em; border-right: 1px solid #000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: Tahoma, Arial, sans-serif; /*&#039;Trebuchet MS&#039;, &#039;Lucida Grande&#039;, Verdana, Arial, sans-serif;*/ font-size : 10px; background-color: #90bade; color: #333; } #button ul { list-style: none; margin: 0; padding: 0; border: none; } #button li { border-bottom: 1px solid #90bade; margin: 0; list-style: none; list-style-image: none; } #button li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px solid #1958b7; border-right: 10px solid #508fc4; background-color: #2175bc; color: #fff; text-decoration: none; width: 100%; } html&gt;body #button li a { width: auto; } #button li a:hover { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; } #button li #active { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; }

HTML Code: 
<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><div id="button">
<ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link5</a></li>
</ul>
</div>

MENU # 20

CSS Menu Tabs 20
CSS Code: 


#menu ul { list-style: none; margin: 0; padding: 0; } #menu img { border: none; } #menu { width: 200px; border-style: solid solid none solid; border-color: #94AA74; border-size: 1px; border-width: 1px; margin: 10px; } #menu li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu li a:link, #menu li a:visited { color: #5E7830; display: block; background: url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze6WqpAYDI/AAAAAAAACpg/QVIqv0ABmSY/s800/menu1.gif); padding: 8px 0 0 10px; } #menu li a:hover, #menu li #current { color: #26370A; background: url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze6WqpAYDI/AAAAAAAACpg/QVIqv0ABmSY/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; } #menu li a:active { color: #26370A; background: url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze6WqpAYDI/AAAAAAAACpg/QVIqv0ABmSY/s800/menu1.gif) 0 -64px; padding: 8px 0 0 10px; }

HTML Code: 


<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><div id="menu">
<ul>
<li><a href="#1">Link 1</a></li>
<li><a href="#2">Link 2</a></li>
<li><a href="#3">Link 3</a></li>
<li><a href="#4">Link 4</a></li>
<li><a href="#5">Link5</a></li>
</ul>
</div>

Mời bạn xem thêm các phần còn lại:

25 mẫu menu dọc cho blogger với CSS và HTML Codes ( phần 1)

25 mẫu menu dọc cho blogger với CSS và HTML Codes ( phần 2)

25 mẫu menu dọc cho blogger với CSS và HTML Codes ( phần 3)

25 mẫu menu dọc cho blogger với CSS và HTML Codes ( phần 5)

                                                                            Nguồn: mybloggertricks.com



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

Đăng nhận xét

Cảm ơn bạn đã nhận xét !
- Bạn có thể chèn link vào nhận xét bằng thẻ: <a href="Link" rel="nofollow">Tên link</a>
- Tạo <b>Chữ đậm</b> và <i>Chữ ngiêng</i> cho nhận xét
- Hãy Chuyển đổi mã code trước khi chèn vào nhận xét
- Hãy bấm Theo dõi dưới chân trang để nhanh chóng nhận được phản hồi từ Thủ thuật vi tính
- Những nhận xét nào không lành mạnh hoặc chèn link spam sẽ bị xóa khỏi blog.

Mã hóa Code

Support : Trick Blogspot | Ghost win | Website Design | Seo Trick | Ghost win | Software Free | Site Map | Back Link | Contact Advertising | ↑ back to top
Ghi rõ nguồn thuthuatvitinhaz.blogspot.com dưới dạng liên kết khi phát hành lại thông tin từ trang này
Copyright © 2013. Thủ thuật Số - All Rights Reserved
Design by Ngân Giang
Xem tốt nhất ở độ phân giải 1024 x 768 pixel
Template by Dameva