[HAIPHONG TP TOI YEU]

 

(¯`·.º-:¦:-† namkna †-:¦:-º.·´¯)

(¯`·.º-:¦:-† namkna †-:¦:-º.·´¯)


Menu DropDown 1 cấp cho blogspot Style 7

Posted: 01 Apr 2012 02:46 AM PDT

CSS Horizontal Navigation Menu For Bloggers/Websites - Menu DropDown 1 cấp cho blogspot Style7
Về cơ bản Style này giống Style 6 tuy nhiên đổi màu khác để các bạn lựa chọn được nhiều hơn.
Đọc thêm bài viết »

Menu DropDown 1 cấp cho blogspot Style 6

Posted: 01 Apr 2012 02:26 AM PDT

Superb CSS Menudrop cho Bloggers - Menu DropDown 1 cấp cho blogspot Style6
Nếu chưa thử áp dụng menu này, mình chắc chắn sẽ rất nhiều người cho rằng chỉ có j Query mới có thể tạo ra các menu có hiệu ứng mượt mà và hấp dẫn. Tuy nhiên với menu này thì tất cả chỉ có thể nói là "không gì là không thể". Bạn hãy xem Demo và cảm nhận khả năng tùy biến vượt trội của CSS.
Đọc thêm bài viết »

Menu DropDown 1 cấp cho blogspot Style5

Posted: 01 Apr 2012 01:35 AM PDT

Đặc điểm: Sunrise Gloss Drop Down Menus  không sử dụng các file javarscrip do vậy các bạn có thể yên tâm về tốc độ của nó.

Cách tiến hành:


   1- Đăng nhập vào Blog
   2- Vào thiết kế
   3- Chọn Chỉnh sử HTML (Không cần mở rộng tiện ích mẫu)
   4- Thêm đoạn code sau vào trước thẻ  ]]></b:skin> .
