Chúc bạn một ngày tốt lành

Thứ Hai, ngày 05 tháng 4 năm 2010

Thủ thuật tạo Favicon icon cho trang Blogger Blogspot trong 5 phút.

VnTim™ ^-^ Với thủ thuật trong bài viết ,bạn có thể tạo một Favicon cho trang Blogger Blogspot trong vài phút ,cách này cũng áp dụng cho các nền blog khác và các trang web .

Cần nhắc lại về các chỉ dẫn của bài này là mới nhất và chưa hề phổ biến ,thủ thuật có thể giúp một Blogger “tay mơ” tạo cho blog của mình có biểu tượng Favicon ngay lập tức.Thật ra Favicon cũng giống như một bảng hiệu nhỏ là biểu trưng cho trang blog giúp cho blog có tính chuyên nghiệp hơn.

Thủ thuật này sẽ giúp bạn tạo Favicon ngay tại trang blog editor ,tất cả sẽ thực hiện nơi viết bài hàng ngày của bạn trên Blogger.Bạn sẽ không cần các thao tác như nhiều chỉ dẫn cũ đã có trên mạng về tạo Favicon như:
  • Không cần đến trình biên tập hình ảnh nào để tạo mẫu Favicon đúng tiêu chuẩn hay định dạng .ico .
  • Không cần phải upload tập tin hìah ảnh của biểu tượng lên nguồn lưu trữ nào khác trên mạng để lấy URL về dùng làm Favicon như kiểu cũ.
  • Không cần chờ đọi bất cứ sự liên kết nào ,Favicon của bạn sẽ xuất hiện ngay lập tức trên thanh Address bar , ngay trên Favorites.
Các bước tạo hình ảnh Favicon đúng chuẩn.

Mở trang viết bài “create new post” như vẫn làm hàng ngày trên Blogger ,là trang trắng và bắt đầu với việc tải lên ( upload ) hình ảnh nào mà bạn muốn tạo thành biểu tương cho blog của bạn.

Không cần chú ý đến kích cỡ ,to nhỏ đều được,theo kinh nghiệm bạn nên chọn ảnh gần như vuông góc là tốt nhất .Lấy một hình ảnh có chữ lớn ( chỉ là các ký tự đầu tiên ) hoặc trọng tâm của ảnh nói lên nội dung blog ( ví dụ blog về nuôi chó thì lấy ảnh đầu chó,về lứa đôi thì ảnh trái tim vv...) tuy nhiên tất cả là sự lựa chọn theo ý thích của bạn không giới hạn.

Sau khi upload thấy ảnh đã xuất hiện trên trang bài viết của blog , lúc này bạn sẽ tuỳ chỉnh lại ảnh theo kích thước chuẩn của một Favicon tốt nhất với Blogger blog là 32 x32 px.
  • Chỉ cần nhấp vào góc đáy của ảnh và đẩy chuột lên thu nhỏ hoặc tăng giảm ảnh để hình ảnh này chỉ còn lại kích cỡ khoảng 32 x32 (có thể nhỏ lớn hơn chút không cần chính xác tuyệt đối ),căn cứ vào chỉ số thể hiện lúc bạn tăng-giảm kích thước của ảnh. ( xem minh hoạ hình 1. )
  • Bạn cũng có thể dùng ảnh định dạng Png rồi vào trang http://www.converticon.com/ để convert sang định dạng Ico

Thủ thuật tạo Favicon icon cho trang Blogger blog trong 5 phút.

Chú ý: bạn cần dùng trình duyệ IE (Internet Explorer) để có thể thay đổi kích thước của ảnh.

Cách lấy URL của ảnh để tạo Link href cho Favicon

Sau khi có được ảnh đúng kích cỡ dùng cho Favicon , nhấp vào nút “Save draft” để lưu nháp hình ảnh này lên mạng Blogger. Tiếp tục với việc lấy URL của ảnh biểu tượng này qua đoạn mã (IMG code) có sẵn của Blogger.

Nhấp vào “Edit Html” kế bên “Compose”, để mở trang này theo mã Html .Đoạn mã của hình ảnh sẽ rất dài làm bạn “hoa” mắt vì có tất cả là 2 địa chỉ url của ảnh .Nhưng cách lấy url rất dễ dàng với các lưu-ý quan trọng như sau ( xem hình 2)
  • Chú ý vào 2 hàng chữ cuối cùng : sau các chữ scr"=http , và sẽ có con số “s200” .Luôn luôn url thứ nhì lấy ra dùng là có con số nhỏ hơn url thứ nhất theo bài này là “s1600-h”.( con số này có thể khác tuỳ theo ảnh upload nhưng quan trọng là bỏ url có số lớn và lấy url có số nhỏ ).
  • Mở trình “Notepad” của máy tính rồi chọn cho chép (copy) từ ngay sau “scr=” là chép bắt đầu từ “http://1.bp.blogspot...đến hết.jpg” ( không cần lấy cặp ngoặc đôi ).
  • Đặc điểm là thủ thuật này dễ dàng cho phép dùng định dạng ảnh .jpg hay .png đều được ,không cần thay đổi gì khác.
Link href của Favicon và cách tạo link hoàn chỉnh :

Phương thức tạo Favicon cho blog hay web đều dùng đoạn mã Link mẫu như sau cho định dạng ảnh thông dụng là .png ( và .jpg ) :

<link href = 'url of your icon file' rel='shortcut icon' type='img/png' />

Trên trang “Notepad” đã mở nên có chép-dán sẵn Link mẫu favicon này ; bắt đầu thay thế đoạn mã “url of your icon file” bằng URL của ảnh đã lấy bên trên sẽ có được đường Link Favicon hoàn chỉnh dùng để tạo biểu tượng Favicon trong bước cuối cùng.

