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

Thứ Ba, 7 tháng 12, 2021

Khắc phục lỗi The widget settings in widget with id PageList1 is not valid. Page title is invalid.

 Khắc phục lỗi The widget settings in widget with id <b>PageList1</b> is not valid. Page title is invalid.


Đầu tiên bạn vào phần chủ đền đến chỉnh sửa HTML


Ở phần chỉnh sửa HTML bạn chọn 


Như ở phần bên dưới


Giờ lưu lại là xong. Chúc bạn thành công!

Khắc phục The widget settings in widget with id <b>PageList1</b> is not valid. Page title is invalid.

Lỗi The widget settings in widget with id <b>PageList1</b> is not valid. Page title is invalid.

sửa lỗi The widget settings in widget with id <b>PageList1</b> is not valid. Page title is invalid.

khắc phục lỗi The widget settings in widget with id <b>PageList1</b> is not valid. Page title is invalid.

The widget settings in widget with id <b>PageList1</b> is not valid. Page title is invalid.

The widget settings in widget with id <b>PageList1</b> is not valid. Page title is invalid.

Thứ Ba, 9 tháng 4, 2013

Hướng dẫn tạo blog trên nền tảng Blogspot

Blog là nơi cho phép bạn tạo nên tiếng nói của riêng mình đến với cộng đồng hoặc để bạn chia sẻ những kiến thức bổ ích giúp cho cộng đồng ngày càng phát triển hay là bạn có thể kiếm tiền trên mạng từ blog khi blog có được người đọc và lượng view ổn định. 

Hiện nay, Blogger thành công trên thế giới nhiều vô số kể, trung bình mỗi tháng thu nhập của họ là $1000. Bạn cũng đang muốn kiếm tiền trên mạng để có được thu nhập thụ động hằng tháng thì đừng ngồi đó chỉ biết suy nghĩ hãy hành động. Nếu bạn không hành động thì dù một cent bạn cũng chẳng kiếm được chứ đừng nói là $1000. 

Ngay bây giờ hãy bắt tay tạo cho mình một trang blog cá nhân. Có rất nhiều nền tảng tạo blog miễn phí để bạn chọn, ví dụ: Blogspot, Wordpress, hoặc là Yahoo Blog. Nhưng mình khuyên bạn là nên dùng Blogspot vì nó là đứa con của Google, sẽ có lợi thế hơn các nền tảng khác trong việc bạn SEO cho blog. Sau đây là bài viết hướng dẫn tạo blog trên nền tảng Blogspot.

1. Đăng ký một tài khoản Gmail

Blogspot là một sản phẩm của ông Google vì thế để tạo blog bạn cần phải có một tài khoản Gmail. Việc đăng ký cũng hoàn toàn đơn giản như bạn đăng ký yahoo mail nên blogvoitui sẽ không đề cập cách đăng ký như thế nào tại đây. Bạn hoàn toàn có thể làm được.

2. Hướng dẫn tạo Blog

Sau khi tạo được cho mình một tài khoản gmail ưng ý thì bạn hãy truy cập vào Blogger, đăng nhập với tài khoản gmail vừa tạo bạn sẽ nhìn thấy được giao diện Blogspot như thế này:
- Ngay bên góc phải giao diện bạn nên chọn Tiếng Việt cho tiện việc sử dụng sau này.
- Chọn Blog mới để bắt đầu cấu hình một blog đơn giản.
Tại phần này có 3 việc cho bạn làm đó là: nhập tiêu đề blog bạn muốn hiển thị, điền địa chỉ url mong muốn và chọn một template cho blog (phần này sau này bạn có thể đổi lại bằng một template do bạn tự thiết kế hoặc một template miễn phí đẹp hơn giao diện cổ điển ban đầu). Rồi nhấn Tạo blog!.
- Hoàn thành bước tạo blog là bạn đã có một blog cho riêng mình rồi đó. Giờ thì hãy bắt đầu đăng bài viết trên blog đi nhé. Chúc bạn thành công!

