Tạo Related Post widget cho blogger có thumbnail

Related Post widget (bài viết liên quan) trong Blogger là quan trọng nhất, dưới mỗi bài đăng nên chèn Related Post widget để độc giả có thể tìm kiếm thêm một vài thông tin hữu ích. Với bài viết Tạo Related Post widget cho blogger có thumbnail dạng đẹp hi vọng giúp bài đăng của các Blogger Blogspot giao diện mới tốt hơn.

Related Post widget blogger có thumbnail

Tạo Related Post widget blogger có thumbnail

Bước 1: Bạn cần đăng nhập vào Blogger => Mẫu (Template) => Chỉnh sửa HTML (Edit HTML)

Bước 2: Tìm thẻ ]]></b:skin> bằng cách nhấp Ctrl + F và chèn code CSS lên phía trên nó

#related-posts{
 float:left;
 height:auto;
 width:660px;
 border-top:1px dashed #d0cfff;
 border-bottom:1px dashed #d0cfcf;
 padding-top:20px;margin-top:20px}
#related-posts a{
 width:200px!important;
 transition:all 300ms ease-in-out;
 -webkit-transition:all 300ms ease-in-out}
#related-posts img{
 width:200px!important;
 transition:all 310ms ease-in-out;
 -webkit-transition:all 310ms ease-in-out;
 border:1px solid;padding:1px}
#related-posts img:hover{
 opacity:0.6;
 transition:all 310ms ease-in-out;
 -webkit-transition:all 310ms ease-in-out
 } 

Bước 3: Bạn tìm tới thẻ </head> và chèn code phía trước nó

<b:if cond='data:blog.pageType == &quot;item&quot;'>
var defaultnoimage=&quot;Ảnh Nền Khi Không Có Ảnh Hiển Thị;;
<script type='text/javascript'>
var maxresults=6;
var splittercolor=&quot;#fcf8f8&quot;;
var relatedpoststitle=&quot;RELATED POST:&quot;;
</script>
<script src='https://sites.google.com/site/10kthuthuatblogger/related-post/228052015.js' type='text/javascript'/></b:if>

Bước 4: Bước này là sắp hoàn tất rồi, bạn hãy lấy code bên dưới và chèn phía sau <div class='post-footer'>

<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=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div>
</b:if> 

Cuối cùng lưu lại để xem kết quả.

Tạo Related Post widget blogger có thumbnail
tao, related, post, widget, Related Post widget, blogger, blogspot, thumbnail, anh, hinh thu nho

Continue Reading

Tạo bài viết liên quan có ảnh cho blogspot dạng 2 cột

Bài viết liên quan có ảnh cho blogspot dạng 2 cột được sử dụng khá phổ biến trong các blog hiện nay. Dạng bài viết liên quan (Related Post) này rất tiện lợi cho người đọc, vì được chia theo 2 cột nên bài viết liên quan có ảnh sẽ làm cho người đọc dễ dàng tìm thấy các bài viết mà họ cần tìm hơn.

Hướng dẫn tạo bài viết liên quan có ảnh cho blogspot dạng 2 cột

Bước 1: Đăng nhập vào Blog => Vào Mẫu => Chọn Chỉnh sử HTML (Edit HTML)

Bước 2: Dán code ngay phía trên </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'> <script type="text/javascript"> //<![CDATA[ var titles=new Array(); var titlesNum=0; var urls=new Array(); time=new Array(); function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);e=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])) {b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=time[a]}}titles=c;urls=b;time=e}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a) {var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);time.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;document.write("<ul>");if(titles.length==0){document.write("<li>Dont't Relate Posts</li>")} else{while(b<titles.length&&b<19&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}document.write('<li><a href="'+urls[c]+'" title="'+time[c].substring(8,10)+"/"+time[c].substring(5,7)+"/"+time[c].substring(0,4)+'">'+titles[c]+"</a></li>");if(c<titles.length-1){c++}else{c=0}b++}} document.write("</ul>");urls.splice(0,urls.length);titles.splice(0,titles.length)}; //]]> </script> </b:if>

Bước 3: Tìm 4 đoạn sau:

<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'>

Chèn code ngay dưới code một trong 4 đoạn vừa tìm thấy hãy nhớ là phải thử nhé nếu không được dòng này thì chuyển qua dòng khác

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <b>Bài viết liên quan:</b> <b:loop values='data:post.labels' var='label'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/></b:loop> <script type='text/javascript'>var maxresults=5;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script> </div> </b:if>

Tùy chỉnh:

• 5; là số bài viết liên quan được hiển thị nhé!

Ok chúc các bạn có một blog đẹp sau khi đọc xong bài viết hướng dẫn tạo bài viết liên quan có ảnh cho blogspot dạng 2 cột nhé!
Hướng dẫn tạo bài viết liên quan có ảnh cho blogspot dạng 2 cột

Continue Reading

Cách tạo thêm bài viết liên quan cho blogspot

Những bài viết liên quan thường được đặt ở cuối mỗi bài đăng, để khi người đọc xong một bài viết có thể tìm thấy nội dung mình cần mà không cần phải tìm đến hộp tìm kiếm. Có nhiều cách tạo bài viết liên quan cho blogspot như bài viết liên quan có hình ảnh... Với loại bài viết liên quan này tốc độ load trang của bạn không hề chậm, tải rất nhanh. Hơn nữa đối với Seo loại này rất thích hợp để cho các blogger sử dụng.

bài viết liên quan cho blogspot

Cách tạo thêm bài viết liên quan cho blogspot

Bước 1: Đăng nhập vào Blogger => Mẫu => Chỉnh sửa HTML

Bước 2: Chèn đoạn code bên dưới <div class='post-footer'> hoặc <div class='post-footer-line post-footer-line-1'> hoặc <div class='post-footer-line post-footer-line-2'> hoặc <div class='post-footer-line post-footer-line-3'>
 

Code tạo thêm bài viết liên quan cho blogspot

Copy code này chèn sau một trong 4 đoạn trên, hoặc có thể ở chỗ khác nhưng đặt chỗ nào cũng được miễn là bạn thấy hợp lí.

 <!-- related post -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='widget-content'>
<h2>Các bài liên quan</h2>
<div id='saliproit183'/><br/><br/>
&lt;script type=&quot;text/javascript&quot;&gt;
homeUrl3 = &quot;softwarecrack.ga&quot;;maxNumberOfPostsPerLabel = 6;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;
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+21);
label = decodeURIComponent(label);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;h4&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;saliproit183&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, &#39;http://&#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>
&lt;/script&gt;
</div>
</b:if><br/><!-- /related post -->

Phần chỉnh sửa như sau:
- Thay softwarecrack.ga bằng blog của bạn
- maxNumberOfPostsPerLabel là tối đa số bài viết hiển thị ở mỗi nhãn (label). Ở code trên là mình để là 6
- maxNumberOfLabels là số nhãn (label) sẽ được hiển thị. Ở code trên là mình để là 3

OK như vậy là hoàn tất cách tạo thêm bài viết liên quan rồi nhé! :)

Continue Reading