15:41
![[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot ( phần 5 )](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsuN4A_FkXC3ZbrMzIXQJd-uH6QioQtgRZpHoa8o5tq3tFND8XoHxdW8-7SBzXrgyXjtGUnCi2hujFwnellT9DKr1APNIu1QGciolyulmrv7xnF881PC3unVU9Ha_IUL_rDRvNIPMcp8o/s1600/main.jpg "[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot ( phần 5 )")
Trong bài viết ngày hôm nay, mình sẽ tiếp tục hướng dẫn các bạn chỉnh sửa phần main-post, ở phần trước chúng ta đã có được thanh sidebar thông tin bài viết và cách đặt like box vào blog.
[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot ( phần 6 ) - search box
[TUT+] Hướng dẫn tạo, chỉnh sửa templates blogspot ( phần 4 ) - main-post
Và hôm nay sẽ thêm bài viết liên quan vào cuối bài viết, để chúng không hiện ra trang chủ làm hỏng bố cục thì các bạn đặt chúng trong thẻ <b:if cond='data:blog.pageType == "item"'>...</b:if>, và dưới đoạn code này:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>
<data:post.jumpText/>
</a>
</div>
</b:if>
các bạn copy code sau, và đặt vào trong:
<script type='text/javascript'>var ry='<h2>Bài viết liên quan</h2>';rn='<h2>Không có bài viết liên quan</h2>';rcomment='Nhận xét';rdisable='Tắt Nhận xét';commentYN='yes';</script>
<script type='text/javascript'>
//<![CDATA[
var nothumb='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0RlzX2BivZIk3ZOwZxTiyq3FLM-Mj_1amDAbBok1B3-P_RXcOtvyu9h15PKJ4jI1TpVDZm0nzOK0tIfC_XgEYlBWL6-Cppb3EuWJRfeWdxsfjNy0GsKSzkXx8UwqwDtpXYxo24i0aOMMn/';dw='';titles=new Array();titlesNum=0;urls=new Array();time=new Array();thumb=new Array();commentsNum=new Array();comments=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('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;time[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]=nothumb};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=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];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;time=e;thumb=f;commentsNum=g}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);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<li><a href="'+urls[c]+'" rel="nofollow"><img alt="'+titles[c]+'" src="'+thumb[c]+'"/></a><div class="title"><h4><a href="'+urls[c]+'" rel="nofollow">'+titles[c]+'</a></h4></div></li>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]>
</script>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels('<data:post.url/>');</script>
</div>
Và đây là code CSS:
#related-posts li{list-style-type:none;float:left;width:33%;text-align:center;}
#related-posts h2{text-align:center;}
#related-posts{margin-top: 100px;}
#related-posts ul{}
#related-posts img{width: 250px; height: 160px;}
Đến đây, các bạn phải sử dụng mẹo mà mình đã giới thiệu ở phần 2 rồi, ai quên thì xem lại nha, chèn code này trước thẻ </body> để thay đổi kích thước ảnh thumbnail:
<script type='text/javascript'>
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size);
var thumbnails = blogGadget.getElementsByTagName("img");
for(var i=0;i<thumbnails.length;i++){
thumbnails[i].width = size;
}
}
changeThumbSize("related-posts",250);
</script>
Trong mấy code trên các bạn chú ý số 6 là số bài viết.
Tiếp tục nào, các bạn thêm code sau ngay dưới cái script của thằng related-posts:
<div class='mbt-pager'>
<ul>
<li class='next'>
<b:if cond='data:newerPageUrl'>
<i class='fa fa-chevron-right'/><a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' rel='next'/>
<b:else/>
<i class='fa fa-chevron-right'/><a rel='next'> <span>Bạn đang xem bài viết mới nhất</span></a>
</b:if>
</li>
<li class='previous'>
<b:if cond='data:olderPageUrl'>
<i class='fa fa-chevron-left'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' rel='previous'/>
<b:else/>
<i class='fa fa-chevron-left'/><a rel='previous'><strong>Cũ hơn</strong> <span>Bạn đăng xem bài viết cũ nhất</span></a>
</b:if>
</li>
</ul>
</div>
<script type='text/javascript'>
//<![CDATA[
(function($){
var newerLink = $('a.newer-link');
var olderLink = $('a.older-link');
$.get(newerLink.attr('href'), function (data) {
newerLink.html('<strong>Next</strong> <span><br>'+$(data).find('.post h3.post-title').text()+'</span>');
},"html");
$.get(olderLink.attr('href'), function (data2) {
olderLink.html('<strong>Previous</strong> <span><br>'+$(data2).find('.post h3.post-title').text()+'</span>');
},"html");
})(jQuery);
//]]>
</script>
Và CSS:
.mbt-pager ul {list-style-type:none;height:100px;}
.mbt-pager {margin-top: 100px;}
.next {float: right; width: 50%; text-align:center;}
.previous {float: left; width: 50%;text-align:center;}a
Các bạn chèn thêm code sau vào trước thẻ </head>: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
Các bạn lưu lại và xem thử kết quả.
Phần cuối mình muốn nói về cái share buttons, cái này thì đơn giản thôi, bạn có thể dùng ngay code của blog, nhưng hơi xấu bù lại load nhanh, nhưng các bạn co thể thêm css để cho nó đẹp hơn, share buttons của blog mình là chỉnh sửa từ nó đấy, cách làm thì bạn chép đoạn code này bỏ vào:
<div class='post-share-buttons goog-inline-block'>
<b:if cond='data:post.sharePostUrl'>
<b:include data='post' name='shareButtons'/>
</b:if>
</div>
Hoặc các bạn có thể sử dụng những js có sẵn được cung cấp sẵn từ một số trang web, tuy đẹp nhưng hay gặp ở những trang khác và load chậm hơn, dưới đây là một số trang web như vậy, giống với Like buttons, các bạn vào chọn kiểu, chọn icon hiện bên ngoài và get code thôi.
[TUT+] Sharing button
Mình xin phép dừng ở đây, hi vọng bài viết có ích cho các bạn. Read More