Loading post navigation ...
 
 
Thông báo từ BlOg FD
Bạn đang sử dụng trình duyệt Internet Explorer phiên bản nhỏ hơn 7. Vì thế 1 số nội dung trên BlOg FD sẽ không hiện thị được. Bạn nên nâng cấp trình duyệt Internet Explorer của mình lên thành IE7 hoặc IE8 hay dùng các trình duyệt khác như : FireFox, Chrome, Opera ... để có thể xem BlOg FD ở chế độ hiển thị tốt nhất.

Nếu máy tính của bạn chưa có các trình duyệt trên, bạn có thể download ở các link mình đã đưa.

• Internet Explorer 8 (16.1MB)

• FireFox 4 (11.8MB)

• Chrome 11 (34.1MB)

Pro page

48
Nhận xét

[Updated] K14 - Pro Menu (với hiệu ứng prodown)

in , | by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

Lấy ý tưởng từ việc thực hiện demo cho bài viết Tạo Menu Thanh menu ngang có sổ dọc xuống mình dự định sẽ updated thủ thuật lên bằng việc tạo các giao diện khác nhau cho menu khi xem ở các trang khác nhau, ví dụ như các trang label. Nhưng sau đó mình nhớ đến kênh14 cũng có menu như vậy (chỉ khác là không có dropdown) mà giao diện lại đẹp nữa, nên mình quyết định Rip menu này. Và ở bài này menu sẽ không có hiệu ứng dropdown, mình dự định sẽ thêm hiệu ứng dropdown trong thời gian tới.


Xem DEMO

Hình ảnh minh họa :

Updated: Đã cập nhật hiệu ứng sổ dọc cho menu, các bạn có thể xem ở bên dưới

Do làm biếng design giao diện cho nó, nên mình lấy hình nên bên kênh 14 về rồi fix lại để giới thiệu cho mọi người. Và sau đây là 1 số tính năng của nó :
- Tự động thay đổi giao diện của menu cho các trang định sẵn.
- có hiệu ứng trang hiện hành (current) trên menu.
- có 6 kiểu giao diện cho các lựa chọn để thay đổi.

Sau đây là các bước thực hiện :
- Tạo 1 widget HTML/javascript ở nơi muốn đặt menu (tốt nhất là trên header của blog), sau đó dán đoạn code bên dưới vào :
<style type="text/css">
#promenu ul li a:hover {text-decoration:none;}
#promenu {
background-repeat: repeat-x;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjupF5lAQvwPCvZMAz-LlRgotdOsYEYylsr40MI3wwME_FOyCfNpvRofU__F__yjSzpTymnwIvUq_BT98CDH-Xag9GYlyEhmC0g-33_hJ6oupx5owN5iJ1xO6zS60DNl8HisU2MKBPDQC7T/s400/1-6-bg.png);
width: 100%;
height: 32px;
}
.menu {
list-style: none;
width: 100%;
margin: auto!important;
}
.menu li {
float: left;
text-align: center;
padding:0!important;
}
.menu li a {
color: white;
}
.menu .active, .menu li:hover {
background-position: 0 -34px;
float: left;
}
.menu .active span, .menu span:hover {
background-position: 100% -34px;
float: left;
line-height: 30px;
height: 30px;
}
.menu li a span {
font: 12px/31px Tahoma;
font-weight: 700;
display: block;
text-align: center;
padding: 0 8px 0 9px;
}
.menusep {
background-position: 0 0;
height: 32px;
line-height: 32px;
width: 2px;
}
</style>

<script type="text/javascript">
//<![CDATA[
var style1=["0px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdCCNypbRauCz9oYDLtuM6aVuYGbKHKymNVyg8-z57N2XvwRmDBKXWrWDSmawE8Ubbm0HqdtxSUCuUF0-q3xV7U4x-53UpldMn53z2clDTFtNnR1JdqGu4AiOE0eWlFtV2y54BVpBipJgp/s318/style1-sp.png"];
var style2=["-40px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEityXuHRkMIyeCnILPeuEBmQeIB7Rkn_-4FvVd-tWOri25vyrIn2JDskci-rF6QLOoohDsR9UblD1u0rgumIqN8xN0piZOjfUgw70jCvU8VqAcMktNwF3W6Y7knDbX_8KiqpTNiPHoKU8rQ/s318/style2-sp.png"];
var style3=["-80px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW8QZBy7DUdHb5LST3R_qBG8JOx8tgekE1dxom_MNAu70-uumijI6B9Jk8PXh36DcJOoRNiQzRTPf_xrUv7sfYnBvK0uJWKlV_3kmyaPGTRMRguoWxjMnwvCRe6FZSezctziPShOC0GEGG/s318/style3-sp.png"];
var style4=["-120px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSqSJd-P4ohxCPqoLayvCaJjCQ8xOaYQzq_dY3oYKWXbd0fV6dvG-Vvqh-El9MuHImxNvCAU3NOXIJzBJitxhpJXowzpNbQHcaHE5nfXdn2SLhahS6Ph7TX2I37v3Knd1pQ5UXE7BCVtHY/s318/style4-sp.png"];
var style5=["-160px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht7515cKRZwRGyfFpb58O82Y07hb2KbMk5ObohKYUH6XpxxGrpmHPArOwQNblWNb4-6FMAD1A8BIxBz5fHTa2UKpaq504w9o_eYmNgmgRVm4-Ew61YW72vA7ZOyWXXlkH_myYhRZFbv5bU/s318/style5-sp.png"];
var style6=["-200px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoOZ6kK6NHOhxvOovYo_s-zmrAsBBsNT-R9S2dUzs4RpEkAjjngXg60YL-tn9YI_GhKRkqGksBkNwbq2EV9GiT7-VXs2-CrgApxbudCnPAmA1QLBX4-JzORPv6_HgEmGxdm0jS1SGOj-Dc/s318/style6-sp.png"];

