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ứ Ba, 9 tháng 11, 2010

Thủ thuật chèn mã quảng cáo vào Blogger

Thủ thuật chèn mã quảng cáo vào blogger
VnTim™<> Có một số blogger đã đăng ký xong một số mạng quảng cáo như adnet.vn hay Adsense của Google, có code rồi, tuy nhiên không biết chèn thế nào vào blog. Thực ra nói tới việc chèn sẽ nảy sinh ra hàng loạt trường hợp là chèn ở đâu, chèn vào tất cả các bài khi user mở Label hay chỉ chèn vào một bài viết. Chèn quảng cáo có float (style động) hay không. Bài viết dưới đây trình bày tương đối đầy đủ các kiểu chèn Code nhưng chỉ cho dạng Item (một bài nào đó được mở), trường hợp các trang label không đề cập ở đây.

Cũng giống như các yếu tố khác của trang web của bạn như hình và ảnh, bạn có thể thay đổi vị trí của quảng cáo Google bằng cách sử dụng các thẻ HTML.

Ví dụ: nếu bạn đặt mã quảng cáo AdSense trong các thẻ

<div align="center"> and </div>

thì đơn vị quảng cáo sẽ được canh giữa trên trang web của bạn. Bạn cũng có thể đặt toàn bộ nội dung trang của bạn vào một bảng HTML và thay đổi vị trí của đơn vị quảng cáo bằng cách đặt nó trong một ô cụ thể của bảng đó.

Thủ thuật chèn mã quảng cáo vào blogger

Trong bài viết này tôi xin chỉ dẫn cho các blogger cách thức chèn mà quảng cáo vào các vị trí trên web blog.
Thông thường mã quảng cáo có dạng như sau:

<script type="text/javascript"><!--
google_ad_client = "pub-xxx";
//468x60, created 1/4/08
google_ad_slot = "6307774390";
google_ad_width = 468;
google_ad_height = 60;
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

Trước khi chèn bạn phải chuyển đổi mã bằng  nhờ Ad-code-converter . Sau khi convert mã CODE  bạn nhận được một đoạn code Adsense mới (gọi tắt là ABC chẳng hạn) không có các thẻ mở, đóng và ngoặc kép trong mã. Ta sử dụng mã mới này để chèn vào template. Xin nhắc trước một lần điều rất quan trọng là trước khi thao tác với templates, bạn phải sao lưu nó về máy đề phòng bất trắc.

  Có 4 vị trí tối ưu khi chèn mã quảng cáo:

1. Các banner dài, 468x60, 236x60... chèn trên đầu bài (nhưng dưới tiêu đề):

Để chèn vào vị trí như trên, làm như sau: Tìm đến dòng

<div class='post-header-line-1'/>

và chèn vào "ngay bên dưới" nó mã này:

<b:if cond='data:blog.pageType == "item"'>
<p class='ads'>

ABC

</p>
</b:if>

2. Các banner dài, chèn vào dưới cuối bài viết:



Để chèn vào vị trí như trên, làm như sau: Tìm đến đoạn mã dạng na ná như sau:

<div class='post-body entry-content'>
<p><data:post.body/></p>
<div style='clear: both;'/>
</div>


(tại sao lại na ná? Vì có thể bạn đã chèn các link read more nên code có thể không còn nguyên vẹn như trước nữa)

và chèn đoạn mã này vào ngay dưới thẻ đóng /DIV cuối:

<b:if cond='data:blog.pageType == "item"'>
<p class='ads'>

ABC

</p>
</b:if>

3.Float trái (dồn trái): quảng cáo hiện ngang với text nhưng dồn về bên trái.
Cách chèn này tiện lợi với các mẫu cỡ vuông hoặc không quá chênh lệch dài rộng.



Cách chèn: làm y chang bước 1, nhưng thêm code màu đỏ ( style='float:left' )vào như sau:

<b:if cond='data:blog.pageType == "item"'>
<p class='ads' style='float:left'>

ABC

</p>
</b:if>

4.Float phải:



Cách chèn: làm y chang bước 1, nhưng thêm code màu đỏ ( style='float:right' )vào như sau:

<b:if cond='data:blog.pageType == "item"'>
<p class='ads' style='float:right'>

ABC

</p>
</b:if>

Còn một số thủ thuật chèn quảng cáo có điều kiện như "không hiện quảng cáo ở trang chủ", "đổi ngẫu nhiên giữa 2 quảng cáo",... nhưng có lẽ phải trình bày ở 1 dịp khác. Chúc bạn chèn thành công quảng cáo vào blog của mình.

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/AVvXsEi67jidlM22Bnz_FjwRluJTk-Qj-xLWZ1Wa6aCelgjm3ZJHMlWBmP321u41cLu4W6x2CpdFZZ46TlCKOnUWL6eFQcu9bkyQ4L3iBmzcrkdgkVsKUU1CY6n_AJp7mSFu-6Y8z0Hvwim02pE/") 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/AVvXsEhIhcq806IYSeJfqCJFZLYgQl0TwhMZq0QvFTXNVPEm2WVvdzr8TfulXogsdWvj4qKgfKrsH9Hxk_JtCZ2DSrm3gGh5YXoJkn5WZ94eKLfSR6DsTOf3qVmzTfEduPAEViM6xi3FsXlvql0/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/AVvXsEhIhcq806IYSeJfqCJFZLYgQl0TwhMZq0QvFTXNVPEm2WVvdzr8TfulXogsdWvj4qKgfKrsH9Hxk_JtCZ2DSrm3gGh5YXoJkn5WZ94eKLfSR6DsTOf3qVmzTfEduPAEViM6xi3FsXlvql0/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