Cách tạo các widget từ Widgeo.net cho Blogger-Blogspot

Cách tạo các widget từ Widgeo.net cho Blogger-Blogspot

 

Hiện trên Internet có rất nhiều trang cung cấp các tiện ích cho các blogger, trong đó http://widgeo.net là một trong các nhà cung cấp dịch vụ tiện ích widget cho các blogger hoàn toàn miễn phí và có những tiện ích rất đẹp và cực kỳ hấp dẫn.
Các bạn có thể chọn các tiện ích cực kỳ đẹp mắt, trong đó phải kể đến Geo Counter và Live+Counter. Với 2 dịch vụ này bạn có thể tạo cho mình các tiện ích về Số đểm khách viếng thăm với các giao điện đồ hoạ chuyên nghiệp như hình vẽ.

Để thực hiện điều này, đầu tiên bạn hãy click chọn hình hoạ tiện ích mà bạn yêu thích trong Step1, sau đó chuyển sang Step2 để điền đầy đủ các thông tin chi tiết về :

1. Start value (mặc định bằng 0): Nếu các bạn tạo số đếm từ đầu thì không nói, cứ để giá trị mặc định. Tuy nhiên với các Blơgweb đã sử dụng các dịch vụ widget khác để theo dõi số đếm từ truớc thì bạn có thể thay đổi giá trị mặc định bằng giá trị mà bạn đã có được từ dịch vụ theo dõi khác, chẳng hạn như từ Hitstart.com
2. Điều chỉnh giờ Timezone
3. Điền email của bạn
4. Điền tên webblog của bạn
5. Thể hiện thông điẹp “Title” cho blog của bạn.
Như vậy bạn đã thực hiện xong các bước theo yêu cầu, chỉ cần copy lại mã code để paster vào blog là xong.
Tuy nhiên có một số trường hơp không để ý nên đã không điền đầy đủ các thông tin trong Step 2 nên có thông báo lốngau:

Hãy điền đầy đủ thông tin bạn nhé. Bạn hãy làm và chiêm ngưỡng blog của mình với các widget do Wigeo cung cấp nhé. Ngoài ra còn có rất nhiều các tiện ích Flash khác bạn hãy tự mình khám phá nhé.
Chúc các bạn thành công

Chèn đoạn văn bản vào cuối bài đăng cho blogspot

Chèn đoạn văn bản vào cuối bài đăng cho blogspot

Ghé qua một số blog tôi thấy cuối bài đăng chèn thêm một đoạn văn bản mang nội dung cám ơn bạn đọc hay cảnh báo về bản quyền. Đoạn văn này có thể thêm dễ dàng vào mã nguồn theo hướng dẫn sau.

Đăng nhập Blogger, click trên Layout (Mẫu) -> Edit HTML (Chỉnh sửa HTML), đánh dấu Expand Widget Templates (Mở rộng tiện ích mẫu) và tìm vị trí <p><data:post.body/></p> (có thể dùng Ctrl + F).

Hướng dẫn 1. Blog không sử dụng "Đọc thêm":

Chỉ cần tạo một đoạn văn bản dán kế phía dưới code tìm thấy trên và lưu lại. Bạn có thể đặt đoạn văn này có định dạng, màu sắc và nằm giữa hai thẻ <p> và </p>.

Hướng dẫn 2. Blog sử dụng "Đọc thêm":
Code trong hướng dẫn sử dụng "Đọc thêm" như sau:

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>Đọc thêm!</a>
</b:if>

Bây giờ bạn sửa lại và bổ sung thêm phần màu đỏ:

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>Đọc thêm!</a>
<b:else/>
<p>Nội dung đoạn văn bản cuối bài đăng</p>
</b:if>

Ví dụ tôi đã đưa vào blog này (Bao gồm "Đọc tiếp ..." và đoạn văn bản):

