Tiện ích Bài viết liên quan với hiệu ứng jQuery

Theo yêu cầu của bạn Tùng Lâm, khi bạn ấy lướt web mới phát hiện một tiện ích Bài viết liên quan có hiệu ứng jQuery khá đẹp tại trang Simplebloggertutorials.com và bạn ấy hỏi tôi có thể hướng dẫn thủ thuật này được không. Sau khi nghiên cứu, tôi nhận thấy thủ thuật này có sử dụng thư viện jQuery để tạo hiệu ứng và tiện ích được phát triển bởi Mike, một chuyên gia thiết kế web là admin của trang Moretechtips.com. Trang này có phát triển rất nhiều tiện ích liên quan đến Twitter sử dụng hiệu ứng jQuery. Bạn có thể khám phá thêm nếu thích các tiện ích của Mike.

Lưu ý tiện ích Bài viết liên quan ở đây có sử dụng jQuery (Related Posts with jQuery Effect Widget) nên ít nhiều cũng hơi nặng, bạn nên cân nhắc trước khi cài đặt cho blogspot của mình.

Bạn có thể xem Demo tại trang này hoặc khám phá thêm nhiều biến thể tại trang này.

Để cài đặt tiện ích này, bạn hãy thực hiện như sau.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates (nhớ backup Template trước khi thực hiện).

Đặt đoạn code sau đây vào trước dòng ]]</b:skin>.

#related-posts-widget{float:left;width:90%;font-size:11px;}
.related-posts-widget{min-height:130px;}
#related-posts-widget h2{display:block;padding:2px 0 2px 5px;margin:0 0 .5em;color:#666;font-size:13px;text-transform:none;border-bottom:1px solid #09F;text-shadow:1px 1px 3px #CCC;}
.related-posts-widget ul.rpw strong{font-weight:lighter;}
#related-posts-widget ul.rpw{color:#333;text-align:left;}
#related-posts-widget ul.rpw li a, .bookmarks a{color:#444;font-size:11px;font-weight:bold;text-decoration:none;}
#related-posts-widget ul.rpw li a:hover{color:#ff8c00;}
#related-posts-widget ul.rpw li a:active{outline:0;position:relative;color:#09F;}
#related-posts-widget ul.rpw{list-style:none;margin:0;padding:0;}
#related-posts-widget ul.rpw li{margin:0;padding:6px 0;}

Bước 2. Đặt đoạn code sau đây vào trước thẻ </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script>
<script src='http://simplebloggertutorials.googlecode.com/files/jquery-effects.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$('#related-posts-widget').relatedPostsWidget({
max_posts:10
,posts_per_tag:10
,thumbs:0
,show_n:5
});
});
//]]>
</script>

Bước 3. Tìm một trong các thẻ sau đây,

<div class='post-footer'>

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

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

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

rồi đặt sau nó bằng dòng code bên dưới.

<div class='related' id='related-posts-widget'>loading..</div>

Lưu Template là OK.

More about →

Tiện ích Bài viết mới hơn và cũ hơn cùng chủ đề

Mấy bữa nay cận Tết Tân Mão rồi nên rất bận rộn. Mặc dù vậy mình vẫn dành thời gian để chia sẻ thủ thuật và giải đáp yêu cầu của bạn đọc. Quả thật có rất nhiều ý tưởng muốn hiện thực hóa nhưng thời gian thì thấm thoát thoi đưa. Nhân tiện nhắc đến vài bữa trước bạn Minh Quân cứ nằng nặc yêu cầu mình viết bài về thủ thuật tạo tiện ích Bài viết liên quan mới hơn và cũ hơn cùng chủ đề. Mình đồng ý dành thời gian viết bài. Nhưng cũng biết lúc trước blogger Anh Võ (vietguideweb.com) đã từng phát triển tiện ích dạng này và có nhiều trang giới thiệu lại thủ thuật này, tuy nhiên thành công không như mong đợi đối với blogspot tiếng Việt khi các bài viết được gán nhãn bằng tiếng Việt sẽ không hoạt động được.