@charset "utf-8"; /* CSS Document */ body{ padding: 25px; }  /* ----Navigation Structure -------- */ .nav-container-outer{ background: #990000; padding: 0px; height: 74px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMxROjX9mxXyimWokMlNsMl9s4Kt6ZU6Q-9C6SuUueE_iKkqmCYhQbYbV9VlD5fWCnhusqRpEnSKg9Hzmxh6YYkPFeX0pQL8XLTSYb8iYnHThi6XphC6-jjnFA-UTLpgsQGA5V22Lp6XME/s1600/nav-bg-namkna-blogspot.jpg); } .float-left{ float: left; } .float-right{ float: right; } .nav-container .divider{ display:block; font-size:1px; border-width:0px; border-style:solid; } .nav-container .divider-vert{ float:left; width:0px; display: none; } .nav-container .item-secondary-title{ display:block; cursor:default; white-space:nowrap; } .clear{ font-size:1px; height:0px; width:0px; clear:left; line-height:0px; display:block; float:none; } .nav-container{ position:relative; zoom:1; margin: 0 auto; } .nav-container a, .nav-container li{ float:left; display:block; white-space:nowrap; } .nav-container div a, .nav-container ul a, .nav-container ul li{ float:none; } .nav-container ul{ left:-10000px; position:absolute; } .nav-container, .nav-container ul{ list-style:none; padding:0px; margin:0px; } .nav-container li a{ float:none } .nav-container li{ position:relative; } .nav-container ul{ z-index:10; } .nav-container ul ul{ z-index:20; } .nav-container ul ul ul{ z-index:30; } .nav-container ul ul ul ul{ z-index:40; } .nav-container ul ul ul ul ul{ z-index:50; } li:hover>ul{ left:auto; } #nav-container ul { top:100%; } #nav-container ul li:hover>ul{ top:0px; left:100%; }  /*^'^ Primary Items ^'^*/ #nav-container a{ padding:7px 17px 7px 18px; margin: 10px 0px 0px 0px; color: #FFFFFF; font-family: Trebuchet MS, Arial, sans-serif, Helvetica; font-size:14px; text-decoration:none; font-weight: bold; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqI0FENJZg0vZ8J1qu1kniN0PPDXMYudxuhMHvvu-EFGGWkASqC-wVwwSi7KYwF4Tf3O3g2iaCqVBTn9ysrFiiMaSrKzLSVbs37AiCBS61jye4-pHzTyLWaybYVKAoKhwDVMmgfCtw__Wi/h120/item-primary-bg-namkna-blogspot.gif); background-repeat: no-repeat; background-position: top; }  #nav-container a:hover{ color: #6C3600; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqI0FENJZg0vZ8J1qu1kniN0PPDXMYudxuhMHvvu-EFGGWkASqC-wVwwSi7KYwF4Tf3O3g2iaCqVBTn9ysrFiiMaSrKzLSVbs37AiCBS61jye4-pHzTyLWaybYVKAoKhwDVMmgfCtw__Wi/h120/item-primary-bg-namkna-blogspot.gif); background-repeat: no-repeat; background-position: center; }  /*^'^ Secondary Items Container ^'^*/ #nav-container div, #nav-container ul{ padding:10px 4px 10px 4px; margin:0px 0px 0px 0px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgARamh7C5ySQmiOdW16hXOJ1wTrQxZIRcadxdtczZV7ALGU4H4N2npnsbb6lfI0st4wHCiAUCqYph7RFCz4zCTyyxLAZkHaCouDEaIdJ0F9YIJ-jcB1cEkwFz1qYwo5tVJtmAQpBR_z3ZW/h120/item-secondary-container-bg-namkna-blogspot.jpg); background-repeat: repeat-x; background-color: #FF9900; border-bottom: 1px solid #CA6500; }  /* -------- Secondary Items------ */ #nav-container div a, #nav-container ul a{ padding:3px 10px 3px 6px; background-color: #FFFFFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIIjDiOhNsY35eCVwDFzpofA9WIhjM84Huf07ajT4FwHVBdeqSTM7dppYEMCwrwFkGb4ND4ltdI6PsyPHcr_rcpwjjhguh56vEFx9cGa5joasbZVUEsu4Lmf55J2M2QbPMQxS3kHnjfGbo/h120/item-secondary-bg-namkna-blogspot.jpg); background-repeat: no-repeat; background-position: 0px 22px; font-size:11px; border-width:0px; border-style:none; margin: 0px 0px 0px 0px; width: 149px; }  /*^'^ Secondary Items Hover State ^'^*/ #nav-container div a:hover, #nav-container ul a:hover{ background-color: #FFFFFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIIjDiOhNsY35eCVwDFzpofA9WIhjM84Huf07ajT4FwHVBdeqSTM7dppYEMCwrwFkGb4ND4ltdI6PsyPHcr_rcpwjjhguh56vEFx9cGa5joasbZVUEsu4Lmf55J2M2QbPMQxS3kHnjfGbo/h120/item-secondary-bg-namkna-blogspot.jpg); background-repeat: no-repeat; color:#CC0000; }  /* ---- Secondary Item Titles ---- */ #nav-container .item-secondary-title{ cursor:default; padding:4px 0px 3px 7px; color: #6C3600; font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica; font-size:11px; /* background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAWZH0WUNn_idpeUaE56PtXqNnCdA8osHleVfmXWHttRDPIaL3TPd8RHAveMarTT8OptzXYeaHTJdUP3ROh1e3FIlveOdh7VTs4fZ_Pkd92WlSnyINFXA88S17eTbMyCV_WiGSCDTffeau/h120/item-secondary-title-bg-namkna-blogspot.jpg); */ background-repeat: no-repeat; font-weight:bold; }  /*^'^ Horizontal Dividers ^'^*/ #nav-container .divider-horiz{ border-top-width:1px; margin:5px 5px; border-color: #C16100; }  /*^'^ Vertical Dividers ^'^*/ #nav-container .divider-vert{ border-left-width:1px; height:15px; margin:4px 2px 0px 2px; border-color:#AAAAAA; }
6- Lưu lại
7- Thêm đoạn code bên dưới vào trước thẻ  </header> . (hoặc thêm 1 HTML/Javarscrip và dán vào)
<div class="nav-container-outer"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW23Zdft5w6ruEU6qrO0pG6FSLTGD425R9oy8yrzNly4maTPzFvkohkPBO3YwB5sG5JqVKxP6-wAW93NS__UBrvNc6cfqEPkdGeOkG6vAHtswI4d3-WTTPnJCoTOkYiWQb_giX_lVi_wQd/s1600/nav-bg-l.jpg" alt="" class="float-left" /> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhctpjhN2rhLfrmgfO5e7BtJMTQA0zcbGNZK76oBrH1tq5pO_C_E_r0-uUqBzNJDU3Pp1GwVXHW0DC6QODyzYXwRRdII4jUOk0GJ0VMT-uY7cs5EIcFpmVH7JRe1OiHa6jZqyILH_oBgslE/s1600/nav-bg-r.jpg" alt="" class="float-right" /> <ul id="nav-container" class="nav-container"> <li><a class="item-primary" href="#">HOME</a> </li>  <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#">Products</a>  <ul style="width:150px;"> <li><a href="#">SoftwarePlus</a></li> <li><a href="#">MagicDriver</a></li> <li><a href="#">GreatFX</a></li> <li><a href="#">SampleSoft</a></li> <li><a href="#">UnDoIt</a></li> <li><a href="#">100% CSS Menu</a></li> <li><a href="#;">With Cross-Browser</a></li> <li><a href="#;">Dropdowns</a></li> <li><a href="#;">Absolutely NO Javascript</a></li> <li><a href="#;">Being Used On</a></li> <li><a href="#;">These Menus</a></li> <li><span class="divider divider-horiz" ></span></li> <li><a href="#;">Example Of a Divider</a></li> <li><a href="#;">With No Title</a></li> </ul></li>  <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#">Quality</a> <ul style="width:150px;"> <li><a href="#">SoftwarePlus</a></li> <li><a href="#">MagicDriver</a></li> <li><a href="#">GreatFX</a></li> <li><a href="#">SampleSoft</a></li> <li><a href="#">UnDoIt</a></li> <li><a href="#">100% CSS Menu</a></li> <li><a href="#;">With Cross-Browser</a></li> <li><a href="#;">Dropdowns</a></li> <li><a href="#;">Absolutely NO Javascript</a></li> <li><a href="#;">Being Used On</a></li> <li><a href="#;">These Menus</a></li> <li><span class="divider divider-horiz" ></span></li> <li><a href="#;">Example Of a Divider</a></li> <li><a href="#;">With No Title</a></li> </ul></li>  <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#">Services</a> <ul style="width:150px;"> <li><span class="item-secondary-title" >Title For Links</span></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> <li><span class="divider divider-horiz" ></span></li> <li><span class="item-secondary-title" >Title After Divider</span></li> <li><a href="#">Once Again...</a></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> </ul></li>  <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#;">Very Long Item</a>  <ul style="width:150px;"> <li><span class="item-secondary-title" >Title For Links</span></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> <li><span class="divider divider-horiz" ></span></li> <li><span class="item-secondary-title" >Title After Divider</span></li> <li><a href="#">Once Again...</a></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> </ul></li>  <li><span class="divider divider-vert" ></span></li> <li><a class="item-primary" href="#;">Fully Flexible</a> <ul style="width:150px;"> <li><span class="item-secondary-title" >Title For Links</span></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> <li><span class="divider divider-horiz" ></span></li> <li><span class="item-secondary-title" >Title After Divider</span></li> <li><a href="#">Once Again...</a></li> <li><a href="#">These Links Still Appear</a></li> <li><a href="#">Just Like The Others</a></li> <li><a href="#">Even When Under A Title</a></li> </ul></li> <li class="clear">&nbsp;</li></ul> </div>
Chúc thành công!

Menu Drop Down 1 cấp cho blogspot Style 4

Posted: 01 Apr 2012 02:23 AM PDT

Menu Drop Down 1 cấp cho blogspot Style 4 - Massive Blue Drop Down menu  - http://namkna.blogspot.com/
Cách tiến hành:

   1- Đăng nhập vào Blog
   2- Vào thiết kế
   3- Chọn Chỉnh sử HTML (Không cần mở rộng tiện ích mẫu)
   4- Thêm đoạn code sau vào trước thẻ  ]]></b:skin> .
