Thủ thuật SEO blog : Tìm hiểu về thẻ META trong HTML

[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:

<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

[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ẢN

Ta 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ẢN

CODE:

<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ẢN

CODE:

<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ó

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)

[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ự.
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.

- TITLE="message" → Một đọan tin nhắn nhỏ được hiển thị khi người dùng rê chuột vào.
- 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ị:

Chuyển động từ trái qua phải, độ rộng 100%, cao 100px, tốc độ chạy chữ là 2

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ị:

Chạy chữ qua trái rồi quay lại qua phải (thuộc tính alternate)

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ị:

Chạy chữ với màu nền

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ị:

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

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

Tạo 1 menu Drop Down đơn giản

[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

- FD's BlOg Học Tập Giải Trí My Photo

Hình minh họa

1 Script làm thay đổi màu link liên kết

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.