Thủ thuật SEO blog : Tìm hiểu về thẻ META trong HTML
01:12 |
[FD's BlOg] - Thẻ META là một thành phần quan trọng trong file HTML, nó chứa các thông tin về file HTML đó như tên tác giả, các từ khoá, các thông tin mô tả site đó… Và có thể có 1 số thông tin điều khiển trình duyệt, chỉ định cho các máy tìm kiếm...Thẻ Meta có có cấu trúc như sau:
<META NAME="" HTTP-EQUIV="" CONTENT="" SCHEME="" >
Trong đó :
- NAME là tên của thẻ Meta,
- CONTENT chứa nội dung của thẻ, (nội dung chỉ có thể là Text chứ ko thể có các thẻ HTML trong đó)
- SCHEME là định dạng của giá trị, ví dụ SCHEME="Day-Month-Year" là định dạng ngày tháng năm.
Không có chuẩn cho những thuộc tính của trong thẻ meta vì vậy bạn có thể tự định nghĩa thoải mái, ví dụ :
<META NAME="author" CONTENT="Tac gia">
Một vài những bộ máy tìm kiếm như Google, sử dụng các meta keywords, description để dựa vào đó để tìm kiếm thông tin, vì thế đa số các blog, web đều dùng các thẻ này. Một cách SEO blog/web rất hiệu quả.
Ví dụ như bên dưới:
Ví dụ như bên dưới:
<meta name="description" content="Blog FD, Thủ thuật Blog" />
<meta name="keywords" content="fandung, blog FD, thu thuat blog, widget, recent posts, chinh sua blog, menu" />
Để tránh bị cắt cụt bởi máy tìm kiếm thì thông tin mô tả (description) nên nhỏ hơn 200 kí tự, từ khoá (keyword) được viết cách nhau bởi dấu phẩy, và không phân biệt hoa thường.
Một vài bộ máy tìm kiếm còn sử dụng thẻ meta robots để xem trang mà nó vào có được phép lưu lại hoặc đi tiếp các link khác trong site hay không.
Giá trị của thẻ robots như sau:
- index: bộ máy tìm kiếm sẽ lưu trang này lại để giành cho việc tìm kiếm
- noindex: bộ máy tìm kiêm sẽ không nên lưu trang này
- follow: bộ máy tìm kiếm sẽ đi tiếp các Link trong trang này
- nofollow: bộ máy tìm kiếm sẽ không đi tiếp các Link trong trang này
- all tức là bao gồm index, follow
- none tức là noindex, nofollow
Ví dụ bạn muốn các bộ máy tìm kiếm ko lưu trang của bạn nhưng vẫn đi tiếp các link trong trang thì các bạn sẽ có thẻ meta như sau:
<META NAME="robots" CONTENT="noindex,follow">
Thuộc tính HTTP-EQUIV dùng để thay thế thuộc tính NAME trong 1 số trường hợp ví dụ:
+ Thiết lập thời gian tồn tại của trang đó tới thời điểm nào:
<META HTTP-EQUIV=Expires CONTENT=”Thu, 29 Nov 2009 16:18:42 GMT”>
+ Tự động refesh trang đó sau 10s (ko phải tất cả các trình duyệt đều hỗ trợ thẻ meta này)
<META HTTP-EQUIV="Refresh" CONTENT="10; URL=http://fandung.blogspot.com/">
+ và 1 vài thẻ khác...
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Shift_JIS">
Nhiều bộ máy tìm kiếm theo từ khoá chỉ sử dụng các thông tin trong thẻ meta để tìm kiếm dựa trên những từ khoá đã được viết sẵn trong thẻ keyword mà không tìm kiếm trong toàn từ ngữ trong site và kém hiệu quả hơn những bộ máy tìm kiếm toàn bộ những từ khoá trong site. Những bộ máy tìm kiếm toàn bộ site sẽ sử dụng các thông tin metadata để đánh thứ hạng tìm kiếm cho site. metadata mà bạn thích. Ví dụ bạn có thể định nghĩa thông tin tác giả: việc với 1000 kí tự đầu tiên trong thẻ meta keyword.
Theo thegioiweb (nguồn zonotek)
Chúc các bạn thành công.
Mẹo nhỏ cho việc hiển thị ảnh và văn bản trên cùng 1 hàng
18:39 |
[FD's BlOg] - Thông thường việc hiển thị ảnh và văn bản trên cùng 1 hàng chỉ dùng để trang trí các list hay danh sách nào đó. Và phổ biến nhất là dùng các đoạn code CSS, như thế tiện hơn. Đó là sử dụng chung và đồng nhất, còn việc sử dụng riêng lẻ thì sao?, ví dụ khi ta muốn chèn 1 ảnh icon nhỏ vào trước 1 menu hay 1 dòng nào đó.Thông thường khi ta chèn 1 ảnh nhỏ vào trước 1 dòng hay 1 đoạn văn bản nào đó thì ảnh sẽ nằm lệnh so với các đoạn văn bản, ví dụ như bên dưới :
ĐOẠN VĂN BẢNTa thấy là lề dưới của ảnh và đoạn văn bản được căn trùng nhau, như thế trông hơi bị lệch.
Việc này thì sẽ dễ dàng khắc phục khi ta dùng lệnh background, ví dụ như bên dưới:
ĐOẠN VĂN BẢN
Tuy nhiên khi dùng lệnh background ta phải sử dụng lênh padding để căn lề, nếu không dùng lệnh padding ta sẽ có kết quả như bên dưới :
ĐOẠN VĂN BẢN
Như thế ta sẽ thấy quá phức tạp khi phải dùng CSS chỉ để chèn 1 ảnh nhỏ vào trên cùng 1 hàng với các đoạn văn bản. Có 1 cách đơn giản hơn nhiều đó là ta sử dụng trực tiếp lệnh align cho thẻ img, như thế ta hoàn toàn có thế căn lề cho ảnh và cho đoạn văn bản.
Ví dụ :
1. Ảnh và văn bản nằm cân đối trên 1 hàng :
ĐOẠN VĂN BẢNĐể làm điều này ta chỉ cần chèn đoạn code màu đỏ vào trong thẻ img là được:
CODE:
<img src="link ảnh" align="middle" />
2. Ảnh và văn bản được căn lề trên trùng nhau:
ĐOẠN VĂN BẢNCODE:
<img src="link ảnh" align="top" />
3. Ảnh và văn bản được căn lề dưới trùng nhau:
ĐOẠN VĂN BẢNCODE:
<img src="link ảnh" align="bottom" />
Chúc các bạn thành công.
Mã Hexa màu trong HTML và tên gọi của nó
04:35 |Hexadecimal HTML Color Codes and Names
[FD's BlOg] - Đối với những người thiết kế web thì mã màu trong HTML là rất cần thiết, tuy nhiên khó có thể nhớ hết được mã Haxe của chúng, hoặc may chỉ là nhớ được tên gọi. Hôm nay mình xin giới thiệu 1 bảng mã màu HTML khá đầy đủ, bao gồm cả tên tên và mã HTML.| COLOR NAME | CODE | COLOR |
| Black | #000000 | |
| Grey0 | #150517 | |
| Grey18 | #250517 | |
| Grey21 | #2B1B17 | |
| Grey23 | #302217 | |
| Grey24 | #302226 | |
| Grey25 | #342826 | |
| Grey26 | #34282C | |
| Grey27 | #382D2C | |
| Grey28 | #3b3131 | |
| Grey29 | #3E3535 | |
| Grey30 | #413839 | |
| Grey31 | #41383C | |
| Grey32 | #463E3F | |
| Grey34 | #4A4344 | |
| Grey35 | #4C4646 | |
| Grey36 | #4E4848 | |
| Grey37 | #504A4B | |
| Grey38 | #544E4F | |
| Grey39 | #565051 | |
| Grey40 | #595454 | |
| Grey41 | #5C5858 | |
| Grey42 | #5F5A59 | |
| Grey43 | #625D5D | |
| Grey44 | #646060 | |
| Grey45 | #666362 | |
| Grey46 | #696565 | |
| Grey47 | #6D6968 | |
| Grey48 | #6E6A6B | |
| Grey49 | #726E6D | |
| Grey50 | #747170 | |
| Grey | #736F6E | |
| Slate Grey4 | #616D7E | |
| Slate Grey | #657383 | |
| Light Steel Blue4 | #646D7E | |
| Light Slate Grey | #6D7B8D | |
| Cadet Blue4 | #4C787E | |
| Dark Slate Grey4 | #4C7D7E | |
| Thistle4 | #806D7E | |
| Medium Slate Blue | #5E5A80 | |
| Medium Purple4 | #4E387E | |
| Midnight Blue | #151B54 | |
| Dark Slate Blue | #2B3856 | |
| Dark Slate Grey | #25383C | |
| Dim Grey | #463E41 | |
| Cornflower Blue | #151B8D | |
| Royal Blue4 | #15317E | |
| Slate Blue4 | #342D7E | |
| Royal Blue | #2B60DE | |
| Royal Blue1 | #306EFF | |
| Royal Blue2 | #2B65EC | |
| Royal Blue3 | #2554C7 | |
| Deep Sky Blue | #3BB9FF | |
| Deep Sky Blue2 | #38ACEC | |
| Slate Blue | #357EC7 | |
| Deep Sky Blue3 | #3090C7 | |
| Deep Sky Blue4 | #25587E | |
| Dodger Blue | #1589FF | |
| Dodger Blue2 | #157DEC | |
| Dodger Blue3 | #1569C7 | |
| Dodger Blue4 | #153E7E | |
| Steel Blue4 | #2B547E | |
| Steel Blue | #4863A0 | |
| Slate Blue2 | #6960EC | |
| Violet | #8D38C9 | |
| Medium Purple3 | #7A5DC7 | |
| Medium Purple | #8467D7 | |
| Medium Purple2 | #9172EC | |
| Medium Purple1 | #9E7BFF | |
| Light Steel Blue | #728FCE | |
| Steel Blue3 | #488AC7 | |
| Steel Blue2 | #56A5EC | |
| Steel Blue1 | #5CB3FF | |
| Sky Blue3 | #659EC7 | |
| Sky Blue4 | #41627E | |
| Slate Blue | #737CA1 | |
| Slate Grey3 | #98AFC7 | |
| Violet Red | #F6358A | |
| Violet Red2 | #E4317F | |
| Deep Pink | #F52887 | |
| Deep Pink2 | #E4287C | |
| Deep Pink3 | #C12267 | |
| Deep Pink4 | #7D053F | |
| Medium Violet Red | #CA226B | |
| Violet Red3 | #C12869 | |
| Firebrick | #800517 | |
| Violet Red4 | #7D0541 | |
| Maroon4 | #7D0552 | |
| Maroon | #810541 | |
| Maroon3 | #C12283 | |
| Maroon2 | #E3319D | |
| Maroon1 | #F535AA | |
| Magenta | #FF00FF | |
| Magenta1 | #F433FF | |
| Magenta2 | #E238EC | |
| Magenta3 | #C031C7 | |
| Medium Orchid | #B048B5 | |
| Medium Orchid1 | #D462FF | |
| Medium Orchid2 | #C45AEC | |
| Medium Orchid3 | #A74AC7 | |
| Medium Orchid4 | #6A287E | |
| Purple | #8E35EF | |
| Purple1 | #893BFF | |
| Purple2 | #7F38EC | |
| Purple3 | #6C2DC7 | |
| Purple4 | #461B7E | |
| Dark Orchid4 | #571B7E | |
| Dark Orchid | #7D1B7E | |
| Dark Violet | #842DCE | |
| Dark Orchid3 | #8B31C7 | |
| Dark Orchid2 | #A23BEC | |
| Dark Orchid1 | #B041FF | |
| Plum4 | #7E587E | |
| Pale Violet Red | #D16587 | |
| Pale Violet Red1 | #F778A1 | |
| Pale Violet Red2 | #E56E94 | |
| Pale Violet Red3 | #C25A7C | |
| Pale Violet Red4 | #7E354D | |
| Plum | #B93B8F | |
| Plum1 | #F9B7FF | |
| Plum2 | #E6A9EC | |
| Plum3 | #C38EC7 | |
| Thistle | #D2B9D3 | |
| Thistle3 | #C6AEC7 | |
| Lavendar Blush2 | #EBDDE2 | |
| Lavendar Blush3 | #C8BBBE | |
| Thistle2 | #E9CFEC | |
| Thistle1 | #FCDFFF | |
| Lavendar | #E3E4FA | |
| Lavendar Blush | #FDEEF4 | |
| Light Steel Blue1 | #C6DEFF | |
| Light Blue | #ADDFFF | |
| Light Blue1 | #BDEDFF | |
| Light Cyan | #E0FFFF | |
| Slate Grey1 | #C2DFFF | |
| Slate Grey2 | #B4CFEC | |
| Light Steel Blue2 | #B7CEEC | |
| Turquoise1 | #52F3FF | |
| Cyan | #00FFFF | |
| Cyan1 | #57FEFF | |
| Cyan2 | #50EBEC | |
| Turquoise2 | #4EE2EC | |
| Medium Turquoise | #48CCCD | |
| Turquoise | #43C6DB | |
| Dark Slate Grey1 | #9AFEFF | |
| Dark Slate Grey2 | #8EEBEC | |
| Dark Slate Grey3 | #78C7C7 | |
| Cyan3 | #46C7C7 | |
| Turquoise3 | #43BFC7 | |
| Cadet Blue3 | #77BFC7 | |
| Pale Turquoise3 | #92C7C7 | |
| Light Blue2 | #AFDCEC | |
| Dark Turquoise | #3B9C9C | |
| Cyan4 | #307D7E | |
| Light Sea Green | #3EA99F | |
| Light Sky Blue | #82CAFA | |
| Light Sky Blue2 | #A0CFEC | |
| Light Sky Blue3 | #87AFC7 | |
| Sky Blue | #82CAFF | |
| Sky Blue2 | #B0E2FF | |
| Light Sky Blue4 | #566D7E | |
| Sky Blue | #6698FF | |
| Light Slate Blue | #736AFF | |
| Light Cyan2 | #CFECEC | |
| Light Cyan3 | #AFC7C7 | |
| Light Cyan4 | #717D7D | |
| Light Blue3 | #95B9C7 | |
| Light Blue4 | #5E767E | |
| Pale Turquoise4 | #5E7D7E | |
| Dark Sea Green4 | #617C58 | |
| Medium Aquamarine | #348781 | |
| Medium Sea Green | #306754 | |
| Sea Green | #4E8975 | |
| Dark Green | #254117 | |
| Sea Green4 | #387C44 | |
| Forest Green | #4E9258 | |
| Medium Forest Green | #347235 | |
| Spring Green4 | #347C2C | |
| Dark Olive Green4 | #667C26 | |
| Chartreuse4 | #437C17 | |
| Green4 | #347C17 | |
| Medium Spring Green | #348017 | |
| Spring Green | #4AA02C | |
| Lime Green | #41A317 | |
| Spring Green | #4AA02C | |
| Dark Sea Green | #8BB381 | |
| Dark Sea Green3 | #99C68E | |
| Green3 | #4CC417 | |
| Chartreuse3 | #6CC417 | |
| Yellow Green | #52D017 | |
| Spring Green3 | #4CC552 | |
| Sea Green3 | #54C571 | |
| Spring Green2 | #57E964 | |
| Spring Green1 | #5EFB6E | |
| Sea Green2 | #64E986 | |
| Sea Green1 | #6AFB92 | |
| Dark Sea Green2 | #B5EAAA | |
| Dark Sea Green1 | #C3FDB8 | |
| Green | #00FF00 | |
| Lawn Green | #87F717 | |
| Green1 | #5FFB17 | |
| Green2 | #59E817 | |
| Chartreuse2 | #7FE817 | |
| Chartreuse | #8AFB17 | |
| Green Yellow | #B1FB17 | |
| Dark Olive Green1 | #CCFB5D | |
| Dark Olive Green2 | #BCE954 | |
| Dark Olive Green3 | #A0C544 | |
| Yellow | #FFFF00 | |
| Yellow1 | #FFFC17 | |
| Khaki1 | #FFF380 | |
| Khaki2 | #EDE275 | |
| Goldenrod | #EDDA74 | |
| Gold2 | #EAC117 | |
| Gold1 | #FDD017 | |
| Goldenrod1 | #FBB917 | |
| Goldenrod2 | #E9AB17 | |
| Gold | #D4A017 | |
| Gold3 | #C7A317 | |
| Goldenrod3 | #C68E17 | |
| Dark Goldenrod | #AF7817 | |
| Khaki | #ADA96E | |
| Khaki3 | #C9BE62 | |
| Khaki4 | #827839 | |
| Dark Goldenrod1 | #FBB117 | |
| Dark Goldenrod2 | #E8A317 | |
| Dark Goldenrod3 | #C58917 | |
| Sienna1 | #F87431 | |
| Sienna2 | #E66C2C | |
| Dark Orange | #F88017 | |
| Dark Orange1 | #F87217 | |
| Dark Orange2 | #E56717 | |
| Dark Orange3 | #C35617 | |
| Sienna3 | #C35817 | |
| Sienna | #8A4117 | |
| Sienna4 | #7E3517 | |
| Indian Red4 | #7E2217 | |
| Dark Orange3 | #7E3117 | |
| Salmon4 | #7E3817 | |
| Dark Goldenrod4 | #7F5217 | |
| Gold4 | #806517 | |
| Goldenrod4 | #805817 | |
| Light Salmon4 | #7F462C | |
| Chocolate | #C85A17 | |
| Coral3 | #C34A2C | |
| Coral2 | #E55B3C | |
| Coral | #F76541 | |
| Dark Salmon | #E18B6B | |
| Salmon1 | #F88158 | |
| Salmon2 | #E67451 | |
| Salmon3 | #C36241 | |
| Light Salmon3 | #C47451 | |
| Light Salmon2 | #E78A61 | |
| Light Salmon | #F9966B | |
| Sandy Brown | #EE9A4D | |
| Hot Pink | #F660AB | |
| Hot Pink1 | #F665AB | |
| Hot Pink2 | #E45E9D | |
| Hot Pink3 | #C25283 | |
| Hot Pink4 | #7D2252 | |
| Light Coral | #E77471 | |
| Indian Red1 | #F75D59 | |
| Indian Red2 | #E55451 | |
| Indian Red3 | #C24641 | |
| Red | #FF0000 | |
| Red1 | #F62217 | |
| Red2 | #E41B17 | |
| Firebrick1 | #F62817 | |
| Firebrick2 | #E42217 | |
| Firebrick3 | #C11B17 | |
| Pink | #FAAFBE | |
| Rosy Brown1 | #FBBBB9 | |
| Rosy Brown2 | #E8ADAA | |
| Pink2 | #E7A1B0 | |
| Light Pink | #FAAFBA | |
| Light Pink1 | #F9A7B0 | |
| Light Pink2 | #E799A3 | |
| Pink3 | #C48793 | |
| Rosy Brown3 | #C5908E | |
| Rosy Brown | #B38481 | |
| Light Pink3 | #C48189 | |
| Rosy Brown4 | #7F5A58 | |
| Light Pink4 | #7F4E52 | |
| Pink4 | #7F525D | |
| Lavendar Blush4 | #817679 | |
| Light Goldenrod4 | #817339 | |
| Lemon Chiffon4 | #827B60 | |
| Lemon Chiffon3 | #C9C299 | |
| Light Goldenrod3 | #C8B560 | |
| Light Golden2 | #ECD672 | |
| Light Goldenrod | #ECD872 | |
| Light Goldenrod1 | #FFE87C | |
| Lemon Chiffon2 | #ECE5B6 | |
| Lemon Chiffon | #FFF8C6 | |
| Light Goldenrod Yellow | #FAF8CC |
Tạo chạy chữ với lệnh Marquee (Nâng cao)
19:16 |
[FD's BlOg] - Marquee là gì? Marquee là một mã HTML để làm cho một đối tượng có thể chuyển động. Marquee mã là một mã phổ biến vì nhiều blogger sử dụng mã này vào blog của họ. Lệnh Marquee được thực hiện bằng cách sử dụng thẻ <marquee> {đối tượng}<marquee>. Lệnh marquee hiển thị tốt nếu xem tại trình duyệt Internet Explorer, tuy nhiên các trình duyệt khác sau này có nhiều phiên bản mới đã cũng có thể hiển thị tốt như IE.Một số các thuộc tính thường dùng của lệnh marquee:
- BGCOLOR="color" → tạo màu nền cho vùng hiện thị lệnh marquee (có thể dùng hình nền...).
- DIRECTION="left/right/up/down" → chọn hình thức chạy chữ ( trái, phải, lên, xuống...)
- BEHAVIOR="scroll/slide/alternate" → thiết lập kiểu chạy chữ .
Scroll → di chuyển tuần tự.- TITLE="message" → Một đọan tin nhắn nhỏ được hiển thị khi người dùng rê chuột vào.
Slide → di chuyện 1 thời gian, sau đó dừng lại.
Alternate → di chuyển từ trái sang phải sau đó dừng lại.
- SCROLLMOUNT="number" → điều chỉnh tốc độ chạy
- SCROLLDELAY="number" → chỉnh thời gian hiển thị (tính bằng giây)
- LOOP="number|-1|infinite" → to manage sum of looping.
- WIDTH="number" → chỉnh độ rộng của vùng chạy chữ. Có thể dùng đơn vị pixel (px) hoặc phần trăm (%).
►Một vài ví dụ :
Ví dụ 1
Code
<marquee align="center" direction="left" height="100" scrollamount="2" width="100%">
Chuyển động từ trái qua phải, độ rộng 100%, cao 100px, tốc độ chạy chữ là 2
</marquee>
Kết quả hiển thị:
Ví dụ 2 :
Code
<marquee align="center" direction="left" height="200" scrollamount="4" width="100%" behavior="alternate">
Chạy chữ qua trái rồi quay lại qua phải (thuộc tính alternate)
</marquee>
Kết quả hiển thị:
Ví dụ 3:
Code
<div align="left"><font face="georgia" color="White"><b><marquee bgcolor="red" width="100%" scrollamount="3" behavior="alternate">
Chạy chữ với màu nền
</marquee></b></font></div>
Kết quả hiển thị:
Ví dụ 5:
Code
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="down" width="100%" height="200" align="center">
Di chuyển xuống dưới,
dừng lại khi ta rê chuột vào,
chạy tiếp khi rê chuột ra
</marquee>
Kết quả hiển thị:
Chúc các bạn thành công.
Tạo 1 menu Drop Down đơn giản
02:58 |
[FD's BlOg] - Để tạo menu, bạn chỉ cần tạo 1 Widget, rồi dán code vào rồi đặt widget vào nơi muốn hiển thị.Đây là code cho menu Drop Down:
<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu><option value=0 selected> Tên Menu </option>
<option value=" {link 1} "> Liên kết 1 </option>
<option value=" {link 2} "> Liên kết 2 </option>
</select></form>
Xem ví dụ minh họa bên dưới
Hình minh họa
1 Script làm thay đổi màu link liên kết
06:16 |Colorful Link Hover
[FD's BlOg] - Với Script này sẽ tạo ra hiệu ứng thay đổi màu chữ liên tục của link chứa liên kết khi ta rê chuột vào. Script này hiển thị gần 10 màu sắc khác nhau khi ta rê chuột vào.
Hình ảnh minh họa:
Để làm việc này, rất đơn giản:
1. Đăng nhập blog
2. Vào Chỉnh sửa code HTML
3. Copy đọan Script bên dưới vào ngay bên dưới thẻ mở <head>
<script src='http://rias.techno.wizard.googlepages.com/rainbow2.js'/>
4. Save template.
Lưu ý: về việc sử dụng link trực tiếp của đọan Script trên, có thể nó sẽ không hiển thị được, khi đó là do hết băng thông, vì thế nếu ai có host riêng, hãy up lên host của mình rồi gắn link đó vào, hoặc up trực tiếp đọan Script đó lên blog(web) của mình.
Nguồn rias.techno
Chúc các bạn thành công.Top Hot
