Bạn chưa biết gì về máy tính ư? Không sao cả. Chúng ta không thể học tất cả mọi thứ trên đời chỉ để làm có vài việc. Có những thứ ta cần phải nhớ, có những thứ ta dở sách ra và làm theo hướng dẫn. Không như vậy thì người ta cần chữ viết để làm gì? Nơi đây chúng ta sẽ sưu tầm các thủ thuật tin học và bạn sẽ không phải mất nhiều thời gian để làm bạn với cái máy tính của mình.
Thứ Năm, 29 tháng 11, 2007
Quét virus online miễn phí
Công cụ quét virus online được nhiều người tin dùng bởi sự hiệu quả trong việc cập nhật nhanh chóng danh sách virus mà không phải cài đặt. Các công cụ sau đây có thể cho bạn lựa chọn để sử dụng khi cần.
- Trendmicro (http://housecall.trendmicro.com).
- McAFee (http://us.mcafee.com/root/mfs/scan.asp).
- Windows Live oneCare Scanner (http://safety.live.com/site/en-US/center/howsafe.htm).
- Symantec Internet Security (http://www.symantec.com/securitycheck).
- BitDefender online Scanner (http://www.bitdefender.com/scan8/ie.html). (TNO)
Thứ Sáu, 23 tháng 11, 2007
Cách chuyển giao diện blogspot thành giao diện web - Phần 1
* Điều kiện cần thiết là bạn phải có 1 template 3(4)
cột. ( Nếu bạn vẫn chưa biết cách tạo blog 3 cột, có thể
tham khảo ở Đây! ) . Tớ xin làm ví dụ với template 3 cột : 200,550,200.
Chỉ có 6 bước quan trọng trong việc chuyển đổi template. Đó là:
- Xóa header
- Điều chỉnh CSS
- Tạo banner và thanh menu ngang bên trên
- Tạo Menu dọc bên trái
- Tạo widget trái, phải
- Tạo footer phía dưới cùng
1. Bước đầu tiên là phải xóa đi cái header mặc định của
blog. Cái header bao gồm Title (hoặc Image), Description nằm ở phía trên
cùng của blog. Để xóa nó, bạn vào Template -> Edit HTML. Click
chọn Expand Widget Templates. Tìm đoạn code có dạng như sau:
CODE 1: |
<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Test1 (Header)' type='Header'> .... <!--Show just the image, no text--> .... <!--Show image as background to text--> .... </b:widget> </b:section> </div> |
Bạn hãy xóa đi tất cả những dòng nằm giữa dòng thứ 2 trên đếm xuống và dòng thứ
2 dưới đếm lên. Tức là bắt đầu xóa từ dòng <b:widget id='Header1' ...
đến dòng </b:widget>. Ở dòng thứ 2 bạn hãy bỏ đi cụm
maxwidgets='1' và sửa showaddelement='no' thành
showaddelement='yes'. Đoạn code còn lại sau các thao tác này là:
CODE 2: |
<div id='header-wrapper'> <b:section class='header' id='header' showaddelement='yes'> </b:section> </div> |
Xong bạn bấm Sava Template. Lưu ý là bạn sẽ gặp một thông báo:
Thông báo này hỏi rằng bạn có "quyết định" xóa header đi không. Bạn chọn
Confirm & Save. Xong bước 1.
2. Điều chỉnh CSS. Hãy bỏ Click chọn Expand
Widget Templates cho dễ nhìn code.
CSS của bạn bắt đầu và kết thúc như sau:
CODE 2: |
/* Variable definitions ==================== .... .... .... /** Page structure tweaks for layout editor wireframe */ body#layout #header { margin-left: 0px; margin-right: 0px; } ]]></b:skin> |
Hãy thay toàn bộ CSS đó bằng CSS (CODE 3)này:
CODE 3: [Bấm vào đây để Mở CODE 3] |
/* Variable definitions ==================== <Variable name="bgcolor" description="Page Background Color" type="color" default="#fff" value="#32527A"> <Variable name="textcolor" description="Text Color" type="color" default="#333" value="#333333"> <Variable name="linkcolor" description="Link Color" type="color" default="#58a" value="#5588aa"> <Variable name="pagetitlecolor" description="Blog Title Color" type="color" default="#666" value="#666666"> <Variable name="descriptioncolor" description="Blog Description Color" type="color" default="#999" value="#999999"> <Variable name="titlecolor" description="Post Title Color" type="color" default="#c60" value="#003366"> <Variable name="bordercolor" description="Border Color" type="color" default="#ccc" value="#cccccc"> <Variable name="sidebarcolor" description="Sidebar Title Color" type="color" default="#999" value="#999999"> <Variable name="sidebartextcolor" description="Sidebar Text Color" type="color" default="#666" value="#666666"> <Variable name="visitedlinkcolor" description="Visited Link Color" type="color" default="#999" value="#999999"> <Variable name="bodyfont" description="Text Font" type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Verdana, sans-serif"> <Variable name="headerfont" description="Sidebar Title Font" type="font" default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% Arial, sans-serif"> <Variable name="pagetitlefont" description="Blog Title Font" type="font" default="normal normal 200% Georgia, Serif" value="normal normal 200% Trebuchet, Trebuchet MS, Arial, sans-serif"> <Variable name="descriptionfont" description="Blog Description Font" type="font" default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% Trebuchet, Trebuchet MS, Arial, sans-serif"> <Variable name="postfooterfont" description="Post Footer Font" type="font" default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% Verdana, sans-serif"> */ /* Use this with templates/template-twocol.html */ body { background:$bgcolor; margin:0; color:$textcolor; font:x-small Georgia Serif; FONT-SIZE: 11px; text-align: center; } BODY {SCROLLBAR-FACE-COLOR: #294a7b; SCROLLBAR-HIGHLIGHT-COLOR: #246494; SCROLLBAR-SHADOW-COLOR: #969696; SCROLLBAR-3DLIGHT-COLOR: #ededed; SCROLLBAR-ARROW-COLOR: #ffffff; SCROLLBAR-TRACK-COLOR: #246494; SCROLLBAR-DARKSHADOW-COLOR: #ededed } TR {FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: tahoma, verdana, arial} TD {FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: tahoma, verdana, arial} FORM { MARGIN: 0px } INPUT {BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; FONT: 11px tahoma, verdana, arial; BORDER-LEFT: #000000 1px solid; COLOR: #000000; BORDER-BOTTOM: #000000 1px solid} HR {BORDER-RIGHT: #b9b9b9 0px solid; BORDER-TOP: #b9b9b9 1px solid; BORDER-LEFT: #b9b9b9 0px solid; BORDER-BOTTOM: #b9b9b9 0px solid; HEIGHT: 0px } a:link { color:$linkcolor; text-decoration:none; } a:visited { color:$visitedlinkcolor; text-decoration:none; } a:hover { color:$titlecolor; text-decoration:underline; } a img { border-width:0; } TD.top { FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: Tahoma,Verdana,Arial } A.top:link { FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: Tahoma,Verdana,Arial } A.top:active { FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: Tahoma,Verdana,Arial } A.top:visited { FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #000000; FONT-FAMILY: Tahoma,Verdana,Arial } A.top:hover { COLOR: #294a7b; TEXT-DECORATION: none } .A_white { FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #ffffff; FONT-FAMILY: tahoma, verdana, arial; TEXT-DECORATION: none } A.A_white:link { FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #ffffff; FONT-FAMILY: tahoma, verdana, arial; TEXT-DECORATION: none } A.A_white:active { FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #ffffff; FONT-FAMILY: tahoma, verdana, arial; TEXT-DECORATION: none } A.A_white:visited { FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #ffffff; FONT-FAMILY: tahoma, verdana, arial; TEXT-DECORATION: none } A.A_white:hover { COLOR: #ffffff } .tdmenu { BORDER-TOP: 1px solid; FONT-WEIGHT: bold; BORDER-LEFT-WIDTH: 1px; FONT-SIZE: 9px; TEXT-TRANSFORM: uppercase; COLOR: #e4e4e4; BORDER-BOTTOM: 1px solid; FONT-FAMILY: Verdana; BACKGROUND-COLOR: #0168b3; BORDER-RIGHT-WIDTH: 1px } /* Header ----------------------------------------------- */ #header-wrapper { width:970px; margin:0px; border:1px solid $bordercolor; } #header-inner { background-position: center; margin-left: auto; margin-right: auto; } #header { margin: 0px; border: 1px solid $bordercolor; text-align: center; color:$pagetitlecolor; } #header h1 { margin:5px 5px 0; padding:15px 20px .25em; line-height:1.2em; text-transform:uppercase; letter-spacing:.2em; font: $pagetitlefont; } #header a { color:$pagetitlecolor; text-decoration:none; } #header a:hover { color:$pagetitlecolor; } #header .description { margin:0 5px 5px; padding:0 20px 15px; max-width:700px; text-transform:uppercase; letter-spacing:.2em; line-height: 1.4em; font: $descriptionfont; color: $descriptioncolor; } #header img { margin-left: auto; margin-right: auto; } /* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { background:#FFFFFF; width: 970px; margin:0 auto; padding:0px; text-align:left; font: $bodyfont; } #main-wrapper { background:#FFFFFF; width: 550px; float: left; padding:3px; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #sidebar-wrapper { background:#294a7b; width: 200px; float: right; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #leftsidebar-wrapper { background:#294a7b; width: 200px; float: left; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } /* Headings ----------------------------------------------- */ h2 { margin:1.5em 0 .75em; font:$headerfont; line-height: 1.4em; text-transform:uppercase; letter-spacing:.2em; color:$sidebarcolor; } /* Posts ----------------------------------------------- */ h2.date-header { margin:1.5em 0 .5em; } .post { margin:.5em 0 1.5em; border-bottom:1px dotted $bordercolor; padding-bottom:1.5em; font-size:12px; } .post h3 { margin:.25em 0 0; padding:0 0 4px; font-size:140%; font-weight:normal; line-height:1.4em; color:$titlecolor; /* them dong nay */ font-family: "Courier New", Courier, monospace; text-transform:capitalize; } .post h3 a, .post h3 a:visited, .post h3 strong { display:block; text-decoration:none; color:$titlecolor; font-weight:700; } .post h3 strong, .post h3 a:hover { color:$textcolor; } .post p { margin:0 0 .75em; line-height:1.6em; } .post-footer { margin: .75em 0; color:$sidebarcolor; text-transform:uppercase; /*letter-spacing:.1em; */ font: $postfooterfont; line-height: 1.4em; } .comment-link { margin-left:.6em; } .post img { padding:4px; border:0px solid $bordercolor; } .post blockquote { margin:1em 20px; } .post blockquote p { margin:.75em 0; } /* Comments ----------------------------------------------- */ #comments h4 { margin:1em 0; font-weight: bold; line-height: 1.4em; text-transform:uppercase; /* letter-spacing:.2em;*/ color: $sidebarcolor; } #comments-block { margin:1em 0 1.5em; line-height:1.6em; } #comments-block .comment-author { margin:.5em 0; } #comments-block .comment-body { margin:.25em 0 0; } #comments-block .comment-footer { margin:-.25em 0 2em; line-height: 1.4em; text-transform:uppercase; letter-spacing:.1em; } #comments-block .comment-body p { margin:0 0 .75em; } .deleted-comment { font-style:italic; color:gray; } #blog-pager-newer-link { float: left; } #blog-pager-older-link { float: right; } #blog-pager { text-align: center; } .feed-links { clear: both; line-height: 2.5em; } /* Sidebar Content ----------------------------------------------- */ .sidebar { color: $sidebartextcolor; line-height: 1.5em; } .sidebar ul { list-style:none; margin:0 0 0; padding:0 0 0; } .sidebar li { margin:0; padding:0 0 .25em 15px; text-indent:-15px; line-height:1.5em; } .sidebar .widget { border-bottom:0px; margin:0 0 0em; padding:0 0 0em; } .main .widget { border-bottom:1px dotted $bordercolor; margin:0 0 0.2em; padding:0 0 0.2em; } .main .Blog { border-bottom-width: 0; } /* Profile ----------------------------------------------- */ .profile-img { float: left; margin: 0 5px 5px 0; padding: 4px; border: 1px solid $bordercolor; } .profile-data { margin:0; text-transform:uppercase; letter-spacing:.1em; font: $postfooterfont; color: $sidebarcolor; font-weight: bold; line-height: 1.6em; } .profile-datablock { margin:.5em 0 .5em; } .profile-textblock { margin: 0.5em 0; line-height: 1.6em; } .profile-link { font: $postfooterfont; text-transform: uppercase; letter-spacing: .1em; } /* Footer ----------------------------------------------- */ #footer { width:1000px; clear:both; margin:0 auto; padding-top:15px; line-height: 1.6em; /* text-transform:uppercase; letter-spacing:.1em; */ text-align: center; } .footmsg { FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #003c5e; FONT-FAMILY: Arial } /** Page structure tweaks for layout editor wireframe */ body#layout #header { margin-left: 0px; margin-right: 0px; } ]]></b:skin> |
Đoạn CSS trên dài nhưng chỉ có một số điểm chú ý sau:
CODE 4: |
body { background:$bgcolor; /* màu nền toàn blog của bạn */ margin:0; color:$textcolor; font:x-small Georgia Serif; FONT-SIZE: 11px; /* Kích cỡ của chữ mặc định trên blog bạn */ text-align: center; } .... .... #header-wrapper { width:970px; /* Bề rộng của phần trên, bao gồm banner và thanh menu nang */ margin:0 auto 10px; border:1px solid $bordercolor; } .... .... /* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { background:#FF0000; width: 970px; margin:0 auto; padding:0px; text-align:left; font: $bodyfont; } #main-wrapper { background:#FF0000; /* Màu nền bài viết */ width: 550px; /* Bề rộng bài viết */ float: left; padding:3px; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #sidebar-wrapper { background:#294a7b; /* màu nền side bar */ width: 200px; /* chiều rộng sidebar */ float: right; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #leftsidebar-wrapper { background:#294a7b; width: 200px; float: left; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } .... .... .sidebar .widget { border-bottom:0px; /* lằn ngăn giữa các widget trong sidebar */ margin:0 0 0em; /* khoảng cách giữa các widget trong sidebar */ padding:0 0 0em; } .... |
Kéo scrollbar lên trên cùng và xóa đi dòng <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> .
3. Tạo banner.
( Mời các bạn xem tiếp ở đây )
Anh Võ
nguồn: vietwebguide.blogspot.com
Trang trí cho Label và Archive widget
Một widget trong xml-template của blogger có dạng như sau:
CODE 1: |
<b:widget id='HTML5' locked='false' title='' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget> |
Ngâm cứu một hồi bạn sẽ thấy, cấu trúc của widget thật đơn giản. Bắt đầu và kết thúc bằng các (tạm gọi là) thẻ <b:widget>(mở) và </b:widget>(có dấu / là đóng). Hai thẻ này là bắt buộc phải có và là duy nhất trong một widget. Kế đến là các thẻ <b:includable> có tác dụng chia nội dung của widget ra làm nhiều thành phần (cho dễ quản lý), các thẻ <b:includable> có thể có nhiều trong widget.
Tiếp theo, bạn hãy xem các code có màu. Đoạn code màu xanh da trời (blue) là phần hiển thị tiêu đề của widget. Bạn hoàn toàn có thể thay đổi hoặc xóa dòng này nếu không muốn hiện tiêu đề. Mà xóa chi mệt nhỉ nếu không muốn hiện tiêu đề thì trong lúc tạo widget không đặt tiêu đề cho nó là được rồi.
Đoạn code mà đỏ chứa nội dung của widget, mỗi dạng widget khác nhau có nội dung khác nhau, bạn cũng không cần bận tâm nó khác nhau như thế nào. Ta hoàn toàn có thể thay đổi code này. Đoạn code màu xanh cỏ (green) là mã điều khiển hiện nút Quick Edit khi bạn truy cập blog của bạn mà đã login thì nó hiện. Không quan tâm tới cái này làm gì.
Như đã nói, một widget thông thường thì có mã như đoạn CODE 1. Đối với
các widget chính như Label, Archive, Main Posts thì mã phức tạp hơn nhiều. Tuy
nhiên cách thay đổi tương tự nhau cả. Dưới đây tôi sẽ hướng dẫn cách trang trí
cho Archive (thêm khung) và Label(thêm khung, tạo hiệu ứng OnMouser Over).
1. Trang trí Archives
Tôi muốn tạo một các khung cho Archive Widget có dạng như thế này:
- Tạo Archive Widget (nếu chưa có)
- Vào Template -> Edit HTML, backup một bản XML về máy nhé. Sau đó click
chọn Expand Widget Templates
- Tìm một đoạn code có dạng như sau:
CODE 2: |
<b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <div id='ArchiveList'> <div expr:id='data:widget.instanceId + "_ArchiveList"'> <b:if cond='data:style == "HIERARCHY"'> <b:include data='data' name='interval'/> </b:if> <b:if cond='data:style == "FLAT"'> <b:include data='data' name='flat'/> </b:if> <b:if cond='data:style == "MENU"'> <b:include data='data' name='menu'/> </b:if> </div> </div> <b:include name='quickedit'/> </div> </b:includable> |
- Tiến hành xóa đoạn code màu xanh, thêm đoạn code màu đỏ vào nữa, như sau:
CODE 3: |
<b:includable id='main'> <div class='widget-content'> <table style="BORDER-COLLAPSE: collapse" cellpadding="0" width="100%"> <tbody><tr><td> <table border="0" style="BORDER-COLLAPSE: collapse" cellpadding="0" width="100%"> <tbody><tr><td width="16" height="20" bgcolor="#30a1db"><img border="0" width="16" src="http://vo1984.googlepages.com/kvr.gif" height="8"/></td><td class="A_white" height="20" bgcolor="#30a1db">Blog Archives</td></tr></tbody></table></td></tr> <tr><td bgcolor="#30a1db"><img border="0" width="1" src="http://vo1984.googlepages.com/spacer.gif" height="2"/></td></tr> <tr><td bgcolor="#ffffff"><img border="0" width="1" src="http://vo1984.googlepages.com/spacer.gif" height="1"/></td></tr> <tr><td valign="top" style="BORDER-RIGHT: #30a1db 1px solid; BORDER-TOP: #30a1db 1px solid; BORDER-LEFT: #30a1db 1px solid; BORDER-BOTTOM: #30a1db 1px solid; BACKGROUND-COLOR: #ffffff"> <table border="0" style="BORDER-COLLAPSE: collapse" cellspacing="3" cellpadding="3" width="100%"> <tbody><tr><td valign="top"> <div id='ArchiveList'> <div expr:id='data:widget.instanceId + "_ArchiveList"'> <b:if cond='data:style == "HIERARCHY"'> <b:include data='data' name='interval'/> </b:if> <b:if cond='data:style == "FLAT"'> <b:include data='data' name='flat'/> </b:if> <b:if cond='data:style == "MENU"'> <b:include data='data' name='menu'/> </b:if> </div> </div> </td></tr></tbody></table></td></tr> </tbody></table> <b:include name='quickedit'/> </div> </b:includable> |
- Save template lại và mở blog xem thử kết quả nhé. (Bạn có thể xem Demo tại
ĐÂY . Chú ý: để có thể hiển thị được như trong bản Demo này bạn phải có Template như kiểu này)
2. Trang trí label
Vào xem trang http://anhvotest2.blogspot.com, rà chuột vào các link Label xem thử thế nào
nhé
- Cũng tương tự như mục 1, bạn tìm đến đoạn code có dạng như sau:
CODE 4: |
<b:widget id='Label1' 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'> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a expr:href='data:label.url'><data:label.name/></a> </b:if> (<data:label.count/>) </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget> |
- Xóa đoạn code màu xanh (xóa title) và thêm đoạn code màu đỏ, như sau:
CODE 5: |
<b:widget id='Label1' locked='false' title='Labels' type='Label'> <b:includable id='main'> <div class='widget-content'> <table style="BORDER-COLLAPSE: collapse" cellpadding="0" width="100%"> <tbody><tr><td> <table border="0" style="BORDER-COLLAPSE: collapse" cellpadding="0" width="100%"> <tbody><tr><td width="16" height="20" bgcolor="#30a1db"><img border="0" width="16" src="http://vo1984.googlepages.com/kvr.gif" height="8"/></td><td class="A_white" height="20" bgcolor="#30a1db">Labels</td></tr></tbody></table></td></tr> <tr><td bgcolor="#30a1db"><img border="0" width="1" src="http://vo1984.googlepages.com/spacer.gif" height="2"/></td></tr> <tr><td bgcolor="#ffffff"><img border="0" width="1" src="http://vo1984.googlepages.com/spacer.gif" height="1"/></td></tr> <tr><td valign="top" style="BORDER-RIGHT: #30a1db 1px solid; BORDER-TOP: #30a1db 1px solid; BORDER-LEFT: #30a1db 1px solid; BORDER-BOTTOM: #30a1db 1px solid; BACKGROUND-COLOR: #ffffff"> <table border="0" style="BORDER-COLLAPSE: collapse" cellspacing="3" cellpadding="3" width="100%"> <tbody><tr><td valign="top"> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a expr:href='data:label.url' onmouseover="this.style.color='red'" onmouseout="this.style.color=''"><data:label.name/></a> </b:if> (<data:label.count/>) </li> </b:loop> </ul> </td></tr></tbody></table></td></tr> </tbody></table> <b:include name='quickedit'/> </div> </b:includable> </b:widget> |
- Save Template lại và kiểm tra.
*** Qua 2 ví dụ bạn có thể thấy, việc chỉnh sửa trang trí các widget không phải
là khó. Bằng cách tương tự như trên bạn có thể chỉnh sửa bất kì một widget nào.
Hãy tập thực hành và ngâm cứu kĩ hơn chắc chắn bạn sẽ hiểu thêm nhiều về blogger
và sẽ biết được nhiều cách tùy biến khác.
*** Bạn có thể xem thêm bài "Cách chuyển giao diện blogspot thành giao diện web"Ở ĐÂY
Nhạc nền trên trang của bạn
bạn sống động hơn và chắc chắn sẽ thu hút được nhiều người yêu thích nhạc, nhất
là khi nhạc nền của bạn trúng vào bài tủ của họ thì họ lại càng thích. Để chèn
nhạc nền vào site, rất dễ, bạn chỉ cần chèn đoạn mã sau vào giữa hai tag
<head> và </head> .
CODE : |
<bgsound src="http://vietwebguide.googlepages.com/tay-du-ky.mid" loop="-1"> |
Bạn hãy chú ý các chỗ màu đỏ cần thay:
- http://vietwebguide.googlepages.com/tay-du-ky.mid
: địa chỉ đến bài nhạc của bạn (không phải nhạc hình nhé)
- loop="-1" : ấn định chế độ lặp lại của bài nhạc
nền. Có 3 lựa chọn:
+ 0 nếu chỉ phát 1 lần
+ số nguyên n lớn hơn 1: lặp lại n lần.
+ -1 nếu lặp lại mãi mãi.
Dưới đây là một số link bài hát mà tôi đã làm sẵn, bạn có thể lấy để dùng:
1- Bài Ca Của Nàng (Mạnh Quỳnh - Khả Tú):
http://vo1984.googlepages.com/BaicacuanangSongcaManhQuynh-KhaTu.wma
2- Cây đàn bỏ quên (Tuấn Ngọc):
http://vo1984.googlepages.com/Cay_dan_bo_quen_TuanNgoc.wma
3- Hai lối mộng (Tuấn Vũ):
http://vo1984.googlepages.com/HaiLoiMong.wma
4- Hai năm tình lận đận (Vũ Khanh):
http://vo1984.googlepages.com/hainamtinhlandanvukhanh.wma
5- Làm sao quên được (Lương Tùng Quang):
http://vo1984.googlepages.com/Lamsaoquenduoc-luongtungquang.wma
6- Ngày xưa hoàng thị (Đức Tuấn):
http://vo1984.googlepages.com/ngayxuahoangthi.wma
7- Promise Dont Come Easy (nhạc đệm) :
http://vo1984.googlepages.com/PromiseDontComeEasy.wma
8- Riêng một góc trời (Tuấn Ngọc):
http://vo1984.googlepages.com/riengmotgoctroituanngoc.wma
9- Romeo & Juliet (nhạc đệm):
http://vo1984.googlepages.com/RomeoJuliet.wma
10- Thà như giọt mưa (Duy Quang):
http://vo1984.googlepages.com/THA_NHU_GIOT_MUA__DUY_QUA.wma
11- Tương tư nàng ca sĩ (Trọng Phúc):
http://vo1984.googlepages.com/Tuongtunangcasi_trongphuc.wma
12- Xin một lần yêu:
http://vo1984.googlepages.com/Xinmotlanyeu.wma
Tạo nút BookMark cho mỗi bài viết
Bài viết này hướng dẫn cách chèn nút BookMark lấy từ Addthis.com và chèn sao cho nó nằm ngang ở tiêu đề mỗi topic, bạn xem hình mẫu sau:
Các bước:
- Đầu tiên vào trang Addthis.com. Đăng ký
một trài khoản, vào email để kích hoạt tài khoản, sau đó vào lại Addthis.com và
login vào hệ thống. ( trang addtoany.com cũng tương tự như addthis.com, nhưng
tôi ko thích lắm vì nó không đẹp )
- Bấm vào nút GET THE WIDGET! hoặc vào link này:
http://www.addthis.com/web-button-select.html
+ Which kind of widget?: bạn chọn Bookmarking Widget
+ Which widget? : hãy chọn kích cỡ của nút mà bạn thích. Khuyến cáo nên
chọn nút nhỏ.
+ Where? Where do you want to put the widget? Bạn chọn on a Blog.
+ Blogging Platform: bạn chọn Blogger
- Bấm vào nút Get Your Free Widget. Code của widget sẽ hiện ra. Bạn hãy
chọn đoạn code ở chỗ New Drop-down. Xong phần lấy code.
Chèn code vào blogger, bạn có thể chèn ở bất cứ nơi đâu trong blog của bạn.
Dưới đây là cách chèn nút BookMark ngang với tiêu đề bài viết.
- Vào Template -> Edit HTML. Sao lưu một bản XML. Sau đó Tick vào nút Expand
để xem template ở dạng đầy đủ.
- Tìm đến dòng <div class='post hentry uncustomized-post-template'>. Chèn
đoạn code sau vào ngay trên dòng này. Như sau:
CODE: |
<!-- AddThis Bookmark Post Dropdown BEGIN --> <div style='float:right; margin:2px 0 2px 5px;'><script type='text/javascript'>addthis_url='<data:post.url/>'; addthis_title='<data:post.title/>'; addthis_pub='anhvo';</script><script src='http://s7.addthis.com/js/addthis_widget.php?v=12' type='text/javascript'></script></div> <!-- AddThis Bookmark Post Dropdown END --> <div class='post hentry uncustomized-post-template'> |
Xong rồi save template lại và xem kết quả.
*** Bạn cũng có thể đặt nút BookMark ở cuối bài viết cũng nên. Hãy tự mình đặt
thử xem nhé. Các bài tự thực hành sẽ giúp trình của bạn lên cao rất nhanh và sẽ
am hiểu blogger nhiều hơn.
nguồn: vietwebguide.blogspot.com
Thứ Năm, 22 tháng 11, 2007
Làm thế nào để sử dụng RoboForm miễn phí
Tác giả: NNH gửi đăng tại CuaSoTinHoc.blogspot.com
Tiện thể, hôm nay tôi hướng dẫn các bạn về cách dùng RoboForm mà không cần mua, nhưng có điều là hơi mất công một chút. Nếu bạn có điều kiện thì nên mua để khuyến khích nhà sản xuất và thuận lợi hơn trong việc cập nhật phiên bản mới. Bạn đọc thêm bài Nhớ password theo phong cách riêng để biết thêm về RoboForm.
Bước 1: Khi cài RoboForm các bạn Download thẳng phiên bản dùng thử, sau đó cài lên và chạy. Trong quá trình cài nó sẽ hỏi bạn nhập vào 1 cái mật khẩu ( PassWord ) để dùng cho việc đăng nhập vào RoboForm. Bạn phải luôn nhớ mật khẩu ( PassWord ) này nếu không sẽ không còn dùng được RoboForm với dữ liệu có sẵn ( liên quan đến phần sử dụng về sau ).
Bước 2: Sau đó các bạn nhấn chuột phải vào nút Start bên dưới cùng góc phía trái màn hình của Windows rồi chọn Explore rồi vào C:\Documents and Settings\WinXP\My Documents\ ( của tôi là WinXP nhưng có bạn sẽ là tên khác tuỳ theo cài đặt, nói chung nó là phần Use mà bạn dùng đăng nhập ) và copy toàn bộ thư mục: "My RoboForm Data" vào 1 ổ đĩa cứng nào bạn dùng làm lưu trữ.Bước 3: Sau đó bạn nhấn chuột phải vào hình RoboForm bên góc phải phía dưới cùng màn hình Windows, cái hình giống cái màn hình màu xanh đeo cái kính đen ấy, bạn hãy chọn "Options..." tiếp đến là "User data" ==> "Set Folder..." rồi chọn cái thư mục "My RoboForm Data\Default Profile" mà bạn vừa copy vào ổ lưu trữ, xong rồi nhấn "Ok". Vậy là xong, dữ liệu của bạn đã được lưu trữ riêng trên ổ khác và dù bạn có cài lại Windows cũng không cần phải lo lắng tới việc sao lưu dữ liệu.
Bước 4: Giờ thì bạn cứ dùng cho đến khi nó hết hạn dùng thử. Okies chả sao cả, bạn lại vào "Control Panel" hoặc vào "Start/All Program/AI RoboForm/UnInstall và gỡ cài đặt của RoboForm ra, nhưng trong quá trình gỡ cài đặt nó sẽ hỏi bằng một bản với tiêu đề phía trên là : "RoboForm UnInstaller" và bên dưới cùng có một nút chọn ( mặc định của nó là không chọn và bạn đừng có chọn) với dòng chữ: "Remove all Passcards, Identities Safenotes (RoboForm User data ) form this computer" thì bạn đừng có chọn nút đó, nếu bị chọn mặc định thì hãy nhấn vào đó và bỏ nó đi rồi nhấn "OK". Vậy là bạn đã gỡ thành công mà dữ liệu thì vẫn còn lại trên ổ đĩa lưu trữ ( nếu bạn chọn nút trên nó sẽ xoá toàn bộ dữ liệu khi gỡ cài đặt của RoboForm ).
Bước 5: Giờ bạn vào Explore tìm xoá thư mục : "My RoboForm Data" bên trong "C:\Documents and Settings\WinXP\My Documents\", tiếp đó bạn nhấn chuột vào nút "Start" và chọn "Run..." sau đó đánh vào trong ô nhập lệnh của "Run" dòng lệnh sau: "regedit" rồi nhấn "OK". Một màn hình chỉnh sửa Registry sẽ hiện lên. Bạn hãy nhớ đây là phần cực kỳ quan trọng của Windows, nếu xoá nhầm sẽ không thể phục hồi được và Windows có thể bị lỗi.
Bước 6: Giờ thì bạn hãy nhấn "Ctrl+F" hoặc chọn Menu "Edit" rồi chọn "Find..." và nhập dòng lệnh tìm kiếm là: RoboForm để tìm, nó dừng ở đâu thì bạn hãy coi xem nếu ô cửa sổ bên trái là thư mục "Siber Systems" hoặc "AI RoboForm" thì hãy xoá cả thư mục đó ( thư mục đó sẽ là hình cái kẹp đang mở khác với các thư mục khác, bạn nhìn cho kỹ kẻo xoá nhầm rồi phải cài lại Windows đó, vì đôi khi dòng tên thư mục quá dài nên hình cái kẹp mở đó bị đẩy lùi vào trong nên nếu không nhìn thấy thì phải kéo nó ra để xác định cho đúng rồi hẵng xoá ), nếu là tên khác thì chỉ xoá riêng dòng được tìm thấy mà thôi, rồi cứ thế bạn nhấn phím F3 phía trên cùng của bàn phím và xoá theo hướng dẫn trên.
Bước 7: Các bạn đã xoá hết rồi phải không? Giờ hãy khởi động lại máy tính và lại Download RoboForm về và cài lên. Trong quá trình cài nó sẽ hỏi bạn nhập vào 1 cái mật khẩu ( PassWord ) để dùng cho việc đăng nhập vào RoboForm. Bạn phải nhập cái mật khẩu ( PassWord ) lần trước đã dùng để có chung 1 mật khẩu ( PassWord ) nếu không sẽ không còn dùng được RoboForm với dữ liệu có sẵn ( liên quan đến phần sử dụng về sau ).
Bước 8: Sau khi cài bạn lại vào Explore rồi vào C:\Documents and Settings\WinXP\My Documents\My RoboForm Data\Default Profile và copy toàn bộ 5 file trong đó là: cache.rfo, RoboFormDataHere.txt, license.rfo, smpenc.rfo, options.rfo và dán (paste) nó vào thư mục "My RoboForm Data\Default Profile" trên ổ lưu trữ của bạn và cho nó copy đè các File trong đó. Okies, giờ bạn hãy làm lại Bước 3 là xong.
Okies, Vậy là bạn có thể dùng tiếp được RoboForm rồi đó, kiểu này hơi mất công nhưng an toàn hơn cho bạn.
English:
Main landing page similar to homepage, but missing the main "buy pro" button
Similar to homepage but emphasizes "buy pro" option
Alternate landing page emphasizing RoboForm features
Alternate landing page emphasizing "security" message
Alternate landing page emphasizing "speed" message
Similar to homepage but with longer descriptions and no sidebar menu
Similar to frame23 above but with different download buttons
Similar to homepage but emphasizes CNET 5 star rating
Landing page for Sweepstakes audience
Landing page for Surveys Audience
Minimal text stressing Toolbar features
Emphasis on Toolbar features with different layout than frame31 above
Never Forget Your Passwords Again message
Japanese:
Japanese FPA with robot
Japanese FPA with smiley emoticon
Japanese main landing page emphasizing "download"
Japanese alternate landing page
Spanish:
Spanish version of Alternate landing page emphasizing RoboForm features
German:
RoboForm German version
Thứ Bảy, 17 tháng 11, 2007
Blogger hack: Mở rộng bài đăng theo kiểu hiển thị Peekaboo
Như bạn thấy, mỗi bài đăng trên blog này chỉ hiển thị phần đầu và mỗi khi bạn bấm trên Đọc tiếp... thì bài viết mới hiện ra đầy đủ, không phải tải lại, giúp blog nhanh hơn. Kỹ thuật này được phát triển bởi Ramani, khác với cách chèn đọc thêm (bài đăng phải tải lại một lần nữa) mà tôi có dịp giới thiệu trước đây. Để sử dụng kỹ thuật này trên blog, hãy thực hiện theo các bước sau:
Bước 1: Đăng nhập vào Blogger và chọn thẻ Template để sao lưu template của bạn.
Bước 2: Tại Edit HTML (Chỉnh sửa HTML) bạn kéo thanh trượt tìm tìm thẻ </head> (có thể nhấn đồng thời hai phím Ctrl + F để tìm) sau đó chép toàn bộ đoạn code dưới đây, dán phía trên thẻ này và lưu lại.
<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">
var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}
function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}
</script>
</b:if>
Bước 3: Bạn click chọn Expand Widget Templates sau đó tìm id='post' (có thể dùng Ctrl + F để tìm) có trên đoạn mã. Bây giờ hãy bổ sung các đoạn mã màu đỏ nằm đúng vị trí như dưới đây. Lưu ý: Một số template sẽ không có uncustomized-post-template nhưng bạn cũng không phải lo.
<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Đọc thêm ...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Tóm tắt ...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Bạn có thể tùy biến Đọc thêm ... và Tóm tắt ... nằm trong đoạn mã trên theo ý thích của mình.
Bước 4: Thay đổi cách đăng bài. Bây giờ mỗi bài đăng của bạn phải thực hiện theo cấu trúc sau:
Phần đầu hay tóm tắt
<span id="fullpost">
Phần còn lại hay mở rộng
</span>
Bạn có thể tham khảo thêm nội dung Sử dụng kỹ thuật mở rộng bài viết của Template ba cột mà trước đây tôi có dịp giới thiệu để biết cách dùng chi tiết hơn.
Cập nhật thêm (Bước 3):
Để thao tác đơn giản hơn, thay vì bổ sung các đoạn mã màu đỏ như bước 3 ở trên bạn hãy
copy hết tất cả mã nằm trong khung đó và thay thế đoạn mã nằm trong khung dưới đây có trong Edit HTML (Nhớ check Expand Widget Templates ở trên khung quản lý đoạn mã trước):
<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body entry-content'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Chúc thành công!
nguồn: thuthuatblog.com
Thứ Sáu, 2 tháng 11, 2007
Nhớ password theo phong cách riêng
RoboForm là phần mềm quản lý password, thông tin cá nhân và đăng nhập tự động. Chỉ cần nhấn vào một passcard, RoboForm sẽ tự đưa bạn đến website, tự điền username/password và tự đăng nhập. Phần mềm có thể lưu một loạt thông tin cá nhân từ tên – địa chỉ - email vv.. và tự động điền nếu cần thiết. Bạn có thể lưu cả các thông tin không liên quan đến máy tính trong các ghi chú Safenote, vd như .. mã số két sắt chẳng hạn.
Sau khi download, cài đặt và chạy RoboForm lần đầu tiên, phần mềm sẽ hỏi bạn các thông tin cá nhân. Bạn có thể tạo nhiều “lý lịch” phù hợp với nhu cầu của mình, và thậm chí thiết lập RoboForm tự điền thông tin mà không cần hỏi ý kiến mình (Option > AutoFill > AutoFill without asking).
RoboForm hiển thị dưới dạng toolbar nằm phia trên trình duyệt nếu bạn sử dụng Internet Explorer và FireFox. Mỗi khi đăng nhập vào một site yêu cầu username/password, chọn FillForms để tự động điền thông tin, hoặc Logins, phần mềm sẽ tự mở website cần đăng nhập, tự điền thông tin và tự login “hộ” bạn. Nếu có quá nhiều site cần nhớ (chuyện bình thường nếu bạn là dân mạng “thứ thiệt”), sử dụng search box để tìm đúng passcard mình cần.
Vậy passcard là gì? Khi đăng nhập vào website lần đầu tiên, RoboForm sẽ hỏi bạn có lưu passcard cho site đó không – bao gồm địa chỉ site, username, password, hoặc các thông tin khác. Một chức năng ấn tượng khác là PasswordGenerator – tự tạo một password ngẫu nhiên và lưu luôn trong RoboForm để tự điền khi cần thiết.
Passcard là thành phần quan trọng nhất của RoboForm, và bạn sẽ thấy quản lý bộ sưu tập passcard của mình thật dễ dàng. Mỗi passcard có thể cho vào một folder riêng, đem từ folder này qua folder khác bằng copy/paste. Một người dùng Internet chuyên nghiệp và có thói quen ghost máy định kì thay vì cài lại win sẽ rất thích thú với khả năng quản lý dữ liệu của RoboForm (Option > User Data) – chỉ cần backup, lưu thông tin ra một folder riêng và Import trở lại sau khi ghost xong – và bạn sẽ không cần bận tâm đến nỗi lo điền lại toàn bộ username/password của các site ưa thích.
Một điều cần chú ý: RoboForm mã hoá dữ liệu, lưu trong máy bạn đang sử dụng và bảo vệ nó bằng một masterpassword. Password chính này sẽ được hỏi ngay lần đầu tiên sử dụng RoboForm, và nếu quên, coi như bạn mất toàn bộ dữ liệu của mình. Bạn cũng có thể thiết lập sao cho RoboForm hỏi masterpassword mỗi lần bật máy, và không hỏi thêm lần nữa cho đến khi tắt máy hoặc sau mỗi khoảng thời gian nhất định. Hoặc là một người cẩn thận, hãy tự in danh sách username/password lưu trong RoboForm ra giấy phòng khi “có biến” bằng chức năng Print (Identities > print list).
Roboform2Go – nhớ password trên … USB
Roboform2Go là phiên bản di động của Roboform cài trên USB, vẫn có hầu hết các chức năng ấn tượng của bản PC nhưng hoàn toàn không yêu cầu cài đặt – hết sức lý tưởng cho người dùng tại các quán Internet, thậm chí nếu cửa hàng không cho phép cài đặt phần mềm lên máy.
Cài đặt Roboform2Go cũng tương tự như bản PC, nhưng chọn USB disk để cài thay vì vào HDD trên máy. Bạn chỉ cần cắm ổ USB vào máy tính cần sử dụng, chạy file “PortableRoboForm.exe” và chờ vài giây để phần mềm load lên máy tính và hiển thị biểu tượng RoboForm2Go trên taskbar, sau đó gõ duy nhất masterpassword bằng bàn phím ảo. Muốn ngừng sử dụng, chỉ đơn giản .. rút USB ra, và quên đi mối lo keylogger mỗi khi dùng máy ngoài hàng net.
Một điểm cần chú ý: Nếu máy tính đang sử dụng có cài Roboform, phần mềm sẽ sử dụng các thông tin từ USB nếu bạn cắm USB chứa Roboform2Go vào máy.
Để tải Roboform bạn hãy truy nhập vào website Roboform
Roboform free bị giới hạn 10 passcard. Bạn có thể dùng thử Roboform2Go 30 ngày, và tiếp tục sử dụng nếu chỉ sử dụng dưới 10 passcard. Phiên bản Roboform Pro có giá 29,95 USD, Roboform2Go giá 19,95 USD.
( Theo Dantri )
Đọc thêm bài Làm thế nào để sử dụng RoboForm miễn phí
Tăng tốc website: Chuyện nhỏ!
Bài viết này sẽ giới thiệu với bạn đọc một số phương pháp làm tăng tốc độ truy nhập website của bạn. Theo nghiên cứu thói quen sử dụng máy tính, người dùng sẽ chuyển sang trang khác nếu website không có “động tĩnh” gì sau 4 giây. Vì thế, tốc độ là yếu tố quan trọng và cũng là ưu thế khi truy nhập website. Bài viết này sẽ giới thiệu với bạn đọc một số phương pháp làm tăng tốc độ truy nhập website của bạn.
1. Chuyển host lưu trữ file hoặc ảnh cỡ lớn sang nơi khác
Nhiều người cùng online một lúc có thể làm nghẽn đường truyền của bạn với hàng đống yêu cầu xem cùng một tấm hình trên website. Gánh nặng dữ liệu có thể chuyển sang những website chuyên để lưu trữ và chia sẻ ảnh như ImagaShack, Photobucket hay Flickr. Bằng cách này, máy chủ web của bạn chỉ cần đảm bảo phần text và file ảnh cỡ nhỏ, giảm đáng kể băng thông đồng nghĩa với việc phục vụ được nhiều người một lúc hơn.
Nếu muốn chia sẻ những file nhỏ, khoảng 2 – 5MB, với khách viếng thăm, bạn có thể sử dụng dịch vụ Google Pages như một máy chủ web phụ.
2. Tối ưu hóa mã CSS
Hiện nay, nhiều website bắt đầu sử dụng CSS (Cascade Style Sheet) để định dạng. Mặc dù bảng CSS nhìn bắt mắt và hiệu quả hơn định dạng bảng HTML, nhưng nó đòi hỏi bạn phải tối ưu hóa code của chúng mới mong đạt được tốc độ tối ưu. Đoạn mã CSS “sạch” sẽ giúp trình duyệt giải mã trang web nhanh hơn.
Ví dụ: Thay vì viết:
margin-top: 20px;
margin-right: 10px;
margin-bottom: 20px;
margin-left: 10px;
Bạn nên viết:
margin: 20px 10px 20px 10px;
Theo các chuyên gia tối ưu hóa của Yahoo thì các mã CSS nên được đặt ở phần đầu của web. Điều này đặc biệt ý nghĩa nếu trang của bạn lớn và có nhiều đối tượng. Nếu bạn đặt CSS ở cuối hoặc giữa trang web, trình duyệt sẽ dùng định dạng mặc định để hiện thị, sau đó mới tái định dạng bằng CSS. Điều đó đòi hỏi thêm thời gian tính toán và tất nhiên người dùng sẽ khó chịu khi nhìn một website vỡ tung khi chưa định hình.Thậm chí, một số trình duyệt cũng cấm đặt CSS tại cuối website.
Nếu chưa thạo về code, công cụ trực tuyến nhỏ Clean CSS sẽ giúp bạn công đoạn tối ưu này, loại bỏ những khai báo thừa và khoảng trống vô nghĩa. Bạn có thể tham khảo tại website http://www.cleancss.com/.
3. Tối ưu hóa hình ảnh
Có 4 loại định dạng hình ảnh sử dụng phổ biến trên web: PNG, JPG, /JPEG và GIF. Hầu hết các phần mềm xử lý ảnh như Adobe Photoshop đều có tính năng “Save for Web” để tối ưu tỉ lệ giữa chất lượng hình và kích thước file.
4. Khai báo kích thước hình ảnh
Nhiều lập trình viên nghiệp dư “quên” khai báo tag chiều cao và rộng của ảnh khi viết mã HTML. Hai thông số này báo với trình duyệt kích thước của ảnh trước khi dữ liệu được tải về. Nếu không được khai báo trước, trình duyệt phải tự tính toán kích thước bằng cách download toàn bộ hình ảnh về, sau đó mới đến lượt các dữ liệu khác.
Khi khai báo hình ảnh có đầy đủ các tag, trình duyệt sẽ dành 1 khoảng trống vừa đúng kích thước ảnh và tiếp tục tải dữ liệu . Như vậy, người xem có thể đọc ngay phần văn bản trong khi hình ảnh vẫn tiếp tục được hiện ra từng phần.
5. Giảm thiểu sử dụng Javascript
Các hiệu ứng hoạt hình của Java script rất bắt mắt và nhiều người có xu hướng đưa chúng vào website của mình. Tuy nhiên, sử dụng quá nhiều Javascript có thể làm trình duyệt bị treo cứng khiến người dùng bực mình. Phải cân nhắc thật kỹ lưỡng trước khi sử dụng chúng.
Vị trí đặt các đoạn mã script cũng khá quan trọng đối với tốc độ hiển thị. Lời khuyên của dân lập trình chuyên nghiệp: chỉ để những script thực sự quan trọng có ảnh hưởng toàn trang lên đầu, còn những hiệu ứng khác (hoạt hình, thống kê,…) thì cho xuống cuối trang.
Việc đưa Javascript và CSS ra liên kết bên ngoài tốt hơn là chèn thẳng vào trang web. Những file này sẽ được lưu tại bộ nhớ đệm (cache) của trình duyệt và người dùng sẽ không phải download lại chúng mỗi khi cần đến. Nó giảm đáng kể thời gian và băng thông của máy chủ cũng như người dùng.
6. Tối ưu hóa liên kết
Chú ý mỗi đường link được đặt trên website hay blog của bạn được viết một cách ngắn gọn và chính xác. Ví dụ mỗi entry trên 360 Yahoo đều có 1 phần “Permanent Link” để lấy liên kết chính xác và gọn gàng hơn nhiều so với những gì hiển thị trên ô địa chỉ (address bar) của trình duyệt. Việc sử dụng chính xác đường link sẽ giảm bớt những yêu cầu không đáng có đối với máy chủ trong một số trường hợp.
7. Giảm bớt các yêu cầu HTTP tới máy chủ
Khi mở website, mỗi đối tượng trên trang (hình ảnh, script, hình vẽ, đường kẻ, …) đều tạo ra 1 yêu cầu tới máy chủ để tải về. Tất nhiên, càng nhiều đối tượng thì việc tải về càng lâu hơn. Vì thế, hãy giảm thiểu số đối tượng trên cùng 1 trang và cố gắng gộp file CSS với các script lại với nhau.
(Theo VNN)