Home » Archives for tháng 6 2011
Tivi
03:39 |Đồngnai1 Đồngnai2 VũngTàu VTC3 |VTC4 |VTC7 |VTC9 |PHIM Thuầnviệt | BRT VĩnhLong 2 VĩnhLong1 Phim Phụnữ Racing Sài gònTV Ca nhạcHTV | Cinemax | ĐắcLắc| HTVDu lịch |VOV1 |VOV2 |VOV3 |VTV5 |VTC6 |YEAH SócTrăng Bìnhthuận ĐồngTháp HậuGiang Sport LongAn VOVGT VOVTV Thuần việt | BRT | Vĩnh Long 2 | Phim | Phụ nữ | Racing | Sài gòn TV | Ca nhạc HTV | Cinemax | Đắc Lắc| HTV Du lịch | VOV1 | VOV2 | VOV3 | VTV5 | VTC6 | YEAH VTV4 VTV3 VTV2 VTV1 HTV7 HTV9                                    | |
Recent comments với ảnh đại diện
08:58 |Như đã thông báo, hôm nay mình sẽ giới thiệu cho các bạn 1 thủ thuật hoàn toàn mới. Đó là thủ thuật hiển thị các nhận xét mới nhất cho blog (hoặc 1 bài viết nào đó), điểm nổi bật ở thủ thuật lần này là sẽ hiển thị ảnh profile của người comment (đối với tài khoản blogger), và sẽ hiện thị avatar đại diện cho những người thuộc nhóm khác như : wordpress, AOL, ... Ngoài ra đối với những bạn comment với tài khoản blogger mà chưa add hình đại diện thì cũng sẽ hiển thị chung 1 ảnh đại diện.
Thủ thuật này đã được thay thế bằng thủ thuật mới
--> xem ở đây
Trước kia mình cũng tường giới thiệu việc tạo ảnh đại diện cho các comment của các bài viết. Và sau này khi blogger đã include ảnh đại diện vào phần comment của bài viết thì thủ thuật đó đã không còn cần thiết nữa. Và lần này cũng vậy, khi mà blogger chưa include ảnh đại diện vào feed của comment thì mình giới thiệu cho các bạn thủ thuật này. Nếu sau này blogger có include thêm ảnh đại diện vào phần comment thì có lẽ thủ thuật này sẽ không còn cần thiết, bởi vì chắc chắn việc lấy ảnh profile theo thủ thuật này sẽ chậm hơn nhiều so với lấy ảnh trực tiếp từ feed. Ý tưởng thủ thuật này mình cũng đã nghĩ tới từ lâu, nhưng lúc đó chưa biết cách làm như thế nào, gần đây mình có đọc comment của 1 bạn trên blog mình nói là hiện tại chưa có ai viết thủ thuật tạo ảnh đại diện cho tiện ích các nhận xét mới nhất (recent comments) và hy vọng mình có thể giới thiệu thủ thuật này cho mọi người. Và điều này thôi thúc mình suy nghĩ cách để lấy ảnh profile của blogger. Thông tin duy nhất trong feed comment để có thể lấy ảnh profile của blogger là chỉ có link profile của tác giả. Và mình đã cố suy nghĩ làm sao để lấy ảnh từ link profile này, sau 1 khoảng thời gian dài mò mẫm, test đi test lại thì mình đã thực hiện được điều mình muốn. Nói thật nếu như rành 1 chút về javascript và php thì có lẽ mình đã không tốn nhiều thời gian để thực hiện thủ thuật này.
Và đây là demo của thủ thuật:
- DEMO 1 : xem comment mới nhất của cả blog.
- DEMO 2 : xem comment mới nhất của 1 bài viết.
Hình ảnh minh họa
và 1 số ảnh avatar đại diện cho các nhóm comment.
Thủ thuật này do phải lấy ảnh profile của blogger nên sẽ load lâu hơn thủ thuật cũ (không có ảnh đại diện), vì thế mình có lời khuyên nho nhỏ cho các bạn sử dụng thủ thuật này là nên để nó load sau cùng. Làm vậy ta sẽ có cảm giác blog không bị chậm. Để nó load nhanh hơn thì gần như là không khả thi, còn việc muốn nó hiển thị khi blog được load xong hết (tức là vị trí đặt tùy ý, không cần đặt ở cuối trang) thì mình hiện thời chưa test được. Khi nào test được mình sẽ update thủ thuật sau.
Và đây là code của thủ thuật :
- các bạn tạo 1 widget HTML/javascript rồi dán code bên dưới vào :
<style type="text/css">
#rcommentfd {width:300px;}
img.rcav-photo {
float:left;
margin-right:7px;
border:solid #ddd 1px;
padding:1px;
height:50px;
width:50px;
}
td div.rcav-content {font-size:12px!important;}
div.rcav-content .rcav-author {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_K18SQ8yVKkSMZSiZI_2g-D_tko-Rq46zdCrStVhXKXXz9fWmkru0CpNt6QWbl3RIbv_q5KQruO1I8L2Y_I0k-N9dEc6PpbE2o6LuZdG8YC-DSsahedvE2zYT7ZxnTPlHwhq11aJsf99p/) no-repeat bottom left;padding-bottom:11px;}
div.rcav-content .rcav-sum {background:#efefef;padding:5px;border-left:1px solid #e1e1e1;border-right:1px solid #e1e1e1;border-bottom:1px solid #e1e1e1;}
</style>
<script type="text/javascript">
ava_mode = "single";
var cm_num = 5;
var cm_desc = 30;
var homepage = "http://www.fandung.com";
postID = "6268184133967397100";
var cm_ava = new Array();
cm_ava['openid'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWu6wAUqw5yFRZwVPSzSM4oOjasViRs2qEJwonajm1zERxyU__d2B5b1tUfmq0W5z9LkcpaAaLU5wFqKAbWaudZmzOtsSdAkLiEZIBGGDjpGhbTmKhqi2_OKoz5KtE7T24XfaUTX9OU9h0/";
cm_ava['livej'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYFeRgJalQLhKpSdmwlBD2uuUpdLUnrNzol_I1Zb-5j5pZL8MBYNIgJq6yDzE_SBQ_xZ0uWWa2HfxVrjcV4DY44RH2i9sNPX5CzuMyJjEPg-_XB5S-CurdlUBAZfQQ82k1k74WKQkNn9yA/";
cm_ava['wp'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT_FGeh1UakQDtcKCXdfX_O4r7FsJx0uRXZNLdikXiVOwox5nWNHy_W-EEDFEpUqRGLHXJYSc3rU3rHOvMsPUJUsnwfI59w3hST-XypAAU_WIPKnvzkwUtwohbWfqtvapZw8rYuR8pDvGs/";
cm_ava['typepad'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWebOngIJJPAxnQlo-y669CifVKZ2QourDOgHlFMB4lekhWSj5ol-1R8K0Bm-Pb0nWQ8WFC2uUaJn5RLOY2dfQbYQ7-UfGhc7ayHPnU6pVR6ie_f7E8UkX7v8DeHqanSK24_k7XY4crdNz/";
cm_ava['aim'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPSycwut6i-4mRep7lp253nYa91aN-GHELJTslH6uzc5zuRinLhRVZGzy8yK-kqLUbzm4Usy6GbnM878uGYhi9P-E9G98CvkGQpo9E_6i1FSWlgHMFdUsbtBSYUKlyNq0wpcJNoSyjgaAh/";
cm_ava['url'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizuC_wbDk9jsWOkDvRjIt2X3tFiB9n9JhPnr0KB4lqqDJLv8gT7UKdT3x-_KXbIx54F2qgioGCk1XvE6MBp4WQh0nl4VLER5TFPrYlqiMGmIdShqBtFtqcbwBjI7N3IYKiH27-136dH7m9/";
cm_ava['anon'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR7r37Il9NjL0dwsL3gyvMsuyjNsNkEcMacYBJGgZxPtT5I-9EZGbbTjN_n6uuCAzWM1WxAbmorptLepDUjDkQIowz5TYcmBNLeXgc6UNR2_xQKSRbiUqI2AQR0BtZ0456GuPRDSd-kMEK/";
</script>
<script src="http://data.fandung.com/blog/demo/rcomment-avatar/recent-comment-avatar.js" type="text/javascript"></script>
#rcommentfd {width:300px;}
img.rcav-photo {
float:left;
margin-right:7px;
border:solid #ddd 1px;
padding:1px;
height:50px;
width:50px;
}
td div.rcav-content {font-size:12px!important;}
div.rcav-content .rcav-author {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_K18SQ8yVKkSMZSiZI_2g-D_tko-Rq46zdCrStVhXKXXz9fWmkru0CpNt6QWbl3RIbv_q5KQruO1I8L2Y_I0k-N9dEc6PpbE2o6LuZdG8YC-DSsahedvE2zYT7ZxnTPlHwhq11aJsf99p/) no-repeat bottom left;padding-bottom:11px;}
div.rcav-content .rcav-sum {background:#efefef;padding:5px;border-left:1px solid #e1e1e1;border-right:1px solid #e1e1e1;border-bottom:1px solid #e1e1e1;}
</style>
<script type="text/javascript">
ava_mode = "single";
var cm_num = 5;
var cm_desc = 30;
var homepage = "http://www.fandung.com";
postID = "6268184133967397100";
var cm_ava = new Array();
cm_ava['openid'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWu6wAUqw5yFRZwVPSzSM4oOjasViRs2qEJwonajm1zERxyU__d2B5b1tUfmq0W5z9LkcpaAaLU5wFqKAbWaudZmzOtsSdAkLiEZIBGGDjpGhbTmKhqi2_OKoz5KtE7T24XfaUTX9OU9h0/";
cm_ava['livej'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYFeRgJalQLhKpSdmwlBD2uuUpdLUnrNzol_I1Zb-5j5pZL8MBYNIgJq6yDzE_SBQ_xZ0uWWa2HfxVrjcV4DY44RH2i9sNPX5CzuMyJjEPg-_XB5S-CurdlUBAZfQQ82k1k74WKQkNn9yA/";
cm_ava['wp'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT_FGeh1UakQDtcKCXdfX_O4r7FsJx0uRXZNLdikXiVOwox5nWNHy_W-EEDFEpUqRGLHXJYSc3rU3rHOvMsPUJUsnwfI59w3hST-XypAAU_WIPKnvzkwUtwohbWfqtvapZw8rYuR8pDvGs/";
cm_ava['typepad'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWebOngIJJPAxnQlo-y669CifVKZ2QourDOgHlFMB4lekhWSj5ol-1R8K0Bm-Pb0nWQ8WFC2uUaJn5RLOY2dfQbYQ7-UfGhc7ayHPnU6pVR6ie_f7E8UkX7v8DeHqanSK24_k7XY4crdNz/";
cm_ava['aim'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPSycwut6i-4mRep7lp253nYa91aN-GHELJTslH6uzc5zuRinLhRVZGzy8yK-kqLUbzm4Usy6GbnM878uGYhi9P-E9G98CvkGQpo9E_6i1FSWlgHMFdUsbtBSYUKlyNq0wpcJNoSyjgaAh/";
cm_ava['url'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizuC_wbDk9jsWOkDvRjIt2X3tFiB9n9JhPnr0KB4lqqDJLv8gT7UKdT3x-_KXbIx54F2qgioGCk1XvE6MBp4WQh0nl4VLER5TFPrYlqiMGmIdShqBtFtqcbwBjI7N3IYKiH27-136dH7m9/";
cm_ava['anon'] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR7r37Il9NjL0dwsL3gyvMsuyjNsNkEcMacYBJGgZxPtT5I-9EZGbbTjN_n6uuCAzWM1WxAbmorptLepDUjDkQIowz5TYcmBNLeXgc6UNR2_xQKSRbiUqI2AQR0BtZ0456GuPRDSd-kMEK/";
</script>
<script src="http://data.fandung.com/blog/demo/rcomment-avatar/recent-comment-avatar.js" type="text/javascript"></script>
Sau đây là 1 vài lưu ý:
- thủ thuật có 2 chế độ hiển thị, ở code mẫu ở trên là chế độ hiển thị comment cho 1 bài viết, lưu ý là phải thay đổi lại dòng code postID = "6268184133967397100"; cho đúng với số ID của bài viết mà bạn muốn hiển thị comment (có thể xem ở đây để lấy số ID của bài viết). Nếu muốn hiển thị comment cho cả blog thì các bạn thay đổi dòng code này ava_mode = "single"; thành ava_mode = "all";
- biến var cm_desc = 30; : là số chữ hiển thị (lưu ý là chữ chứ không phải ký tự).
- biến var cm_num = 5; : là số comment sẽ hiển thị.
Chúc các bạn thành công.
Tiện ích bài viết mới nhất với hiệu ứng autoscroll bằng Jquery
05:53 |
Thời gian qua mình đã có post 2 bài viết về Recent post (Bài viết mới nhất) với hai hiệu ứng khác nhau. Và hôm nay tiếp theo mình xin giới thiệu đến các bạn thêm một tiện ích recent post cho blogger. Thủ thuật này với hiệu ứng auto-scroll, các bài viết sẽ tự động thay đổi nội dung với dạng cuộn tương ứng với khoảng thời gian đặt trước. Để thấy rõ tiện ích này như thế nào, bạn có thể click Demo và chờ giây lát để xem hiệu ứng của tiện ích này.1. Đăng nhập vào tài khoản Blogspot
2. Vào thiết kế, chọn chỉnh sửa HTML
3. Chèn code css bên dưới vào trước thẻ ]]></b:skin>
div.autoscroll {
background:#eee; /*màu nền của tiện ích*/
color:#0000ff; /*màu text của tiện ích*/
width: 300px; /*độ rộng của tiện ích*/
position: relative;
overflow: hidden;
height: 425px; /*chiều cao của tiện ích*/
border:3px solid #ccc; /*đường viền của tiện ích*/
}
.autoscroll a{
color:#0000ff; /*màu tiêu đề bài viết*/
}
.autoscroll a:hover{
color:#ff0033; /*màu tiêu đề bài viết khi rê chuột*/
}
div.autoscroll ul {
position: relative;
list-style-type: none;
padding: 0px;
margin: 0px;
}
div.autoscroll ul li {
margin-top: 3px;
padding-bottom: 2px;
border-bottom:1px solid #0000ff;
}
.autoimg{
float:left;
margin:3px 5px 0px 5px;
padding:2px;
border:1px solid #fff;}
4. Bạn chèn tiếp code bên dưới vào sau thẻ <head>
<script src="http://traidatmui-tips.googlecode.com/files/jquery.min.js" type="text/javascript"></script>
<script src="http://traidatmui-tips.googlecode.com/files/autoscroll.js" type="text/javascript"></script>
5. Save template lại và trở về phần tử trang
6. Thêm 1 HTML/Javascript và chèn code bên dưới vào nó
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfBQ0AnNZs-Pk7PZL8nzT080_GCfypCH34H0VW9WaF3okOI4jkCC0cSZYYnPLyd1iX5sUHCbptQl8QLOJXNUscHLUCr5mSg4nwZt0FW9QG4Rl8eFPsV4C0WTlIFjNf1OWNbPOubtZMgSFj/";
showRandomImg = true;
borderColor = "no";
imgwidth = 42; //độ rộng ảnh thumb
imgheight = 40; //chiều cao của ảnh thumb
fntsize = 11; //cở chữ của tiêu đề bài viết
dcmcolor = "#000033"; //màu text của phần ngày và nhận xét
dcmsize = "1"; //cở chử của phần ngày và nhận xét
acolor = "";
aBold = true;
icon = " » ";
text = "nhận xét"; //nếu không muốn hiển thị phần nhận xét bạn thay "Nhận xét" thành "no"
showPostDate = true; //nếu không muốn hiển thị ngày đăng thay TRUE thànhFALSE
summaryPost = 100; // số kí tự phần tóm tắt nội dung bài viết
summaryFontsize = 12; //cỡ chữ phần tóm tắt
summaryColor = "#000"; //màu text phần tóm tắt
icon2 = " » ";
numposts = 15; //số bài viết hiển thị
label = "Marketing"; //tên nhãn bài viết
home_page = "http://www.traidatmui.com/"; //thay thành địa chỉ blog của bạn
</script>
<div class="autoscroll">
<script src="http://traidatmui-tips.googlecode.com/files/recent_post_autosroll.js" type="text/javascript"></script>
</div>
Bạn chỉ việc dựa vào các dòng hướng dẫn và thay đổi cho phù hợp với blog cuả bạn.
6. Save tiện ích lại
Nếu muốn hiển thị bài viết theo từng nhãn, bạn hãy thay file script (recent_post_autosroll.js) thành link bên dưới
http://traidatmui-tips.googlecode.com/files/recent_label_autosroll.js
nguồn traidatmui.com
Chúc bạn thành công
[Chia sẻ] - Tạo hộp thoại thông báo cho blog
22:50 |Việc tạo 1 hộp thoại nhỏ cho blog để thông báo 1 sự kiện hoặc 1 vấn đề nào đó cho blog xem ra cũng khá cần thiết cho blog. Có nó ta sẽ không phải mất công viết hẳn 1 bài viết để thông báo (nếu như nó sự kiện đó không cần phải dùng 1 bài viết để thông báo). Thay vào đó ta chỉ cần hiển thị 1 đoạn text nhỏ là được.
Có 1 số bạn xin code phần thông báo của mình, mình đã ok. Còn 1 số khác thì chưa rành việc view code nên có yêu cầu mình chia sẻ đoạn code của hộp thoại thông báo này. Hôm nay mình viết hẳn 1 bài viết để chia sẻ nó.
Một vài thông tin về hộp thông báo nhỏ này:
- Hiển thị được nhiều thông báo.
- Các thông báo sẽ hiển thị random (ngẫu nhiên) sau mỗi lần load trang.
- Có button cho phép đóng phần thông báo lại.
- Để cho chọn vị trí hợp lý, mình khuyên các bạn nên đặt hộp thông báo này ở phần header của blog.
- Sau khi xác định được vị trí đặt hộp thông báo, các bạn tạo 1 widget HTML/Javascript và dán code bên dưới vào :
Các bạn có thể xem hình minh họa bên dưới rồi thay đổi lại các giá trị của nó để cho hộp thông báo phù hợp với blog của bạn, chủ yếu là chỉnh lại các giá trị màu sắc và kích thước.
- Tiếp theo là chỉnh lại code javascript:
Ta thấy có đoạn code như thế này :
Tất cả nội dung của thông báo phải cho vào dấu nháy đơn. Nội dung hiển thị thông báo cho phép sử dụng thẻ HTML. Ở trên là code mẫu cho 4 đoạn thông báo, nếu là 5 đoạn các bạn chỉ việc thêm vào như code bên dưới :
Như vậy đã hoàn thành. Chúc các bạn thành công.
Read more…
Có 1 số bạn xin code phần thông báo của mình, mình đã ok. Còn 1 số khác thì chưa rành việc view code nên có yêu cầu mình chia sẻ đoạn code của hộp thoại thông báo này. Hôm nay mình viết hẳn 1 bài viết để chia sẻ nó.
Một vài thông tin về hộp thông báo nhỏ này:
- Hiển thị được nhiều thông báo.
- Các thông báo sẽ hiển thị random (ngẫu nhiên) sau mỗi lần load trang.
- Có button cho phép đóng phần thông báo lại.
Hình ảnh minh họa từ blog của mình:
- Để cho chọn vị trí hợp lý, mình khuyên các bạn nên đặt hộp thông báo này ở phần header của blog.
- Sau khi xác định được vị trí đặt hộp thông báo, các bạn tạo 1 widget HTML/Javascript và dán code bên dưới vào :
<style type="text/css">
#thbao {
padding:6px 0;
border-bottom:1px solid #e6dac3;
}
#thbao-margin {margin: 0 auto;}
.thbao-container {
width:705px;
border: 1px solid #f2b768;
padding: 4px;
font-size:90%;
}
.thbao-header {
background: #ff6734;
color: white;
border:1px solid #ffa789;
padding: 5px 10px;
white-space: nowrap;
}
.thbao-body {
background: #fae9c8;
padding: 5px 10px;
width: 99%;
}
.thbao-close {
float: right;
margin-right: -5px;
}
</style>
<script language="JavaScript">
function hideitem() {
document.getElementById("thbao").style.display="none";
}
//<![CDATA[
thbao = new Array(3);
thbao[0]='{Nội dung đoạn thông báo thứ 1}';
thbao[1]='{Nội dung đoạn thông báo thứ 2}';
thbao[2]='{Nội dung đoạn thông báo thứ 3}';
thbao[3]='{Nội dung đoạn thông báo thứ 4}';
tbindex = Math.floor(Math.random() * thbao.length);
//]]>
</script>
<div id="thbao">
<div id="thbao-margin" class="thbao-container">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="thbao-header"><b>Note</b></td>
<td class="thbao-body">
<a href="#" class="thbao-close" onclick="hideitem()"><img src="http://www.blogger.com/img/close.png" alt="Đóng lại" /></a>
<span class="thbao-text">
<script type="text/javascript">
document.write(thbao[tbindex]);
</script>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
- Đầu tiên là việc chỉnh sửa lại code CSS:#thbao {
padding:6px 0;
border-bottom:1px solid #e6dac3;
}
#thbao-margin {margin: 0 auto;}
.thbao-container {
width:705px;
border: 1px solid #f2b768;
padding: 4px;
font-size:90%;
}
.thbao-header {
background: #ff6734;
color: white;
border:1px solid #ffa789;
padding: 5px 10px;
white-space: nowrap;
}
.thbao-body {
background: #fae9c8;
padding: 5px 10px;
width: 99%;
}
.thbao-close {
float: right;
margin-right: -5px;
}
</style>
<script language="JavaScript">
function hideitem() {
document.getElementById("thbao").style.display="none";
}
//<![CDATA[
thbao = new Array(3);
thbao[0]='{Nội dung đoạn thông báo thứ 1}';
thbao[1]='{Nội dung đoạn thông báo thứ 2}';
thbao[2]='{Nội dung đoạn thông báo thứ 3}';
thbao[3]='{Nội dung đoạn thông báo thứ 4}';
tbindex = Math.floor(Math.random() * thbao.length);
//]]>
</script>
<div id="thbao">
<div id="thbao-margin" class="thbao-container">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="thbao-header"><b>Note</b></td>
<td class="thbao-body">
<a href="#" class="thbao-close" onclick="hideitem()"><img src="http://www.blogger.com/img/close.png" alt="Đóng lại" /></a>
<span class="thbao-text">
<script type="text/javascript">
document.write(thbao[tbindex]);
</script>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Các bạn có thể xem hình minh họa bên dưới rồi thay đổi lại các giá trị của nó để cho hộp thông báo phù hợp với blog của bạn, chủ yếu là chỉnh lại các giá trị màu sắc và kích thước.
- Tiếp theo là chỉnh lại code javascript:
Ta thấy có đoạn code như thế này :
thbao = new Array(3);
thbao[0]='{Nội dung đoạn thông báo thứ 1}';
thbao[1]='{Nội dung đoạn thông báo thứ 2}';
thbao[2]='{Nội dung đoạn thông báo thứ 3}';
thbao[3]='{Nội dung đoạn thông báo thứ 4}';
thbao[0]='{Nội dung đoạn thông báo thứ 1}';
thbao[1]='{Nội dung đoạn thông báo thứ 2}';
thbao[2]='{Nội dung đoạn thông báo thứ 3}';
thbao[3]='{Nội dung đoạn thông báo thứ 4}';
Tất cả nội dung của thông báo phải cho vào dấu nháy đơn. Nội dung hiển thị thông báo cho phép sử dụng thẻ HTML. Ở trên là code mẫu cho 4 đoạn thông báo, nếu là 5 đoạn các bạn chỉ việc thêm vào như code bên dưới :
thbao = new Array(4);
thbao[0]='{Nội dung đoạn thông báo thứ 1}';
thbao[1]='{Nội dung đoạn thông báo thứ 2}';
thbao[2]='{Nội dung đoạn thông báo thứ 3}';
thbao[3]='{Nội dung đoạn thông báo thứ 4}';
thbao[4]='{Nội dung đoạn thông báo thứ 5}';
thbao[0]='{Nội dung đoạn thông báo thứ 1}';
thbao[1]='{Nội dung đoạn thông báo thứ 2}';
thbao[2]='{Nội dung đoạn thông báo thứ 3}';
thbao[3]='{Nội dung đoạn thông báo thứ 4}';
thbao[4]='{Nội dung đoạn thông báo thứ 5}';
Như vậy đã hoàn thành. Chúc các bạn thành công.
Code loading – đang tải dữ liệu cho web-blog
07:59 |Bạn chèn đoạn code sau vào sau thẻ <head> :
<div border="0" style="position:fixed; width: 100%; height: 40px; z-index: 1; top: 300px; left: 0;" id="loading" align="center"> <table border="1" width="150" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="#003300"> <tr> <td align="center"> <div border="1" style="background-color: #FFFFFF; filter: alpha(opacity=70); opacity: .7; width: 150px; height: 40px; z-index: 1; border-collapse: collapse;" bordercolor="#006600" align="center"> <b>Đang tải dữ liệu...</b><br><img border="0" src="http://i351.photobucket.com/albums/q463/nguyenthidung/loading.gif"> </div> </td> </tr> </table> </div>
Sau đó bạn thêm code này vào trước thẻ </body> :
<script >window.document.getElementById("loading").style.display = 'none';</script >
<div border="0" style="position:fixed; width: 100%; height: 40px; z-index: 1; top: 300px; left: 0;" id="loading" align="center"> <table border="1" width="150" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="#003300"> <tr> <td align="center"> <div border="1" style="background-color: #FFFFFF; filter: alpha(opacity=70); opacity: .7; width: 150px; height: 40px; z-index: 1; border-collapse: collapse;" bordercolor="#006600" align="center"> <b>Đang tải dữ liệu...</b><br><img border="0" src="http://i351.photobucket.com/albums/q463/nguyenthidung/loading.gif"> </div> </td> </tr> </table> </div>
Sau đó bạn thêm code này vào trước thẻ </body> :
<script >window.document.getElementById("loading").style.display = 'none';</script >
Mega Dropdown Menu CSS
08:20 |Có 1 số bạn yêu cầu muốn mình share cái menu hiện tại mình đang dùng (mang phong cách của trang Zing), nhưng bây giờ mình mới chia sẻ được. Nói thật, nếu chia sẻ thì mình chỉ cần đưa ngay đoạn code cho các bạn là xong, chứ không phải đợi tới bây giờ mình mới chia sẻ, nhưng có 1 điều là khi chia sẻ rồi thì hướng dẫn các bạn sao đây, thực sự menu mình đang dùng là lấy source gần như từ của trang news.zing.vn, vì thế mà nó hơi rắc rối, ngay chính mình khi lấy về dùng cũng phải nhọc nhằn chỉnh sửa lại để dùng.
Để đơn giản cho các bạn sử dụng cũng như cho mình viết bài hướng dẫn, nên mình đã quyết định ngồi code lại cái menu này. Vẫn lấy phong cách của Zing, nhưng code thì mình viết lại hoàn toàn.
Ưu điểm của Mega Dropdown này là nó chỉ dùng CSS, nên khá nhẹ, và 1 cái nữa là phần dropdown các bạn có thể tùy biến nhiều thứ trong đó, chứ không đơn thuần chỉ hiện các liên kết con. Bởi thế nó mới được gọi là Mega Menu. Và nhược điểm của menu này là không hiển thị được submenu trên IE6. Thật ra nhược điểm này không phải là nhược điểm của thủ thuật mà là của chính blogger, hình như blogger nó không hỗ trợ file htc. Ngay cả host demo của mình cũng không chạy được, nhưng mình test offline trên máy tính thì rất ok.
Vì thế nếu bạn nào muốn dùng cái menu này thì sẽ phải chấp nhận việc nó không sổ submenu trên IE6. Còn từ IE7 trở nên thì vẫn chạy bình thường.
Các bạn có thể xem DEMO ở đây.
A. Sau đây là code của thủ thuật:
- Có 2 cách để thêm vào blog, 1 là các bạn chèn tất cả code của nó vào 1 widget HTML/javascript, 2 là các bạn chỉ chèn code HTML vào widget HTML/javascript, còn code CSS thì các bạn có thể add vào template, ngay trước dòng code </head>
- và đây là code của thủ thuật:
Code CSS:
Code HTML:
B. Sau đây là 1 vài hướng dẫn chỉnh sửa code HTML cũng như CSS
- Sau khi chèn code vào, các bạn sẽ gặp trường hợp như thế này:
- Việc bị lệch này là do vị trí của menu chính và menu phụ không khớp với nhau. Không khớp với nhau có nhiều lý do, ví dụ bạn thay đổi tên menu, độ rộng của menu chính sẽ thay đổi, dẫn tới menu phụ bị lệch.
- Để chỉnh vị trí của menu phụ với menu chính các bạn xem code CSS bên dưới:
- Các class này để tùy chỉnh vị trí, độ rộng , màu nền ... của các vùng hiển thị của submenu.
- Lệnh left:118px; (của class ms2) chính là lệnh để tùy chỉnh vị trí của submenu so với biên ngang bên trái của menu chính. Ví dụ như hình bên dưới :
- Sau khi điều chỉnh vị trí các submenu xong, ta sẽ đi vào phần tùy chỉnh nội dung bên trong của các submenu. Ở đây ta sẽ lấy ví dụ submenu 2.
- Đây là code HTML của nó :
- ta thấy trong code CSS có đoạn như thế này :
- Ngoài ra nếu các bạn muốn thêm hình nền riêng cho mỗi sub thì cũng có thể thêm vào, ví dụ như trong demo ta có hình nền của submenu5, và bên dưới là code CSS mà các bạn có thể tùy chỉnh để thêm hình nền vào:
- các bạn thêm hình nền tương tự như class ms5 (của submenu5).
- Ở trên các class ms1 và ms4 mình để trống do các menu4 và menu1 trong demo không có submenu, khi có submenu thì các bạn thêm vào giá trị độ rộng và vị trí cách biên ngang cho các submenu này.
Hy vọng các bạn có thể thực hiện nó với các hướng dẫn cơ bản trên.
Menu mega dropdown này trước khi còn test offline, mình cảm thấy rất tâm đắc với nó, nhưng khi add vô rồi thì lại gặp sự cố là blogger không support file htc, nên cũng hơi nản. Thậm chí mình còn có ý định sẽ không post bài này. Nhưng rồi nghĩ lại cũng sẽ có 1 số người cần nó, và rồi cũng cố ngồi trước máy tính để soạn bài hướng dẫn này.
Chúc các bạn thành công.
Read more…
Để đơn giản cho các bạn sử dụng cũng như cho mình viết bài hướng dẫn, nên mình đã quyết định ngồi code lại cái menu này. Vẫn lấy phong cách của Zing, nhưng code thì mình viết lại hoàn toàn.
Ưu điểm của Mega Dropdown này là nó chỉ dùng CSS, nên khá nhẹ, và 1 cái nữa là phần dropdown các bạn có thể tùy biến nhiều thứ trong đó, chứ không đơn thuần chỉ hiện các liên kết con. Bởi thế nó mới được gọi là Mega Menu. Và nhược điểm của menu này là không hiển thị được submenu trên IE6. Thật ra nhược điểm này không phải là nhược điểm của thủ thuật mà là của chính blogger, hình như blogger nó không hỗ trợ file htc. Ngay cả host demo của mình cũng không chạy được, nhưng mình test offline trên máy tính thì rất ok.
Vì thế nếu bạn nào muốn dùng cái menu này thì sẽ phải chấp nhận việc nó không sổ submenu trên IE6. Còn từ IE7 trở nên thì vẫn chạy bình thường.
Các bạn có thể xem DEMO ở đây.
Hình ảnh minh họa
A. Sau đây là code của thủ thuật:
- Có 2 cách để thêm vào blog, 1 là các bạn chèn tất cả code của nó vào 1 widget HTML/javascript, 2 là các bạn chỉ chèn code HTML vào widget HTML/javascript, còn code CSS thì các bạn có thể add vào template, ngay trước dòng code </head>
- và đây là code của thủ thuật:
Code CSS:
<style type="text/css">
#fdmega-menu ul {list-style: none;}
ul#topnav {
float: left;
width: 650px;
position: relative;
height: 39px;
background: #0082ff;
}
ul#topnav li {
float: left;
height: 39px;
padding: 0px;
background: url(http://data.fandung.com/blog/demo/Mega-Dropdown-MenuCSS/img/right-li-nobg.png) no-repeat top right;
}
ul#topnav li a {
padding: 10px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
}
ul#topnav li:hover {
background: #ff7d00 url(http://data.fandung.com/blog/demo/Mega-Dropdown-MenuCSS/img/top-li-hv.png) repeat-x top left;
}
ul#topnav li.mg-home {
background:url(http://data.fandung.com/blog/demo/Mega-Dropdown-MenuCSS/img/home-ico-bg.png) no-repeat top right!important;
width:45px;
}
ul#topnav li.mg-home a {height:19px;}
ul#topnav li div.sub {
position: absolute;
top: 39px;
background: #ff7d00;
padding:5px;
display: none;
border-right:4px solid #0082ff;
border-left:4px solid #0082ff;
border-bottom:4px solid #0082ff;
color:#fff;
}
ul#topnav li:hover div.sub {display: block;}
ul#topnav li div.sub p {margin-bottom:5px;text-align:justify;}
ul#topnav li div.sub div.cont {float: left;padding:5px;}
ul#topnav li div.sub div.cont h3 {}
ul#topnav li div.sub div.cont a{display:block; margin:0;padding:0;padding:0 0 5px;color:#ddd;}
ul#topnav li div.sub div.cont a:hover{color:#fff;}
ul#topnav li div.ms1 {}
ul#topnav li div.ms2 {width:300px;left: 118px;}
ul#topnav li div.ms3 {width:260px;left: 195px;}
ul#topnav li div.ms4 {}
ul#topnav li div.ms5 {width:400px;left: 16px;background:#ff7d00 url(sub6-bg.png) no-repeat bottom right;}
ul#topnav li div.sub div.cs21 {width:90px;}
ul#topnav li div.sub div.cs31 {width:120px;}
</style>
- Lưu ý: các file hình ảnh có trong code CSS các bạn nên download về và up lên host lưu trữ ảnh nào đó để sử dụng, tránh trường hợp host của mình gặp sự cố.#fdmega-menu ul {list-style: none;}
ul#topnav {
float: left;
width: 650px;
position: relative;
height: 39px;
background: #0082ff;
}
ul#topnav li {
float: left;
height: 39px;
padding: 0px;
background: url(http://data.fandung.com/blog/demo/Mega-Dropdown-MenuCSS/img/right-li-nobg.png) no-repeat top right;
}
ul#topnav li a {
padding: 10px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
}
ul#topnav li:hover {
background: #ff7d00 url(http://data.fandung.com/blog/demo/Mega-Dropdown-MenuCSS/img/top-li-hv.png) repeat-x top left;
}
ul#topnav li.mg-home {
background:url(http://data.fandung.com/blog/demo/Mega-Dropdown-MenuCSS/img/home-ico-bg.png) no-repeat top right!important;
width:45px;
}
ul#topnav li.mg-home a {height:19px;}
ul#topnav li div.sub {
position: absolute;
top: 39px;
background: #ff7d00;
padding:5px;
display: none;
border-right:4px solid #0082ff;
border-left:4px solid #0082ff;
border-bottom:4px solid #0082ff;
color:#fff;
}
ul#topnav li:hover div.sub {display: block;}
ul#topnav li div.sub p {margin-bottom:5px;text-align:justify;}
ul#topnav li div.sub div.cont {float: left;padding:5px;}
ul#topnav li div.sub div.cont h3 {}
ul#topnav li div.sub div.cont a{display:block; margin:0;padding:0;padding:0 0 5px;color:#ddd;}
ul#topnav li div.sub div.cont a:hover{color:#fff;}
ul#topnav li div.ms1 {}
ul#topnav li div.ms2 {width:300px;left: 118px;}
ul#topnav li div.ms3 {width:260px;left: 195px;}
ul#topnav li div.ms4 {}
ul#topnav li div.ms5 {width:400px;left: 16px;background:#ff7d00 url(sub6-bg.png) no-repeat bottom right;}
ul#topnav li div.sub div.cs21 {width:90px;}
ul#topnav li div.sub div.cs31 {width:120px;}
</style>
Code HTML:
<div id="fdmega-menu">
<ul id="topnav">
<li class="mg-home"><a href="#"></a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<div class="sub ms2">
<div class="cont cs21">
<h3>Love</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs21">
<h3>Film</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs21">
<h3>Ebooks</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
</div>
</li>
<li><a href="#">Menu 3</a>
<div class="sub ms3">
<div class="cont cs31">
<a href="#">Sub 3.1 (120px)</a>
<a href="#">Sub 3.2 (120px)</a>
<a href="#">Sub 3.3 (120px)</a>
</div>
<div class="cont cs31">
<a href="#">Sub 3.1 (120px)</a>
<a href="#">Sub 3.2 (120px)</a>
<a href="#">Sub 3.3 (120px)</a>
</div>
</div>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a>
<div class="sub ms5">
<b>James Gallagher</b><br/>
<span style="font-size:90%"><i>Health reporter, BBC News</i></span>
<p>Are bean sprouts in the clear? The simple answer is no, even though the early test results have come back negative.</p>
<p>The most compelling evidence so far has not come from the microbiology lab, but traditional detective work. Officials were able to link the main outbreaks with bean sprouts from one farm in northern Germany.</p>
<p>They will wait for test results from the remaining 17 samples for final confirmation. However, the prospect remains that no trace of E. coli will ever be found, since any contaminated produce would have been farmed and on the shelves weeks ago.</p>
<span style="font-size:90%"><i>Trich BBC</i></span>
</div>
</li>
</ul>
</div>
<ul id="topnav">
<li class="mg-home"><a href="#"></a></li>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<div class="sub ms2">
<div class="cont cs21">
<h3>Love</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs21">
<h3>Film</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs21">
<h3>Ebooks</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
</div>
</li>
<li><a href="#">Menu 3</a>
<div class="sub ms3">
<div class="cont cs31">
<a href="#">Sub 3.1 (120px)</a>
<a href="#">Sub 3.2 (120px)</a>
<a href="#">Sub 3.3 (120px)</a>
</div>
<div class="cont cs31">
<a href="#">Sub 3.1 (120px)</a>
<a href="#">Sub 3.2 (120px)</a>
<a href="#">Sub 3.3 (120px)</a>
</div>
</div>
</li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a>
<div class="sub ms5">
<b>James Gallagher</b><br/>
<span style="font-size:90%"><i>Health reporter, BBC News</i></span>
<p>Are bean sprouts in the clear? The simple answer is no, even though the early test results have come back negative.</p>
<p>The most compelling evidence so far has not come from the microbiology lab, but traditional detective work. Officials were able to link the main outbreaks with bean sprouts from one farm in northern Germany.</p>
<p>They will wait for test results from the remaining 17 samples for final confirmation. However, the prospect remains that no trace of E. coli will ever be found, since any contaminated produce would have been farmed and on the shelves weeks ago.</p>
<span style="font-size:90%"><i>Trich BBC</i></span>
</div>
</li>
</ul>
</div>
B. Sau đây là 1 vài hướng dẫn chỉnh sửa code HTML cũng như CSS
- Sau khi chèn code vào, các bạn sẽ gặp trường hợp như thế này:
- Để chỉnh vị trí của menu phụ với menu chính các bạn xem code CSS bên dưới:
...
...
ul#topnav li div.ms1 {}
ul#topnav li div.ms2 {width:300px;left: 118px;}
ul#topnav li div.ms3 {width:260px;left: 195px;}
ul#topnav li div.ms4 {}
ul#topnav li div.ms5 {width:400px;left: 16px;background:#ff7d00 url(sub6-bg.png) no-repeat bottom right;}
...
...
- ở code trên ta có 5 class là ms1, ms2,... ms5 tương ứng với các chính menu1, menu2,... menu5 (như trong demo)...
ul#topnav li div.ms1 {}
ul#topnav li div.ms2 {width:300px;left: 118px;}
ul#topnav li div.ms3 {width:260px;left: 195px;}
ul#topnav li div.ms4 {}
ul#topnav li div.ms5 {width:400px;left: 16px;background:#ff7d00 url(sub6-bg.png) no-repeat bottom right;}
...
...
- Các class này để tùy chỉnh vị trí, độ rộng , màu nền ... của các vùng hiển thị của submenu.
- Lệnh left:118px; (của class ms2) chính là lệnh để tùy chỉnh vị trí của submenu so với biên ngang bên trái của menu chính. Ví dụ như hình bên dưới :
- Sau khi điều chỉnh vị trí các submenu xong, ta sẽ đi vào phần tùy chỉnh nội dung bên trong của các submenu. Ở đây ta sẽ lấy ví dụ submenu 2.
- Đây là code HTML của nó :
...
...
<li><a href="#">Menu 2</a>
<div class="sub ms2">
<div class="cont cs21">
<h3>Love</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs21">
<h3>Film</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs21">
<h3>Ebooks</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
</div>
</li>
...
...
- Ta thấy thẻ <div class="sub ms2"> chính là khu vực hiển thị của submenu, trong thẻ div này sẽ có tiếp 3 thẻ <div class="cont cs21"> , 3 thẻ div này chính là 3 cột nhỏ trong submenu2. Như hình bên dưới:...
<li><a href="#">Menu 2</a>
<div class="sub ms2">
<div class="cont cs21">
<h3>Love</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs21">
<h3>Film</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs21">
<h3>Ebooks</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
</div>
</li>
...
...
...
...
ul#topnav li div.sub div.cs21 {width:90px;}
ul#topnav li div.sub div.cs31 {width:120px;}
...
...
- ul#topnav li div.sub div.cs21 chính là class để tùy chỉnh độ rộng của các cột trong submenu2. Ở trên mình chỉ thêm class cho 2 submenu2 và submenu3, nếu muốn các bạn có thể thêm tương tự như :...
ul#topnav li div.sub div.cs21 {width:90px;}
ul#topnav li div.sub div.cs31 {width:120px;}
...
...
...
...
ul#topnav li div.sub div.cs11 {width:135px;}
ul#topnav li div.sub div.cs21 {width:90px;}
ul#topnav li div.sub div.cs31 {width:120px;}
ul#topnav li div.sub div.cs41 {width:80px;}
ul#topnav li div.sub div.cs51 {width:190px;}
...
...
- Ở trong demo, mình cho các cột trong submenu2 và submenu3 bằng nhau, nêu chỉ có class là cs21 và cs31, nếu muốn các cột có độ rộng khác nhau thì các bạn có thể tùy chỉnh lại code code. Ví dụ như mình sẽ tùy chỉnh lại của submenu2, mỗi cột có độ rộng khác nhau, như bên dưới:...
ul#topnav li div.sub div.cs11 {width:135px;}
ul#topnav li div.sub div.cs21 {width:90px;}
ul#topnav li div.sub div.cs31 {width:120px;}
ul#topnav li div.sub div.cs41 {width:80px;}
ul#topnav li div.sub div.cs51 {width:190px;}
...
...
...
...
ul#topnav li div.sub div.cs21 {width:135px;}
ul#topnav li div.sub div.cs22 {width:90px;}
ul#topnav li div.sub div.cs23 {width:120px;}
...
...
- tức là từ việc chỉ sử dụng chung 1 class cs21 cho tất cả các cột thì mình sẽ tùy chỉnh lại, mỗi cột có 1 class riêng (cs21, cs22, cs23). Và code HTML của nó sẽ là như thế này :...
ul#topnav li div.sub div.cs21 {width:135px;}
ul#topnav li div.sub div.cs22 {width:90px;}
ul#topnav li div.sub div.cs23 {width:120px;}
...
...
...
...
<li><a href="#">Menu 2</a>
<div class="sub ms2">
<div class="cont cs21">
<h3>Love</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs22">
<h3>Film</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs23">
<h3>Ebooks</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
</div>
</li>
...
...
...
<li><a href="#">Menu 2</a>
<div class="sub ms2">
<div class="cont cs21">
<h3>Love</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs22">
<h3>Film</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
<div class="cont cs23">
<h3>Ebooks</h3>
<a href="#">Sub 2.1</a>
<a href="#">Sub 2.2</a>
<a href="#">Sub 2.3</a>
</div>
</div>
</li>
...
...
- Ngoài ra nếu các bạn muốn thêm hình nền riêng cho mỗi sub thì cũng có thể thêm vào, ví dụ như trong demo ta có hình nền của submenu5, và bên dưới là code CSS mà các bạn có thể tùy chỉnh để thêm hình nền vào:
...
...
ul#topnav li div.ms1 {}
ul#topnav li div.ms2 {width:300px;left: 118px;}
ul#topnav li div.ms3 {width:260px;left: 195px;}
ul#topnav li div.ms4 {}
ul#topnav li div.ms5 {width:400px;left: 16px;background:#ff7d00 url(sub6-bg.png) no-repeat bottom right;}
...
...
...
ul#topnav li div.ms1 {}
ul#topnav li div.ms2 {width:300px;left: 118px;}
ul#topnav li div.ms3 {width:260px;left: 195px;}
ul#topnav li div.ms4 {}
ul#topnav li div.ms5 {width:400px;left: 16px;background:#ff7d00 url(sub6-bg.png) no-repeat bottom right;}
...
...
- các bạn thêm hình nền tương tự như class ms5 (của submenu5).
- Ở trên các class ms1 và ms4 mình để trống do các menu4 và menu1 trong demo không có submenu, khi có submenu thì các bạn thêm vào giá trị độ rộng và vị trí cách biên ngang cho các submenu này.
Hy vọng các bạn có thể thực hiện nó với các hướng dẫn cơ bản trên.
Menu mega dropdown này trước khi còn test offline, mình cảm thấy rất tâm đắc với nó, nhưng khi add vô rồi thì lại gặp sự cố là blogger không support file htc, nên cũng hơi nản. Thậm chí mình còn có ý định sẽ không post bài này. Nhưng rồi nghĩ lại cũng sẽ có 1 số người cần nó, và rồi cũng cố ngồi trước máy tính để soạn bài hướng dẫn này.
Chúc các bạn thành công.
Top Hot
