Saturday, September 1, 2012

Tạo “Bài viết liên quan” theo Categories cho Blogger



Người đọc truy cập blog của bạn đều có mong muốn có mục các bài, tin tức có liên quan đến chủ đề mà bài viết họ vừa đọc xong, chính vì thế thủ thuật tạo bài viết liên quan dưới đây là rất quan trọng đối với blog của bạn.Mức độ thực hiện tương đối đơn giản không quá khó khăn, các bạn thực hiện từng bước như sau:
1> Truy cập vào Layout l Edit HTML và chọn Expand Widget Templates trong Blog template của bạn.
Tìm (Ctrl – F) đoạn code: <data:post.body/>
2> Dán vào phía dưới <data:post.body/> đoạn code sau :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>
<!-- *****************Related Articles by Labels - Take Two****************** -->
<!--
Distributed by bloggecustom.net and modified by JackBook.com to make it easier to use.
1. Now, users don't need to change anything to use this widget. just copy and paste, and done!
2. The current article will also be listed, now it's no more.
-->
<div class='widget-content'>
<h3>Related Posts by Categories</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>

Đây là thủ thuật của Hoctro and JackBook.com

Hiển thị bài viết ngẫu nhiên Widget cho Blogger với Thumbnails

Cái Random Posts Gadget này hiển thị danh sách các bài posts một cách ngẫu nhiên trên Blog’s Sidebar (mình bỏ luôn vào content của blog cũng được, xem demo ở đây nhé). Sử dụng khá đơn giản như ở trong panel điều khiển ở dưới, hoàn toàn rất dễ dàng để phù hợp với nhu cầu của bản thân. Gadget này sẽ lấy các tham số theo styles của blog của bạn nhưng bạn cũng có thể tùy chỉnh nó theo ý thích của mình bàng cách nhập vào các thông số trên bang lựa chọn WYSIWYG.

random-posts-gadget 

Điểm qua các lựa chọn chính

Maximum Length of Post Title – độ dài hiển thị của title, phần dài hơn sẽ bị cắt đi.

Snippet Style – chọn xem là hiển thị thums hay tóm tắt nội dung hay là cả hai?

Snippet Thumbnail – nên chọn any thumbs


Chú ý:- Chọn “Site Feeds” set to Full. 

Thumbnail Dimensions – Size of the Thumbnail.

Summary Length - độ dài phần tóm tắt.

Post Meta Style – Nên chọn theo mặc định. Nếu muốn hiện ngày tháng ... thì chọn option tương ứng.

Font and Font Size – cái này thì rõ rồi,


Extra Styling – vị trí hiển thị thumbs

Border Color – màu của border tham khảo ở W3Schools -http://www.w3schools.com/html/html_colornames.asp để dễ lựa chọn hơn


Link Color and Text Color – Màu của link trên title và text.

Add The Gadget to your Blog

Xem demo của mình ở đây hoặc vào link gốc của Aneesh. http://www.blogger.com/add-gadget?url=http://bloggerplugins.org/1.xml

Nguồn: tutsvnn.tk

Tạo bài viết liên quan kèm thumbnail cho Blogger


related_posts_with_thumbnail 

Hiển thị link các bài viết liên quan kèm theo ảnh mô tả ở ngay dưới bài đăng sẽ giúp gia tăng page views của blog bạn. Người đọc sẽ dễ dàng tiếp cận với các bài viết cùng chủ đề, hay nói cách khác, tiện ích này sẽ khiến blog của bạn trông pro hơn. 

Sau đây là các bước cài đặt : 

1. Đăng nhập vào Blogger , vào Bố cục -> chỉnh sửa HTML, click chọn mục Mở rộng mẫu tiện ích. 

2. Tìm dòng </head> rồi chèn đoạn code sau vào ngay phía trên nó : 



<!--Related Posts with thumbnails Scripts and Styles Start-->
<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 src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End--> 



3. Tiếp tục tìm đến dòng :

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

hoặc (tùy vào mỗi template)

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

Ngay sau dòng trên ta chèn tiếp đoạn code này :
<!-- Related Posts with Thumbnails Code Start-->
<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>
<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_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End--> 

4. Bạn có thể điều chỉnh số bài liên quan bằng cách sửa lại giá trị :

var maxresults=5; 

Để thay đổi màu chữ thì bạn sửa lại phần code CSS.

Save lại và kiểm tra kết quả. Bạn có thể xem demo tại đây. Chúc thành công.

Các Blogger Không Được Phép Đặt Quảng Cáo Adsense Trên Các Trang Có Nội Dung Sao Chép



