kênh thông tin giải trí tổng hợp tin tức về thời trang làm đẹp

Chủ Nhật, 9 tháng 1, 2011

[MV HD]Đại Nhân Chí Thiện Hòa Mi Băng Di - Feliz Navidad

14:37 Unknown No comments

Chợt yêu - Minh Thư

14:34 Unknown No comments

Hương thơm diệu kỳ- Hà Anh Tuấn

14:29 Unknown No comments

Tạo menu giống trang VnExpress.net

13:43 Unknown No comments

Cập nhật việc hiển thị Submenu ngay dưới menu chính (15/7/2009)

Hình ảnh minh họa:

☼ Sau đây là các bước thực hiện :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đoạn code bên dưới vào trước thẻ đóng </head>

- Ở phần code CSS, để thay đổi hình nền, các bạn có thể down các file ảnh về (link màu cam, rồi dùng photoshop tùy chỉnh lại theo ý mình).

- Phần chính của thủ thuật này là việc chỉnh sửa các mảng (menu_fid, menu_pid, menu_name, menu_path, new Array) trong đoạn code javascript ở trên.

a. mảng menu_fid :
- các dãy số tương ứng trong mảng này chính là id của các menu (menu chính + menu phụ), ví dụ ta có tổng cộng 10 menu (cả chính và phụ) thì con số của mảng này là từ 1 tới 10.
- Như ở trong đoạn code JS trên, ta có 6 menu chính và 15 menu phụ thì dãy số của chúng ta sẽ lên tới 21. nếu các bạn điền dãy số này lớn hơn 21 thì vẫn không sao, nhưng nếu nhỏ hơn 21 thì các menu sau cùng sẽ ko hiển thị được (cụ thể ở đây các submenu 5 sẽ hiển thị không đủ)

b. mảng menu_pid :
- Mảng này giúp tạo bố cục của menu.
- Các menu chính được quy định bằng các con số 0
- Còn các menu phụ sẽ được quy định bằng các con số tiếp theo, và giống nhau (ở đây ko sử dụng dãy số 1 là do số 1 được đặt cho menu HOME), và như thế submenu 1 sẽ bắt đầu bằng các dãy số 2 giống nhau, tiếp theo submenu 2 là các dãy số 3 , ...
- Muốn thêm hoặc bớt các menu chính hoặc phụ, ta chỉ cần thêm hoặc bớt các con số tương tự trong dãy số là được (lưu ý việc thêm hoặc bớt phải thực hiện đồng nhất ở 5 mảng)

c. mảng menu_name :
- Mảng này sẽ quy định tên cho các menu chính và phụ.

d. mảng menu_path :
- mảng này sẽ thiết lập địa chỉ liên kết cho các menu chính và phụ.
- thay thế các đoạn /menu1/submenu1.1/ , /menu1/submenu1.2/ , ... thành các link tương ứng với menu đó.
- lưu ý là vị trí các phần tử trong mảng này và mảng menu_name phải khớp nhau, khi đó đường dẫn tới các menu mới chính xác.

e. mảng menu_show :
- các phần tử ở mảng này được biểu diễn bằng những con số 0. Lưu ý là tổng số các con số 0 phải bằng tổng các menu chính và phụ.

Một vài lưu ý sau cùng : khi tùy chỉnh lại các phần tử trong mảng, phải đảm bảo số lượng các phần tử trong 5 mảng bằng nhau, và phải khớp với nhau theo đúng thứ tự của nó, và điều quan trọng nữa là chỉ có phần tử cuối cùng trong mảng mới ko có dấu phẩy (,) theo sau, nếu sai xót thì code sẽ bị lỗi.

4. Sau khi tùy chỉnh xong. Save template
5. Tạo 1 widget HTML/javascript và dán đoạn code bên dưới vào:

<div id="topmenu">

<div class="parent-menu" id="parent-menu"></div>

<div class="sub-menu">

<div class="fl"><img src="http://i342.photobucket.com/albums/o433/bkprobk/fd-icon.gif" alt="" height="21" /> </div>

<div class="smenu-content fl" id="submenu" onmouseover="clear_delayhide();activeMenuParent();" onmouseout="resetit();"> </div>

</div>
</div>

<script type="text/javascript" language="javascript">
menuobj=document.getElementById? document.getElementById("submenu") : document.all? document.all.submenu : document.layers? document.dep1.document.dep2 : ""
Active(); writeParentMenu(); reWriteMenu();
</script>