Nếu áp dụng lại thủ thuật của Anh Võ cho blog của mình cũng như nhiều blog khác thì chẳng nhẽ phải chỉnh lại tên các nhãn sang tiếng Anh hoặc tiếng Việt không dấu hay sao. Mình cũng nghĩ nát óc vẫn chưa chỉnh được code của Anh Võ để tiện ích hoạt động tốt hơn. Chợt nhớ có một bữa ghé thăm trang www.vietutd.blogspot.com có giới thiệu tiện ích Next Posts and Previous Posts. Mình tò mò thử nghiệm xem và nhận thấy tiện ích này hiển thị tốt với nhãn tiếng Việt. Thế là hình thành ngay ý tưởng điều chỉnh tiện ích này để biến nó thành tiện ích Bài viết mới hơn và cũ hơn cùng chủ đề (Newer and Older Related Posts) mà bạn thường thấy ở trang VnExpress.net.

Bạn có thể xem Demo.

Và dưới đây là hình minh họa.

Còn chờ gì nữa nào, chúng ta cùng cài đặt tiện ích này.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates. Nếu bạn đã từng cài đặt các tiện ích Bài viết liên quan kiểu khác thì nên tháo ra khỏi Template.

Đặt đoạn code sau đây vào sau dòng ]]></b:skin>.

<!--Related Posts Styled by Huynh Nhat Ha 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;}
#related-posts a{color:blue}
#related-posts a:hover{color:brown}
#related-posts ul{list-style-type:none;margin:0 0 0px 0;padding:0;text-decoration:none;font-size:12px;text-color:#000}
#related-posts ul li{display:block;/*background:url(&quot;http://img840.imageshack.us/img840/2004/rssqn.png&quot;) no-repeat 0 0;*/background:url(&quot;http://bit.ly/hjpshO&quot;) no-repeat 0 0;list-style-type:none;margin:0;padding-left:21px;line-height:1.5em;border-bottom:1px dotted #ccc}
</style>
</b:if>
<!--Related Posts Styled by Huynh Nhat Ha End-->

Bước 2. Tìm một trong các dòng dưới đây:

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

<div class='post-footer-line post-footer-line-2'/>

<div class='post-footer-line post-footer-line-3'/>

<div class='post-footer'>

Đặt trước nó bằng đoạn code bên dưới.