<p><data:post.body/>
   <b:if cond='data:blog.pageType != "item"'>
   <p><a expr:href='data:post.url'><span style='font-weight:bold;'>Đọc tiếp ... </span></a></p>
   <b:else/>
   <p><div style='font-style: italic; text-align: justify;'>Cám ơn bạn đã ghé <a href='http://www.thuthuatblog.com' target='_blank'><span style='font-weight: bold;'>ThuThuatBlog.com</span></a>. Bạn có ý kiến thắc mắc hay bình luận gì về bài viết này vui lòng nhấn <span style='font-weight: bold;'>Post a Comment</span> phía cuối. Nếu muốn nhận bài viết mới qua email hãy đăng ký địa chỉ ở khung bên trái. Để ghé thăm lại, bạn có thể nhấn vào thực đơn <span style='font-weight: bold;'>Favorites</span> (Internet Explorer) hoặc <span style='font-weight: bold;'>Bookmark</span> (Mozilla Firefox) lưu lên trình duyệt hay <span style='font-weight: bold;'>Bookmark</span> kế dưới đây lưu lên các trang chia sẻ trực tuyến. Ngoài ra bạn có thể đọc bài viết bằng các công cụ đọc tin <a href='http://www.thuthuatblog.com/feeds/posts/default' target='_blank'><span style='font-weight: bold;'>Feed</span></a>. Tôi hy vọng bạn tìm thấy những thủ thuật thú vị từ trang này.</div></p>
   </b:if>
 </p>

Bạn có thể thấy hiển thị cuối mỗi bài viết trên blog này.

Chúng ta đang dùng "Đọc thêm" nhưng lại sử dụng theo Hướng dẫn 1 đoạn văn bản sẽ xuất hiện trên blog dù bài đăng chỉ là nội dung tóm tắt (phần đầu bài). Trong khi sử dụng Hướng dẫn 2 đoạn văn chỉ xuất hiện khi xem post đầy đủ.

Tiện lợi của hướng dẫn này giúp bạn chỉ cần thêm một lần, không phải mất công copy dán mỗi khi bài viết hoặc lưu sẵn vào Post Template (tìm thấy trên Settings -> Formatting). Ngoài ra sau này bạn cũng không cần phải vào từng post để sửa lại khi cần thay đổi nội dung đoạn văn bản cuối.

Dưới đây là một số mẫu bạn có thể sử dụng:

Mẫu 1:

Cám ơn bạn đã đọc, nếu bạn thấy hay hãy nhấn Favorites (Internet Explorer) hay Bookmarks (Firefox) để lưu trữ đường dẫn đến bài viết. Ngoài ra bạn cũng có thể đăng ký nhận bài viết mới bằng cách thêm địa chỉ email vào khung. Chúc bạn tìm được những bài viết hữu ích.

Mẫu 2:

Bạn vừa đọc xong bài viết, hãy lưu đường dẫn đến bài viết này bằng cách nhấn Favorites (Internet Explorer) hay Bookmarks (Firefox). Ngoài ra bạn cũng có thể đăng ký nhận bài viết mới bằng cách thêm địa chỉ email vào khung bên trái. Chúc bạn vui vẻ!

Mẫu 3:

Cám ơn bạn đã đọc bài viết, hãy lưu đường dẫn đến bài viết này bằng cách nhấn Favorites (Internet Explorer) hay Bookmarks (Firefox) và thường xuyên ghé thăm để đọc các bài cập nhật kế tiếp. Chúc bạn vui vẻ!

Mẫu 4:

Bạn vừa đọc xong bài viết, hãy nhấn Favorites (Internet Explorer) hay Bookmarks (Firefox) để lưu trữ và quay lại để đọc các bài cập nhật kế tiếp. Chúc bạn vui vẻ!
Theo thuthuatblog.com

Tạo tiện ích “Recent comment” pro mà đơn giản nhất.

Tiện ích “Recent Comment – Nhận xét mới nhất” đặt ở Sidebar hay Footer giúp bạn có thể nhanh chóng nhìn thấy nhận xét mới nhất được đăng tải tại blog  thay vì mất thời gian tìm chúng rất hữu ích. Có nhiều cách thực hiện, nhưng cách VnBlognet giới thiệu cho bạn sẽ đơn giản và dễ dàng hơn bao giờ hết.
Bạn chỉ cần copy và paste đoạn code được cung cấp bới http://www.howit.org như hướng dẫn dưới là xong. Chỉ đơn giản vậy sao?,
Đúng vậy, bạn chỉ cần thực hiện theo các bước:
1. Truy cập vào Blogger  > Layout  >  Page Elements và Add a Gadget
để thêm Gadget tại vị trí bạn muốn đặt tiện ích “Recent Comments”
2. Chọn Gadget “HTML/Javascript” và dán đoạn code sau vào đó:

<ul><script style="text/javascript">
function showrecentcomments(json) {
for (var i = 0; i < 10; i++) {
var entry = json.feed.entry[i];
var ctlink;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
ctlink = entry.link[k].href;
break;
}
}
ctlink = ctlink.replace("#", "#comment-");
var ptlink = ctlink.split("#");
ptlink = ptlink[0];
var txtlink = ptlink.split("/");
txtlink = txtlink[5];
txtlink = txtlink.split(".html");
txtlink = txtlink[0];
var pttitle = txtlink.replace(/-/g," ");
pttitle = pttitle.link(ptlink);
if ("content" in entry) {
var comment = entry.content.$t;}
else
if ("summary" in entry) {
var comment = entry.summary.$t;}
else var comment = "";
var re = /<\S[^>]*>>/g;
comment = comment.replace(re, "");
document.write('<li>');
document.write('<a href="' + ctlink + '">' + entry.author[0].name.$t + '</a>');
document.write('<br/>');
if (comment.length < 100) {
document.write(comment);
}
else
{
comment = comment.substring(0, 100);
var quoteEnd = comment.lastIndexOf(" ");
comment = comment.substring(0, quoteEnd);
document.write(comment + '...<a target="_blank" href="' + ctlink + '">[[Đọc tiếp]]</a>');
}
}
document.write('</li>');
}
</script>
<script src="http://sys345.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments">
</script></ul>

Bạn chỉ cần thay đổi dòng chữ sys345.blogspot.com thành địa chỉ site/blog của bạn là hoàn thành. Ngoài ra bạn có thể tùy biến số comment mới nhất sẽ hiển thị (code trên sẽ hiển thị 10 comment gần nhất) bằng cách thay đổi số 10 (đánh dấu màu đỏ) trên đoạn code trên.
Chúc các bạn thành công.
© Chú ý: Với các blog bạn mới đăng ký Fedburrner thì có thể sau một thời gian tiện ích này mới hoạt động do chưa index kịp dữ liệu comment.

Pre: Bạn có thể vào đây http://blogger-templates.blogspot.com/2007/03/recent-comments.html để thực hiện dễ dàng hơn !!!

Seo BlogSpot cách đổi hiển thị tiêu đề bài viết lên trước tên blog

Như các bạn thấy bình thường blogger hiển thị Title nhu hình dưới:

Như các bạn thấy, nếu hiển thị kiểu này sẽ không tốt cho SEO(Search Engine Optimization). Nhưng thật may mắn, blogger cho chúng ta fix lỗi trên một cách dễ dàng cho những ai dùng template dạng Layout đó là < data:blog.pageName/> tags
Bây giờ chúng ta tiến hành nhé:
1. Login vào blogger với tài khoản của bạn
2. Tiếp đến vào "Layout->Edit HTML"(No Need Expand Widget Templates)
3. Ctrl + F tìm code sau: < data:blog.pageName/>
Bình thường nó có dạng 

<head>
<b:include data='blog' name='all-head-content'/>
 <title><data:blog.pageTitle/></title>


Nếu bạn muốn chỉ hiện tiêu đề bài viết thì thay thế đoạn code vừa tìm được với đợn code sau:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

Nếu bạn muốn hiện cả tiieeu đề bài viết & nhan đề blog thì thay thế đoạn code vừa tìm được với đợn code sau:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> ~ <data:blog.title/></title>
</b:if>

Nếu muốn đổi cách hiển thị cho tất cả dạng link trong blogger gồm link search , link lable ....(2 code trên chỉ đổi link bài đăng)

<!-- seo title -->
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.title/> : Blog title</title>
<meta content='Blog description' name='Description'/>
<meta content='kewords, separated, by, commas ' name='Keywords'/>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<title><data:blog.title/> : Blog Title the same as above</title>
<meta content='Blog description the same as above' name='Description'/>
<meta content='keywords, the, same, as, above ' name='Keywords'/>
<b:else/>
<b:if cond='data:blog.pageType == "item"'><title><data:blog.pageName/> ~ <data:blog.title/></title>
<meta expr:content='data:blog.pageName' name='Description'/>
<meta expr:content='data:blog.pageName + data:blog.title +data:blog.pageTitle' name='Keywords'/>
<b:else/><title><data:blog.pageTitle/></title></b:if>
</b:if>
</b:if>
<!-- /seo title -->