var m0=["http://demo.fandung.com","Home","home_id"];
var m1=["link_menu1","Menu1","m_id1"];
var m2=["link_menu2","Menu2","m_id2"];
var m3=["link_menu3","Menu3","m_id3"];
var m4=["link_menu4","Menu4","m_id4"];
var m5=["link_menu5","Menu5","m_id5"];
var m6=["link_menu6","Menu6","m_id6"];

var ttmenu = [m0,m1,m2,m3,m4,m5,m6];

var n=ttmenu.length;
var list_menu=[];
var list_active=[];
var c_menu='';
var m_homepage='http://demo.fandung.com';
var h_cond=m_homepage+'/search';

var active_cond = location.href;
var home_cond=active_cond.split("?")[0];

var bg_pos='';
var sp_img='';

if (active_cond.indexOf(ttmenu[1][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else if (active_cond.indexOf(ttmenu[2][0])!=-1) {bg_pos=style3[0];sp_img=style3[1];}
else if (active_cond.indexOf(ttmenu[3][0])!=-1) {bg_pos=style4[0];sp_img=style4[1];}
else if (active_cond.indexOf(ttmenu[4][0])!=-1) {bg_pos=style5[0];sp_img=style5[1];}
else if (active_cond.indexOf(ttmenu[5][0])!=-1) {bg_pos=style6[0];sp_img=style6[1];}
else if (active_cond.indexOf(ttmenu[6][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else {bg_pos=style1[0];sp_img=style1[1];}

var mcss = document.createElement('style');
mcss.type = 'text/css';
mcss.innerHTML = '#promenu {background-position: 0 '+bg_pos+'} .menu li:hover, .menu .active, .menu .active span, .menusep, .menu span:hover {background-image: url('+sp_img+')}';
document.body.appendChild(mcss);

c_menu +='<div id="promenu"><ul class="menu">';

for (var i=0;i<n;i++) {

if ((home_cond==m_homepage)||(home_cond==h_cond)) {list_active[0]='class="active"';}
else if (active_cond.indexOf(ttmenu[i][0])!=-1) {list_active[i]='class="active"';} else {list_active[i]='';}

list_menu[i]='<li><a href="'+ttmenu[i][0]+'" '+list_active[i]+' id="'+ttmenu[i][2]+'"><span>'+ttmenu[i][1]+'</span></a></li>';
c_menu +=list_menu[i];
if (i<n-1) {c_menu +='<li class="menusep"> </li>';}
}
c_menu +='</ul></div>';
document.write(c_menu);

//]]>
</script>

Một vài hướng dẫn :
- Việc đầu tiên là thay http://demo.fandung.com thành tên miền của blog bạn, nhớ là không có dấu (/) theo sau tên miền.
- Để thêm menu, bớt menu, thay đổi tên hiển thị của menu, thay đổi link liên kết của menu,... các bạn chỉnh sửa ở đoạn code như bên dưới :
...
...
var m0=["http://demo.fandung.com","Home","home_id"];
var m1=["link_menu1","Menu1","m_id1"];
var m2=["link_menu2","Menu2","m_id2"];
var m3=["link_menu3","Menu3","m_id3"];
var m4=["link_menu4","Menu4","m_id4"];
var m5=["link_menu5","Menu5","m_id5"];
var m6=["link_menu6","Menu6","m_id6"];

var ttmenu = [m0,m1,m2,m3,m4,m5,m6];
...
...
- http://demo.fandung.com thay bằng địa chỉ trang chủ của blog bạn
- link_menu1, link_menu2, ... là đia chỉ liên kết của các menu.
- Menu1, Menu2, ... là tên hiển thị của các menu.
- nếu muốn thêm nhiều menu nữa thì các bạn thêm code tương tự như bên dưới :
...
...
var m0=["http://demo.fandung.com","Home","home_id"];
var m1=["link_menu1","Menu1","m_id1"];
var m2=["link_menu2","Menu2","m_id2"];
var m3=["link_menu3","Menu3","m_id3"];
var m4=["link_menu4","Menu4","m_id4"];
var m5=["link_menu5","Menu5","m_id5"];
var m6=["link_menu6","Menu6","m_id6"];
var m7=["link_menu7","Menu7","m_id7"];
var m8=["link_menu8","Menu8","m_id8"];

var ttmenu = [m0,m1,m2,m3,m4,m5,m6,m7,m8];
...
...
- để tùy chọn style cho menu ở mỗi trang, các bạn chỉnh sửa ở đoạn code bên dưới :
...
...
if (active_cond.indexOf(ttmenu[1][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else if (active_cond.indexOf(ttmenu[2][0])!=-1) {bg_pos=style3[0];sp_img=style3[1];}
else if (active_cond.indexOf(ttmenu[3][0])!=-1) {bg_pos=style4[0];sp_img=style4[1];}
else if (active_cond.indexOf(ttmenu[4][0])!=-1) {bg_pos=style5[0];sp_img=style5[1];}
else if (active_cond.indexOf(ttmenu[5][0])!=-1) {bg_pos=style6[0];sp_img=style6[1];}
else if (active_cond.indexOf(ttmenu[6][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else {bg_pos=style1[0];sp_img=style1[1];}
...
...
- ttmenu[1][0], ttmenu[2][0], ..., ttmenu[6][0] ; đây là các phần tử trong mảng 2 chiều ttmenu, tương ứng với địa chỉ liên kết của các menu : Menu1, Menu2, ..., Menu6
- ở trên menu0, tức là menu HOME mình cho style mặc định là style1. cùng style với các trang liên kết không có trong menu (ví dụ các trang archive hoặc trang bài viết, ...) , hoặc các liên kết không được chọn style để hiển thị.
- code trên sẽ được hình dung như bên dưới :
Menu0 ------ style1
Menu1 ------ style2
Menu2 ------ style3
Menu3 ------ style4
Menu4 ------ style5
Menu5 ------ style6
Menu6 ------ style2
Trang khác ------ style1
- Nếu muốn thay đổi style cho các trang, các bạn chỉ cần đổi tên style1, style2,... thành các style khác là được. tức là các vị trí trong code bên dưới :
...
...
if (active_cond.indexOf(ttmenu[1][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else if (active_cond.indexOf(ttmenu[2][0])!=-1) {bg_pos=style3[0];sp_img=style3[1];}
else if (active_cond.indexOf(ttmenu[3][0])!=-1) {bg_pos=style4[0];sp_img=style4[1];}
else if (active_cond.indexOf(ttmenu[4][0])!=-1) {bg_pos=style5[0];sp_img=style5[1];}
else if (active_cond.indexOf(ttmenu[5][0])!=-1) {bg_pos=style6[0];sp_img=style6[1];}
else if (active_cond.indexOf(ttmenu[6][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else {bg_pos=style1[0];sp_img=style1[1];}
...
...

- Nếu như có nhiều menu thì các bạn cứ thêm code như bên dưới để chọn style cho nó :
...
...
if (active_cond.indexOf(ttmenu[1][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else if (active_cond.indexOf(ttmenu[2][0])!=-1) {bg_pos=style3[0];sp_img=style3[1];}
else if (active_cond.indexOf(ttmenu[3][0])!=-1) {bg_pos=style4[0];sp_img=style4[1];}
else if (active_cond.indexOf(ttmenu[4][0])!=-1) {bg_pos=style5[0];sp_img=style5[1];}
else if (active_cond.indexOf(ttmenu[5][0])!=-1) {bg_pos=style6[0];sp_img=style6[1];}
else if (active_cond.indexOf(ttmenu[6][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else if (active_cond.indexOf(ttmenu[7][0])!=-1) {bg_pos=style3[0];sp_img=style3[1];}
else if (active_cond.indexOf(ttmenu[8][0])!=-1) {bg_pos=style4[0];sp_img=style4[1];}
else {bg_pos=style1[0];sp_img=style1[1];}
...
...
- lưu ý : ttmenu[7][0], và ttmenu[8][0] là liên kết của các Menu7, và Menu8.
- nếu muốn chỉ 1 trang nào đó có giao diện đặc biệt khác với các trang còn lại (ở đây mình ví dụ là trang Menu1) thì đoạn code ở trên sẽ chỉ còn như bên dưới :
...
...
if (active_cond.indexOf(ttmenu[1][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else {bg_pos=style1[0];sp_img=style1[1];}
...
...
- Đoạn code trên có nghĩa là chỉ có trang Menu1 là có giao diện riêng biệt là Style2, còn các trang khác sẽ có giao diện Style1.

Như vậy mình hướng dẫn đã xong. các bạn cứ test thử, nếu có trục trặc gì mình sẽ fix lại bài viết và cập nhật thêm hướng dẫn.

----- UPDATED -----
K14 - Promenu (với hiệu ứng sổ dọc)
- ở bản update này, mình sẽ cập nhật thêm tính năng thêm submenu cho menu chính. Tính năng này mình kết hợp từ bài viết "Tạo menu nằm ngang với hiệu ứng sổ dọc".
- Để thực hiện việc cập nhật này, các bạn phải xem lại bài viết Tạo Menu Thanh menu ngang có sổ dọc xuống

Xem DEMO

Hình ảnh minh họa :

- Sau đây là code mẫu của thủ thuật đã updated, các bạn thực hiện theo hướng dẫn của bài này và bài Tạo Menu Thanh menu ngang có sổ dọc xuống để có thể chỉnh sửa lại từ code mẫu :
<script src="http://fandung.googlecode.com/svn/trunk/js/dropdown2.js" type="text/javascript"></script>

<style type="text/css">
#promenu ul li a:hover {text-decoration:none;}
#promenu {
background-repeat: repeat-x;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjupF5lAQvwPCvZMAz-LlRgotdOsYEYylsr40MI3wwME_FOyCfNpvRofU__F__yjSzpTymnwIvUq_BT98CDH-Xag9GYlyEhmC0g-33_hJ6oupx5owN5iJ1xO6zS60DNl8HisU2MKBPDQC7T/s400/1-6-bg.png);
width: 100%;
height: 32px;
}
.menu {
list-style: none;
width: 100%;
margin: auto!important;
}
.menu li {
float: left;
text-align: center;
padding:0!important;
}
.menu li a {
color: white;
height:30px;
display:block;
}
.menu .active, .menu li:hover {
background-position: 0 -34px;
float: left;
}

.menu .active span, .menu span:hover {
background-position: 100% -34px;
float: left;
line-height: 30px;
height: 30px;
}

.menu li a span {
font: 12px/31px Tahoma;
font-weight: 700;
display: block;
text-align: center;
padding: 0 8px 0 9px;
}
.menusep {
background-position: 0 0;
height: 32px;
line-height: 32px;
width: 2px;
}
.promenu_sub {
background-repeat: repeat-x;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisSxu54HWEMwefOfcDdKvTRtS9B_t_aSdEqUJvhRf04YLQKlAsgYZBZhgQgKUy4rasCCqg8GaKRxtx92rFRkjK4uD7QZF5CPesakKXTJMuZ9rFC29vKqwwjPFdeMOPvBUS9FkYQsd2YV46/s240/1-6-bg_sub2.png);
margin-top:1px;
padding:1px;
color: #fff;;
margin: 1 1px;
padding: 7px 12px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
cursor:pointer;
border-top:1px solid #ededed;
}
</style>

<script type="text/javascript">
//<![CDATA[
var style1=["0px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdCCNypbRauCz9oYDLtuM6aVuYGbKHKymNVyg8-z57N2XvwRmDBKXWrWDSmawE8Ubbm0HqdtxSUCuUF0-q3xV7U4x-53UpldMn53z2clDTFtNnR1JdqGu4AiOE0eWlFtV2y54BVpBipJgp/s318/style1-sp.png"];

var style2=["-40px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEityXuHRkMIyeCnILPeuEBmQeIB7Rkn_-4FvVd-tWOri25vyrIn2JDskci-rF6QLOoohDsR9UblD1u0rgumIqN8xN0piZOjfUgw70jCvU8VqAcMktNwF3W6Y7knDbX_8KiqpTNiPHoKU8rQ/s318/style2-sp.png"];

var style3=["-80px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW8QZBy7DUdHb5LST3R_qBG8JOx8tgekE1dxom_MNAu70-uumijI6B9Jk8PXh36DcJOoRNiQzRTPf_xrUv7sfYnBvK0uJWKlV_3kmyaPGTRMRguoWxjMnwvCRe6FZSezctziPShOC0GEGG/s318/style3-sp.png"];

var style4=["-120px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSqSJd-P4ohxCPqoLayvCaJjCQ8xOaYQzq_dY3oYKWXbd0fV6dvG-Vvqh-El9MuHImxNvCAU3NOXIJzBJitxhpJXowzpNbQHcaHE5nfXdn2SLhahS6Ph7TX2I37v3Knd1pQ5UXE7BCVtHY/s318/style4-sp.png"];

var style5=["-160px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht7515cKRZwRGyfFpb58O82Y07hb2KbMk5ObohKYUH6XpxxGrpmHPArOwQNblWNb4-6FMAD1A8BIxBz5fHTa2UKpaq504w9o_eYmNgmgRVm4-Ew61YW72vA7ZOyWXXlkH_myYhRZFbv5bU/s318/style5-sp.png"];

var style6=["-200px","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoOZ6kK6NHOhxvOovYo_s-zmrAsBBsNT-R9S2dUzs4RpEkAjjngXg60YL-tn9YI_GhKRkqGksBkNwbq2EV9GiT7-VXs2-CrgApxbudCnPAmA1QLBX4-JzORPv6_HgEmGxdm0jS1SGOj-Dc/s318/style6-sp.png"];

var m0=["http://demo.fandung.com","Home","home_id"];
var m1=["/search/label/Label1","Label1","id1"];
var m2=["/search/label/Label2","Label2","id2"];
var m3=["/search/label/Label3","Label3","id3"];
var m4=["/search/label/Label4","Label4","id4"];
var m5=["/search/label/Label5","Label5","id5"];
var m6=["/search/label/Label6","Label6","id6"];
var m7=["/search/label/Label7","Label7","id7"];
var m8=["/search/label/Label8","Label8","id8"];
var m9=["/search/label/Label9","Label9","id9"];

var ttmenu = [m0,m1,m2,m3,m4,m5,m6,m7,m8,m9];
var n=ttmenu.length;
var list_menu=[];
var list_active=[];
var c_menu='';
var m_homepage='http://demo.fandung.com/';
var h_cond=m_homepage+'search';

var active_cond = location.href;
var home_cond=active_cond.split("?")[0];

var bg_pos='';
var sp_img='';

if (active_cond.indexOf(ttmenu[1][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else if (active_cond.indexOf(ttmenu[2][0])!=-1) {bg_pos=style3[0];sp_img=style3[1];}
else if (active_cond.indexOf(ttmenu[3][0])!=-1) {bg_pos=style4[0];sp_img=style4[1];}
else if (active_cond.indexOf(ttmenu[4][0])!=-1) {bg_pos=style5[0];sp_img=style5[1];}
else if (active_cond.indexOf(ttmenu[5][0])!=-1) {bg_pos=style6[0];sp_img=style6[1];}
else if (active_cond.indexOf(ttmenu[6][0])!=-1) {bg_pos=style2[0];sp_img=style2[1];}
else if (active_cond.indexOf(ttmenu[7][0])!=-1) {bg_pos=style3[0];sp_img=style3[1];}
else {bg_pos=style1[0];sp_img=style1[1];}

var mcss = document.createElement('style');
mcss.type = 'text/css';
mcss.innerHTML = '#promenu, .promenu_sub {background-position: 0 '+bg_pos+'} .menu li:hover, .menu .active, .menu .active span, .menusep, .menu span:hover {background-image: url('+sp_img+')}';
document.body.appendChild(mcss);

// submenu
function otab(){document.write('<table border="0" bordercolor="#999" style="background-color: #FFF" cellspacing="0" cellpadding="0">');}

function submn(submn_link,submn_text){ document.write('<tr><td onmouseover="this.style.background=\'url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjupF5lAQvwPCvZMAz-LlRgotdOsYEYylsr40MI3wwME_FOyCfNpvRofU__F__yjSzpTymnwIvUq_BT98CDH-Xag9GYlyEhmC0g-33_hJ6oupx5owN5iJ1xO6zS60DNl8HisU2MKBPDQC7T/s400/1-6-bg.png) repeat-x 0 '+bg_pos+'\'" onmouseout="this.style.background=\'url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisSxu54HWEMwefOfcDdKvTRtS9B_t_aSdEqUJvhRf04YLQKlAsgYZBZhgQgKUy4rasCCqg8GaKRxtx92rFRkjK4uD7QZF5CPesakKXTJMuZ9rFC29vKqwwjPFdeMOPvBUS9FkYQsd2YV46/s240/1-6-bg_sub2.png) repeat-x 0 '+bg_pos+'\'" class="promenu_sub" onclick="window.location.href=\''+submn_link+'\'">'+submn_text+'</td></tr>');}

function ctab(){document.write('<\/table>');}

function otab(child_id){document.write('<table id="' + child_id +'" border="0" bordercolor="#999" style="background-color: #FFF" cellspacing="0" cellpadding="0">');}

//submenu

c_menu +='<div id="promenu"><ul class="menu">';

for (var i=0;i<n;i++) {

if ((home_cond==m_homepage)||(home_cond==h_cond)) {list_active[0]='class="active"';}
else if (active_cond.indexOf(ttmenu[i][0])!=-1) {list_active[i]='class="active"';} else {list_active[i]='';}

list_menu[i]='<li><a href="'+ttmenu[i][0]+'" '+list_active[i]+' id="'+ttmenu[i][2]+'"><span>'+ttmenu[i][1]+'</span></a></li>';
c_menu +=list_menu[i];
if (i<n-1) {c_menu +='<li class="menusep"> </li>';}
}
c_menu +='</ul></div>';
document.write(c_menu);

//]]>
</script>

<script type="text/javascript">
otab("id1_child");
submn('link_submenu1.1','Submenu 1.1');
submn('link_submenu1.2','Submenu 1.2');
ctab();
at_attach("id1", "id1_child", "hover", "y", "pointer");

otab("id2_child");
submn('link_submenu2.1','Submenu 2.1');
ctab();
at_attach("id2", "id2_child", "hover", "y", "pointer");

otab("id3_child");
submn('link_submenu3.1','Submenu 3.1');
ctab();
at_attach("id3", "id3_child", "hover", "y", "pointer");

otab("id4_child");
submn('link_submenu4.1','Submenu 4.1');
submn('link_submenu4.2','Submenu 4.2');
submn('link_submenu4.3','Submenu 4.3');
submn('link_submenu4.4','Submenu 4.4');
submn('link_submenu4.5','Submenu 4.5');
submn('link_submenu4.6','Submenu 4.6');
ctab();
at_attach("id4", "id4_child", "hover", "y", "pointer");

otab("id5_child");
submn('link_submenu5.1','Submenu 5.1');
submn('link_submenu5.2','Submenu 5.2');
ctab();
at_attach("id5", "id5_child", "hover", "y", "pointer");

otab("id6_child");
submn('link_submenu6.1','Submenu 6.1');
ctab();
at_attach("id6", "id6_child", "hover", "y", "pointer");

otab("id7_child");
submn('link_submenu7.1','Submenu 7.1');
submn('link_submenu7.2','Submenu 7.2');
submn('link_submenu7.3','Submenu 7.3');
ctab();
at_attach("id7", "id7_child", "hover", "y", "pointer");

otab("id8_child");
submn('link_submenu8.1','Submenu 8.1');
submn('link_submenu8.2','Submenu 8.2');
submn('link_submenu8.3','Submenu 8.3');
submn('link_submenu8.4','Submenu 8.4');
submn('link_submenu8.5','Submenu 8.5');
submn('link_submenu8.6','Submenu 8.6');
submn('link_submenu8.7','Submenu 8.7');
ctab();
at_attach("id8", "id8_child", "hover", "y", "pointer");
</script>
- bản updated vẫn chưa hoàn thiện ở phần hiện hiệu ứng thay đổi style cho menu ở các trang submenu, mình sẽ fix sớm khi có thể.


Enter your mail address:
Bookmark and Share

Đăng lúc : 1/04/2012 12:00:00 CH

48

OpenAI

Cái ảnh này load lâu quá ! http://lh3.googleusercontent.com/-M_QJDP3LN78/Tvqdh-Z5AkI/AAAAAAAACMM/6QOCdVh75vk/s33/style4-bg.png

Em vào request time out !

Pig

oh cái này lần trước em cũng làm 1 cái r, nhưng khác a, e làm mấy cái style sheet riêng, rồi mỗi lần gọi .css ra luôn ;))

Phan Dũng

@Suzuki: uh, ko biết sao nữa, 1 số ảnh ở blog anh cũng time out, còn cái ảnh em đưa thì anh load được, ko biết có liên quan gì tới thằng VNPT ko, tại anh đang dùng VNPT. mà cũng ko chừng do thẳng google gặp sự cố gì chăng???

@Pika Rock : àh vậy hả. xong cái này anh gắn dropdown cho nó luôn (nếu như test ok :D)

OpenAI

@Anh Dũng: Em cũng VNPT.. ảnh load tận 21.32s vẫn chưa xong. Có lẽ khu vực ngoài miền Bắc đang đứt cáp =)).

Phan Dũng

ah, không phải, qua trình duyệt khác load ảnh cũng ko đc. hình như do VNPT rồi, chán thằng VNPT quá

OpenAI

Anh chuyển ảnh vào bài viết rồi lấy link có dạng.

1.xxxxx
2.xxxxxx
3.xxxxx
4.xxxxxxxx

v.v.. Load có vẻ ổn hơn, không bị ảnh hưởng.

Nguyen Duc

Đẹp thế nhỉ

Phan Dũng

đúng là do thằng VNPT rồi, lên công ty dùng mạng Viettel ko bị sao cả, hình ảnh load bình thường.

Phan Dũng

@Suzuki : thật ra upload ảnh từ picasa hay up trong bài viết thì nó đều vô trong picasa cả, anh xem rồi, chỉ cần đổi

xxx.googleusercontent.com thành x.bp.blogspot.com

là có thể load được

Quang Hoang

vnpt bữa nay chặn blogspot nữa rồi, hic:(

Nobita

Cái này là gán màu cho từng nhãn à anh Dũng, có cách nào để nó random không nhỉ, ấn F5 là nó đổi màu ấy :D

OpenAI

@Anh Dũng: Cũng hài thật anh Dũng à.. Cứ có domain riêng thì vào được. Nhưng mà ai dùng tên miền default thì ngậm ngùi.

Yolks

Hi vọng , sắp tới bài cũng e , bài này hay thật a Dũng nhỉ , cứ 1 label đổi màu cho mennu @@

Điện Tử ChipKool

Dùng FPT cho nó lành,hehe,chip thấy hiệu ứng menu khá hay,nhưng code không nên chèn hết lên đầu head,tốt nhất chia ra CSS chèn trước ]]></b:skin> còn lại nhét vào widget khi sửa chữa dễ tương tác,lang thang trong temple mệt lắm.hihi^^

Phan Dũng

@Suzuki_aka : ah, vậy hả, may quá :D
@Nobita : được chứ em, nếu muốn anh updated nó lên thành bản khác :D
@Yolks : cái yêu cầu của em là các backlink với comment đó phải ko, a sẽ sớm post bài cho em :D
@Chip: anh sợ mọi người gỡ không hết code nên đa phần anh cho nó vô hết widget của nó, còn cái nào dùng chung được thì anh mới đưa vô head

Điện Tử ChipKool

hihi,anh Dũng nói đúng,nhiều người mới nhập môn blogspot chỉ quen gỡ trong widget còn sot lại CSS trong temple nên khi chèn code khác bị xung đột ngay,cháy temple :D,em đang áp dụng code menu mega cho 1 temple có sẵn,nó xung đột tùm lum anh ak,nó chỉ hiện khung menu ,mà không hiên hiệu ứng trượt.mấy hôm em đang bận làm mấy mạch điện chơi Tết,hihi,;)).Chúc anh Dũng ra nhưng thủ thuật mới na,em quên mất,anh xem lại code recent post vnexpress nhé,anh tách nó ra CSS phần Script (js) cho riêng,còn phần chèn widget anh cho riêng,vì một số bạn muốn tạo nhiều thư mục riêng cho các label,nếu đặt trên Home page thì load nhiều js sẽ nặng lắm,http://www.fandung.com/2009/08/pro-tabnews-mang-phong-cach-cua.html:X

HelloXimo

Theo em anh nên đặt hẳn css vào các style1,style1,... để cho các title nó cùng màu luôn, chứ menu 1 kiểu title hiện 1 kiểu cũng ko hay lắm. Em truớc cũng làm random backgroun, title, menu kiểu vậy thấy đẹp hơn nhiều và chỉnh sửa đơn giản. Chỉ cần biết chút CSS là ai cũng sửa đc.
Tiện anh xem em dùng trang pape làm trang label như này liệu có đc sitelink ko, seo có tốt hơn ko.
http://congly-bay68-com.blogspot.com/p/tin-tuc.html
Link đẹp hơn rất nhiều. có đuôi .html

OpenAI

@HelloXimo: BlogSpot chỉ có giới hạn không quá 20 trang. Nếu site có hơn 20 tag thì nằm bó chiếu... Không được đâu bác ạ. Nói chung là google không tạo điều kiện Seo cho Blogger.

HelloXimo

Biết là chỉ giới hạn 20 trang nên chỉ dùng 20 trang làm label chính thôi. còn những label khác vẫn cứ để bình thường có sao đâu.
Mà sao mình VNPT vào các site *.blogspot.com vẫn bình thường nhể :X

Phan Dũng

@Ximo : cái style1, style2... anh tính rút gọn lại 1 chút để cho bớt rườm rà, tức là dùng chung 1 link background cho id promenu, chỉ thay đổi position có background là đc, hiện chưa rảnh để fix lại. Với lại cái style1, style2... này là anh dùng để chọn ảnh nền thôi, chứ về cơ bản code CSS của các style đều giống nhau.

Còn cái em nói gì mà Menu 1 kiểu, title 1 kiểu anh ko hiểu ý của em.

Phan Dũng

@Ximo :quên nữa, cái link em đưa anh ko vô được, time out rồi.

Unknown

@Phan Dũng Các title như tiêu đề bài viết, chuyên mục ở main và fotter ... đó anh. Đổi màu theo menu cho nó hoành tráng :D. Khi chọn label nào thì sẽ chạy css của label đó ^^
Cái link chắc anh bị VNPT chặn rồi, em từ 10h đêm qua cũng ko vào đc blogspot nữa Dùng UltraSurf ngắm thôi anh x(

Phan Dũng

@Ximo: ah, cái tiêu đề của bài viết đó hả, làm anh tưởng cái tên menu. Cái đó liên quan tới phần template, ý em muốn là khi qua 1 label khác thì sẽ có nhiều thay đổi hơn chứ ko đơn thuần là chỉ thay đổi menu.phải ko???

Unknown

Đúng rồi anh. Em dùng các lệnh điệu kiện để làm nên trong bài viết nó ko lưu đc. ko biết anh viết đc js như vậy ko.

Phan Dũng

trong code trên của anh cũng có 1 đoạn đó, em dùng địa chỉ của trang để thay đổi code css

ví dụ :

var mcss = document.createElement('style');
mcss.type = 'text/css';
mcss.innerHTML = '.post h3 {color:'+mã_màu+'}';
mcss.innerHTML += '#footer {background-color:'+bg_mã_màu+'}';
document.body.appendChild(mcss);

trong code ví dụ trên, biến mã_màu và bg_mã_màu sẽ thay đổi theo địa chỉ của trang đang xem. Nếu muốn thay đổi nhiều code css hơn của template thì cứ thêm vào và thêm biến vào.

Phan Dũng

với ý tưởng như em muốn, giả sử như muốn rip kênh 14 thì hoàn toàn có thể làm được, nhưng sẽ hơi lâu và hơi rối rắm chút thôi. Như bài này thì nó đã giải quyết được phần menu,chỉ còn phần giao diện của trang label thay đổi nữa là cũng coi như xong các phần chính để rip kênh 14

HelloXimo

Ý em là khi xem bài viết ấy. Ví dụ :
- Bài01 thuộc label01, label01 có màu Cam ( Cái này sẽ mặc định như cái Home của anh ở trên khi label ko dc add css )
- Bài02 thuộc label02, label02 có màu Đỏ
- Bài03 thuộc label03, label03 có màu Xanh.
Vậy khi chọn menu thuộc label02 có màu Đỏ. Sẽ ra list bài viết có tiêu đề... màu đỏ.
Vậy khi xem Bài02 thuộc label02 . Tiều đề bài viết đó sẽ vẫn dữ nguyên màu Đỏ, hay sẽ chuyển về màu Cam ( Chắc là Cam rồi , nhưng phải là Đỏ mới đẹp )
Tiếp tục ở sidebar hiện ra 1 Bài03 -> Click xem -> Bài03 này sẽ có tiêu đề màu Xanh, Đỏ hay Cam .
Vậy => là:
1. Css sẽ đc Active khi chọn label, khi xem bài viết thuộc label nào đi nữa thì vẫn là màu css đc active theo label.
2. Css sẽ đc Active theo bài viết thuộc label, Bài viết thuộc label nào chỉ hiện css riêng của label đó. ( Cái này khó ^^, chắc ko làm đc, nhưng e cần cái này )
Câu văn em lủng củng anh đọc cố hiểu nhé ^^

Dr.House

Em muốn sử dụng Menu này đặt dưới thanh menu của Theme Congly thì làm sao anh Dũng giúp giùm em

Điện Tử ChipKool

đặt menu này trong thems congly thì cậu xóa hết menu cũ,css cũ đi đa phần menu cũ nó nằm dưới thẻ header1,sau đó thay vào thôi,đơn giản mà,còn menu này em thấy nếu nó xổ dọc rồi thì cũng chẳng mấy khi người dũng click vào menu chính đâu anh,hic

MrThien

Bạn ơi làm thế nào để thêm bài viết vào lần lượt các menu mới tạo , thanks

Điện Tử ChipKool

Bạn mà thêm bài viết vào thì menu nào cho vừa,bạn sắp xếp bài viết theo label nhé,sau đó lấy link label chèn vào menu chỗ link ấy,bạn lại giống mình 2 năm trước,hihi,mới vào nhập môn blogspot.

S2 Team

@ChipKool_Online (TEAM Support) hi thanks bạn nha , nhưng mình ko bek cách làm :( , bạn có biết bài nào hướng dẫn không bạn .

DungKaKa

anh phan dũng cho em hỏi với. sao link đến các nhãn của anh ko có "max-results" mà nó vẫn phân trang còn blog cuae em ko thêm đoạn đuôi thì ko có phân trang là sao à anh @@

Thế Này Nhé

sao trang này khi gõ fandung.com vô thanh address thì không được, phải có cả www.fandung.com thì mới ok ?admin xem lý do đi
trang của tui vẫn ok tuốt mà
http://www.green-vietnam.com/

GIANG

có thể là do orderbox-dns bị lỗi. Còn trang của TDT dùng DNS của Godaddy nên không bị.

Bùi Minh Khánh

trauvangsoibac.blogspot.com

tôi vừa viết vài bài về thủ thuật blog mời các bạn ghé thăm

MrThien

Menu con nằm xa menu cha quá làm sau để chỉnh lại cho gần vậy bạn , thanks

Bao An Angel

http://www.way2blogging.org/2012/01/exclusive-blogger-to-introduce-new-comment-system-with-threaded-comment-replies.html

Tin vui cho anh em đây... blogspot đã có comment phân cấp như wordpress rồi đó... vào và cảm nhận nha :)

Tú Thanh

Hì sáng nay thấy trên blogger buzz đã thông báo chính thức cập nhật thread comments rồi đó các bác. ^^

Nguyen Duc

A có cách nào để tất cả các bài viết trong một nhãn đều hiện style của nhãn đó k

Nguyen Duc

Trên IE không hoạt động anh à

Fiat Trịnh Xuân Thọ

Xong nha cua pac Dung nha,nam moi phat trien nhe

Xin loi vi go khong dau:-* :-* :-* :-* :-*

Admin

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

Võ Quốc An
Thư viện học tập

Bác fandung ơi, sao em copy nguyên văn để test thử thì các SubMenu nó biến tận đâu ý http://tantudien.blogspot.com sửa thế nào hả bác ơi

lebanhat195

Bạn FanDung cho mình hỏi nếu trong menu con muốn thêm menu con nữa thì làm thế nào nhỉ. Giống như menu của trang thanhnien.com.vn ấy. Bạn có thể viết mội bài làm menu giống trang thanhnien.com.vn được không? Cảm ơn bạn.

tranbac

Anh DUng ơi có sthể cho ra 1 bản menu đơn giản thôi có được không? Không cần màu mè làm gì nhiều đâu :| đọc cái tool này nhìn phải sửa nhiều quá ngại chả muốn làm

Unknown

Bạn ơi mình bị lỗi gì mà nó xổ ko ngay đc...xem giúp hộ mình nha "www.elninopham.blogspot.com".



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home
Đăng ký: Đăng Nhận xét (Atom)