Tạo Menu Dropdown – Fixed Floating cho Blogspot

Menu là m?t di?u c?c k? quan tr?ng d?i v?i nh?ng b?n mu?n s? h?u 1 blog d?p và cá tính. Trong bài vi?t này, mình s? gi?i thi?u v?i các b?n cách làm Menu Dropdown – Fixed Floating cho Blogspot. Mình d? d?u g?ch ngang b?i vì bài này mình s? chia làm 2 ph?n: T?o Menu Dropdown và thêm hi?u ?ng Fixed Floating cho Menu (N?u b?n dã có Menu s?n cho blog thì vi?c còn l?i ch? là thêm hi?u ?ng Fixed Floating)

Menu Dropdown là menu mà có các item con du?c hi?n th? x? xu?ng khi ta rê chu?t d?n menu chính. Ð? b?t d?u, các b?n c?n dang nh?p vào Blogger. Sau dó d?n Template > Edit HTML, ? giao di?n Edit HTML, các b?n tìm d?n th? ]]> và thêm do?n code sau vào phía trên:

#navbar {background: #060505;width: 100%;color: #FFF;margin: 0px;padding: 0;border-top:0px solid #960100;height:35px;}#nav {margin: 0;padding: 0;}#nav ul {float: left;list-style: none;margin: 0;padding: 0;}#nav li {list-style: none;margin: 0;padding: 0;border-left:1px solid #333;border-right:1px solid #333;height:auto;}#nav li a, #nav li a:link, #nav li a:visited {color: #FFF;display: block;font:normal 12px Helvetica, sans-serif; margin: 0;padding: 9px 12px 10px 12px;text-decoration: none;}#nav li a:hover, #nav li a:active {background: #BF0100;color: #FFF;display: block;text-decoration: none;margin: 0;padding: 9px 12px 10px 12px;}#nav li {float: left;padding: 0;}#nav li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 160px;margin: 0;padding: 0;}#nav li ul a {width: 140px;}#nav li ul ul {margin: -25px 0 0 161px;}#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em;}#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {left: auto;}#nav li:hover, #nav li.sfhover {position: static;}#nav li li a, #nav li li a:link, #nav li li a:visited {background: #BF0100;width: 120px;color: #FFF;display: block;font:normal 12px Helvetica, sans-serif;margin: 0;padding: 9px 12px 10px 12px;text-decoration: none;z-index:9999;border-bottom:1px dotted #333;}#nav li li a:hover, #nav li li a:active {background: #060505;color: #FFF;display: block; margin: 0;padding: 9px 12px 10px 12px;text-decoration: none;}

Ch?n Save Template d? luu l?i.

Ti?p theo các b?n truy c?p d?n Layout, và thêm 1 widget HTML/JavaScript vào bên du?i ph?n Header, nhu hình du?i:

Sau dó các b?n thêm do?n sau vào bên trong widget:

• Home
• Item
• Item
• Item
• Item
  • Sub Item
  • Sub Item
  • Sub Item
  • Sub Item
• Item
  • Sub Item
  • Sub Item
  • Sub Item
  • Sub Item
• Item
  • Sub Item
  • Sub Item
  • Sub Item
  • Sub Item
• Item
  • Sub Item
  • Sub Item
  • Sub Item
  • Sub Item
• Item
  • Sub Item
  • Sub Item
  • Sub Item
  • Sub Item

Sau dó ch?n Save d? luu.

Done! V?y là b?n dã hoàn thành vi?c t?o Menu Dropdown cho Blogspot r?i.

Fixed Floating t?c là Menu c? d?nh khi b?n di chuy?n màn hình ra kh?i ph?m vi ban d?u nhung s? tr? l?i v? trí cu khi b?n màn hình c?a b?n quay l?i ban d?u. Ð? th?c hi?n di?u này các b?n vi?c các b?n c?n làm là thêm 1 do?n script vào bên trong Template. N?u b?n không làm Menu theo do?n code bên trên thì b?n c?n tìm th? quy d?nh style cho Menu trong blog c?a b?n.

B?n truy c?p vào d?a ch? blog b?ng trình duy?t Google Chrome và click chu?t ph?i vào Menu ch?n Ki?m tra ph?n t? ho?c Inspect Element và tìm th? có d?ng

ngày bên trên menu. ? dây abc chính là class c?a th? quy d?nh style cho menu. Gi?ng nhu ?nh bên du?i thì secondary-navigation là class c?a th?:

Sau dó b?n thay navbar ? do?n script bên du?i b?ng tên class c?a b?n. Ti?p theo b?n vào Layout, thêm 1 widget HTML/Javascript ? b?t c? v? trí nào và thêm do?n script vào bên trong (Ðã du?c thay b?ng class c?a b?n):

Sau khi vi?t xong bài này và Save thì mình dã test code ho?t d?ng r?t t?t, tuy nhiên sau dó vài ngày thì mình làm trên 1 blog khác thì l?i không du?c. Cu?i cùng thì mình tìm ra là th? quy d?nh style c?a menu b?n ph?i vi?t li?n, ví d? nhu navbar, mainnav, nav.. ch? không du?c là nav-bar, main-nav hay secondary-navigation nhu bên trên. N?u không vi?t li?n thì khi thay vào script bên du?i s? không ho?t d?ng du?c. Ð? thay th? tên th? quy d?nh style cho menu, b?n vào Template > Edit HTML, Copy toàn b? code c?a Template r?i paste vào Notepad, sau dó trong Notepad b?n ?n Ctrl + H, b?n di?n Find What là tên th? cu, và Replace with là tên m?i r?i ch?n Replace All.

Done! V?y là b?n dã thêm hi?u ?ng Fixed Floating cho Menu thành công.

Ðây là Demo cho Menu Dropdown kèm hi?u ?ng Fixed Floating: http://www.taran4.com/

Mình hy v?ng trong bài vi?t này, b?n dã có th? t?o cho mình 1 Menu Dropdown và thêm hi?u ?ng Fixed Floating du?c cho Menu. N?u b?n mu?n nghiên c?u k? hon, hãy ch?u khó nghiên c?u ph?n code và Google nh?ng thành ph?n bên trong.

Th?n,

Ð?ng Bách

T? khóa: blogspot, hu?ng d?n blogspot