Vấn đề này không phải là mới mẻ gì nhưng cũng ít được Google đề cập trên blog của mình. Có thể đây là vấn đề nhạy cảm hoặc có thể luật bản quyền và sở hữu trí tuệ chưa thực sự có hiệu quả tại nhiều nước như Việt Nam. Nếu như làm quyết liệt thì cũng có thể Google sẽ mất đi một nguồn thu lớn từ các blogger này. Nhưng không phải như thế mà Google dung túng cho tình trạng copy ồ ạt nhằm làm nhiễu hệ thống internet vốn đang bị Google thâu tóm.
Theo thông báo mà Google vừa phát đi trên Adsense Blog thì tất cả các chương trình của Google đều tuân thủ nghiêm ngặt các quy định về điều luật bản quyền số DMCA (Digital Millennium Copyright Act) và mọi vi phạm của blogger đều bị xử lý tùy theo mức độ nặng nhẹ khác nhau. Mức độ thì không ai biết, chỉ phụ thuộc vào may mắn mà thôi.
Tại sao nhiều trang copy bài viết từ trang khác vẫn thản nhiên đặt quảng cáo của Google Adsense mà Google không trừng phạt hay có bất kỳ một động thái nào? Đây chẳng qua là do nguồn lực của Google chưa đủ mạnh và cũng không thể scan từng blog/site để xem họ có vi phạm hay không. Google và các site lớn vẫn chủ yếu dựa vào công cụ report tool của mình, nhằm khuyến khích người dùng báo cáo là nội dung của họ bị copy hay sao chép trên blog nào có đặt adsense thì Google sẽ kiểm tra và có các hành động phù hợp như ban domain, disable account hoặc không index nếu như nghiêm trọng…..
Chính vì Google khuyến khích người dùng công cụ báo cáo nên nhiều blogger đã bị khóa tài khoản oan, hơn thế nữa những người dùng blogspot còn bị phạt nặng khi bị khóa luôn blog và bị liệt vào dạng spam list. Vì thế, các bạn blogger chơi Adsense khi quyết định copy cái gì thì nên hỏi trước chủ nhân nếu không gặp phải ông nào khó tính, không thông báo trước mà report cho Google ngay là mệt lắm.
Liên quan đến các blog sử dụng full feed thì vẫn chưa thấy đề cập nhưng thiết nghĩ đây cũng là một dạng copyright bị vi phạm bởi bản chất của feed là để đọc tin dạng ngắn hoặc dài hoặc online hoặc offline chứ không có nghĩa là sử dụng nó như của mình. Hy vọng Google sẽ có thông báo rõ ràng về vấn đề này để anh em chúng ta biết mà lo liệu.
Các blogger cũng nên cảnh giác và cũng nên thể hiện tỉnh thần đoàn kết là đừng report nếu như người đó vi phạm không đến mức nghiêm trọng quá. Chúng ta hãy thông báo để họ rút kinh nghiệm trước đã chứ đừng nên tàn nhẫn mà báo cáo cho Google khi chúng ta chưa biết chắc là họ hiểu rõ về DMCA hay chưa.

Đặt quảng cáo vào giữa bài viết cho Blogger

Có nhiều vị trí đặt quảng cáo trong phần bài viết của blog, như đã giới thiệu trong bài Chèn quảng cáo ads vào trong bài viết Blog. Tuy nhiên rất nhiều bạn hỏi cách thức đặt Ads vào phần giữa mỗi bài viết giống như một số Blog tham giá GA đã thực hiện được.

Trong bài viết này xin giới thiệu với các bạn cách đặt quảng cáo vào giữa mỗi bài viết trong Blog dành cho Blogger.
adsense_middle_post
Cách thực hiện:
  • Truy cập vào Blogger:
Truy cập vào Blogger Dashboard > Layout > Edit Html > Check vào ô chọn “Expand Widgets”
  • Chỉnh sửa Code trong Edit HTML:
Tìm (Press Ctrl + F) đoạn code: <data:post.body/>
Và thay chúng bằng đoạn code dưới:

<div expr:id='"aim1" + data:post.id'></div>
<div style="clear:both; margin:10px 0">
<!-- Chèn mã quảng cáo vào đây -->
</div>
<div expr:id='"aim2" + data:post.id'>
<data:post.body/>
</div>
<script type="text/javascript">
var obj0=document.getElementById("aim1<data:post.id/>");
var obj1=document.getElementById("aim2<data:post.id/>");
var s=obj1.innerHTML;
var r=s.search(/\x3C!-- adsense --\x3E/igm);
if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
</script>

Bạn chèn đoạn mã quảng cáo thay cho dòng <!-- Chèn mã quảng cáo vào đây --> và lưu mẫu.
  • Các thực hiện:
Bây giờ mỗi khi soạn bài viết, khi viết (soạn thảo) tới khoảng giữa bài bạn muốn hiển thị quảng cáo thì chèn đoạn code dưới vào:
<!-- adsense -->

và tiếp tục viết tiếp bài.
Khi đăng bài viết bạn sẽ thấy quảng cáo hiển thị ngay dưới đoạn bạn đã chèn mã: <!-- adsense --> vào.
Chúc các bạn thành công !!!

Xóa phần “Hiển thị các bài đăng có nhãn …”


Khi thiết kế blog trên Blogger, mỗi khi sử dụng liên kết đến các nhãn (label), việc kích chuột vào liên kết nhãn thường dẫn đến một trang mà ở đầu trang xuất hiện một dòng hiển thị trạng thái báo kết quả các bài viết thuộc nhãn đó với nội dung “Hiển thị các bài đăng có nhãn … Hiển thị tất cả bài đăng.” Đặc điểm này dường như làm mất đi vẻ hấp dẫn của một blog chuyên nghiệp.

Sau đây tôi sẽ hướng dẫn một thủ thuật đơn giản để loại bỏ trạng thái này.
Bước 1: Vào Bố cục (Layout) - Chỉnh sửa HTML (Edit HTML). Bạn cần backup Template của mình trước khi chỉnh sửa. Chọn Mở rộng Mẫu tiện ích (Expand Widget Templates). Sau đó tìm đoạn mã dưới đây:

<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts'>
<b:includable id='status-message'> <== Bước 2 (2): Xóa dòng này
<b:if cond='data:navMessage'> <== Bước 2 (1): Xóa dòng này
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if> <== Bước 2 (1): Xóa dòng này
</b:includable> <== Bước 2 (2): Xóa dòng này 

Bước 2:
 Xóa một số đoạn mã riêng biệt theo 2 hướng dẫn:
(1) Trước tiên hãy xóa 2 phần code đánh dấu màu xanh, lưu Template rồi đăng xuất Blogger để xem kết quả trên blog của bạn.
(2) Nếu bước 2 (1) không thành công thì do thiết kế Template của bạn có lỗi gì đó. Lúc này hãy thực hiện tiến trình tương tự từ Bước 1 sang Bước 2 rồi xóa luôn 2 phần code đánh dấu màu đỏ. Lưu Template rồi đăng xuất Blogger để xem kết quả trên blog của bạn.
(3) Chú ý một số Template mới lấy từ các nguồn cung cấp Blogger Template miễn phí thì phải tìm xóa đoạn code dưới đây:

<b:include data='top' name='status-message'/>

(4) Nếu các bước trên không thành công thì bạn có thể tham khảo cách này, bằng việc sử dụng thủ thuật CSS đơn giản: Chèn đoạn mã sau vào trước dòng ]]></b:skin>.


.status-msg-wrap{
display:none;
}


ST.

Tự động điều chỉnh kích thước ảnh trong Blogger

Để chúng tự động điều chỉnh hiển thị phù hợp với phần nội dung bài viết các bạn làm như sau:
Với chiều rộng của phần bài viết (Post section) là 500px.



Truy cập vào Blogger >> Layout >> Edit/Html

Chèn đoạn mã dưới:
.post img {
max-width:500px;
max-height:500px;
min-width:200px;
min-height:200px;
padding : 10px;
clear: both;
}
vào trước tag ]]></b:skin>
Với đoạn mã bạn vừa thêm vào thì các bức ảnh có chiều rộng hoặc chiều cao lớn hơn 500px sẽ tự điều chỉnh về chiều rộng và chiều cao 500px, tương tự các bức ảnh có chiều rộng hoặc chiều cao nhỏ hơn 200px sẽ tụ động điều chỉnh về chiều rộng và chiều cao 200px.
Tuỳ thuộc vào chiều rộng của bài viết (Post sectôn) mà bạn thay đổi chiều rộng và chiều cao cho phù hợp
Nếu bạn muốn tất cả các hình ảnh hiển thị trong phần bài viết có kích thước cố định là 500PX x 400PX thì bạn chỉ cần thay thế đoạn code đã hướng dẫn ở trên bằng:
.post img {
width:500px;
height:400px;
padding:10px;
}
Giờ đây các hình ảnh hiển thị trên Blog của bạn có kích thước cố định là chiều rộng 500PX và chiều cao 400PX.
Nếu hình ảnh hiển thị không như ý hoặc không chính xác thì bạn tìm tag .post img trong Blogger >> Layout>> Edit/Html và chỉnh sửa chúng.