Thứ Năm, 4 tháng 10, 2012

Tiện ích Popular Posts pro không dùng JS

Thêm 1 style mới cho tiện ích bài đăng phổ biến, ưu điểm của style này là giúp tiết kiệm không gian, và không sử dụng javascript mà dùng các lệnh CSS3 để làm đẹp nên rất nhẹ.

Đầu tiên bạn chèn đoạn CSS sau phía trên ]]></b:skin> trong template:

#PopularPosts1{max-width:300px}
#PopularPosts1 dd{float:left;border-bottom:none;margin:8px 8px 0 8px;background:none;display:block;padding:0}
#PopularPosts1 img{-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;padding:4px;background: #eee;background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);-moz-box-shadow: 0 0 3px rgba(0,0,0,.7);box-shadow: 0 0 3px rgba(0,0,0,.7);}
#PopularPosts1 img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}

Tiếp theo, bạn tạo một tiện ích bài đăng phổ biến (nếu trong blog đã có tiện ích Popular Posts thì bỏ qua bước này), rồi chỉnh như sau:




Cuối cùng, bạn vào phần chỉnh sửa HTML, không click mở rộng tiện ích, tìm đoạn sau:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>

Thay thế nó bằng đoạn sau:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<dd>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<b:if cond='data:post.thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img expr:alt='data:post.title' expr:src='data:post.thumbnail' height='60px' width='60px'/></a>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' height='60px' src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png' width='60px'/></a>
</b:if>
</b:if>
</b:if>
</dd>
</b:loop>
</ul>
<div class='clear'/>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Lưu lại mẫu và kiểm tra kết quả.

Tiện ích random posts có hình ảnh load nhanh cho Blog

Một trong những tiện ích mình kiêng kỵ nhất là Random Posts, bởi tiện ích này tải toàn bộ dữ liệu từ feed về, không những làm chậm tốc độ cho blog mà còn không chính xác với blog có trên 500 bài viết - đây là con số bài viết tối đa được feed tải về.





Trong tiện ích mình giới thiệu sau đây thay vì 1 lần tải toàn bộ feed thì mình tải lần lượt theo số bài viết muốn hiển thị và chỉ lấy duy nhất 1 bài trong 1 lần tải. Trước đó sẽ có 1 lần tải dữ liệu đầu tiên từ feed để xác định tổng số bài viết hiện có, 1 hàm lấy ngẫu nhiên 5 số khác nhau từ 1 đến tổng số bài viết.
Ví dụ muốn hiển thị 5 bài viết ngẫu nhiên thì sẽ có 6 lần tải feed, mặc dù số lần lấy nhiều nhưng dung lượng 1 lần lấy lại nhỏ. Khối lượng chỉ tương đương với blog bạn có tổng số bài viết là 6, so sánh vậy để thấy nếu blog càng nhiều bài viết thì tiện ích này có tốc độ nhanh hơn kiểu tải toàn bộ feed rất nhiều lần.

DEMO

Bước 1: Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.

#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}



Bước 2: Thêm 1 widget HTML/Javascript tại nơi muốn hiển thị Random Posts. Hiệu chỉnhTiêu đề và dán đoạn mã dưới đây vào phần Nội dung rồi chọn LƯU.



<ul id='random-posts'> <script type='text/javaScript'> var rdp_numposts=5; var rdp_info='yes'; var rdp_comment='Nhận xét'; var rdp_disable='Tắt Nhận xét'; var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum}; </script> <script type='text/javaScript'> function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkleHVLSmBGC3VFCqP-a5_aDFOTUq7SECpU7yRQELnfB54z0FZ_6-iB0zS9cmc6oI2vHlZVA-uQIuGW_YERckx3cjiK1Cgl0L-g9HhKaO94VzkFT6uPo1vmbE6j9N4xoG3bzqc0zdGblU4/"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')}; </script> </ul>