Thủ thuật tạo Favicon icon cho trang Blogger blog trong 5 phút.

Bước cuối cùng dán L ink Favicon vào đúng vị trí .

Sau khi cho chép ( copy) đường dẫn Link favicon hoàn chỉnh trên Notepad , lúc này trở về trang Blogger blog chọn “Layout” rồi đến “Edit Template Html” mở trang chỉnh sửa Template.(hình 3 )
  • Nhìn từ đầu trang template xuống khoảng hàng thứ 10 đến 15 tuỳ theo mẫu template bạn sẽ thấy hàng chữ : <title><data:blog.pageTitle/></title>.
  • Đặt con trỏ chuột ngay sau </title> và nhấn “Enter” để tạo một hàng khoảng cách trống,hàng này là vị trí dán Link Favicon vào.
  • Cho dán ( paste ) Link Favicon vào ngay tại dòng hàng này rồi nhấp vào nút “Save Template” ở cuối trang.

Thủ thuật tạo Favicon icon cho trang Blogger blog trong 5 phút.

Ngay lập tức sau khi lưu template là lưu vào dữ liệu của Blogger, chọn xem trang blog với “View blog” hoặc ra ngay trang nhà của blog bạn sẽ thấy biểu tượng của bạn ,Favicon vừa tạo ra xuất hiện rất chính xác và không khác gì các website chuyên nghiệp.Chúc các bạn vui với favicon mới cho trang blog blogger của mình.

12 Comments:

Viet Dung said...

nhưng cho hỏi tí tại ssao khi chạy trên google chrome thì nó lại ko hiện cái icon này ra nhỉ? có cách nào khác phuc ko? mong trả lời sớm.

VnTim™ said...

Bạn chèn đoạn mã sau vào ngay dưới thẻ <head>
<link href='YOUR-FAVICON-URL' rel='shortcut icon' type='image/x-icon'/>
<link href='YOUR-FAVICON-URL' rel='icon'/>
bạn thay YOUR-FAVICON-URL bằng link Icon của bạn là được (icon nên ở định dạng icon)

Mr Bean said...

Tôi đã làm theo như cách bạn nói nhưng mà khi chèn đoạn mã trong đó url of your icon file đã thay bằng link hình của tôi nhưng mà khi dán vào template trong blogspot lại bị báo lỗi là không đúng định dạng. Mà tôi cũng muốn hỏi thêm đó là khi upload hình tôi vẫn không thể nào cho hiển thị như của bạn là 32 x32. Mong bạn chỉ bảo cho mình

VnTim™ said...

Cảm ơn bạn đã ghe thăm Blog VnTim™
Hiện tại Blogger ko hỗ trợ việc chỉnh kích thước ảnh, bạn phải dùng phần mềm như photoshop hay flickr để chỉnh sửa online
Bạn chèn đoạn mã sau vào ngay dưới thẻ <head>
<link href='your-favicon-url' rel='shortcut icon' type='image/x-icon'/>
<link href='your-favicon-url' rel='icon'/>
bạn thay YOUR-FAVICON-URL bằng link Icon của bạn là được (icon nên ở định dạng icon)

Trương Dương said...

HAY LAM
THANKS
BAN CO THE CHI CHO MINH CACH PHAN TRANG SAO CHO HOP LY DUOC KO?

VnTim™ said...

Cái này thì còn tùy bạn ah
thường thì phân trang để cho trang ngắn gọn
THường người xem cuộn 3-4 lần chuột hết trang là dc

Tranhung09 said...

Cảm ơn VnTim, hướng dẫn rất tận tình! Anh xin nhân bản cho các gà tham khổ nhé vì Có bạn blog hỏi mình.

dohungtmdt said...

trên google chrome k hiện icon.
Mà sao mình không up được file .ico lên blog vậy

kiến thức tin học said...

ban co the lien he nho de chi dan tan tinh hon qua so dy 0949255781.chao

Civil engineering EA said...

Thủ thuật khá hay. mình đã thành công sau 15 phút (không phải 5 phút như bạn hehe) vì mình làm theo hướng dẫn nhưng sai cấu trúc

Các bạn làm bị lỗi XML thì chú ý cấu trúc này của bác vntim
<link href = “url of your icon file” rel=”shortcut icon” type=”img/png” /

Thay dấu " bằng dấu ' nhé

Blog mình đấy các bạn ghé chơi ủng hộ nhé
"http://civilea.blogspot.com"

TNHH Quảng Cáo Cối Xay Gió said...

hihi. minh làm lâu hơn. bài viết khá hay. cám ơn bác vntim

he thong patience said...

Cho mình hỏi tí: Mình cũng thay đổi icon favicon rồi. Nó thì có tác dụng trong trình duyệt internet explorer, firefox. Còn trong google chorme thì lại hiện icon của Blogspot. Nhờ bạn giúp đỡ giùm. Chân thành cảm ơn.
Đây là trang của mình http://www.hethongpatience.com.
bạn vào trình duyệt google chorme xem thử dùm mình. Cám ơn bạn rất nhiều.

Đăng nhận xét

» VnTim™ cảm ơn bạn đã đọc bài viết.
» Nếu có thắc mắc hay góp ý, bạn hãy để lại một nhận xét.
» Nếu thấy bài viết hay hãy chia sẻ với những người quanh bạn.
» Bạn có thể sử dụng một số thẻ HTML như <b>, <i>,<a>.
» Vui lòng đăng những nhận xét lịch sự và gõ tiếng Việt có dấu nếu có thể.
» Rất cảm ơn những comment thiện ý.

 

VnTim™ Trái Tim Việt Nam Copyright © 2010 VnTim™ Trái Tim Việt Nam