- ở đoạn code trên, có thể thay đổi logo hiển thị ở submenu (code màu xanh) thành logo của bạn . Nếu không muốn hiển thị nó thì có thể xóa nó đi.
☼ Cập nhật việc hiển thị SubMenu ngay bên dưới Menu chính :
- Đây là cách mà bên VnExpress cũng thực hiện, đó là dùng phương pháp thủ công cho các submenu con, tức là đẩy nó dịch 1 đoạn nhỏ sang phải để các submenu có thể hiển thị ngay bên dưới Menu chính.

Đây là hình ảnh mình đã fix:

- Để thực hiện việc này các bạn chỉ cần thay thế đoạn code :

thành đoạn code bên dưới :

Trong file JS mình cập nhật, nó chỉ hiển thị tốt với các menu trong bản demo mà thôi, khi bạn áp dụng cho blog bạn, mỗi menu chính sẽ có các menu phụ nhiều ít khác nhau, vì thế nếu bạn dùng nguyên file JS mình đưa sẽ hiển thị không được tốt lắm. Vì vậy để việc hiển thị tốt nhất, bạn hãy tự mình điều chỉnh lại việc hiển thị của mỗi submenu.

☼ Sau đây mình sẽ hướng dẫn các bạn thực hiện việc điều chỉnh này:
- Các bạn download file JS mà mình vừa cập nhật về.
- Mở nó lênh bằng NotePad, và tìm đến đoạn code sau :

switch (parseInt(which)){
case 3: menuobj.className = 'smenu-content fl'; thecontent = writeBlank(18).concat(thecontent); break;
case 4: menuobj.className = 'smenu-content fl'; thecontent = writeBlank(33).concat(thecontent); break;
case 5: menuobj.className = 'smenu-content fl'; thecontent = writeBlank(55).concat(thecontent); break;
case 6: menuobj.className = 'smenu-content fl'; thecontent = writeBlank(70).concat(thecontent); break;
case 7: menuobj.className = 'smenu-content fl'; thecontent = writeBlank(88).concat(thecontent); break;
case 8: menuobj.className = 'smenu-content fl'; thecontent = writeBlank(108).concat(thecontent); break;
case 9: menuobj.className = 'smenu-content fl'; thecontent = writeBlank(110).concat(thecontent); break;

default:
menuobj.className = 'smenu-content fl';
break;
}

- Trong đoạn code trên các bạn sẽ thấy chỉ có lệnh case từ 3 đến 9 mà thôi, tức là việc hiệu chỉnh lại vị trí của các submenu mình chỉ áp dụng cho các menu chính thứ 3 trở đi. Và mình chỉ làm mẫu tới menu chính thứ 9 mà thôi, còn đối với các submenu của menu 1 và 2, do nó nằm sát phía bên trái quá, nên ta không nhất thiết phải dịch submenu của nó qua phải. Tùy biến hơn, nếu submenu3 quá nhiều thì việc dịch chuyển nó qua phải cũng không cần thiết. Vì thế tùy theo việc hiển thị thanh menu của mỗi blog mà sẽ có những hiệu chỉnh khác nhau, và sẽ không có 1 khuôn mẫu nhất định nào cho việc tùy chỉnh này.

- Các code màu đỏ chính là khoảng căn lề trái của các submenu, các bạn thấy nó tăng dần lên tương ứng với từng menu chính. Xem hình dưới đây sẽ rõ :

- Xem mình minh họa các bạn có thể rõ. Hãy thay đổi các con số đó sao cho hợp lý nhất.

Một kinh nghiệm nhỏ : nên test nó trước với 1 file HTML tự tạo bằng NotePad (giống như các trang demo của mình) rồi chỉnh sửa file JS, sau khi chỉnh sửa hoàn tất thì hãy áp dụng cho blog của mình.

Chúc các bạn thành công.

Tạo Tag Cloud (Label) Dạng Flash Trên Blogspot

13:37 Unknown No comments

Tạo Tag Cloud (Label) Dạng Flash Trên Blogspot

Thông thường từ trước tới nay chúng ta thường ít nhìn thấy các Tag Cloud ở các blog của Blogger.com.

Tag Cloud để hiện thị các thẻ được sử dụng nhiều nhất. Thông thường các thẻ tag hay labels nào in đậm và to là thẻ được yêu chuộng nhất và chắc chắn có nhiều người sử dụng hoặc tìm kiếm nó nhất hay có nhiều bài liên quan nhất.

