Hiển thị các bài đăng có nhãn Bloger-Blogspot. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn Bloger-Blogspot. Hiển thị tất cả bài đăng

Thứ Bảy, 28 tháng 5, 2011

Hướng dẫn cách tạo khung đăng nhập cho Blogger BlogSpot

Hướng dẫn cách tạo khung đăng nhập cho blogger
Blogger có cung cấp tính năng đăng nhập cho người dùng trên thanh Navbar, tuy nhiên tính năng này sẽ bị mất đi khi các bạn ẩn thanh navbar đi để trang blog của bạn trông giốn một website hơn. Đó là nguyên nhân khiến bạn không thể đăng nhập vào blog của mình trực tiếp được mà phải vào trang chủ blogger. Tuy vậy, chúng ta có thể khắc phục việc nầy bằng cách tạo forum đăng nhập thay thế. Để tạo form này các bạn làm theo các bước sau:
Đọc thêm »

Thứ Sáu, 17 tháng 12, 2010

Hướng dẫn làm tạo Sitemap cho Blogger BlogSpot

{VnTim™}Tuy đã có nhiều bài viết hướng đẫn làm sitemap cho Blogger-BlogSpot trên mạng nhưng hầu hết đều không đầy đủ , rõ ràng và đặc biệt là thiếu hay gặp lỗi phổ biền là lỗi sau:

- Số post tối đa mà google đánh chỉ mục(index) dựa vào feed được mặc định chỉ là 25 post. Có nghĩa là sitemap trang blog của bạn chỉ bao gồm 25 entries mới nhất(tại thời điểm google index blog của bạn). Vậy thì những entries còn lại của bạn thì sao? Tất nhiên chúng chẳng được index bởi Google sitemap!

Bài viết này VnTim™sẽ hướng đãn bạn add sitemap một cách chuẩn mực

Bước 1 – Đăng nhập vào Google Webmaster Tools với tào khoản Google của bạn (Gmail)


Hướng dẫn làm tạo Sitemap How To Create And Add Google Sitemap For Blogger's Blogspot


Bước 2 – Click vào nút  ‘Add a site…’ như hình dưới

Hướng dẫn làm tạo Sitemap How To Create And Add Google Sitemap For Blogger's Blogspot

Bước 3 – Nhập địa chỉ blog cua bạn ví dụ blog của mình là http://vntim.blogspot.com/

Hướng dẫn làm tạo Sitemap How To Create And Add Google Sitemap For Blogger's Blogspot


Bước 4 – Xác minh quyền sở hữu tên miền của bạn bằng cách chọn xác minh bằng thẻ meta
Chú ý: Bạn có thể chọn cách xác minh qua việc upload file html nếu bạn có hosting riêng

Hướng dẫn làm tạo Sitemap How To Create And Add Google Sitemap For Blogger's Blogspot


Bước 5: Đăng nhập vào Blogger tại đây
rồi vào mục ‘Layout / Thiết kế’ –> Edit HTML/ Chỉnh sửa HTML (nếu bạn dùng giao diện tiếng việt)
Bước 6 – Chèm đoàn mã Meta bạn vừa copy vào phía dưới thẻ <head> như hình dưới

Hướng dẫn làm tạo Sitemap How To Create And Add Google Sitemap For Blogger's Blogspot

Bước 7 Quay lại trang Google Webmaster Tools Click vào nút Verify (xác minh) như hình dưới

Hướng dẫn làm tạo Sitemap How To Create And Add Google Sitemap For Blogger's Blogspot

Bước 8  quan trọng nhất
Copy đoạn mã trong dấu sau - atom.xml?redirect=false&start-index=1&max-results=500

Hướng dẫn làm tạo Sitemap How To Create And Add Google Sitemap For Blogger's Blogspot

Bước 9 – Trở lại trang Google Webmaster Tools rồi vào ‘Site Configuration’ –> ‘Sitemaps’ –> ‘Submit a Sitemap’. Paste đoạn mã  atom.xml?redirect=false&start-index=1&max-results=500 vào trong ô text rồi click ‘submit’ như hình dưới

Hướng dẫn làm tạo Sitemap How To Create And Add Google Sitemap For Blogger's Blogspot


Chú ý thêm nếu blog của bạn có nhiều hơn 500 bài viết thì bạn add thêm link sau:

atom.xml?redirect=false&start-index=1&max-results=100
atom.xml?redirect=false&start-index=101&max-results=100
atom.xml?redirect=false&start-index=201&max-results=100
atom.xml?redirect=false&start-index=301&max-results=100
atom.xml?redirect=false&start-index=401&max-results=100
atom.xml?redirect=false&start-index=501&max-results=100
atom.xml?redirect=false&start-index=601&max-results=100
atom.xml?redirect=false&start-index=701&max-results=100

Quy tắc: atom.xml?redirect=false&start-index=701&max-results=100
thì trong đó 701 là số thứ tự bài viết bắt đầu được index còn 100 là số bài viết sẽ được index bạn có thể tự thay ddeeer phù hợp với blog của mình

Hướng dẫn làm tạo Sitemap How To Create And Add Google Sitemap For Blogger's Blogspot
 VnTim™ Chúc bạn add sitemap thành công và đừng quên để lại comment nếu bạn làm được nhé

Thứ Năm, 18 tháng 11, 2010

Giúp Blogger load tải nhanh hơn trên Điện thoại di động Mobiles Phones

{VnTim™} Hiện nay tốc độ truy cập internet từ mobile đã nhanh đủ để đáp ứng nhu cầu của hàng triệu người yêu thích sử dụng điện thoại di động để truy cập internet, đặc biệt từ khi có dịch vụ 3G.

Hướng dẫn hữu ích này sẽ giúp ích cho bạn rất nhiều nếu như bạn và mọi người muốn truy cập Blog của mình mọi lúc mọi nơi. Mặc định của dịch vụ Blogspot là sẽ không tương thích với điện thoại hỗ trợ hoặc có thì sẽ load rất lâu. Trong bài viết này mình sẽ hướng dẫn các bạn cách giúp Blogspot tương thích với điện thoại di động.

BGiúp Blogger load tải nhanh hơn trên Điện thoại di động Mobiles Phones


Đầu tiên các bạn đăng nhập vào tài khoản Blogspot của mình bằng tài khoản Gmail, chọn blog các bạn muốn chỉnh sửa, chọn thiết kế. Tại khung Phần tử trang của blog, chọn Thiết kế -> Chỉnh sửa HTML -> 
Tìm
<head>Copy đoạn code dưới đây và thêm vào bên dưới đoạn code vừa tìm được
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
Lưu mẫu (Save Templates) lại và thử vào blog của mình bằng điện thoại di động của các bạn xem nào ^^

Thứ Tư, 10 tháng 11, 2010

Đặt tên các thuộc tính trong template Blogger bằng CSS Variables để chỉnh sửa trong "trình thiết kế mẫu"

VnTim™ {^-^} Thông thường để điều chỉnh các thuộc tính màu sắc chữ, kích cỡ chữ, kiểu chữ, ... của blog làm tại Blogger, ta thường dùng phương pháp thử: Download template -> Điều chỉnh CSS -> Upload template -> Xem thử; nếu chưa vừa ý thì lặp lại quá trình đó!

Làm vậy sẽ mất nhiều thời gian và công sức. Thực tế, Blogger cho phép chúng ta tạo các biến CSS (variables) trong template và tận dụng công cụ Template Designer của nó để chỉnh các thuộc tính này và xem trước chúng ngay trong phần Dashboard mà không phải lặp lại các thao tác trên.

Bài viết này trình bày cơ bản về cách làm đó.

Ở đây chỉ lấy 1 VD: thiết lập các biến về kiểu chữ, màu sắc chữ, cỡ chữ cho toàn bộ blog; màu sắc link khi bình thường và khi rê chuột qua.

Mở template của bạn lên, tìm đến đoạn:

<b:skin><![CDATA[/*-----------------------------------------------

Blogger Template Style
Name: Deluxe Blog Tips
Designer: Riwlis
URL: www.deluxeblogtips.com
----------------------------------------------- */

Nếu blog của bạn không có các thông tin về tác giả và template, thì nó chỉ có:

<b:skin><![CDATA[

Chúng ta chèn ngay phía sau đoạn đó các khai báo biến như sau:

/* Variable definitions
====================
<Group description="Page Text" selector=".content-inner">
<Variable name="body.font" description="Font" type="font" default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Verdana, Geneva, sans-serif;"/>
<Variable name="body.text.color" description="Text Color" type="color" default="#1e1e1e" value="#1e1e1e"/>
</Group>

<Group description="Links" selector=".main-outer">
<Variable name="link.color" description="Link Color" type="color" default="#c20c0c" value="#c20c0c"/>
<Variable name="link.hover.color" description="Hover Color" type="color" default="#1e1e1e" value="#1e1e1e"/>
</Group>
*/

Mỗi 1 biến được đặt trong 1 thẻ Variable, gồm có các thuộc tính:
  • name: tên của biến (cần nhớ để lát nữa dùng)
  • description: mô tả của biến
  • type: loại giá trị, ở trên có 2 loại giá trị được dùng là font và color
  • default: giá trị mặc định, được dùng khi không chỉnh sửa gì
  • value: giá trị thực tế, là giá trị mà người dùng thay đổi cho phù hợp

Các biến được nhóm vào thành các nhóm nhỏ (ở trên có 2 nhóm) nhờ thẻ Group.

Để sử dụng các biến đó, chúng ta chỉ cần tham chiếu đến tên biến trong phần CSS mà thôi, VD như sau:

body {
color: $(body.text.color);
font: $(body.font);
}
a {
border-bottom: 1px solid #ccc;
color: $(link.color);
text-decoration: none;
}
a:hover {
border-bottom: 1px solid #333;
color: $(link.hover.color);
}

Biến được tham chiếu có dạng $(tên_biến), khi đó, giá trị thực của nó (trong thuộc tínhvalue đã nói ở trên) sẽ được "copy and paste" vào vị trí mà nó được tham chiếu.

Khi bạn cần chỉnh sửa giá trị của biến, thay vì phải download template rồi sửa và upload ngược lại, bạn chỉ cần vào phần Design > Template Designer > Advanced, bạn sẽ thấy danh sách các biến và giá trị của chúng ở đó, như hình dưới:


Lúc này việc chỉnh sửa còn lại rất dễ dàng: sửa và xem trực tiếp ngay phía khung dưới tới chừng nào ưng ý thì thôi.

Việc sử dụng biến này ngoài ưu điểm giúp bạn đỡ tốn công sửa template, nó còn giúp bạn sử dụng 1 biến cho nhiều mục đích, VD bạn khai báo 1 biến có kiểu font là Times, bạn có thể dùng nó cho tiêu đề blog, tiêu đề bài viết, dòng copyright, ... mà không mất công phải "copy and paste" nhiều lần, và khi sửa thì sửa 1 lần cho tất cả. Rất dễ dàng phải không?

Tính năng này vốn đã có từ lâu, trước khi Blogger ra Template Designer, nhưng ít thấy ai để ý và sử dụng.
 VnTimTM Theo Nguồn hontap blog

Thứ Bảy, 5 tháng 6, 2010

Tạo Widgets bài viết liên quan cho Blogger BlogSpot

Tạo Widgets bài viết liên quan cho BlogSpot
{VnTim™} Bài này, mình xin hướng dẫn các bạn cách tạo tiện ích Bài viết liên quan 1 cách đơn giản nhất, dạng link cho các bạn.
Xem Demo ở hình dưới.


Bắt đầu: Đăng nhập vào Blogger bằng tài khoản Gmail của các bạn. Chọn blog các bạn muốn chỉnh sửa:

Thiết kế -> Chỉnh sửa HTML, đánh vào ô Mở rộng mẫu tiện ích



CtrL + F tìm đến thẻ </head> trong Templates của các bạn và thêm đoạn code sau trước thẻ này:

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC3gCn_4dvT_C6m2SzOx5J1IqsbXnnWcpD8reoF7K6t1fQiJTDoZpN7snw2rYxS8X4NEe-Zsd1hVXCVFZRdDM2ZtrI6AGxhu2TTr1N6XV6S-HiI6EaG3kEtqEir2dQVob9Z6kd5dyBbu8/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://vntim.googlecode.com/files/VnTim%20Related%20Posts%20Skill%20Link.js' type='text/javascript'/>

Tiếp đến, tìm <data:post.body/> (hoặc <div class='post-body'> ) và thêm vào ở dưới đoạn code các các bạn vừa tìm được:

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

Cuối cùng là Save lại và tận hưởng thành quả của mình ^^
Chúc các bạn có một blog đẹp, và theo quên dõi Blog của VnTim™ để nhận những thử thuật hay nhé.
Các bạn có thể theo dõi Blog của VnTim™ qua Email hay Blogger thông qua Widget "KẾT NỐI VỚI VNTIM™" ở bên phải Blog.
Mọi thắc mắc xin để lại tin nhắn bên dưới nhé.
Thân chào các bạn.

Tạo widget "Bài khuyên đọc" với Google Friend Connect

Tạo widget 'Bài khuyên đọc' với Google Friend Connect
VnTim™ <>  Chắc hẳn các bạn cũng đã biết đến những loại widget như Bài đọc nhiều, Bài ngẫu nhiên ... , và những widget đó hoạt động dựa vào phép tính toán đã được thiết lập sẵn để đưa ra bài viết phù hợp. Vậy nếu người đọc muốn tự do lựa chọn , khuyến khích các độc giả khác xem những bài viết có nội dung hay nhất do chính mình bình chọn thì sao ? Widget 'Bài khuyên đọc' (Recommendation gadgets) của Google Friend Connect sẽ là câu trả lời dành cho bạn.

Đây là một trong những widget khá hay được Google cung cấp thông qua dịch vụ Friend Connect. Không giống như Star-Rating (đánh giá chất lượng bài viết theo số sao), widget 'Bài khuyên đọc' chỉ hỏi người đọc có thích bài viết đang xem hay không, nếu thích thì họ chỉ cần nhấn vào nút Khuyến khích đọc (Recommend It) để giới thiệu cho các bạn đọc khác.

Không có gì phức tạp ở cơ cấu hoạt động của widget này, bạn chỉ việc chèn nút Khuyến khích đọc ở dưới mỗi bài viết, kèm theo đó là Bảng thống kê các bài được yêu thích ở trang chủ để mọi người cùng theo dõi. Và, những bài viết được nhiều người khuyến khích nhất sẽ được nằm trên top đầu của Bảng thống kê. Tuy nhiên, điểm hạn chế của widget này là, người đọc phải là thành viên của Blog (đã đăng nhập) mới được quyền 'bỏ phiếu', nếu không thì sẽ được yêu cầu tham gia.

Dưới đây là hướng dẫn cài đặt widget 'Bài khuyên đọc' của dịch vụ Google Friend Connect :
  1. Bạn vào địa chỉ sau : http://www.google.com/friendconnect/admin/site/recommendedpagesgadget?id=[ID_của_Blog_trong_FriendConnect]
    - Lưu ý : Bạn đăng nhập vào Google Friend Connect để biết ID của Blog.



    Tạo widget 'Bài khuyên đọc' với Google Friend Connect
  2. Thiết kế lại giao diện của widget theo ý thích của bạn.
  3. Sau đó, nhấn Generate Code để Google Friend Connect cung cấp đoạn code cho Blog. Ở đây, bạn sẽ được cho tới 2 đoạn code :
    - Đoạn code trên chính là Bảng thống kê , bạn copy nó và thêm dưới dạng Phần tử trang HTML/Javascript.
    - Đoạn code dưới là nút Khuyến khích đọc, bạn copy nó và thêm vào mã nguồn của Template ở bên dưới thẻ <div class='post-footer-line post-footer-line-1'/> .



    Tạo widget 'Bài khuyên đọc' với Google Friend Connect
    - Lưu ý thêm :  Nếu không muốn nút Khuyến khích đọc hiện bên ngoài trang chủ mà chỉ xuất hiện ở các bài đăng, bạn chỉ việc chèn thêm một đoạn code theo mẫu sau :



    <b:if cond='data:blog.pageType == &quot;item&quot;'>[Code_của_nút_Khuyến_khích_đọc]</b:if>
  4. Save lại toàn bộ template.
Kể từ giờ, người đọc đã có thể tự do bình chọn cho những bài viết yêu thích của mình, và Blog của bạn cũng có thêm cơ hội tăng pageview khi các độc giả khác theo dõi những bài đăng đó. Hy vọng widget này sẽ mang đến cho bạn nhiều thành viên trong Google Friend Connect, đồng thời đưa người đọc đến gần hơn với Blog của bạn. Chúc vui !
 VnTim™ <>Nguồn http://boyprodx.blogspot.com/2009/05/tao-widget-bai-khuyen-oc-voi-google.html

Thứ Hai, 31 tháng 5, 2010

Hướng dẫn cài đặt tên miền Co.cc cho Blogspot

{VnTim™} Có nhiều ban khi đăng ký xong tên miền Co.cc thì không biết cài đặt, Và có làm theo một vài hướng dẫn trên mạng thì đã được nhưng có 1 nhược điểm là không có "www." trước domain thì không thể vào Blog được.
Hôm nay mình sẽ hướng dẫn các bạn cài đặt Domain .
- Trước tiên bạn cần phải có 1 Blogspot ( bạn có thể đăng ký tại Blogspot.com )
-Bạn đăng ký 1 tên miền dạng : tenban.co.cc hoàn toàn miễn phí tại đây.
Sau khi đăng ký đươc tên miền bạn hãy làm thật cẩn thận theo hướng dẫn sau:

Mình sẽ làm mẫu cho các bạn tên miền VnTim.Co.Cc

CO.CC:Free Domain

Sau khi kiểm tra và lựa chọn tại http://www.co.cc/  và kiểm tra tên miền xem có ai đăng ký chưa?
tên miền chưa có ai đăng ký (bạn cũng có thể kiểm tra trực tiếp tại ô dưới này):



Hướng dẫn cài đặt tên miền Co.cc cho Blogspot

Bạn bấm vào "tiếp tục đăng ký" nếu tên miền bạn chọn hiện có sẵn và Free nếu ko chọn tên miền khác hoặc có thể trả tiền cho tên miền ko Free nếu bạn muốn.

Hướng dẫn cài đặt tên miền Co.cc cho Blogspot

nếu bạn có tài khoản tại Co.cc rùi thì điền thông tin và "đăng nhập", nếu chưa có thì bạn bấm vào "Tạo một tài khoản ngay bây giờ" xem hướng dẫn đăng ký tại đây
Ở đây mình có tài khoản rùi lên mình đăng nhập.
và màn hình hiện ra:
Hướng dẫn cài đặt tên miền Co.cc cho Blogspot
Bạn phải cài đặt tên miền trong vòng 48h không quá trinh đăng ký coi như bị loại bỏ.
Bạn bấm vào cài đặt:
Hướng dẫn cài đặt tên miền Co.cc cho Blogspot
Tiếp tục bấm vào cài đặt:
Bạn tích dấu vào ô: 2.Zone Records
và đièn như hình dưới nhá:
Hướng dẫn cài đặt tên miền Co.cc cho Blogspot


Host: www.vntim.co.cc  ( thay bằng www.tencuaban.co.cc)
TIL: 1D
Type: Cname
Valua: ghs.google.com
bấm cài đặt ( đến đấy thì tên miền đã có thể hoặt động nhưng phải có "www" ở đằng trước,hihi, phải sau 48h mới hoạt động dc)

nếu như vậy thì khi không có "www" blog của bạn vẫn chưa thể vào được( đến đây thì nhiều bạn đã làm được rùi)

Tiếp tục nhá:
bạn lại các giá trị như hình đưới: 

Hướng dẫn cài đặt tên miền Co.cc cho Blogspot



Các giá trị:
Host: vntim.co.cc ( thay bằng tên miền của bạn không có "www" nhá)
TIL: 1D
Type: A
Valua: 72.14.203.121  ( cái này bạn có thể ping ghs.google.com để lấy, hoặc có thể ping ngay cái tenban.blogspot.com ....)

bấm cài đặt.
Và bạn phải làm được như hình dưới.


Hướng dẫn cài đặt tên miền Co.cc cho Blogspot

Ok, đến đấy thì phàn cài đặt tên miền coi như là thành công.

Bây giwof mình hướng dẫn các bạn Add tên miền vào Blogspot.

Bạn truy cập vào blog của mình tại địa chỉ Blogspot.com.
Bạn vài CÀI ĐĂT --> XUẤT BẢN .
Bạn nhìn thấy dòng chữ: 


Bạn đang xuất bản trên blogspot.com

Chuyển sang: •  Miền Tuỳ chỉnh (Chỉ tên miền đăng ký của riêng bạn tới blog của bạn)   
bấm vào " Miền tùy chỉnh "

Hướng dẫn cài đặt tên miền Co.cc cho Blogspot


bạn bấm vào chữ cài đặt năng cao ( vì mình có tên miền rùi mà)
Và tiếp tục điền như sau nhé:
Hướng dẫn cài đặt tên miền Co.cc cho Blogspot
Nhớ là có www đó nhá.
sau đó bấm lưu cài đặt
vẫn chưa xong đâu bạn, =))
Sau khi làm như vậy rùi bạn phải tiếp tục bấm vào Chuyển hướng vntim .co.cc tới www.vntim.co.cc
như hình dưới: 

Hướng dẫn cài đặt tên miền Co.cc cho Blogspot

và bây giờ bạn ngồi đợi chùng vài tiếng để cho Domain và Blogspot lưu các cấu hình mình đã cài.
kết quả như nào bạn hãy truy cập ngay vào:  http://vntim.co.cc/  Xem nhé( không có www thì tự nó chuyển thành có www)
Chúc bạn thành công.
Có thắc mắc gì trong quá trinh làm bạn hãy để lại Comment lại dưới bài viết này nhé !

Thứ Năm, 27 tháng 5, 2010

Tiện ích bài viết liên quan hỗ trợ ảnh thumbnails cho Blogger Related Posts for BLogSpot

VnTim™ Tiện ích “Bài viết liên quan” có thumbnail – hình đại diện thu nhỏ phía dưới mỗi bài viết sẽ gây được sự chú ý của người đọc, kích thích người đọc truy cập vào bài viết liên quan giúp tăng lượng traffic tới blog của bạn.

Hình minh họa tiện ích “Bài viết liên quan” có hình đại diện thu nhỏ

related-posts

Nếu thấy phù hợp với blog thì thực hiện tạo tiện ích này theo hướng dẫn sau.

Bước 1. Truy cập vào Blogger  >  Layout  >  Edit HTML

- Click vào ô chọn "Expand Widget Templates"

Bước 2. Tìm (Ctrl-F) đoạn code: </head>
thay thế nó bằng đoạn code sau:

<!--Related Posts with thumbnails Scripts and  Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKaj6vcIX0dxqkCuEQmuOoB9fJSUbO799wj-S4JguxbMwSwLjwCEKk1k8dzAV6_4_dYk3QbnIEdVLr-U-7qy6JUoBULSj4ga24qwe9cc5sitYOj7sktdGYBc0br9bgPX2eqNc-gf5abWg/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
</head>

Bước 3. Tìm đoạn code:

<div class='post-footer-line post-footer-line-1'>

có thể trong một số mẫu Template blogger có dạng:

<p class='post-footer-line post-footer-line-1'>

nếu không thấy một trong hai đoạn code trên, bạn tìm:

<data:post.dody/>

và dán dưới chúng đoạn code sau:

<!-- Related Posts with Thumbnails Code  Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://vntim.blogspot.com/2010/05/bai-viet-lien-quan-ho-tro-anh-thumbnail.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.vntim.tk/' style='display:none;'>blogger gadgets</a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End—>

Bước 4. Chỉnh sửa tiện ích cho phù hợp với Blog (chỉnh các thông số màu đỏ)

- Chỉnh sửa số bài hiển thị trong tiện ích: var maxresults=5;
- Chỉnh sửa tiêu đề của tiện ích: var relatedpoststitle="Related Posts";
- Chỉnh sửa hình đại diện mặc định cho các bài không có hình ảnh:

var defaultnoimage=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKaj6vcIX0dxqkCuEQmuOoB9fJSUbO799wj-S4JguxbMwSwLjwCEKk1k8dzAV6_4_dYk3QbnIEdVLr-U-7qy6JUoBULSj4ga24qwe9cc5sitYOj7sktdGYBc0br9bgPX2eqNc-gf5abWg/s400/noimage.png;



- Thay đổi màu sắc của dòng kẻ phân chia bài:

var splittercolor="#d4eaf2";

- Để hiển thị tiện ích ở tất cả các trang, kể cả trang chủ Homepage: bạn chỉ cần bỏ hai dòng bắt đầu bằng <!-- remove –> ở bước < 2 > và < 3 > đó là:

<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>



<!-- remove --></b:if>

Chúc các bạn cài đặt thành công và có blog đẹp nhé.

Thứ Ba, 27 tháng 4, 2010

Cách xóa hoàn toàn thanh Navbar của Blogger BlogSpot

VnTim™  ^-^  Thủ thuật ẩn thanh Navbar là 1 trong những thủ thuật cơ bản mà bất cứ ai muốn blog của mình pro hơn đều biết. Và thủ thuật này mình cũng đã giới thiệu với các bạn từ rất lâu rồi. Hôm nay mình tình cờ tìm được 1 thủ thuật khác để làm ẩn thanh Navbar này đi.
Xóa hoàn toàn thanh Navbar
Thủ thuật lần trước (có thể xem thêm ở đây) là ẩn thanh navbar. Đúng với tên gọi của thủ thuật, thanh Navbar vẫn tồn tại ở trên blog của bạn, nhưng nó chỉ bị ẩn đi, tức là blog vẫn load thanh Navbar,và các công dụng của nó vẫn còn trên blog. Còn ở thủ thuật lần này ta sẽ xóa hẳn thanh Navbar.
* 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. Tìm đến dòng code <body> và chèn vào trước nó đọan code bên dưới :

<script type='text/javascript'>
<![CDATA[
<!--
/*<body>*/
-->
]]>
</script>
<body>

4. Sau khi chọn save template, ngay lập tức 1 bảng thông báo sẽ hiển lên như bên dưới
Xóa Widget Navbar1 Blogger Blogspot
và các bạn chọn Delete Wigets để xóa nó đi.

5. Và như vậy thanh Navbar đã bị xóa hòan tòan khỏi blog của bạn.(ko tải về khi bạn xem blog)
- Trước kia, khi ẩn thanh Navbar thì các công cụ chỉnh sửa của blog như :
Chỉnh sửa bài viết Xóa hoàn toàn thanh Navbar
chỉnh sửa widget edit widget - mothuthuat.com
Vẫn sẽ hiển thị khi bạn đăng nhập quyền Admin của blog, nhưng ở thủ thuật này thì nó sẽ không còn xuất hiện nữa. Chính vì vậy khi bạn muốn chỉnh sửa bài viết hay widget thì bạn phải thực hiện trong trang Admin của bạn.
- Nếu như bạn không thích điều này, và muốn chỉ ẩn thanh Navbar còn các công cụ chỉnh sửa vẫn sử dụng được thì bạn chỉ việc khôi phục lại thanh Navbar, để làm điều này bạn chỉ việc làm ngược lại bước 3, tức là xóa code mà đã thêm ở bước 3.

VnTim™ Chúc các bạn thành công và có blog đẹp như ý.

Chủ Nhật, 25 tháng 4, 2010

Làm header cho blogspot

VnTim™  ^-^ Trước đây Blogger.com chưa cho phép chúng ta làm header bằng hình ảnh riêng nếu bạn không tác động đến mã nguồn. Bây giờ thì mọi thứ đã dễ dàng hơn rất nhiều. Bạn chỉ cần có một header được thiết kế sẳn bằng các ứng dụng đồ họa như Adobe Photoshop, Google Picasa,…

Có hai điều lưu ý ở đây:

  • Kích thước của header là bao nhiêu?
  • Header bao gồm cả tiêu đề (title), miêu tả (description)  hay chỉ là ảnh nền cho blog
Về kích thước: Kích thước header phụ thuộc vào mẫu (template) mà bạn chọn. Nói chung các mẫu cho sẵn của blogger.com đều có giao diện cho màn hình 800×600 pixels, vì vậy các kích thước về header luôn nhỏ hơn con số này. Để biết chính xác kích thước header là bao nhiêu bạn vào Template->Edit HTML, kéo thanh trược xuống để tìm đoạn mã như hình bên dưới.

Hình 1.
Bạn thấy đấy, kích thước mẫu của tôi là 750px (mặc định của mẫu Minima là 660px, tôi đã sửa lại và thêm một cột bên trái). Vì vậy bây giờ tôi sẽ làm một cái header chiều rộng (width) 740 x cao (height) 120 (trừ đi phần hai ở hai bên margin 5 + 5 = 10px). Nếu description (miêu tả, nằm dưới title) của bạn nhiều thông tin, thì bạn thiết kế chiều cao nhiều hơn một chút nữa. Tôi chỉ thiết cao 120 px nên bạn thấy còn thiếu một tí!
Sau khi làm xong, vào Template | Add and Arrange Page Elements, chọn edit trên Header, cửa sổ hiện ra như hình.
Làm header cho blogspot

Hình 2.
Tiêu đề và miêu tả cho blog đều có ở đây, điều này đồng nghĩa với việc bạn có thể thay đổi nó, không nhất thiết phải thay đổi từ Setting->Basic.
Hãy chọn đường dẫn đến file hình ảnh header lưu trên máy. Bây giờ thì click Browse để chọn ảnh hoặc paste liên kết đến ảnh vào From the web nếu bạn đã đưa ảnh lên các trang chia sẻ ảnh như bài hướng dẫn về chèn ảnh cho bài viết đã đề cập. Click Save Changes để lưu lại.
Nếu bạn chỉ làm ảnh nền cho header như tôi thì tới đây bạn đã thực hiện xong, còn bạn đã làm một header kiểu nội dung gồm tiêu đề và miêu tả thì bạn vẫn còn việc để làm. Hãy click vào View Blog để xem kết quả, bạn sẽ thấy điều mà tôi vừa nói. Nghĩa là tiêu đề và thông tin miêu tả blog của bạn nằm đè lên header của bạn. Trông xấu xí gớm! Đừng bận tâm, bây giờ hãy trở lại Template | Edit Header, chọn Instead of title and description như hình dưới rồi save bạn sẽ có kết quả như ý.
Làm header cho blogspot

Hình 3.

Chúc bạn có một header đẹp mắt!

3 tiện ích mới của Blogger

VnTim™  ^-^  Blogger in Draft là một phiên bản đặc biệt thử nghiệm những tiện ích mới của Blogger trước khi chính thức được phát hành. Những tiện ích này được giới thiệu tại bloggerindraft.blogger.com để người sử dụng đánh giá và góp ý. Ba tiện ích mới sắp sửa được trình làng: Subscription Links (Đăng ký đọc tin RSS), Google Gadgets (Tiện ích Google), Search Box (Hộp tìm kiếm). Để thử nghiệm bạn phải đăng nhập tài khoản Blogger của mình tại draft.blogger.com
Sau khi đăng nhập xong bạn vào giao diện gần giống như bình thường. Tuy nhiên khi click chọn Add a Page Element (Thêm một phần tử trang) trên Layout (Trình bày) bạn sẽ thấy đầy đủ tiện ích mới đang được thử nghiệm. Dưới đây là ba tiện ích đang được thử nghiệm.
3 tiện ích mới của Blogger
1. Subscription Links
Giúp người dùng lấy tin đọc bằng các công cụ trực tuyến hay bằng trình đọc tin RSS. Tiện ích này chỉ liệt kê một vài trình đọc tin vẫn còn kém xa so với AddThis và AddtoAny.
3 tiện ích mới của Blogger
(cài đặt tiện ích)
3 tiện ích mới của Blogger
(hiển thị trên blog)
2. Google Gadgets
Thủ Thuật Blog đã từng giới thiệu các tiện ích của Google. Bây giờ Google đã tích hợp vào Blogger và bạn không cần phải chép code dán vào HTML/JavaScript như cách làm truyền thống.
3 tiện ích mới của Blogger
(cài tiện ích lịch âm-dương bằng cách tìm kiếm với từ khóa “lịch”)
3 tiện ích mới của Blogger
(hiển thị lịch âm-dương trên blog)
3. Search box
So với dùng Google Custom Search và Adsense for search thì hộp tìm kiếm này quả là một cải tiến vượt bậc. Kết quả tìm kiếm được hiển thị nhanh chóng nhờ truy xuất trực tiếp từ máy chủ rất mạnh của Google và hiển thị theo thẻ (tab) với nhiều nguồn khác nhau. Tuy nhiên hiện thời hộp tìm kiếm này chưa cho phép bạn tùy chỉnh màu sắc, font chữ trong kết quả tìm kiếm cũng như kết hợp với tài khoản Google Adsense hiển thị quảng cáo kiếm tiền. Hy vọng những yếu điểm này sẽ được khắc phục khi chính thức được phát hành.
3 tiện ích mới của Blogger
(cài tiện ích hộp tìm kiếm Google)
Nhìn chung bạn có thể đăng bài hay thay đổi bất cứ những gì mình muốn ở phiên bản thử nghiệm. Khi nào không thích phiên bản này bạn cứ vào từ trang chủ bình thường của Blogger (www.blogger.com). Các tiện ích thử nghiệm đã thêm vào vẫn hoạt động bình thường. Sự khác nhau giữa chúng chỉ là giao diện với những tiện ích mới.

Tổng hợp 25 Widget hay cho Blogger/Blogspot


VnTim™  ^-^ Rất nhiều người  trong chúng ta nghĩ rằng Blogger thiếu các công cụ hỗ trợ như plugin không như wordpress có 1 hệ thống đồ sộ các plugin, themes,… Nhưng điều đó không hoàn toàn đúng bởi vì bằng việc sử dụng các widget, Blogger có thể có thể tùy chỉnh blog theo ý muốn mà chỉ cần thêm 1 vài đoạn code nhỏ vào sidebar.

Widget liên lạc:

1. Google Talk – Giúp các visitor có thể chat trực tiếp với bạn thông qua Google Talk từ blog của bạn.
2. Jaxtr -Tạo 1 widget cho phép mọi người có thể gọi điện cho bạn mà họ không bị tiết lộ số điện thoại.
3. Meebo Me – Tạo 1 chat box trên blog của bạn, tạo cơ hội để bạn có thể chat với các visitor.
MeeboMe Tổng hợp 25 Widget Blogger
4. Skype – Widget chính thức của Skype, giúp hiển thị status của bạn, mọi người chỉ cần nhấn nút là có thể kết nối cuộc gọi với bạn.
Skype  Tổng hợp 25 Widget Blogger

5. Tag-Board – Cung cấp chat box theo thời gian thực đảm bảo cho các cuộc trò chuyện của bạn.

Widget Cộng đồng:

6. Delicious Linkrolls – Chia sẽ bookmark Delicious của bạn với toàn thế giới 1 cách dễ dàng.
7. FriendFeed Widget – Chia sẽ tất cả các người bạn trên FriendFeed của bạn với khách ghé thăm.
FriendFeed Tổng hợp 25 Widget Blogger
8. Google Friend Connect - Cung cấp các tính năng xã hội mạnh mẽ vào blog của bạn.
9. LinkedInABox -
10. MyBlogLog – Nếu member viếng thăm là thành viên của MyBlogLog thì avatar, username của họ sẽ hiển thị trên box, bạn có thể click vào 1 ai đó để kiểm tra thông tin của họ.
11. Twitter - Thêm dòng  Twitter vào blog của bạn và đồng thời hiển thị đường dẫn để Follow theo bạn.
12. Share on Facebook – 1 widger đơn giản cho phép khách có thể share blog của bạn trên Facebook.
13. SocialFeed – Tích hợp các mạng xã hội Twitter, Pownce, Vimeo,… vào blog.

Widget tiện ích

14. Add This – Tạo các button bookmark của các mạng xã hội phổ biến vào blog.
15. Easy Comments – Cho phép bạn thêm comment vào bất cứ trang nào của blog bằng cách đặt widger này ở cuối trang.
16. Google Search – Thêm hộp thoại tìm kiếm Google AJAX vào blog.
17. Popular Posts – Hiển thị các bài viết đọc và bình luận nhiều nhất.
18. Recent Comments – Hiển thị tất cả các comment gần đây nhất.
19. Related Posts – Tạo related post giống như Wordpress.
20. ShareThis -Tạo button ShareThis giúp bạn có thể chia sẽ bài viết của mình lên các mạng xã hội.
ShareThis Tổng hợp 25 Widget Blogger
21. Shout List Icons – Tạo ra hơn 30 biểu tượng của các mạng xã hội.
22. Tag/Label Cloud – Tạo “mây Tab/Label” cho mọi người biết bạn viết gì nhiều nhất.

Widget khác:

23. Flickr - Tạo ra 1 đoạn HTML hoặc Flash của link ảnh đẻ bạn có thể dễ dàng chia sẽ chúng.
24. Mashable - OK, bạn có thể chiaễ những bài viết của mình với Mashable.
25. Picasa Albums – Hiển thị album Picasa trên sidebar blog của bạn

Nguồn http://www.tipsviet.com/blogging/tong-hop-25-widget-blogger.html

Tạo hộp tìm kiếm cho blogspot

VnTim™  ^-^ Cách thứ nhất: Đưa hộp tìm kiếm tùy chỉnh của Google vào blog 
(cách này hơi phức tạp)
Bước 1: Các thông tin cơ bản
Đặt tên cho công cụ tìm kiếm và cung cấp một bản mô tả ngắn gọn.
Tên công cụ tìm kiếm: ví dụ: Tìm kiếm
Bản mô tả của công cụ tìm kiếm: ví dụ: Tìm kiếm thông tin trên blog này
Ngôn ngữ của công cụ tìm kiếm: Tiếng Việt
Bạn muốn tìm kiếm thông tin gì?
Chọn: Chỉ các trang web mà tôi chọn.
Xác định danh sách trang web cần tìm kiếm. http://tên_blog_của_bạn.blogspot.com
Phiên bản:
Chọn: Standard edition - Miễn phí, quảng cáo bắt buộc phải có trên các trang kết quả.
Chọn: Tôi đã đọc và đồng ý với Điều khoản Dịch vụ.
Nhấp TIẾP

Bước 2: Dùng thử
Dùng thử một số truy vấn trong công cụ tìm kiếm của bạn: Muốn thử thi điền vài từ liên quan đến tưa đề bài nào đó trên blog bạn (không nhất thiết). Nhấp: Tim kiếm
Xem trước các kết quả tìm kiếm trên web
Nhấp: HOÀN TẤT 

Bước 3: Công cụ tìm kiếm của tôi 
Bạn vừa mới tạo công cụ tìm kiếm "Tìm kiếm".
Nhấp vào BẢNG ĐIỀU KHIỂN

Bước 4: Bảng điều khiển - Cài đặt cơ bản: Tìm kiếm
Thông tin cơ bản
Tên và mô tả của công cụ tìm kiếm của bạn sẽ được hiển thị trên trang chủ Google của nó.
Tên công cụ tìm kiếm:
Bản mô tả của công cụ tìm kiếm: thông tin trên blog này
Tuỳ chọn
Cách tìm các trang web được bao gồm:
Chỉ tìm kiếm trên các trang web được bao gồm.
Tìm kiếm toàn bộ web nhưng nhấn mạnh các trang web được bao gồm.
Trạng thái quảng cáo:
Hiển thị các quảng cáo trên các trang kết quả.
Không hiển thị quảng cáo trên các trang kết quả (chỉ đối với các tổ chức phi lợi nhuận đã đăng ký, trường đại học, và các cơ quan chính phủ).
Thêm liên kết đã đăng ký của tôi vào công cụ tìm kiếm tuỳ chỉnh này.Tìm hiểu thêm về Các Liên kết đã Đăng ký của Google.

Bước 5: Lấy mã - Bạn nhấp vào chữ ở thư mục nằm bên trái cửa sổ
Bảng điều khiển - Mã: Tìm kiếm
Tuỳ chọn lưu trữ kết quả tìm kiếm
Chọn: Lưu trữ kết quả trên trang web của bạn:
khung nội tuyến – cần hai trang: một dành cho hộp tìm kiếm và một dành cho kết quả
lớp che phủ – yêu cầu một trang, nhưng hiển thị kết quả theo lớp phương thức
Chỉ định chi tiết kết quả tìm kiếm
Chỉ định url trên trang web của bạn nơi bạn muốn các kết quả tìm kiếm xuất hiện:
Gõ tên blog của bạn vào, ví dụ: vntim.blogspot.com
Chỉ định nơi bạn muốn đặt quảng cáo: Bên phải Trên cùng và Bên phải Trên cùng và Dưới cùng
Mã hộp tìm kiếm
Dán mã này trong trang web ở nơi mà bạn muốn hộp tìm kiếm của bạn xuất hiện.
Mã các kết quả tìm kiếm
Dán mã này vào tên blog.blogspot.com, nơi bạn muốn kết quả tìm kiếm của mình xuất hiện

Cách thứ 2: Thêm hộp tìm kiếm cho blogger
(Tạo đơn giản)
Sau khi xem xét mã nguồn của thanh Navbar (Navigation bar) tôi thấy chúng ta có thể nhúng thanh này vào trên blog của mình.

Bây giờ bạn hãy copy và paste đoạn mã trên vào HTML/JavaScript (Dashboard->Layout->Add and Arrange a Page Element->Add a Page Element). Sau đó bạn sửa lại phù hợp các thông số dành của blog bạn.
LIÊNKẾT thay bằng địa chỉ của blog. Ví dụ blog mà bạn đang đọc có địa chỉ là http://vntim.blogspot.com vậy tôi sẽ thay LIÊNKẾT=http://vntim.blogspot.com.
Chữ màu đỏ Tìm kiếm thể hiện thông tin cho biết đây là một hộp tìm kiếm. Tuy nhiên không nhất thiết bắt buộc bạn phải có hoặc dùng cái tên ấy, không dùng cũng chẳng ảnh hưởng gì!
Bên dưới bạn thấy chữ Search cũng màu đỏ, nào ta hãy thay bằng hai từ tiếng Việt “Tìm kiếm” (nhớ dùng mã Unicode-8 nhé).
Quả sẽ hiển thị như sau:
Tìm kiếm
Bây giờ ta bàn đến maxlength="100" và size="20". Trong đó maxlength="100" chính là chiều dài các ký tự cho phép bạn gõ trên hộp tìm kiếm, nếu một 100 chưa đủ thì bạn nhập một con số lớn hơn. Nhưng thường thì từ khóa tìm kiếm của người dùng ngắn gọn, do đó con số này cũng không phải luôn bị chạm đích, size="20" đây chính là kích cở dài của hộp tìm kiếm, bạn có thể thấy 20 ký tự trên khung, nếu bạn gõ nhiều hơn hoặc muốn nhìn thấy nó dài hơn thì chọn 30 chẳng hạn. Kết quả hiện thị như bên dưới.
Tìm kiếm
Bạn đã đọc xong chưa nhỉ? Hãy lưu lại và di chuyển nó đến một vị trí phù hợp trên blog của bạn đi nào. Gõ vài từ khóa và thử tìm kiếm trên chính blog của bạn.
Cập nhật:
Bạn có thể dùng code sau mà không cần phải thêm link blog mình mà hướng dẫn trên đề cập:

Cách thứ 3 - làm hộp search cho Blogger
Bình thường các blogger hay sử dụng hộp Search của Google để tìm kiếm nội dung trong blog của mình. Hộp Search này thường là từ Google Adsense hay Google Custom Search Engine (Google CSE), cả 2 loại này đều có thể kiếm tiền được từ đó: hộp Search Google Adsense thì bạn được hưởng 100% tiền kiếm được từ click, còn Google CSE thì bạn chỉ được hưởng 50% do phải chia sẻ 50/50 với Google.
Làm hộp Search của Google cần có 1 yếu tố cực kì quan trọng là blog phải được Google index nhiều, nếu không thì coi như vô dụng, vì Google sẽ chẳng tìm được cái gì cả, người dùng tất nhiên sẽ chán vì không tìm ra nội dung và rời bỏ blog của bạn.
Để khắc phục điều này, chúng ta nên thiết kế 1 hộp Search khác, dùng sẵn chức năng query của Blogger. Cách làm này tôi học được từ Blogging for Blogs bằng cách thử search 1 vài từ rồi để ý thanh Address. Quả thật nguyên tắc rất đơn giản, để Blogger search cho chúng ta các bài viết có chứa 1 từ nào đó, chỉ cần gõ trên thanh Address địa chỉ sau:
http://yourblog.blogspot.com/search?q=xxx
trong đó xxx là từ bạn cần tìm kiếm.
Biết được nguyên tắc này rồi thì việc tạo 1 hộp search cho riêng mình để tìm kiếm rất đơn giản. Hãy vào phần điều chỉnh Layouts -> Page Elements của Blogger, chọn Add a page element loại HTML/Javascript, rồi điền đoạn mã sau:

Save lại là được. Bây giờ ai muốn tìm kiếm trong blog của bạn cũng sẽ rất dễ dàng hơn nhiều, cách làm này có 1 điểm rất thuật lợi là Blogger sẽ tìm kiếm trên nội dung các bài viết của bạn, cho nên kết quả tìm kiếm sẽ rất sát so với yêu cầu.
Chúc các bạn có 1 blog tuyệt vời

Tập hợp mã nguồn Html/JavaScript hay cho Blogspot

VnTim™  ^-^ Tạo Blog là một trong những trào lưu IT được giới trẻ “yêu chuộng” nhất hiện nay, tạo Blog không quá khó tuy nhiên để có được một Blog thật hay và Pro thì đòi hỏi bạn phải biết nhiều thứ trong đó tùy biến mã nguồn nhúng HTML/JavaScript là một đối tượng vô cùng quan trọng.
Trong loạt bài viết “Những thủ thuật hay cho các Blogger” ở phần 1 này tôi sẽ chia sẽ với các bạn những đoạn mã nguồn HTML/JavaScript chọn lọc; mà nếu làm chủ tốt “nó” Blog của bạn sẽ vô cùng hiện đại và chuyên nghiệp. Bài viết được minh họa trên dịch vụ Blogspot của Google, các dịch vụ Blog khác cũng được tiến hành tương tự.
1. Cách nhúng HTML trên BlogSpot:
o Hiện nay hầu hết tất cả các dịch vụ tạo Blog như BlogSpot, MSN, YahooPlus, Violet… đều hỗ trợ người quản trị cho phép nhúng vào các đối tượng HTML/JavaScipt để thực hiện các tùy biến cao cấp trên Blog.
o Đăng ký tài khoản và tiến hành các bước thiết kế cơ bản cho Blog tại địa chỉ http://www.blogger.com (bạn có thể đăng nhập bằng tài khoản Gmail sẵn có ở đây). Đăng nhập vào quyền quản trị tài khoản > Chọn Layout > Page Elements: trên bố cục của Blog nhấp nút Add a page elements (hay Add a Gadget) ở cột bên phải để bắt đầu lựa chọn đưa vào các đối tượng nhúng (lưu ý: mặc định bố cục của BlogSpot có 2 nút Add a Gadget cho phép thêm đối tượng vào cột bên trái và phần Footer bên dưới; thông thường đối tượng nhúng sẽ ưu tiên vào cột trái).
o Trong cửa sổ Add a Gadget nhấp chọn nút HTML/JavaScript để nhúng vào mã nguồn, xem hình 1.

Hình 1
o Trên hộp thoại Configure HTML/JavaScript kế tiếp: đặt tên cho đối tượng vào khung Title và mã nguồn vào khung Content, xem hình 2.

Hình 2
o  Nhấp Save để kết thúc thao tác nhúng đối tượng vào Blog (sau này nếu muốn bỏ đi đối tượng đã nhúng nhấp chọn nút Remove)
2.  Nhúng một hộp văn bản cuộn vào Blog:
o  Thường vị trí của đoạn văn bản cuộn này nên đặt ở vùng Header hay Footer trên giao diện Blog.
o  Nhúng đoạn mã nguồn sau vào chức năng Configure HTML/JavaScript của Blog:

<marquee style="color: #FF00FF; font-weight: bold" bgcolor="#F2FBFF"; direction= “left”>++ Chào mừng các bạn ghé thăm Blog của tôi ++ Mong các bạn góp ý để Blog ngày càng phát triển ++</marquee>
o  Trong đó: Color (màu chữ), Bgcolor (màu nền hộp văn bản), direction (chiều di chuyển), đối với giá trị các màu sắc nếu không nắm được mã nhị phân tương ứng bạn có thể điền tên màu bằng tiếng anh.
3. Nhúng ngày tháng năm bằng tiếng việt:
o Đoạn mã HTML sau sẽ hiển thị nội dung ngày tháng năm bằng tiếng việt trên Blog.

<script language="" type="text/javascript">        
<!--   // Array ofmonth Names           
<!-- var monthNames = new Array("một","hai","ba","bốn","năm","sáu","bảy","tám","chín","mười","mười một","mười hai"); -->           
var monthNames = new Array("01","02","03","04","05","06","07","08","09","10","11","12");           
var dayNames = new Array("Chủ nhật,","Thứ Hai,","Thứ Ba,","Thứ tư,","Thứ Năm,","Thứ Sáu,","Thứ Bảy,")           
var now = new Date();           
thisYear = now.getYear();           
thisDay = dayNames[now.getDay()];            
if(thisYear < 1900) {thisYear += 1900}; // corrections if Y2K display problem           
document.write("Hôm nay : " + thisDay +" "+"ngày"+" "+ now.getDate() + " tháng " + monthNames[now.getMonth()] + " năm " + thisYear);           
// -->            
</script>
o     Dùng chức năng nhúng HTML/JavaScript để tùy biến ở vị trí Header hay bên phải giao diện Blog, xem hình 3.

Hình 3
4. Nhúng bảng dự báo thời tiết vào Blog:
o  Đoạn mã HTML sau cho phép nhúng vào dự báo thời tiết của 5 thành phố lớn (Hà Nội, TP Hồ Chí Minh, Huế, Cà Mau, Nha Trang) trên cả nước theo 3 tiêu chuần quốc tế: nhiệt độ, thời gian và ẩm độ theo nguồn của trang web dự báo thời tiết nổi tiếng quốc tế  http://banners.wunderground.com/, xem hình 4.

Hình 4
<p align="center"><img border="0" width="24" src="thoitiet.gif" height="20"/><font size="2"><b>Thời tiết một số địa phương ở nước ta </b></font></p>
<p align="center"> Nhiệt độ - Thời Gian - Độ ẩm </p>
<hr color="#d49f9f" width="95%" size="1"/>
<form action="--WEBBOT-SELF--" method="POST">
<!--webbot bot="SaveResults" U-File="fpweb:///_private/form_results.txt"
  S-Format="TEXT/CSV" S-Label-Fields="TRUE" -->
<p align="center"><font size="2"><b>Hà Nội</b></font></p>
<p align="center">&nbsp;<img alt="Tập hợp mã nguồn Html/JavaScript hay cho Blogspot" width="127" src="http://banners.wunderground.com/banner/gizmotimetemp_both/language/english/global/stations/48820.gif" height="41"/></p>
<p align="center"><font size="2"><b>Tp Hồ Chí Minh </b></font></p>
<p align="center"><img alt="Tập hợp mã nguồn Html/JavaScript hay cho Blogspot" width="127" src="http://banners.wunderground.com/banner/gizmotimetemp_both/language/english/global/stations/48900.gif" height="41"/></p>
<p align="center"><font size="2"><b>Huế</b></font></p>
<p align="center"><img alt="Tập hợp mã nguồn Html/JavaScript hay cho Blogspot" width="127" src="http://banners.wunderground.com/banner/gizmotimetemp_both/language/english/global/stations/48852.gif" height="41"/></p>
<p align="center"><font size="2"><b>Cà Mau</b></font></p>
<p align="center"><img alt="Tập hợp mã nguồn Html/JavaScript hay cho Blogspot" width="127" src="http://banners.wunderground.com/banner/gizmotimetemp_both/language/english/global/stations/48914.gif" height="41"/></p>
<p align="center"><font size="2"><b>Nha Trang</b></font></p>
<p align="center"><img alt="Tập hợp mã nguồn Html/JavaScript hay cho Blogspot" width="127" src="http://banners.wunderground.com/banner/gizmotimetemp_both/language/english/global/stations/48877.gif" height="41"/></p>
</form>
o  Nếu muốn bỏ đi phần dự báo của Huế thì bạn tìm và xóa đoạn mã tương ứng:
<p align="center"><font size="2"><b>Huế</b></font></p>
<p align="center"><img alt="Tập hợp mã nguồn Html/JavaScript hay cho Blogspot" width="127" src="http://banners.wunderground.com/banner/gizmotimetemp_both/language/english/global/stations/48852.gif" height="41"/></p>

Lưu ý: tại trang chủ http://banners.wunderground.com/ mỗi một thành phố hay tỉnh của Việt nam có một mã số ảnh riêng, bạn có thể tham khảo ở đây để chèn vào cho phù hợp với đối tượng mà mình muốn hiển thị (Ví dụ: Huế có mã ảnh tỉnh là 48852.gif)
5. Chèn quảng cáo cố định ở hai bên giao diện Blog:
o Với đoạn mã này bạn có thể chèn vào các LOGO quảng cáo cho các đối tượng khác nhau ở hai bên cố định của giao diện Blog bằng cách sử dụng liên kết LINK.

<div><font color="#FF0000"size="3">HỖ TRỢ DẠY & HỌC</font></div> <div><hr width=180 align=""</a></div><div><a target="_blank" href="http://butnghien.vn/"> <img border="1" src="http://d.violet.vn/uploads/photo/961562.jpg"width="180" height="55"></a></div> <div><a target="_blank"
href="http://www.google.com.vn/"><img border="1" src
="http://www.google.com.vn/intl/en_com/images/logo_plain.png"
width="180" height="55"></a></div> <div><a target="_blank"
href="http://vn.yahoo.com/"><img border="1" src
="http://l.yimg.com/hb/i/vn/mastheads/logo_vn.png"
width="180" height="55"></a></div><div><a target="_blank"
href="http://translate.google.com.vn/"> <img border="1" src=
"http://www.google.com.vn/intl/vi/images/translate_beta_res.gif"
width="180" height="55"></a></div> <div><a target="_blank"
href="http://vdict.com/?autotranslation/"> <img border="1" src=
"http://vdict.com/templates/user/images/logo.gif"
width="180" height="55"></a></div> <div><a target="_blank"
href="http://www.srem.com.vn"><img border="1"
src="http://quangtri.edu.vn/image/SREM_BL_d.gif" width="180" height="55"></a></div> <div><a target="_blank"
href="http://www3.tuoitre.com.vn/TuyenSinh/Index.aspx?TopicID=210"><img border="1" src="http://quangcao.tuoitre.com.vn/service/ts2009.gif" width="180" height="55"></a></div> <div><a target="_blank"
href="http://www.gdtd.com.vn/"> <img border="1"
src="http://www.gdtd.com.vn/images/top-banner.gif" width="180" height="55"></a></div> <div><a target="_blank"
href="http://www.catlinhschool.edu.vn/"> <img border="1" src="http://tieuhocdanghai.com/Images/banners/catlinh.gif" width="180" height="55"></a></div> <div><a target="_blank"
href="http://tieuhocdanghai.com/"> <img border="1" src="http://www.catlinhschool.edu.vn/Data/Images/Adv/logo.gif" width="180" height="55"></a></div> <div><a target="_blank"
href="http://toantuoitho.nxbgd.com.vn/"> <img border="1" src="http://tieuhocdanghai.com/Images/banners/cs.jpg" width="180" height="55"></a></div> <div><a target="_blank"
href="http://violympic.vn"> <embed border="1" src="http://violympic.vn/images/violympic.swf" quality="high" wmode="transparent" type="application/x-shockwave-flash" width="180" height="60"></embed> </object></a> </div>

 o  Chú ý: Các link liên kết tới hình ảnh tương ứng phải có thực (tốt nhất bạn nên tự Upload cố định lên Host hay trực tiếp trên Blog), không nên liên kết tới LOGO của trang khác vì rất dễ xảy ra tình trạng chết LINK. Những đoạn Code màu xanh là liên kết tới các hình ảnh đại diện cho đối tượng mà bạn muốn nhúng vào Blog, với đoạn Code này bạn có thể tùy biến thêm vào hay xóa đi các đối tượng một cách thoải mái, xem hình 5.

Hình 5
o  Ví dụ: Đối tượng báo giáo dục thời đại trong đoạn Code trên gồm các lệnh:
<div><a target="_blank"
href="http://www.gdtd.com.vn/"> <img border="1"
src=
"http://www.gdtd.com.vn/images/top-banner.gif" width="180" height="55"></a></div>
o Trong đoạn Code trên đối tượng VIOLYMPIC có Logo nhúng vào là một File Flash SWF, khi đó ta phải thay đổi mã lệnh nhúng lại cho phù hợp là:

<div><a target="_blank"
href="http://violympic.vn"> <embed border="1" src
="http://violympic.vn/images/violympic.swf"quality="high" wmode="transparent" type="application/x-shockwave-flash" width="180" height="60"></embed> </object></a> </div>

6. Lịch âm dương trên Blog:
o  Là người việt nam chắc chắn Blog của bạn sẽ chuyên nghiệp và mang cá tính hơn với một cuốn lịch âm dương hiển thị để khách viếng thăm tiện việc tra cứu, xem hình 6.

Hình 6
o Mã nguồn nhúng vào Blog:

<div class="content">
<center><a name="amlich"></a>
<script language="JavaScript" src="http://mangvn.org/nukeviet/js/amlich.js" type="text/javascript"></script>
<script language="JavaScript">showVietCal();</script>
<script language="JavaScript">document.writeln(printSelectedMonth());</script></center></div>

7. Tạo ComboBox trên Blog:
o Việc nhúng một ComboBox để liên kết nhanh tới các đối tượng khác nhau sẽ giúp bạn tiết kiệm được thời gian thiết kế và không gian hiển thị trên giao diện Blog, xem hình 7

Hình 7
o Mã nguồn:

<SELECT onchange="if (this.value != '#') window.open(this.value, '_blank');" style="font-family: Arial; font-size: 8pt; height: 23; width: 123">
<OPTION selected value=#>Website Liên Kết</OPTION>
<OPTION value=#>--- TIN TỨC ONLINE ---</OPTION>
<OPTION value=http://www.vnexpress.net>Vn Express</OPTION>
<OPTION value=http://www.tuoitre.com.vn>Báo Tuổi Trẻ</OPTION>
<OPTION value=#>--- CNTT Việt nam ----</OPTION>
<OPTION value=http://www.quantrimang.com>Quản trị mạng</OPTION>
<OPTION value=http://www.diendantinhoc.com>Diễn đàn Tin Học</OPTION>
<OPTION value=#>---Bộ máy tìm kiếm---</OPTION>
<OPTION value=http://www.vinaseek.com>Vina Seek</OPTION>
<OPTION value=http://www.google.com.vn>Google</OPTION>
</SELECT>

o Với đoạn Code này bạn cũng có thể Edit lại một cách thật dễ dàng.
8. Nhúng từ điển Anh - Việt vào Blog:
o Với đoạn mã nguồn sau Blog của bạn sẽ được trang bị một quyển từ điển ANH - Việt hết sức chuyên nghiệp.

<script src="http://bea.vn/course/blocks/dictionary_mc/clicksee.js"></script>
<script language="javascript">
function doSearch(obj){
window.open("http://bea.vn/course/blocks/dictionary_mc/dic/search.php?dict=" + obj.dict.value + "&word=" + obj.word.value, "quickview", "status=0,toolbar=0,scrollbars=1,width=500,height=400,location=0");
return false;
}
</script>
<form action="http://bea.vn/course/blocks/dictionary_mc/dic/search.php" style="margin:0px;" target="_blank" name="dictionary" onsubmit="return doSearch(this);" method="post">
<div style="padding-bottom:6px"> Dictionary: <br/>
<select style="font-size: 11px; width: 130px;" name="dict">
<option selected="true" value="ev"/>English - Vietnamese
<option value="ve"/>Vietnamese - English
</select></div>
<div> Enter word:<br/>
<input style="font-size: 11px; width: 87px;" name="word" type="text"/>
<input style="font-size: 11px;" value="Go" name="go" type="submit"/>
</div> </form>
<span style="font-size:90%; font-weight: bold;">© <a href="http://trandaiminhtri.blogspot.com/" target="_blank">Cftanhiep Groups 2009</a></span></p>



o Từ điển Anh Việt hiển thị trên Blog, xem hình 8.

Hình 8
9. Tự tạo hộp tìm kiếm thông tin trên Blog:
o  Mặc dù bạn có thể dễ dàng thêm vào Blog Gadget tìm kiếm của Google, tuy nhiên nếu tự tay thiết kế được một công cụ riêng về tìm kiếm thì điều đó sẽ thú vị hơn nhiều, xem hình 9.

Hình 9
o Mã nguồn:

<p align="left">
<form id="searchthis" action="http://trandaiminhtri.blogspot.com/search" style="display:inline;" method="get">
<strong>Search this site<br/></strong>
<input id="b-query" maxlength="255" name="q" size="30" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>
</form></p>

10. Nhúng bảng tỷ giá vàng vào Blog:
o Mã nguồn:

<iframe src="http://www.vietstock.com.vn/Transweb/giavang.htm" width="180" height="150" scrolling="yes" frameborder="0" marginheight="0" marginwidth="0"></iframe>

o Hiển thị xem hình 10.

Hình 10
11. Nhúng bảng tỷ giá ngoại tệ cho Blog:
o Mã nguồn:

<iframe src="http://www.vietstock.com.vn/Transweb/tygia.htm" width="180" height="240" scrolling="yes" frameborder="0" marginheight="0" marginwidth="0"></iframe>

o Hiển thị xem hình 11.

Hình 11
12. Nhúng lịch xem truyền hình Việt Nam vào Blog:
o Mã nguồn:

<iframe scrolling="yes" frameborder="1" width="240" src="http://bongda.com.vn/truyenhinh.aspx" height="300"></iframe>

o Hiển thị xem hình 12.

Hình 12
13. Nhúng cảnh đẹp Việt Nam vào Blog:
o Hãy để cho khách viếng thăm cùng đi một tour du lịch Việt Nam cùng với Blog của bạn bằng mã nguồn sau.

1. Nhúng theo mặc định :
<script src="http://www.skydoor.net/gadget/vietnamtravel/random?format=javascript" type="text/javascript"></script>
2. Có thể thay đổi kích thước :
<script src="http://www.skydoor.net/gadget/vietnamtravel/random?format=javascript&width=300"></script>
3. Thêm các thông tin về tour du lịch :
<script src="http://www.skydoor.net/gadget/vietnamtravel/random?format=javascript&width=300"&tour=3></script> 
4. Thay đổi khoảng thời gian giữa hai bức ảnh :
<script src="http://www.skydoor.net/gadget/vietnamtravel/random?format=javascript&width=300"&speed=2000></script>

o Hiển thị xem hình 13.

Hình 13
14. Tổng kết: Kết thúc phần 1 với 14 đoạn Code khác nhau dựa trên nền tảng nhúng HTML/JavaScript Blog của bạn đã trở nên đặc sắc và chuyên nghiệp hơn hẳn, hẹn gặp lại ở các các phần tiếp theo của loạt bài.