Thay 5 bằng số bài viết bạn muốn hiển thị. Nếu không muốn hiển thị thông tin ngày tháng đăng bài và số nhận xét hãy thay yes thành ký tự bất kỳ khác.

Kích hoạt Comment phân cấp cho Blogspot

 Blogger đã chính thức cho ra mắt hệ thống comment phân cấp đúng với sự kỳ vọng và chờ đợi của anh em blogger.





Comment phân cấp của Blogspot gần như là mang đầy đủ những tính năng của Wordpress như: Trả lời, thu gọn, comment của tác giả được làm nổi bật. Tuy nhiên, họ chỉ cho phép Level 2 comment điều này có nghĩa là bạn không thể trả lời một comment trả lời.




KÍCH HOẠT COMMENT PHÂN CẤP

1. Thiết kế > Cài đặt > Bài đăng và nhận xét
2. Ở phần vị trí nhận xét bạn chọn "Được nhúng" như hình.



3. Cài đặt > Khác

4. Tại phần nguồn cấp dữ liệu trang web bạn chọn "Đầy đủ"




Các bạn hãy để lại ý kiến của mình về phần comment phân cấp của blogger nhé.

Cool Post rating widget for blogger

Another blog widget and this time with a post rating widget for blogger. Yeah the same post rating widget you can see after the post in my blog. This Post rating widget was developed by Js-kit and i am acting as a promoter, free promoter would be the best word.

This post rating blogger widget is cool as it has cool features. You can see how many votes your post has got and also can see the rating of the post in stars. Js-kit has indeed developed a good blogger widget. But this is not the only reason i am writing this post. I also want to inform about the exact place where to keep the code to get your widget just below the post like mine. The website gives the idea about code placing in another format which the ammature blogger like me find confusing. So here is the complete process.
Goto 'edit HTML' page from your "layout' and search for the following code:

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


Now place the code below just above the upper code.

<div class="js-kit-rating" title="" permalink=""></div>
<script src="http://js-kit.com/ratings.js"></script>

Chỉnh sữa title, description, keywords Blogspot

SEO (Search Engine Optimization) luôn là thử thách với rất nhiều blogger, ngay cả với những người chuyên nghiệp. Với blogspot thì các thủ thuật SEO lại càng ít. Mình cũng hay tìm đọc các bài viết trong lĩnh vực này tuy nhiên cũng khá lơ mơ. Viết blog cũng được vài năm, cũng đã áp dụng thử nhiều thủ thuật được cho là cải thiện khả năng SEO cho blogger và cũng có lúc choáng váng vì chỉ có một link duy nhất trong sitemap được index, mình có một chút ít kinh nghiệm muốn chia sẻ với các bạn.

1. Thay đổi dạng hiển thị tiêu đề trang (Page title)

Thông thường thì khi bạn mở một trang bài viết trên thanh tab sẽ hiển thị dạng Tiêu đề blog: Tiêu đề bài viết.

Theo nhiều ý kiến, để tốt cho SEO thì bạn nên thay đổi nó về dạng Tiêu đề bài viết: Tiêu đề blog.

Tìm tới đoạn code:

<title><data:blog.pageTitle/></title>

và thay thế nó bằng:

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

Khi xuất hiện trong trang tìm kiếm thì kết quả trông cũng đẹp hơn nhiều.

2. Thẻ meta keyword và description

Ngoài các thẻ meta để xác thực các dịch vụ như sitemap (Google, Yahoo, Bing), Alexa... và
<meta content='index' name='ROBOTS'/>
theo mình bạn chỉ cần thêm thẻ meta keyword và descriptio nhưng sẽ tùy biến một chút đoạn code trên cho phù hợp với blogger.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta name="description" content="Mô tả blog" />
<meta name="keywords" content="Các từ khóa chính" />
</b:if>

3. Hiển thị tiêu đề bài viết