4. Save template của bạn lại và nhìn lên thanh tiêu đề xem kết quả nhé, kết quả sẽ có dạng thế này:

   

Một số game cá nhân hóa ngộ nghĩnh cho Blog

Một số game cá nhân hóa ngộ nghĩnh cho Blog



Trước hết bạn chuẩn bị một tấm ảnh hiện rõ khuôn mặt của mình lưu sẵn trên máy tính.



Click vào đây truy cập trang làm việc. Kế đến chọn loại game mà bạn định dùng được liệt kê trên trang. Cách chơi của từng game được giải thích ở dưới.

Các bước thực hiện:

Bước 1. Nhập vào tên của bạn (Name) và nhấn Browse chọn ảnh lưu trên máy tính và nhấn Upload để đưa ảnh lên (Nhấp lên hình để xem ảnh kích thước lớn).



Bước 2. Khi ảnh được đưa lên, bạn dùng công cụ đánh dấu để xoay, điều chỉnh kích thước và vị trí khuôn mặt. Rê chuột vào dấu ô vuông hơi chếch dưới phải để điều chỉnh kích thước, vào giữa để di chuyển và vào ô tròn để xoay vòng. Công cụ đánh dấu sẽ cho kết quả hiển thị trước nằm bên trái trang. Click Done để hoàn tất.



Bước 3. Bạn chỉ cần copy đoạn code được đánh dấu màu xanh và dán vào blog mình.




Xem thêm hướng dẫn nếu chưa rõ cách đưa lên blog.

Ở đây có tất cả 6 games:

Pirate You: Hãy trở thành kẻ cướp biển và bắn đại bác để tìm báo vật đã mất của bạn. Game như hình minh họa phía trên.

Leprechaun You: Tìm may mắn? Trở thành yêu tinh và tìm tất cả 4 lá cỏ ba lá ảo thuật.



Cupid You: Tìm tình yêu. Hãy bay với mũi tên tình ái và tìm tất cả trái tim cho người yêu của bạn.


Whack -a- You: Hãy dùng búa đập vào những cái đầu trước khi hết giờ!


Space Ranger You: Đội chiếu mũ không gian và lái chiếc xe mặt trăng vượt qua những tảng đá mặt trăng nguy hiểm. Như một biệt kích không gian mới được tuyển chọn, mục tiêu của bạn là tìm ra đáy mặt trăng và chiến thắng trò chơi.


Super You: Bạn là con chim, là máy bay, là bạn! Với khả năng bay cao siêu và tầm nhìn như tin laser, sứ mệnh của bạn là phá hủy tên lửa và cứu thế giới!

Click vào đây truy cập trang làm việc. Kế đến chọn loại game mà bạn định dùng được liệt kê trên trang. Cách chơi của từng game được giải thích ở dưới.


Theo thuthuatblog

Tạo con trỏ chuột ngộ nghĩnh trên blog

Theo mặc định con trỏ chuột của máy tính chỉ là một mủi tên không hơn không kém. Bạn có thể tạo ra một con trỏ ngộ nghĩnh cho blog của mình. Khi một ai đó kéo chuột trên blog của bạn, con trỏ này sẽ hiện ra.



Để làm việc này bạn cần truy cập vào trang http://www.myspacecursor.net, bạn click chọn một trong những menu bên phải. Có rất nhiều kiểu con trỏ nên bạn cứ lựa chọn thoải mái.

Bạn click chọn một loại nào đó, trang bạn chọn hiện ra. Hãy copy một trong những đoạn mã mà bạn thấy trên giữa trang (xem hình dưới) vào Notepad (Start -> All Programs -> Accessories -> Notepad, Windows XP).



Đoạn mã bạn copy được sẽ như bên dưới (đây chỉ là ví dụ).