<!-- Related Posts Code Styled by Huynh Nhat Ha Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script language='javascript'>
// <![CDATA[
var maxnext = 5; // Chỉnh số 5 chỉ số bài viết mới hơn tối đa
var nexttitle = 'Bài viết mới hơn';
var maxprev = 8; // Chỉnh số 8 chỉ số bài viết cũ hơn tối đa
var prevtitle = 'Bài viết cũ hơn';
// ]]>
</script>
<script src='http://hacodeproject.googlecode.com/files/newer-older-related-posts.js' type='text/javascript'/>
<div id='related-posts'>
<div id='next-posts'/>
<b:loop values='data:post.labels' var='label'>
<script language='javascript'>
var vlabel = &quot;<data:label.name/>&quot;;
if (relateposturl.indexOf(&#39;?relatedlabel=&#39;)!=-1)
{nextlabel = (relatedlabel == vlabel) ? 0 : 1;}
if (nextlabel == 0)
{
var vtime = &quot;<data:post.timestampISO8601/>&quot;;
vtime = vtime.substring(0,19);
var srcurl = &quot;<data:blog.homepageUrl/>&quot;+ &quot;feeds/posts/default/-/&quot; + vlabel + &quot;?alt=json-in-script&amp;callback=next_results_labels&amp;max-results=999&quot;;
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, srcurl);
script.setAttribute(&#39;id&#39;, &#39;jsonScript&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;); document.documentElement.firstChild.appendChild(script);
nextlabel +=1;
}
</script>
</b:loop>
<div id='prev-posts'/>
<b:loop values='data:post.labels' var='label'>
<script language='javascript'>
var vlabel = &quot;<data:label.name/>&quot;;
if (relateposturl.indexOf(&#39;?relatedlabel=&#39;)!=-1)
{prevlabel = (relatedlabel == vlabel) ? 0 : 1;}
if (prevlabel == 0)
{
var vtime = &quot;<data:post.timestampISO8601/>&quot;;
vtime = vtime.substr(0,19);
var srcurl = &quot;<data:blog.homepageUrl/>&quot;+ &quot;feeds/posts/default/-/&quot; + vlabel + &quot;?alt=json-in-script&amp;callback=prev_results_labels&amp;max-results=999&quot;;
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, srcurl);
script.setAttribute(&#39;id&#39;, &#39;jsonScript&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;); document.documentElement.firstChild.appendChild(script);
prevlabel ++;
}
</script>
</b:loop>
</div>
</b:if>
<!-- Related Posts Code Styled by Huynh Nhat Ha End-->

Lưu Template là OK. Trong lúc gấp gáp để giải đáp cho bạn Minh Quân nóng lòng chờ đợi tiện ích này cho nên sẽ không tránh thiếu sót, hy vọng có thời gian mình sẽ phát triển thêm tiện ích này.

:55)

More about →

Tiện ích Bài viết liên quan có phân trang

Lấy cảm hứng từ tiện ích Bài viết liên quan có phân trang từ blog Hỗn tạp, tôi có điều chỉnh một số điểm và có hướng dẫn chi tiết hơn để giúp cho tiện ích Bài viết liên quan có phân trang (Related Posts with Navigation) trở nên hoàn thiện hơn.

Xem Demo.

Để cài đặt tiện ích này, bạn hãy thực hiện theo các bước sau đây.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Đặt đoạn code dưới đây vào trước thẻ </head>.

<!--Related Posts Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related-posts{float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px}
#related-posts .widget{margin-bottom:10px}
#related-posts .widget h2,#related-posts h2{height:25px;color:blue;font-size:15px;font-weight:bold;font-family:Arial,Tahoma,Times New Roman,serif;margin:0 4px 0;margin-top:4px;padding:0 0 5px}
#related-posts a{color:blue;text-decoration:none}
#related-posts a:hover{color:blue}
#related-posts ul{list-style-type:none;margin:0 0 0 0;padding:0;text-decoration:bold;font-size:13px;text-color:#000}
#related-posts ul li{display:block;background:url(&quot;http://bit.ly/hjpshO&quot;) no-repeat 0 0;list-style-type:none;margin:0;padding-top:0;padding-right:0;padding-bottom:1px;padding-left:21px;margin-bottom:5px;line-height:2em;border-bottom:1px dotted #ccc}
.related-posts-navi a{border:1px solid #36c;background:#fff;color:#36c;display:block;float:left;margin-right:10px;padding:2px 5px;text-decoration:none}
.related-posts-navi a:hover{background:#36c;color:#fff;text-decoration:none}
.related-posts-navi .related-posts-navi-selected{background:#36c;color:#fff}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery.noConflict();
</script>
</b:if>
<!--Related Posts Scripts and Styles End-->

Chú ý trong phần code ở trên, tôi thêm vào đoạn javascript được đánh dấu màu đỏ nhằm giúp cho thư viện jQuery không xung đột với các thư viện khác (nếu blog của bạn chứa các thư viện khác như Scriptaculous chẳng hạn), bởi vì nếu xảy ra sự xung đột thì chức năng phân trang sẽ không hoạt động được.

Bước 2. Tìm dòng <div class='post-footer-line post-footer-line-1'>
rồi đặt trước nó với đoạn code bên dưới.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='related-posts'/>
</b:if>

Bước 3. Tìm dòng <b:includable id='feedLinksBody' var='links'>
rồi đặt trước nó với đoạn code sau đây.

<b:includable id='related-posts' var='post'>

<div id='related-posts'>
<h2>Bài viết liên quan</h2>
<ul id='related-posts-list'/>
</div>
<script type='text/javascript'>
var relatedPostsConfig = {
maxPosts: 500,
perLabel: 100,
perPage: 7,
hiddenLabel: [&#39;Label 1&#39;, &#39;Label 2&#39;, &#39;Label 3&#39;]
};

function getRelatedPosts(json) {
var posts = [],
num = 0,
max = (relatedPostsConfig.maxPosts - relatedPostsConfig.count &gt; json.feed.entry.length) ? json.feed.entry.length : (relatedPostsConfig.maxPosts - relatedPostsConfig.count); // max number of entries can be loaded

if (max &lt;= 0) {
return;
}

for (var i = 0; i &lt; max; i++) {
entry = json.feed.entry[i];

posts[num] = {};
posts[num].title = entry.title.$t;
for (var j = 0; j &lt; entry.link.length; j++) {
if (entry.link[j].rel == &quot;alternate&quot;) {
posts[num].url = entry.link[j].href;
break
}
}
num++;
}

relatedPostsConfig.count += max;

for (i = 0; i &lt; num; i++) {
var li = document.createElement(&quot;li&quot;),
a = document.createElement(&quot;a&quot;);
a.href = posts[i].url;
a.title = posts[i].title;
a.appendChild(document.createTextNode(posts[i].title));
if (a.href != location.href) {
li.appendChild(a);
relatedPostsConfig.container.appendChild(li);
}
}
}

(function() {
var obj = {};
for(var i = 0; i &lt; relatedPostsConfig.hiddenLabel.length; i++) {
obj[relatedPostsConfig.hiddenLabel[i]] = &#39;&#39;;
}

relatedPostsConfig.count = 0;
relatedPostsConfig.container = document.getElementById(&quot;related-posts-list&quot;);
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
if (!(&#39;<data:label.name/>&#39; in obj)) {
document.write(&#39;&lt;script type=&quot;text/javascript&quot; src=&quot;/feeds/posts/summary/-/&#39;+&#39;<data:label.name/>&#39;+&#39;?alt=json-in-script&amp;callback=getRelatedPosts&amp;max-results=&#39;+relatedPostsConfig.perLabel+&#39;&quot;&gt;&lt;/&#39; + &#39;script&gt;&#39;);
}
</b:loop>
</b:loop>
})();

$(function(){
var pages = 1;
while ($(&#39;#related-posts-list &gt; li&#39;).length) {
var $ul = $(&#39;&lt;ul/&gt;&#39;).appendTo($(&#39;#related-posts&#39;));
$(&#39;#related-posts-list &gt; li:lt(&#39;+relatedPostsConfig.perPage+&#39;)&#39;).appendTo($ul);
pages++;
}
$(&#39;#related-posts &gt; ul:gt(1)&#39;).hide();
var $div = $(&#39;&lt;div class=&quot;related-posts-navi&quot;/&gt;&#39;).appendTo($(&#39;#related-posts&#39;));
for (var i = 1; i &lt; pages; i++) {
var $a = $(&#39;&lt;a id=&quot;related-posts-page-&#39; + i + &#39;&quot; href=&quot;#&quot;/&gt;&#39;).click(function(){
var id = $(this).attr(&#39;id&#39;).substr(19);
$(&#39;#related-posts &gt; ul&#39;).hide();
$(&#39;#related-posts &gt; ul:eq(&#39; + id + &#39;)&#39;).show();

// change class
$(&#39;.related-posts-navi &gt; a&#39;).removeClass(&#39;related-posts-navi-selected&#39;);
$(this).addClass(&#39;related-posts-navi-selected&#39;);
return false;
}).append(i).appendTo($div);
}
$(&#39;.related-posts-navi &gt; a:first&#39;).addClass(&#39;related-posts-navi-selected&#39;);
$(&#39;&lt;div style=&quot;clear:both&quot; /&gt;&#39;).appendTo($(&#39;#related-posts&#39;));
});
</script>
</b:includable>

Lưu Template là OK.

Chú ý: Trong đoạn code trên, bạn có thể thay đổi những tham số trong những dòng sau đây:

maxPosts: 500,
perLabel: 100,
perPage: 7,
hiddenLabel: [&#39;Label 1&#39;, &#39;Label 2&#39;, &#39;Label 3&#39;]

Trong đó:
- maxPosts: chỉ số lượng bài viết liên quan (tối đa) được hiển thị
- perLabel: chỉ số lượng bài viết liên quan (tối đa) tính theo mỗi label
- perPage: chỉ số lượng bài viết liên quan được liệt kê trong 1 trang
- hiddenLabel: danh sách các label không hiển thị, phân cách bằng dấu phẩy. hiddenLabel được dùng khi bài viết của bạn có nhiều label, trong đó có 1 số label đặc biệt mà bạn không muốn liệt kê các bài viết liên quan nằm trong đó (VD 'Thông báo', 'Tổng hợp', ...). Khi đó bạn chỉ cần liệt kê các label dạng này vào biến hiddenLabel là xong. Nếu muốn hiển thị tất cả các label (không ẩn label) nào thì khai báo: hiddenLabel: []

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

More about →

Tùy biến với tiện ích Bài viết liên quan của Linkwithin

Nói riêng về đề tài tiện ích Bài viết liên quan thôi cũng có nhiều vấn đề để bàn cãi. Có người thích tiện ích này chỉ hiển thị tiêu đề bài viết, có người thích hiển thị cả ảnh đại diện, lại có người thích tiện ích do LinkWithin tạo ra. Nói riêng về tiện ích Bài viết liên quan có ảnh đại diện của LinkWithin thì cũng có rất nhiều người không thích tiện ích này ở chỗ nó luôn hiển thị liên kết LinkWithin (quảng cáo về tiện ích này) và không thể điều chỉnh dòng chữ “You might also like:”.

Dù sao đi nữa tiện ích này cũng có những điểm mạnh về một phương diện nào đó và tất nhiên cũng có nhiều blogger thích nó. Phải chăng không có cách nào làm cho nó hoàn thiện hơn? Làm thế nào để nó được yêu thích hơn? Chỉ có một cách là làm biến mất những thứ “râu ria” khó chịu trên nó. :44)

Trăn trở vì lợi ích và đam mê của cộng đồng Blogger, tôi mày mò nghiên cứu và cuối cùng đành phải mạo phạm đến LinkWithin là dùng tiểu xảo để ẩn đi những thứ mà tôi gọi là “râu ria” trên tiện ích Bài viết liên quan có ảnh đại diện của LinkWithin (LinkWithin Related Posts with Thumbnails Widget).

Nếu bạn tin tưởng vào tiểu xảo của tôi thì hãy thực hiện theo các bước sau.

Bước 1. Cài đặt tiện ích LinkWithin.

Vào trang giới thiệu tiện ích LinkWithin.

Bạn điền thông tin cài đặt tiện ích lần lượt gồm địa chỉ email, địa chỉ blog, chọn Platform là Blogger, ở phần Width chọn 3 hoặc 4 hoặc 5 stories (chỉ số bài viết liên quan). Nếu blog bạn có màu nền tối thì chọn vào ô bên trái dòng My blog has light text on a dark background. Sau đó nhấn vào nút Get Widget để chuyển đến trang kế tiếp.

Tiếp tục click vào liên kết Install Widget chuyển sang cửa sổ mới. Tại cửa sổ mới này, chọn Blog muốn cài đặt tiện ích rồi nhấn nút Add Widget.

Tiếp đến bạn kéo tiện ích Linkwithin sao cho nó nằm dưới phần Blog Posts rồi nhấn vào nút Save để lưu lại.

Bước 2. Tùy biến tiện ích chỉ hiển thị ở các trang bài viết (item).

Vào Design >> Edit HTML chọn Expand Widget Templates.

Dùng tổ hợp phím Ctrl +F tìm từ khóa title='LinkWithin' rồi thêm vào đoạn code liên quan đến nó như sau (phần được đánh dấu màu đỏ là phần thêm vào, id của HTML sẽ khác đối với blog của bạn).

<b:widget id='HTML3' locked='false' title='LinkWithin' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:content/>
</b:if>
</b:includable>
</b:widget>

Bước 3. Ẩn dòng “You might also like:” và liên kết LinkWithin.

Đây là một minh họa hình ảnh tiện ích chưa được ẩn những phần nói trên.

Để ẩn đi những phần nói trên thì đặt đoạn code dưới đây vào sau dòng ]]></b:skin>.

<style type='text/css'>
#linkwithin_logolink_0, #linkwithin_text_0 {display:none!important; visibility: hidden!important;}
</style>

Bước 4. Thêm tiêu đề “Bài viết liên quan” cho tiện ích.

Tìm đến những dòng code như bên dưới và thêm vào những phần được đánh dấu màu đỏ.

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
<div style='padding-top:5px;color:blue;font-family:Arial;font-size:14px;'>
<h2>Bài viết liên quan</h2></div>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Sau đó Lưu Template là OK.

Chú ý: Bạn có thể không cần ẩn dòng “You might also like:” mà chỉ cần đổi tên nó thành “Bài viết liên quan:”.

Ở bước 3 (bỏ qua Bước 4), sử dụng đoạn code sau đây.

<style type='text/css'>
#linkwithin_logolink_0 {display:none!important; visibility: hidden!important;}
</style>

Sau đó vào Page Elements (Phần tử trang), chỉnh sửa tiện ích LinkWithin và đặt dòng code <script>linkwithin_text='Bài viết liên quan:'</script> vào trước đoạn code của tiện ích, đại khái như sau:

<script>linkwithin_text='Bài viết liên quan:'</script>
<script>
var linkwithin_site_id = 371236;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a>

Lúc này bạn có thể kiểm tra tác dụng của các tiểu xảo nói trên được rồi đấy. Nếu bạn thực hiện thành công thì hãy cho bài viết này một bình luận thật chân thành nhé. Tôi đáng nhận một lời khen tặng vì sự mạo phạm đến LinkWithin nhưng vì lợi ích của cộng đồng Blogger.

More about →

Tiện ích Bài viết liên quan có ảnh đại diện

Ngoài tiện ích Bài viết liên quan có ảnh đại diện của Linkwithin, còn có tiện ích tương tự hiển thị các liên kết đến các bài viết liên quan kèm ảnh đại diện cho một bài viết thuộc một nhãn nào đó. Tiện ích này giúp cho người đọc dễ dàng tìm đến bài viết theo chủ đề và cũng giúp cho blog của bạn đẹp hơn. :19)

Để cài đặt tiện ích này, bạn hãy thực hiện theo các bước sau.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Đặt đoạn code dưới đây vào trước thẻ </head>.

<!--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: blue;
font-family: Arial, Times New Roman, 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="http://bit.ly/hGWr7r";

var maxresults=5;

var splittercolor="#d4eaf2";
var relatedpoststitle="Bài viết liên quan";
</script>
<script src='http://hacodeproject.googlecode.com/files/relaposts-thumbnails.js' type='text/javascript'/>
</b:if>
<!--Related Posts with Thumbnails Scripts and Styles End-->

Bước 2. Tìm dòng <div class='post-footer-line post-footer-line-3'> và đặt đoạn trước nó với đoạn code dưới đâ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>
<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=8&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'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Bạn có thể điều chỉnh số bài viết tối đa được hiển thị bằng cách thay con số trong dòng code var maxresults=5;.

More about →

Tiện ích Bài viết liên quan ngẫu nhiên có ảnh đại diện

Chắn hẳn bạn từng biết qua tiện ích Bài viết liên quan có ảnh đại diện của Linkwithin. Tính năng của tiện ích này là hiển thị các bài viết liên quan đến một chủ đề với ảnh đại diện và tiêu đề bài viết. Tuy nhiên có một điểm mà mình cho rằng sẽ gây khó chịu cho những blogger khó tính nhất, đó là liên kết Linkwithin hiển thị ngay trên tiện ích. Đây được xem là một kiểu quảng cáo.

Bài viết này giới thiệu về tiện ích Bài viết liên quan ngẫu nhiên có ảnh đại diện (Random Related Posts with Thumbnail) hiển thị 4 bài viết ngẫu nhiên liên quan đến một nhãn cho bài viết, gồm ảnh đại diện, tiêu đề bài viết và phần tóm tắt bài viết. Điểm đặc biệt của tiện ích này là: nếu bài viết không có ảnh đại diện thì sẽ hiển thị ảnh đại diện mặc định, nếu bài viết không có ảnh đại diện mà thuộc các nhãn như Blogger, CSS, HTML, JavaScript, Jquery, Facebook, Twitter thì sẽ hiển thị ảnh đại diện mặc định được gán sẵn cho các nhãn đó.

Để cài đặt tiện ích này, bạn hãy thực hiện theo các bước sau đây.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.

Thêm đoạn code dưới đây vào trước thẻ </head>.

/* Random Related Posts with Thumbnails Widget by Huynh Nhat Ha */
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#rdrelatedposts {}
#rdrelatedposts h2{height:25px;color:blue;font-size:15px;font-weight:bold;font-family:Arial,Tahoma,Times New Roman,serif;margin:0px 4px 0;margin-top:4px;padding:0 0 5px}}
.relaposts {float:left;height:200px;margin:0 5px;overflow:hidden;padding:5px;text-align:center;width:130px;}
.relaposts:hover {background-image: -moz-linear-gradient(100% 100% 90deg, #303941, #101921);background-image: -webkit-gradient(linear, left bottom, left top, from(#303941)), to(#101921));filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF101921', EndColorStr='#FF303941');}
.relaposts a {color:#a52a2a !important;display:inline;font-family:Arial;font-size:12px;line-height:1;}
.relaposts img {-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;-moz-box-shadow: 0 0 20px #444 inset;-webkit-box-shadow:0 0 20px #444 inset;box-shadow:0 0 20px #444 inset;height:72px;padding:5px;width:72px;}
.relaposts h6 {display:table-cell;height: 5em;margin:5px 0 0;overflow:hidden;padding-bottom:2px;vertical-align:middle;width:130px;}
.relaposts p {border-bottom:1px dotted #555;border-top:1px dotted #555;color:#AAA;font-size:11px;height:4em;line-height:1;margin:5px 0 0;overflow:hidden;padding:5px 0;text-align:justify;}
</style>
<script src='http://hacodeproject.googlecode.com/files/randomrelaposts.js' type='text/javascript'/>
</b:if>

Nếu bạn rành về CSS thì có thể điều chỉnh một số thuộc tính CSS trong đoạn code ở trên. Chú ý đoạn code trên dùng cho Template có phần post-body với chiều rộng là 600px, tùy thuộc vào bề rộng của phần post-body trong Template của bạn mà chỉnh tham số width:130px trong dòng code được đánh dấu màu đỏ cho phù hợp.

Bạn nên tải về file randomrelaposts.js để upload lên host sử dụng cho blog của bạn để tránh hạn chế băng thông do dùng chung file.


Bước 2. Tìm dòng <div class='post-footer-line post-footer-line-3'> rồi đặt trước nó với toàn bộ đoạn code dưới đây.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='rdrelatedposts'>
<h2>Bài viết liên quan</h2>
<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=readpostlabels&amp;max-results=100&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>displayrelatedposts();</script>
</div>
<div style='clear:both;'></div>
</b:if>

Bước 3. Bước sau cùng nhưng không kém phần quan trọng là Lưu Template.Chúc bạn thành công nhé!

More about →

Tiện ích Bài viết liên quan trên Blogger

Thật tuyệt khi dưới mỗi bài viết trên blogger của bạn có link hiển thị các đường dẫn đến các bài viết có cùng chủ đề liên quan. Các bài viết có cùng chủ đề được chọn từ các bài viết khác trong cùng chủ đề, nhãn, cú pháp. Nhờ thủ thuật này thì độc giả trên blog của bạn không còn phải tốn thời gian nhiều khi tìm kiếm các bài viết liên quan.

Sau đây là hướng dẫn thao tác thủ thuật.

Bước 1: Đăng nhập vào Blogger của bạn. Đến Bố cục (Layout) – Chỉnh sửa HTML (Edit HTML). Nên back up Template hiện thời của bạn trước khi thay đổi. Chọn Mở rộng Mẫu tiện ích (Expand Widget Template).

Bước 2: Thêm đoạn mã bên dưới vào trước thẻ mở </head>.

<style type='text/css'>
#related-posts{float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;}
#related-posts .widget{margin-bottom:10px}
#related-posts .widget h2,#related-posts h2{height:25px;color:blue;font-size:15px;font-weight:bold;font-family:Arial,Georgia,Tahoma,Times New Roman,serif;margin:0px 4px 0;margin-top:4px;padding:0 0 5px}}
#related-posts a{color:blue}
#related-posts a:hover{color:blue}
#related-posts ul{list-style-type:none;margin:0 0 0px 0;padding:0px;text-decoration:bold;font-size:13px;text-color:#000}
#related-posts ul li{display:block; background : url("http://bit.ly/hqynkc") no-repeat 0 0;list-style-type:none;margin:0;padding-top:0;padding-right:0;padding-bottom:1px;padding-left:21px;margin-bottom:5px;line-height:2em;border-bottom:1px dotted #ccc}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Bài viết liên quan&quot;;
</script>
<script src='http://hacodeproject.googlecode.com/files/relatedposts.js' type='text/javascript'/>

Chú ý: Bạn nên tải file hình rss.png và file relatedposts.js được đánh dấu màu xanh về rồi upload lên webhost của bạn để tránh hạn chế băng thông.

Bước 3: Tìm đoạn mã <div class='post-footer-line post-footer-line-3'>. Sau đó thêm đoạn mã sau đây vào dưới đoạn mã vừa tìm.

<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&amp;max-results=8&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=7;
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

Để thay đổi số bài viết tối đa được hiển thị trong mỗi nhãn, chủ đề, hãy thay đổi số theo ý muốn trong đoạn mã var max-results=7.

Lưu Template và bạn sẽ có kết quả như ý.

More about →