Thông thường blogger thường sử dụng heading tag H2 hoặc H3 cho tiêu đề bài viết. Tuy nhiên theo khuyến cáo thì chúng ta nên sử dụng H1 để tốt cho SEO.

Vào phần Edit HTML, Expand Widget Templates, tìm với từ khóa 

<b:if cond='data:post.title'> để tìm tới đoạn code:
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Tùy vào template mà đoạn code trên có thể khác nhau đôi chút. Bạn thay H2 (hoặc H3) thành H1, tiếp tục tìm với từ khóa H2 (hoặc H3) để thay nó thành H1 trong phần qui định CSS của post-title.

Updated: Cách làm trên tuy đã giải quyết được vấn đề tag H1 cho tiêu đề bài viết nhưng nó chưa đủ. Thực ra chúng ta chỉ cần tag H1 cho tiêu đề ở trang bài viết và trang tĩnh (item_page và static_page) vì chúng ta cũng chỉ cần Google index những trang này. Nếu làm như trên thì sẽ gây trùng lặp tag H1 ở trang index và archive (một lỗi cũng không nghiêm trọng lắm nhưng để tốt nhất cho SEO thì chúng ta nên xử lý triệt để :D).

Bạn thay thế toàn bộ đoạn code bên trên bằng một đoạn code mới đầy đủ hơn:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
<b:else/>
<h1 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h1>
</b:if>
<b:else/>
<h1 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h1>
</b:if>

Giải thích: Ở đây mình sẽ sử dụng tag H3 (khác với tag H2 của sidebar và footer) cho tiêu đề ở trang không phải là item_page và static_page và tất nhiên khi có dạng những trang này nó được tag H1.

Tiếp theo chúng ta cần chỉnh sửa một chút trong phần CSS.
Tìm đến phần qui định CSS cho bài viết (nó có thể không giống hệt với template của bạn nhưng thường có dạng như vậy).

.post h3 {...}
.post h3 a, .post h3 a:visited {...}
.post h3 a:hover {...}


Nếu bạn nào đã thực hiện theo cách ban đầu mình giới thiệu thì nó sẽ là H1

Chúng ta sửa thành dạng sau:
.post h1, .post h3 {...}
.post h1 a, .post h1 a:visited, .post h3 a, .post h3 a:visited {...}
.post h1 a:hover, .post h3 a:hover {...}


Vậy là đã hoàn thành. Chúc thành công

Thứ Ba, 2 tháng 10, 2012

Kỹ thuật SEO cho Blogspot

SEO cho blogger là 1 công việc hết sức cần thiết vì đa số các blogger template chưa được tinh chỉnh on page SEO (xem bài viết trước) hợp lí,1 phần cũng do code của blogger không được thân thiện cho lắm.Bài viết này sẽ giúp các bạn tối ưu hóa template của mình đang xài những yếu tố SEO căn bản nhất.

 

Hiện nay đang thịnh hành thủ thuật SEO blogspot là All in one SEO pack for blogger đây là tên 1 plugin của WordPress.Thật ra cách thức hoạt động chỉ giống 80% vì các TIPs này không lấy meta Decription từ nội dung bài viết mà chỉ lấy từ Title+1 phần do mình set mặc định.


Về nội dung:SEO trong năm 2012 là năm thưởng cho các blogger với nội dung hay và chất lượng do đó bạn hãy dừng việc copy bài của người khác .Việc chọn giao diện cho SEO cũng phải cân nhắc
1.All in one SEO pack cho blogspot:
Tìm trong template:
<title><data:blog.pageTitle/></title>
Thay bằng

 <b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<meta content='Mô tả chính của blog' name='description'/>
<meta content='Từ khóa chính của blog' name='keywords'/>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName + ".
Mô tả chính của blog"' name='description'/>
<meta expr:content='data:blog.pageName + ",
Từ khóa chính của blog"' name='keywords'/>
</b:if>