<style type="text/css">body {cursor: url(http://www.myspacecursor. net/angel/angel.ani); }</style><br /><a href="http://www.myspacecursor.net" title="Free Cursors">Free Cursors</a><a href="http://www.freelayoutsnow.com" title="Myspace Layouts">Myspace Layouts</a><a href="http://www.getmyspacecomments.com" title="Myspace Comments">Myspace Comments</a><br />

Cách chèn thứ 1:

Bây giờ hãy bỏ đoạn mã tính từ
đầu trở xuống. Còn lại:
<style type="text/css">body {cursor: url(http://www.myspacecursor.net/angel/angel.ani);}</style>


Bạn chép đoạn mã này vào Template (Mẫu) -> Edit HTML (Chỉnh sửa HTML), kéo thanh trượt xuống và paste phía trên (dùng Ctrl + F để tìm ) như hình minh họa.



Cách chèn thứ 2:

Bạn chỉ cần copy đoạn mã như thế này (nhớ phải chép chính xác nhé!)
cursor: url(http://www.myspacecursor.net/angel/angel.ani);


Sau đó cũng vào Edit HTML, kéo thanh trượt tìm body { và paste như hình.



Trong cả hai cách, sau khi dán xong thì click Save Template để lưu lại. Hãy click View Blog (Xem Blog) để biết kết quả. Chỉ hiển thị trên Internet Explorer!

Nếu bạn muốn dùng lâu dài, hãy lấy luôn biểu tượng con trỏ này bằng cách tải nó về theo link: http://www.myspacecursor.net/angel/angel.ani

Sau đó upload file cursor này lên GooglePages bằng tài khoản Google (cùng với blog của bạn hoặc kích hoạt được dùng nếu chưa làm việc đó) và lấy liên kết để thay cho liên kết http://www.myspacecursor.net/angel/angel.ani trong đoạn mã trên.

Chúc thành công!

Thêm Widget Recent Comment hỗ trợ Icon profile cho blogspot

Cách tạo 1 Recent Comment Widget (RCW) thì rất dễ và có nhiều cách. Nếu tạo một RCW đơn giản nhất là dùng Comment feed link kết hợp với tạo một Feed Widget, cách này vừa đơn giản vừa tùy biến các thành phần của RCW cũng đầy đủ. Tuy nhiên, nếu bạn chưa thỏa mãn thì có thể sử dụng code dưới đây: hỗ trợ hiện icon profile hoặc dạng danh sách.

Bạn xem 2 chế độ hiển thị của RCW:

- Dạng danh sách:





- Dạng có icon:




và dưới đây là code của RCW:


<script type="text/javascript">
var cm_mode = "icon";
var cm_num = 10;
var cm_desc = 100;
var blogID = "1193242412365517650";
var cm_icon = new Array();
cm_icon['blogger'] = "http://i284.photobucket.com/albums/ll6/anhvophoto/untitle3/blogger.gif";
cm_icon['openid'] = "http://i284.photobucket.com/albums/ll6/anhvophoto/untitle3/openid.gif";
cm_icon['livej'] = "http://i284.photobucket.com/albums/ll6/anhvophoto/untitle3/lj.gif";
cm_icon['wp'] = "http://i284.photobucket.com/albums/ll6/anhvophoto/untitle3/wp.gif";
cm_icon['typekey'] = "http://i284.photobucket.com/albums/ll6/anhvophoto/untitle3/typkey.gif";
cm_icon['aim'] = "http://i284.photobucket.com/albums/ll6/anhvophoto/untitle3/aim.gif";
cm_icon['anon'] = "http://i284.photobucket.com/albums/ll6/anhvophoto/untitle3/anon.gif";
</script>
<script type="text/javascript" src="http://www.freewebs.com/anhvo/blogger/recentcomment-with-icon-v10.js"></script>


Các tùy chọn:

cm_mode = "icon" - hiển thị RCW có icon. Nếu muốn hiện dạng danh sách, bạn có thể thay bằng cm_mode = "list"

cm_num = 10 - số comment muốn hiện

cm_desc = 100 - mỗi comment hiện 100 ký tự hay bao nhiêu ?

blogID = "1193242412365517650" - bạn cần thay 1193242412365517650 thành blogID của bạn. Nếu bạn không biết blogID của mình là bao nhiêu thì hãy đọc ở đây.

Ngoài ra còn các link hình ảnh bên dưới để dành cho các bạn thay icon theo ý thích. Tuy nhiên khuyến cáo là icon phải có kích cỡ nhỏ (16x16).

Cuối cùng là bạn cho vào widget HTML/JS hay bất cứ nơi nào mà bạn muốn hiển thị RCW.
Theo anh vo