Các thẻ này đều ở dạng tĩnh, không phải động, tuy nhiên hiện nay ở một số blog của worldpress có các thẻ tag cloud dạng động nhìn rất sinh động. Tìm kiếm mọi các dữ liệu, search trên mạng rất lâu tôi mới tìm được bài hướng dẫn tạo Tag Cloud (Label) dạng Flash trên Blogspot.

Thẻ Tag Cloud dạng động này được gọi là "Blogumus". Là một tag dạng Flash widget được convert bởi Amanda từ nguồn plugin dành cho Wordpress của tác giả Roy Tanck .

Trong bài viết này tôi xin hướng dẫn bạn cách thực hiện theo chỉ dẫn của Amanda, hy vọng các bạn sẽ có một Tag Cloud Flash đẹp mắt và quyến rũ cho blogspot của mình.

Các bước tiến hành để tạo Tag Cloud Label dạng Flash cho blogspot.

Để tạo Blogumus vào trong Bố cục (Layout) Blogger của bạn rất đơn giản! Bạn chỉ cần sao chép và dán một phần của mã vào mẫu Blogger của bạn, trong quá trình tạo, tuỳ thuộc vào màu sắc của Blog hiển thị bạn cần chỉnh sửa thủ công một số chi tiết. Sau đây là các bước cần thiết để cài đặt Blogumus trong Blogger của bạn:

1. Vào Bố cục (Layout)> Chỉnh sửa (Edit) HTML trong Bảng điều khiển Blogger của bạn, và tìm kiếm dòng lệnh sau (hay tương tự):

<b:section class='sidebar' id='sidebar' preferred='yes'>

Sau đó chèn dòng lệnh sau vào ngay dưới:

<b:widget id='Label99' locked='false' title='Labels' type='Label'>

<b:includable id='main'>

<b:if cond='data:title'>

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>

<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>

<script type='text/javascript'>

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

// uncomment next line to enable transparency

//so.addParam("wmode", "transparent");

so.addVariable("tcolor", "0x333333");

so.addVariable("mode", "tags");

so.addVariable("distr", "true");

so.addVariable("tspeed", "100");

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

so.addParam("allowScriptAccess", "always");

so.write("flashcontent");

</script>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

Xong việc bạn Preview để xem mẫu mà bạn vừa chỉnh sửa. Bạn có thể lựa chọn vị trí để đặt Tag Cloud hoặc màu sắc của nền, màu chữ sao cho thẩm mỹ.

Hướng dẫn thay đổi màu nền, màu chữ và kích thước chữ hiển thị trong Tag Cloud.

Tùy biến Blogumus theo ý bạn:

Như mặc định, mã code nêu trên cung cấp cho bạn Blogumus Widget Flash có kích thước và màu sắc như sau:

Chiều rộng: 240px Chiều cao: 300px Màu nền: Trắng Màu font chữ: Xám Đen Kích thước font chữ: 12

Bạn có thể thay đổi từng các biến trên để phù hợp với Blog của mình.

Hiệu chỉnh độ rộng và chiều cao Các biến biểu thị độ rộng và chiều cao được thể hiện như trong đoạn mã sau:

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

Độ rộng hiện tại là 240 được thể hiện bằng màu đỏ ở trên, chiều cao được thể hiện bằng màu xanh có giá trị hiện tại là 300. Các biến này được biểu thị bằng đơn vị pixel. Các bạn có thể tùy biến các giá trị này tùy ý.

Hiệu chỉnh màu của background , cũng như vậy bạn có thể tùy biến thay đổi màu của background mặc định màu trắng thành các màu theo bảng mã hex :

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

Ví dụ bạn muốn thay màu background thành màu đỏ sáng thì bạn thay thế #ffffff thành #ff0000.

Hiệu chỉnh màu của text Mặc định màu của text là màu Xám đen( hex value #333333). bạn thay thế giá trị này bằng màu mà bạn lựa chọn trong dòng mã lệnh sau:

so.addVariable("tcolor", "0x333333");

Hiệu chỉnh kích thước font size Kích thước mặc định là 12, bạn tìm đến đoạn code sau và sẽ tìm nhìn thấy chữ số 12 và thay nó bằng kích thước bạn thích.

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

Bạn hãy ngắm tác phẩm Label bên cạnh, tác phẩm được thực hiện bời proAMATEUR trên nguồn dữ liệu của chị Amada.

Nguồn dữ liệu : http://www.bloggerbuster.com