2.Tạo liên kết bánh mì breadcrumb cho blogger



Thủ thuật seo blogspot (blogger) toàn diện Seo

Tại sao phải tạo thanh trạng thái Breadcrumb cho blogger ? Việc này hoàn toàn có lợi cho SEO blogger để giúp Google xác định nội dung liên quan trên trang web của bạn và SE có thể hiểu được cấu trúc trang web của bạn điều này bạn có thể thấy ngay trên SERPs(kết quả tìm kiếm).
3.thêm nofollow cho các liên kết ra ngoài:



Mình xin trích tút này của hontap blog: hãy chèn đoạn code trước </body>

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">

$(function() {
var domain = 'http://domaincuaban.com';

// Them target="_blank" cho tat ca cac link
$('a').attr('target', '_blank');

// Them rel="nofollow" cho cac link den trang web khac (khong cung domain)
$('a:not([href^=' + domain + '])').attr('rel', 'nofollow');
});
</script>



Theo vietnamadword.com

Cách tạo và chèn Facebook Like Box vào Blogspot thành công!

Bạn là một tín đồ của Blogger và Bạn đang là thành viên tích cực trên Facebook? Bạn muốn chia sẻ những thông tin của mình đến tất cả bạn bè? Bạn muốn kết nối và chia sẻ cùng bạn bè trên cộng đồng mạng?


Hiện nay, Facebook cung cấp rất nhiều công cụ để bạn có thể dễ dàng chia sẻ những bài viết, ứng dụng của bạn từ Blog lên Facebook và ngược lại. Những công cụ này đã và đang rất phổ biến và được nhiều Blogger sử dụng để thu hút sự quan tâm của bạn bè trên Facebook, hướng họ đến với Blog của mình.

Một trong những công cụ mà Facebook cung cấp là “Like Box”. Like Box như một trang Facebook thu nhỏ. Trong đó thể hiện Fans Page và những bài đăng trên trang Facebook riêng của bạn. Khi chèn Like Box vào Blog, bạn bè của bạn có thể xem nhanh nội dung trang Facebook của bạn và họ có thể kết nối để chia sẻ với bạn thông qua nút “Like” (thích) ngay phía trên hộp thoại.

Để tạo nút Like Box cho Blog, trước tiên bạn cần có một tài khoản trên Facebook và bạn cần tạo trang Facebook riêng .

Sau khi đã có tài khoản và trang Facebook riêng, bạn vào trang http://developers.facebook.com/docs/reference/plugins/like-box để bắt đầu.

Bạn chọn vào Like Box trong danh sách Plugin




Trang chủ sẽ xuất hiện như hình bên dưới





Tiếp theo, bạn vào trang Facebook riêng copy link của trang.

VD:https://www.facebook.com/pages/Blog-Điện-Tử-Tin-Học/154690947910240





Dán link vừa copy vào “Facebook Page ID” như trong hình bên dưới, hộp box sẽ thể hiện mẫu để bạn xem trước như trong hình:






Bạn muốn xóa header bài mới up thì nhấn vào

Nhấn “Get code” để tạo code. Facebook tự tạo mã code để bạn chèn vào Blog. nhưng blogspot chỉ chấp nhận IFrame chip cũng mới thử hì hục mãi mới hiểu..^^






Copy đoạn code trên vào đưa vào Blogspot. Để đưa vào Blogspot, bạn cần đăng nhập vào Blogger, chọn “Thiết kế”




Chọn “Thêm tiện ích”




Chọn tiện ích “HTML/ Javascrip” trong các tiện ích Blogspot cung cấp sẵn




Dán đoạn code vừa copy vào phần “Nội dung”




Lưu những thay đổi và vào Blog để xem kết quả.





Chúc bạn thành công!

Thứ Tư, 19 tháng 9, 2012

ĐƯA GOOGLE TALK VÀO BLOGSPOT

