Một phương pháp tương đối dễ dàng để tăng số lượng Page Views trên blog của bạn là thêm một danh sách các bài liên quan bên dưới mỗi bài viết. Điều này cung cấp cho độc giả nhiều thông tin liên quan hơn đến chủ đề mà họ đang theo dõi.
Đây là một tiện ích được sử dụng rất phổ biến, và nó cũng có rất nhiều “biến thể”. Hôm nay iTechPlus sẽ giới thiệu đến các bạn một số style được sử dụng phổ biến nhất trên các trang Web/Blog trong cũng như ngoài nước, nhằm cung cấp cho các bạn có nhiều lựa chọn hơn trong việc áp dụng vào Blog của mình.
A. Style 1 : Related Posts Widget for Blogger v1 ( BloggerPlugins )
1. Vào Thiết kế > Chỉnh sửa HTML > Tick chọn Mở rộng mẫu tiện ích
2. Chèn đoạn code bên dưới vào phía trên thẻ đóng </head>
<b:if cond='data:blog.pageType == "item"'>3. Tìm trong Template của bạn đoạn code tương tự như bên dưới :
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
}
#related-posts .widget h2, #related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#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:15px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4YJQOVdJfDGVp91P1cxCtomISDytMdfWPxxxdh9wAJFpVw3Vy8uBXIyMMyY8ZAgP1lZ6Ht3eU4V96bGGtrat9B5jMXDYKXZwqVPAAloIJumlYPTihN4OxK9yUcGbbGQYWDwOvQj651bQ/s200/greentickbullet.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}
</style>
<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-for-blogger.js' type='text/javascript'/>
</b:if>
<div class='post-footer-line post-footer-line-1'>hoặc
<p class='post-footer-line post-footer-line-1'>và ngay lập tức bên dưới nó chèn đoạn code sau :
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"' type='text/javascript'/></b:if></b:loop><a href='http://www.itechplus.info/2011/01/related-posts-bai-viet-lien-quan-cho.html'><img style="border: 0" alt="Related Posts Widget for Blogger" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>
<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>");
</script>
</div>
</b:if>
với var maxresults=5; là số bài viết sẽ hiển thị trong widget ( mặc định là 5 )
B. Style 2 : Related Posts Widget for Blogger with Thumbnails ( BloggerPlugins )
1. Vào Thiết kế > Chỉnh sửa HTML > Tick chọn Mở rộng mẫu tiện ích
2. Chèn đoạn code bên dưới vào phía trên thẻ đóng </head>
<b:if cond='data:blog.pageType == "item"'>3. Tìm trong Template của bạn đoạn code tương tự như bên dưới :
<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, “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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Gi2aT8exsBNkdblmdQ0AcVK82ivUHuilxmeXR3HyREF_Bfj7QJm6pzLC-bTwSntHTGp-XjKdtdPi0kCN7Fbhsd9cqJUmc7uIKD1vGG2wD0Zl3j7kwciS25mAPkm641AlOAy3orpkLdA/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'/>
</b:if>
<div class='post-footer-line post-footer-line-1'>hoặc
<p class='post-footer-line post-footer-line-1'>và ngay lập tức bên dưới nó chèn đoạn code sau :
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.itechplus.info/2011/01/related-posts-bai-viet-lien-quan-cho.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://www.itechplus.info/' ><img style="border: 0" alt="Kiến thức – Thủ thuật – Giải pháp công nghệ" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
4. Thay thế code màu đỏ theo ý bạn
5. Save Template.
C. Style 3 : Related Posts by Categories ( Jackbook )
1. Vào Thiết kế > Chỉnh sửa HTML > Tick chọn Mở rộng mẫu tiện ích
2. Tìm trong Template của bạn đoạn code sau :
<data:post.body/>hoặc
<p><data:post.body/></p>và ngay sau nó chèn đoạn code bên dưới :
<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<div class='widget-content'>
<h3>Related Posts by Categories</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
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 < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
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 = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>
3. Thay đổi code màu đỏ theo ý bạn, trong đó :
- maxNumberOfPostsPerLabel : số bài viết tối đa được hiển thị theo mỗi Label
- maxNumberOfLabels : số Label được hiển thị
D. Style 4 : Related Posts v2.0 by Anhvo
.jpg "Related Posts v2.0 by Anhvo")
1. Vào Thiết kế > Chỉnh sửa HTML > Tick chọn Mở rộng mẫu tiện ích
2. Tìm trong Template đoạn code tương tự như sau :
<div class='post-footer-line post-footer-line-3'/>hoặc
<div class='post-footer-line post-footer-line-2'/>hoặc
<div class='post-footer-line post-footer-line-1'/>
và chèn bên dưới nó đoạn code này :
<b:if cond='data:blog.pageType == "item"'>
<div id='post-labels-for-related' style='display:none'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if></div>
<div id='post-timestamp-for-related' style='display:none'><data:post.timestampISO8601/></div>
<style type='text/css'>
#related-posts-block {
margin:10px 5px 0 -20px;
font-size:12px;
color:#999999;
text-transform:none;
}
#related-posts-block #related-posts-loading-text{
font-size:18px;
color:#FF0033;
text-align:center;
}
#related-posts-block #related-newest-href {
margin:10px 5px;
}
#related-posts-block #related-newest-href ul{
list-style-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_jzn_dBlR3ooG2e79HbNaRkL7gf2GIDvhg-y3cM3SdUGAqwsz-TZtv4Cn-WXcNAs73J7AvktiaBOZArTjkdJm1EtB1Y_cy_A3790sk92Lp5c_zPUZU5etM3jYXHwgRvdU7fq1FjdJSwI/);
}
#related-posts-block #related-newest-href #related-newest-title {
font-size:16px;
margin:10px 5px
}
#related-posts-block #related-newest-href a{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#000000;
}
#related-posts-block #related-older-href {
margin:10px 5px;
}
#related-posts-block #related-older-href ul{
list-style-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_jzn_dBlR3ooG2e79HbNaRkL7gf2GIDvhg-y3cM3SdUGAqwsz-TZtv4Cn-WXcNAs73J7AvktiaBOZArTjkdJm1EtB1Y_cy_A3790sk92Lp5c_zPUZU5etM3jYXHwgRvdU7fq1FjdJSwI/);
}
#related-posts-block #related-older-href #related-older-title {
font-size:16px;
margin:10px 5px
}
#related-posts-block #related-older-href a{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:#000000;
}
</style>
<div id='related-posts-block'>
<div id='related-posts-loading-text'>Loading related posts... <img align='absmiddle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK3AhyFnQn3gKklCxu_FXlLjKOng1dHoYZS4odWgeamTp66kTvmMiILoRTgqE3D5UzgMt4dx1C5YFEbVKW1ddEnaP3JVR7hchZtcELlwkZH5NIcPDG3uOgTsaNAwmZnXg6CXtwaT3rEA0/'/></div>
<div id='related-newest-href'><div id='related-newest-title'/></div>
<div id='related-older-href'><div id='related-older-title'/></div>
</div>
</b:if>
3. Chèn đoạn code bên dưới lên trước thẻ đóng </body>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
var showdate = false;
var max_post = 12;
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
// Related posts script for Blogger
// version 2.0
// (C) Anhvo
// Homepage: vietwebguide.com
// Please dont remove this copyright when using or redistributing this code
function format(ptime){
return ptime.substr(0,19);
}
function formatdate(d){
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var m = parseInt(d.substring(5,7),10);
for(var j=0; j<month.length;j++){
if(m==month[j]){
m = month2[j]; break;
}
}
return d.substring(8,10) + "-" + m + "-" + d.substring(0,4);
}
function getRelatedNewestLinks(json){
var entry = json.feed.entry;
if(entry){
for(var k=0;k<entry.length;k++){
var li = document.createElement("li");
if(showdate){
li.innerHTML = "<a href='"+entry[k].link[4].href+"'>"+entry[k].title.$t+"</a>" + ' - <i>' + formatdate(entry[k].published.$t) +'</i>';
}
else {
li.innerHTML = "<a href='"+entry[k].link[4].href+"'>"+entry[k].title.$t+"</a>";
}
if(!checkRelaxLinks("related-newest-href",entry[k].link[4].href)){
document.getElementById("related-newest-href-ul1").appendChild(li);
document.getElementById("related-newest-title").innerHTML = "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs5pnud57HUcD7PM2BQVRJo90UOrnTZr3el1sqfo7D95TIRbwlc76wX7DcJSnBcnbMQqcVfLamz7u9H9NOu_SrfXhTx18Mu-IWybKP-OPvSC2W6HWBmoRLbxG46oEdTS0UhojZ4udB9YI/' width='347' height='21'>"
}
}
} else {
document.getElementById("related-older-title").innerHTML = "Không có bài nào mới hơn cùng chủ đề";
}
}
function getRelatedOlderLinks(json){
var entry = json.feed.entry;
if(entry){
for(var k=0;k<entry.length;k++){
var li = document.createElement("li");
if(showdate){
li.innerHTML = "<a href='"+entry[k].link[4].href+"'>"+entry[k].title.$t+"</a>" + ' - <i>' + formatdate(entry[k].published.$t) + '</i>';
}
else {
li.innerHTML = "<a href='"+entry[k].link[4].href+"'>"+entry[k].title.$t+"</a>";
}
if(!checkRelaxLinks("related-older-href",entry[k].link[4].href)){
document.getElementById("related-older-href-ul2").appendChild(li);
document.getElementById("related-older-title").innerHTML = "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzyWFEtjoQHIpUMWHlejVMFDwzBKfHoOJAc3TvBg4GrU1WuqGiqFdvR_cB5AM98ofNH8yfQ-O1flL6CaDDMm8nNETaLI4rQ4R3tH8RTSee_LvMlwjQg_WP9B8FawM9dLxfuE09T1qsGPA/' width='347' height='21'>"
}
}
} else {
document.getElementById("related-older-title").innerHTML = "Không có bài nào cũ hơn cùng chủ đề";
}
document.getElementById("related-posts-loading-text").style.display = "none";
}
function createRelatedJson(min_or_max,cRJ_label,fcn_callback,cRJ_max){
var script = document.createElement("script");
script.src = "/feeds/posts/summary/-/"+escape(cRJ_label)+"?orderby=published&max-results="+cRJ_max+"&published-"+min_or_max+"="+escape(format(document.getElementById("post-timestamp-for-related").innerHTML))+"&alt=json-in-script&callback="+fcn_callback;
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
}
function checkRelaxLinks(cid,clink){
var check = false;
var u = document.getElementById(cid);
var a = u.getElementsByTagName("a");
for(var i=0;i<a.length;i++){
if(a[i].href==clink){
check = true;
break;
}
}
var url = location.href.split(".html")[0]+".html";
if(clink==url) check = true;
return check;
}
function createRP(){
var postLabel = document.getElementById("post-labels-for-related").innerHTML.split(',');
var max_ = Math.round(max_post/postLabel.length);
var ul1 = document.createElement('ul');
ul1.id = 'related-newest-href-ul1';
document.getElementById('related-newest-href').appendChild(ul1);
for(var i=0; i<postLabel.length;i++){
createRelatedJson("min",postLabel[i],"getRelatedNewestLinks",max_);
}
var ul2 = document.createElement('ul');
ul2.id = 'related-older-href-ul2';
document.getElementById('related-older-href').appendChild(ul2);
for(var j=0; j<postLabel.length;j++){
createRelatedJson("max",postLabel[j],"getRelatedOlderLinks",max_);
}
}
createRP();
//]]>
</script>
</b:if>
Trong đoạn code trên :
- var showdate = false; : nếu muốn hiện thị ngày đăng thì thay false thành true
- var max_post = 12; : số bài viết tối đa hiển thị là 12 bài.
* Update : giới thiệu đến các bạn một style khác do Fandung bên phandung.blogspot.com phát triển với hiệu ứng hiển thị mô tả khi rê chuột.
E. Style 5 : Related Posts with Description Effect
1. Vào Thiết kế > Chỉnh sửa HTML > Tick 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>
<style type='text/css'>
.mota-desc{
position: relative;
z-index: 0;
text-decoration:none;
}
.mota-desc:hover{
background-color: transparent;
z-index: 50;
}
.mota-desc span{
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 1px solid #666;
visibility: hidden;
color: black;
text-decoration: none;
}
.mota-desc span img{
border-width: 0;
padding: 2px;
}
.mota-desc:hover span{
padding:5px;
visibility: visible;
top: 20px;
left:70px;
width:250px;
background:#ddd;
text-align: justify;
}
#related-posts {
padding-top:40px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "http://farm4.static.flickr.com/3635/3638008086_87c5d93e22_o.gif";
showRandomImg = true;
imgwidth = 60;
imgheight = 60;
fntsize = 12;
acolor = "#555";
aBold = true;
motacolor = "#f00";
text = "Nhận xét";
showPostDate = true;
summaryPost = 150;
summaryFontsize = 12;
summaryColor = "#000";
icon2 = " » ";
numposts = 5;
home_page = "http://itechplus.info/";
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrelatedposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = (showPostDate) ? '<i><font color="'+acolor+'"> - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";
posttitle = (aBold) ? "<b>"+posttitle+"</b>" : posttitle;
var trtd = '<img src="http://farm3.static.flickr.com/2426/3638176588_31366a6822_o.gif"/> <a class="mota-desc" href="'+posturl+'" style="color:'+acolor+'; font-size:'+fntsize+'px;">'+posttitle+'<span><div style="color:'+motacolor+';">'+posttitle+' </div>'+cmtext+ ' ' + daystr + ' <br/><img src="'+img[i]+'" style="float:left; border: #ccc 1px solid; padding:2px; margin-right:4px;" width="'+imgwidth+'" height="'+imgheight+'"/>'+icon2+removeHtmlTag(postcontent,summaryPost)+'...</span></a> <br/>';
document.write(trtd);
j++;
}
}
//]]>
</script>
Trong đoạn code trên :
- imgwidth = 60; , imgheight = 60; : kích thước ảnh thumbnail sẽ hiển thị trong phần mô tả
- fntsize = 12; : size chữ của tiêu đề bài viết
- acolor = "#555"; : màu của tiêu đề bài viết
- motacolor = "#f00"; : màu của tiêu đề bài viết trong phần mô tả
- summaryPost = 150; : số kí tự hiển thị trong phần mô tả bài viết
- summaryFontsize = 12; : size chữ của phần mô tả
- summaryColor = "#000"; : màu chữ của phần mô tả
- numposts = 5; : số bài viết sẽ hiển thị trong list các bài liên quan của mỗi nhãn. Chú ý: giá trị này phải chỉnh bằng với giá trị max-results=5 ở bước 3.
- home_page = "http://itechplus.info/"; : thay bằng địa chỉ URL của blog bạn
3. Tìm trong template dòng code sau :
<data:post.body/>
và ngay sau nó chèn đoạn code bên dưới :
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Bài viết liên quan : </b></font><br/>
<b:loop values='data:post.labels' var='label'><b>Nhãn : </b><font color='#FF0000'><data:label.name/></font><br/>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?max-results=5&orderby=published&alt=json-in-script&callback=showrelatedposts"' type='text/javascript'/>
</b:if>
</b:loop>
</div>
</b:if>
Chúc các bạn thành công !
iTechPlus ( tổng hợp )
Chủ đề liên quan :
Đăng ký nhận tin 
Đăng ký nhận tin qua 
;){kind=link}
Ý kiến bạn đọc [ 45 ]
Bây giờ tôi đã biết. Tại sao có người viết thủ thuật mình đọc hoài không hiểu, làm thì Code bị đụng lệnh mở lệnh đóng thiếu , nhưng thủ thuật nào của iTechplus tui điều làm chạy ngon lành. iTechPlus hướng dẫn rõ chi tiết lắm , Xin cám ơn...
Còn 1 dạng related post được chèn thẳng vào bài viết. Có thể dồn về 1 góc tương tự các trang báo điện tử,nhìn chung các thủ thuật trên cải thiện pageview rất nhiều .
À, tất cả các style mình giới thiệu là để hiển thị bên dưới mỗi bài viết đó chứ. Có thể nói đây là tiện ích không thể thiếu trên các Web\Blog.
à, do thấy có thêm thủ thuật chèn related ngay trong bài viết ( blog hieu89 tk đang ứng dụng thủ thuật này)Hướng dẫn ở Blog Fandung,bác xem qua nhé,nếu đc thì bổ sung thêm,file .js trên Blog FD "die" rồi nhưng em có lưu bản gốc
Cám ơn bạn vì thông tin này. Mình sẽ test nếu OK sẽ update cho bài viết. Thanks bạn !
đã đính kèm link .js trong bài hướng dẫn của FD
Thanks bạn. Nhưng file đó ở đâu mình không thấy (^_^)
Click vào tên "Thủ lĩnh IB" ở Comment trên ấy Comment nội dung : " đã đính kèm link .js trong bài hướng dẫn của FD "
Đó là file js để chạy tiện ích bài viết ngẫu nhiên mà bạn. Không phải file của thủ thuật rồi. Bạn gửi cho mình qua mail nhé !
Chỉ có mỗi File đó, em test thì thấy nó bắt tin liên quan,nhưng nếu post nào nhiều Label thì gom hết.
À mình hiểu rồi. Ý bạn là cái tiện ích bài viết ngẫu nhiên có cùng chủ đề với bài viết đang xem, hiển thị bên trong thân bài đăng đúng không ?
Thực ra thay vì để ở sidebar hoặc bên dưới bài viết, tác giả đã đặt nó cạnh tiêu đề bài đăng mà thôi.
Thực ra Style 1 cũng hiển thị những bài đăng cùng chủ đề + hiển thị ngẫu nhiên đó bạn.
Cái mới update ko bít pác test chưa chứ mình làm hoài vẫn ko thấy gì cả :(
Tất cả các thủ thuật Blogspot mà iTechPlus giới thiệu đến các bạn đều đã qua thử nghiệm kỹ. Vì vậy khi các bạn ứng dụng cho Blog của mình không được thì thử test trên blog khác xem thế nào nhé !
Search thấy có thủ thuật chèn quảng cáo như đối với các mã Google ads,...Có thể dồn "quảng cáo" về một góc,mình đã test và làm đc rồi. "Quảng cáo" ở đây chính là code related post ^^
Thật sự chèn ngay vào bào viết dễ gây phản cảm,làm phân tâm độc giả. =.=
@Thủ lĩnh IB Đúng như bạn nói, việc chèn vào vị trí gần hoặc bên dưới tiêu đề bài đăng có chăng nên đặt quảng cáo. Nhưng dù là đặt cái gì thì đứng trên phương diện người đọc, cũng có thể gây khó chịu và phân tâm.
Nhân đây cũng cảm ơn Thủ lĩnh IB, vì nhờ thắc mắc của bạn mà mình tìm được một Style mới khá hay. Thanks bạn !
Mình làm cái style 4 rồi mình xóa cái ảnh của bạn rồi bây giờ đó mình muốn làm các chữ Các bài mới nhất cùng chủ đề: hoặc không có bài đăng nào tô đậm lên làm sao giúp mình với , với lại làm sao đổi màu được màu chữ ở các link bài đăng
@Quân : bạn thêm dòng "font-weight:bold;" vào id "#related-older-title" trong code CSS để in đậm tiêu đề và thay dòng "color:#000000;" để thay màu liên kết thành màu khác.
cái style 5 sao chỉ hiện số bài mình cần những bài đằng sau thì nó ko hiện, vd như mình cần hiện 20 bài nó chỉ xuất hiện đúng 20 bài từ bài đầu tiên đến bài 20 còn những bài đằng sau thì ko thấy hiện ra ::d
Ôi, không hiểu câu hỏi của bạn::d Bạn cần hiện 20 bài thì nó đã hiện đúng 20 bài cho bạn rồi::a Còn muốn hiện giống như hình thì bài đó phải thuộc ít nhất 2 label mới được.::f
Có nghĩa là mình muốn tiện ích này hiển thị từ bài mình đang xem cho đến mấy bài khác để 20 bài mình cần, nhưng tiện ích dù mình xem ở bài đầu tiên hay bài cuối cùng thì nó chỉ hiển 20 bài từ bài đầu tiên cho đến bài 20, như thế mấy bài từ 21 về sau nó ko hiển thị :-b
À, đây là đặc điểm chung của các tiện ích "Bài viết liên quan". Tức là chỉ hiển thị quanh quẩn các bài viết được xuất bản ở thời điểm gần nhất so với bài đang xem. Nếu bạn không thích thì có thể sử dụng Style 1 - hiển thị ngẫu nhiên các bài viết trong cùng một Label::j
::h Trong Template mình đang design các dòng như div class='post-footer-line post-footer-line " đã bị xóa hết, bổ sung lại thế nào bác, Thanks
Bạn có thể chèn code của thủ thuật bên dưới dòng "data:post.body"
Bài này hình như mình có đọc bên fandung :-s
@Nam Duy: thì ở trên cái nào của ai có ghi rõ đó bạn ::a
Bài viết tuyệt quá làm được rồi, template của
iTechPlus đẹp thật
Bạn làm ơn cho hỏi mình không thể áp dụng 1 trong 5 style trên vào trang của mình được nhỉ. Qua bên mình giúp đỡ nhé.
Trân trọng,
www.taichinh247.com
Email: truongan.truong@gmail.com
mình dung D. Style 4 : Related Posts v2.0 by Anhvo mà sao nó không có mấy mũi tên trước tiêu đề, itechplus xem giúp mình. Nhân tiện mình muốn thêm màu nền với khung viền cho phần Related post này thì làm thế nào, itechplus giúp mình nhé. blog của mình http://www.blogktv.net
cảm ơn bạn rất nhiều
khó quá đi thôi !!!!!!!!!!!!!!!!!!!!!hic
http://info360vn.blogspot.com/!
mình ko hiểu sao khi có 1 bài liên quan thì nó lại ko hiển thị tên tiện ích trên phần đó.
Cám ơn bạn.
Thanks
bài viết hay lắm, thanks !
Ban oi
Minh sua lai bai viet lien quan hien thi 6 bai nhung no van hien thi 5 bai, ban giup minh voi , thank you
Itech ơi, tình hình là với những temp được chia sẻ trên mạng gần đây, em rất khó chèn những tiện ích này, với những temp cũ em dùng từ ngày xưa thì rất ook. Không hiểu là vì sao ạ. Mong Itech giúp đỡ.
ban co the chi minh cach tang kich thuoc cho hinh anh Related Posts suoc ko, cam on ban nhieu nhe
To Admin:
Bạn ơi, san mình làm đúng rồi, code ko lỗi nhưng mở ra không thấy Bài viết liên kết đâu hết.
@Admin123
@Admin123
@Admin2312313
Cho hỏi Admin:
Trang của Admin đang hiển thị:
Chủ đề liên quan :(màu xanh)
và đây là màu đen:
-Đưa bài viết trên Blog lên các mạng xã hội
-Thanh trạng thái "breadcrumb" cho Blogspot
-Chèn tiện ích Google +1 Button vào Blog
-Nhúng Google Custom Search vào Web/Blog
-Tiện ích Animated Flying Twitter Bird for Blogger
-Mẹo vặt trong thiết kế Template Blogspot
-Tiện ích Recent Posts with 3 columns for Blogger
-Tiện ích Magazine Recent Posts cho Blogger
-Style mới cho tiện ích VNE Recent Posts
-Mẹo giúp tăng Comments cho Blog
Vậy 10 mục gạch đầu dòng màu đen trên, Admin có cách nào thay chúng thành màu xanh.
Cảm ơn Admin.
MoigioiForex.Com 16:27 24/04/2011 Trả lời
Trong Template mình đang design các dòng như div class='post-footer-line post-footer-line " đã bị xóa hết, bổ sung lại thế nào bác, Thanks
Tôi cũng muốn hỏi giống bạn ik. vấn đề là tớ tìm cũng k ra cái code "data:post.body" luôn. Tớ chèn vào lung tung -> kq là đi 1cai blog roi
Tớ mới nhập môn! lưu ý chỉ giúp nha
Bạn ơi ! Sao mình chèn cả 5 đoạn code trên đều không hiện ra Related Post ! BLog của mình tại : http://g4daily.blogspot.com .
- Không hiểu Template Code blog của mình có vấn đề gì mà chèn đoạn code nào cũng không thấy có tác dụng
Bạn ơi. Vào Blog mình test dùm mình cái. Mình dùng theo Style 4 ổn định được 1 thời gian, nhưng bây giờ nhấp link bài viết liên quan là nó ra cái j đó
blog mình:
http://nguoinhaque0909.blogspot.com
Làm rồi mà không được cái style 1, bác admin ơiii
Ý kiến của bạn
* Lưu ý :
- Vui lòng gõ tiếng Việt có dấu khi viết bình luận.
- Nội dung phải liên quan đến chủ đề bài viết.
- Không dùng lời lẽ khích bác, thô tục ảnh hưởng đến người khác.
- Không đặt link đến Blog/Web khác.
- Những góp ý, thắc mắc không liên quan các bạn vui lòng post tại đây.
Thân, iTechPlus.