.menu{ border:none; border:0px; margin:0px; padding:0px; font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; font-size:14px; font-weight:bold; } .menu ul{ background:#333333; height:35px; list-style:none; margin:0; padding:0; } .menu li{ float:left; padding:0px; } .menu li a{ background:#333333 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj602OdTgfEIvHCjMA5BChlNEz5UbSONmLk4_YoYPpS5g_nORdywyiR0f6dToudA2UGW5i_Zc1q0njDR-k_Aj3YE9BvJwX15qMGe0Gw0IXTlHkQ4NMb9AzJngJxVkwg0xOZELWKYdYZEz4h/h120/seperator-namkna-blogspot.gif") bottom right no-repeat; color:#cccccc; display:block; font-weight:normal; line-height:35px; margin:0px; padding:0px 25px; text-align:center; text-decoration:none; } .menu li a:hover, .menu ul li:hover a{ background: #2580a2 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjflZT-UWplSseDvlAQAu6JHtlZzRg0cZfL1I0SJAcHXrDFM5saUeNle9qzA6hQrZue6j2X-IFwwq5SFNagyK4ujTZbpd0t5qwuy3p7tYSB6ZlLdFkTv-0UEoq6cOJTmOnQIFKa0IkZD1eM/h120/hover-namkna-blogspot.gif") bottom center no-repeat; color:#FFFFFF; text-decoration:none; } .menu li ul{ background:#333333; display:none; height:auto; padding:0px; margin:0px; border:0px; position:absolute; width:225px; z-index:200; /*top:1em; /*left:0;*/ } .menu li:hover ul{ display:block; } .menu li li { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2dGwXCVcQlGEDDDEFkiqv4xPC7rpmqxD-_UuDoOGy9ruJTKtyqm8NFuPFU96IU4bVKNtEyUZmTbPjHfuXgzPr1eg1YzBHJJkbc-Skl200BcoAFao7_FP_DaOW2OULdRP3mBPY42zOZLmh/h120/sub_sep-namkna-blogspot.gif') bottom left no-repeat; display:block; float:none; margin:0px; padding:0px; width:225px; } .menu li:hover li a{ background:none; } .menu li ul a{ display:block; height:35px; font-size:12px; font-style:normal; margin:0px; padding:0px 10px 0px 15px; text-align:left; } .menu li ul a:hover, .menu li ul li:hover a{ background:#2580a2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3pcaj9XfwDQbZ1haU6JvYciWyS697TWpQ1ajU2j9O_AzCPXRBagJ27wsLSFyAJLFP_3TXIdlMuFYvRnHygltqwsyFO-h2fDbkGrNUG2Fi9NPOkyeNHXPba2djpHPhy6cZ8k5UF7_wn97c/h120/hover_sub-namkna-blogspot.gif') center left no-repeat; border:0px; color:#ffffff; text-decoration:none; } .menu p{ clear:left; }
6- Click chọn  Lưu mẫu
7- Thêm đoạn code bên dưới vào trước thẻ  </header> . (hoặc thêm 1 HTML/Javarscrip và dán vào)
<div class="menu"> <ul> <li><a href="/" >Home</a></li> <li><a href="#" id="current">Products</a> <ul> <li><a href="#">Drop Down CSS Menus</a></li> <li><a href="#">Horizontal CSS Menus</a></li> <li><a href="#">Vertical CSS Menus</a></li> <li><a href="#">Dreamweaver Menus</a></li> </ul> </li> <li><a href="#">FAQ</a> <ul> <li><a href="#">Drop Down CSS Menus</a></li> <li><a href="#">Horizontal CSS Menus</a></li> <li><a href="#">Vertical CSS Menus</a></li> <li><a href="#">Dreamweaver Menus</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> </div>
- Trong đó:  
  • Thay dấu # (màu đỏ)bằng liên kết tới nhãn, bài viết
  • Thay dấu # (màu cam) thành liên kết tới nhãn bài đăng thuộc Menu con.
  • Thay chữ màu xanh đậm thành tên nhãn, bài viết thuộc menu chính.
  • Thay chữ màu xanh nhạt thành tên bài viết nhãn thuộc menu con.
8. Lưu tiện ích lại. Nếu ở bước 7 không hiển thị thì bạn vào Phần tử trang Thêm 1 tiện ích HTML/Javarscrip trên phần header và thêm đoạn code ở bước 7 vao:
Chúc thành công!

Tạo drop menu kết hợp xổ ngang và sổ dọc

Posted: 31 Mar 2012 10:49 PM PDT

Hôm nay namkna sẽ giới thiệu cho các bạn một Style menu mới ngoài chức năng tạo menu xổ ngang còn có thêm chức năng xổ dọc ở các menu con khi ta dê chuột vào.
Đọc thêm bài viết »

Bài viết liên quan

Related Posts Plugin for WordPress, Blogger...