Google Talk là một trong những công cụ chat phổ biến nhất hiện nay. Tiện ích Google Talk trước đây là một addon trên Gmail và nay đã được Google tích hợp thành một tiện ích cho Blogger. Tiện ích Google Talk (Google Talk Gadget) giúp bạn dễ dàng gửi tin nhắn, chuyển file tài liệu, gọi điện Internet (qua người dùng Google Talk khác) và để lại tin nhắn thoại. Ngoài ra, nếu bạn dán một đường dẫn (URL) trên Picasa Web hay YouTube vào khu vực chat thì tiện ích cũng cho bạn xem trước về hình ảnh và video đó.

Bạn có thể xem Demo. Thử đăng nhập bằng tài khoản Google Talk của bạn (hoặc nếu chưa có thì bắt đầu đăng ký) và bắt đầu chat với bạn bè của bạn đi nào.

Cài đặt tiện ích này cũng khá đơn giản. Đăng nhập Blogger, vào Design >> Page Elements. Trên phần sidebar hoặc lowerbar, thêm một tiện ích HTML/JavaScript và đặt đoạn code dưới đây vào phần Nội dung của tiện ích.


Thứ Hai, 20 tháng 8, 2012

Chèn comment của facebook vào blogspot

Facebook đã trở nên phổ biến và quen thuộc mỗi khi chúng ta muốn lên đây để ... "chém gió". Và hôm nay mình sẽ hướng dẫn cho các bạn đem cái công cụ "chém gió" này vào blog của các bạn. Với việc thay thế comment của blogspot bằng comment của facebook hy vọng blog của các bạn sẽ sôi động hơn.


Có thể nói thủ thuật chèn comment của facebook vào mỗi bài viết blogspot cũng không mới lạ gì, 1 số blog thủ thuật nước ngoài đã đăng tải rồi (các bạn có thể vào google search với từ khóa facebook comments for blogger là có kết quả ngay). Tuy nhiên phải nói là cách thực hiện nó cũng khá phức tạp. Ngay cả mình cũng chưa thực hiện thành công khi làm theo các bước hướng dẫn. Có lần mình đã cố thử vào trang http://developers.facebook.com/setup/ mà không được, không biết có phải facebook hạn chế đối với user ở Viện Nam ko nữa.


Và ở thủ thuật này, các bạn sẽ chỉ cần copy và paste code là xong, không cần phải thiết lập hay tạo App trên facebook.


Bước đầu tiên bạn phải làm là đóng comment của blogger lại. Các bước thực hiện như hình bên dưới :



- Save cài đặt lại.

Bước 2 : chèn code của thủ thuật vào template.

1. Vào phần thiết kế -> chỉnh sửa code HTML -> nhấp chọn mở rộng mẫu tiện ích.

2. Chèn đoạn code bên dưới vào trước thẻ đóng </head>


<script type='text/javascript'>
//<![CDATA[
var purl= location.href;
var fb_href = purl.substring(0,purl.indexOf(".html")+5);
var fbcm ='<div class="fb-comments" data-href="'+fb_href+'" data-num-posts="5" data-width="600"></div>';
//]]>
</script>

- data-width là độ rộng của comment box.

- data-num-posts là số comment được hiển thị (cũng chính là số bài reply trên 1 comment)

- data-href là để phân biệt từng comment box, mỗi địa chỉ data-href khác nhau sẽ cho 1 comment box khác nhau. và trong thủ thuật này data-href chính là link của mỗi bài viết.


3. Chèn đoạn code bên dưới vào sau thẻ <body>

<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = &quot;//connect.facebook.net/vi_VN/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>



4. Tìm đoạn code như bên dưới :

<b:include data='post' name='post'/>

5. Chèn ngay sau nó đoạn code bên dưới :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
document.write(fbcm);
</script>
</b:if>

6. Save template.


Chúc các bạn thành công.
DBS M05479
Quang Cao