Hiển thị bài viết có ảnh thumb và phân trang

Hình minh Họa

1. Đầu tiên đăng nhập tài khoản Blogger==>>Vào phần thiết kế (Design) chọn chỉnh sửa HTML==>>Thêm ccode bên dưới vào trước thẻ ]]></b:skin>

.clear {clear: both;}
.home-navi {padding-left:8px;width:580px;}
.home-navi h2 {font-family:Times;border-bottom:1px solid #fff;padding-bottom:2px;margin-bottom:0px;}
.home-navi h2 a {color:#0000ff;padding-left:20px;margin-left:10px;background:url(http://haimiennam.googlecode.com/files/4B3.gif) no-repeat; font-size:15px;text-decoration:none;}
.home-navi h2 a:hover {color:#ff0000;}
.authorpost {background:url(‘http://haimiennam.googlecode.com/files/003.gif’) no-repeat; margin-left:30px;margin-top:3px;padding:0px 0px 0px 18px; font-size:12px;}
.continue{float:right;padding-right:10px;width:90px;text-align:center;}
.continue a {margin-bottom:-10px;}

#page-rc-tooltip {
color:#000099; text-align:center; font-weight:bold; padding-top:5px;padding-bottom:0px;}
#page-rc-tooltip a {color:#000033;text-decoration:none; border:1px solid #fff; padding:2px 5px;background: url(' http://haimiennam.googlecode.com/files/sd.png ') repeat-x scroll 0px 0px;}
#page-rc-tooltip a:hover {color:#0000ff; background: url(' http://haimiennam.googlecode.com/files/comm.png ') repeat}
#page-rc-tooltip span {border:1px solid #ccc; padding:2px 5px;background:#fff;}
#page-rc-tooltip span.currentpage {background: url(' http://haimiennam.googlecode.com/files/comm.png ');}

2. Save template lại và trở về phần tử trang
3. Thêm 1 HTML/Javascript và thêm code bên dưới vào tiện ích đó
Xem Code

<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 showrecentposts(json) {
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;
}
}
var plabel = new Array();
var cate = entry.category;
if(cate) {
for (var k = 0; k < entry.category.length; k++) {
plabel[k] = ' <a class="label-link" href="http://baongocso1.blogspot.com/search/label/'+entry.category[k].term+'">'+entry.category[k].term+'</a> ';
}
}
else {plabel = "No label";}

var authpost = entry.author[0].name.$t;

var postdate = entry.published.$t;
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];
postDay = day+ "/" + m + "/" + y ;

if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else postcontent = "";

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;} else {img[i]="http://haimiennam.googlecode.com/files/no.png";}

if (pcm==0) {var comment = " No Comment ";}
else {var comment = " "+ pcm + " Comments ";}

var td1 = '<div class="home-navi"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><div class="authorpost">&#272;&#432;&#7907;c &#273;&#259;ng b&#7903;i <b>'+authpost+'</b> on '+postDay+' '+comment+'</div><p><img style="width:100px;height:90px; padding:3px;border:1px solid #fff;margin-right:5px;margin-bottom:5px;float:left;" src="'+img[i]+'" />'+removeHtmlTag(postcontent,500)+' ... </p><div class="continue"><a href="'+posturl+'"><img src="http://haimiennam.googlecode.com/files/XTiep.gif " alt="Xem tiếp"/></a></div><div class="clear"></div></div>';

document.write(td1);
}
}

//page value

String.prototype.GetValue= function(para) {
var reg = new RegExp("(^&)"+ para +"=([^&]*)(&$)");
var r = this.substr(this.indexOf("?")+1).match(reg);
if (r!=null) return unescape(r[2]); return null;
}
var str = location.href;
var page = str.GetValue("page");
if (page==undefined) { page = "1"; }

// get total number of posts
function numberOfPosts(json) {
document.write('<script style="text/javascript">var totalPosts= '+json.feed.openSearch$totalResults.$t+' ;</script>');
}
document.write('<script src="http://baongocso1.blogspot.com/feeds/posts/default/-/SoftWare?alt=json-in-script&callback=numberOfPosts"></script>');

//]]>
</script>

<script type='text/javascript'>
var rcpage = new Array();
var numposts = 8; // số bài viết hiển thị trong tiện ích này
var numpage=totalPosts/numposts;
var lastnum = totalPosts%numposts;
if (lastnum==0) {numpage=numpage+1;}

for (var m=1;m<numpage;m++) {
var start=numposts*(m-1)+1;
rcpage[m] ="<script src="http://baongocso1.blogspot.com/feeds/posts/default/-/SoftWare?start-index="+start+"&max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts"></script>";
}
if ((page>numpage)&&(page<numpage+1)) {
var numposts=lastnum;
start = totalPosts-lastnum+1;
document.write("<script src="http://baongocso1.blogspot.com/feeds/posts/default/-/SoftWare?start-index="+start+"&max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts"></script>");
}
else if (page>numpage){document.write("<div style="width:450px;color:#f00;font-weight:bold;padding:10px; border:1px #ccc solid;">This page does not exist. Please check link again</div>"); }
else {document.write(rcpage[page]); }

// Create page navigation

if (lastnum==0) {var pagelist=totalPosts/numposts;} else {var pagelist=numpage+1;}
var pagelist1 = parseInt(pagelist);

var npage = parseFloat(page);

if (page<=parseInt(pagelist)) {

if ((pagelist>2)&&(pagelist1<6)) {

document.write("<div id="page-rc-tooltip">Page ("+page+"/"+parseInt(pagelist)+") : ");
for (var n=1;n<pagelist1+1;n++) {
if (n==npage) {var navpage=" <span class="currentpage" >"+n+"</span>";} else {var navpage=" <a href="http://baongocso1.blogspot.com/search/label/SoftWare?page="+n+"">"+n+"</a>";}
document.write(navpage);
}
document.write(" "+totalPosts+" posts</div>");
}

if ((pagelist>=6)&&(page<4)) {
document.write("<div id="page-rc-tooltip">Page ("+page+"/"+parseInt(pagelist)+") : ");
for (var n=1;n<6;n++) {
if (n==npage) {var navpage=" <span class="currentpage" >"+n+"</span>";} else {var navpage=" <a href="http://baongocso1.blogspot.com/search/label/SoftWare?page="+n+"">"+n+"</a>";}
document.write(navpage);
}
if (parseInt(pagelist)>5) { document.write("... <a href="http://baongocso1.blogspot.com/search/label/SoftWare?page="+parseInt(pagelist)+"">Last</a> "+totalPosts+" posts</div>"); } else {document.write(" "+totalPosts+" posts</div>");}
}

else if ((pagelist>=6)&&(page>3)&&(page<parseInt(pagelist)-2)) {
var first = page-2;
var last = first+5;
document.write("<div id="page-rc-tooltip">Page ("+page+"/"+parseInt(pagelist)+") : <a href="http://baongocso1.blogspot.com/search/label/SoftWare?page=1">First</a> ...");
for (var n=first;n<last;n++) {
if (n==npage) {var navpage=" <span class="currentpage" >"+n+"</span>";} else {var navpage=" <a href="http://baongocso1.blogspot.com/search/label/SoftWare?page="+n+"">"+n+"</a>";}
document.write(navpage);
}
document.write("... <a href="http://baongocso1.blogspot.com/search/label/SoftWare?page="+parseInt(pagelist)+"">Last</a> "+totalPosts+" posts</div>");
}

else if ((pagelist>=6)&&(page>3)&&(page>parseInt(pagelist)-3)) {
var first = parseInt(pagelist)-4;
var last = parseInt(pagelist)+1;
document.write("<div id="page-rc-tooltip">Page ("+page+"/"+parseInt(pagelist)+") : <a href="http://baongocso1.blogspot.com/search/label/SoftWare?page=1">First</a> ...");
for (var n=first;n<last;n++) {
if (n==npage) {var navpage=" <span class="currentpage" >"+n+"</span>";} else {var navpage=" <a href="http://baongocso1.blogspot.com/search/label/SoftWare?page="+n+"">"+n+"</a>";}
document.write(navpage);
}
document.write(" "+totalPosts+" posts</div>");
}
}
</script>

*Chỉnh sửa code:- Bạn hãy thay địa chỉ http://baongocso1.blogspot.com trong code trên (màu xanh đậm) thành địa chỉ site của bạn.
- Dòng màu tím đậm trong code chính là nhãn bài viết SoftWare, bạn thay thành tên nhãn bài viết mà bạn muốn hiển thị.
- Các dòng màu cam là nơi bạn đặt tiện ích này http://baongocso1.blogspot.com/search/label/SoftWare, bạn hãy thay thành địa chỉ nơi mà bạn đặt tiện ích này trên trang của bạn. Bạn nhớ thay toàn bộ dòng màu cam ở trên nếu không phần phân trang của bạn sẽ bị lỗi, không sử dụng được.

4. Cuối cùng là save tiện ích lại

Ở trên là phần mình đã hướng dẫn các bạn hiển thị bài viết theo tùng nhãn cho tiện ích, tuy nhiên nếu bạn muốn hiển thị cho toàn bộ bài viết trên trang của bạn thì bạn thực hiện thêm bước sau

*Tìm đến tên nhãn trong code ở bước 3 SoftWare và bạn tiến hành xóa tên nhãn đi, lưu ý bạn phải xóa tên nhãn cùng với dấu "/-/" trước nó đi, nếu không nó sẽ không hiển thị được.

Ví dụ ban đầu ta có : http://baongocso1.blogspot.com/feeds/posts/default/-/Software

Sau khi xóa sẽ còn lại như bên dưới

http://baongocso1.blogspot.com/feeds/posts/default

Bạn cần thực hiện việc xóa này ở 3 vị trí có chứa tên nhãn (xóa tương tự như trên. Bạn cần phải cẩn thận xóa cho đúng, nếu không code sẽ bị lỗi.

*Một số lưu ý: với thủ thuật này tiện ích phân trang sẽ hiển thị ở phía trên đối với trinh duyệt Internet Exploer,và hiển thị phía dưới tiện ích đối với trình duyệt Mozilla Firefox

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

Nguồn Traidatmui

Hiển thị bài viết giống trang dantri.com.vn

Hình ảnh minh họa

1. Đăng nhập vào tài khoản blogger==>>Vào thiết kế, chọn chỉnh sửa HTML==>>Chèn code bên dưới vào sau thẻ

<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/jquery.min.js"></script>

<script type="text/javascript">function Hovercat(q){$("#neocat-"+q+" ul.dpost").find("li").show()}
function Outcat(q){$("#neocat-"+q+" ul.dpost").find("li").hide();$("#neocat-"+q+" ul.dpost").find("li:eq(0)").show()}
</script>

2. Tiếp theo bạn chèn code css bên dưới vào trước thẻ ]]></b:skin>
Xem Code

.summerypost a {
color:#000099;
font-weight:bold;
}
.summerypost a:hover {
color:#403c3d;}

.summerypost {
font-size:12px;
color:#000;
font-family:arial;}

.readm a{
color:#1f2f56;
font-size:12px;
margin-right:10px;
margin-top:8px;}
.readm a:hover{
color:#766162;}

.repost{
color:#3366ff;
font-family:arial;}

.repost a{
color:#000066;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKa1Q7nyfwkkQ3x7wWUGudMO-skhEETEQSX0UNV7-ZY0BcRLWSo92LRAS4-qyMN3-Bl1rKiAYudwTdZDIXHf5mGdhz1aDXdiP7UQZCbUSoo4nzE1pt8qXM3MnTfYEIY8wDuayvKsieOQgJ/) no-repeat left;
padding-left:10px;}
.repost a:hover{
color:#bf9798;}

.tab {
font-size:13px;
padding:0px 5px 5px 5px;
width:550px; /*độ rộng của bài viết*/
}
.dpost a{
padding:0 2px;
font: 11px/22px Arial;
color:#000;
float:left;
height:20px;}

.dpost li{
float:left;
height:20px;
overflow:hidden;}

.dpost li.active{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM2LFsLDuH6HQjtZN_-lOfSfc8hVFVHLqR4def878E4BKansSVaa3nR59Cl2DTls_R5J-bkQI3eOXiCA9xq3Ej5_dvMAko5VYHR2YmK12fVFEGWT1Kj8bzPBgh-rEMxodNDMqhBoT5Vd7b/) right no-repeat; /*màu nền của chủ đề chính */
position:relative;
top:1px;
}
.dpost li.active a{
font-size:10px;
font-weight:bold;
color:#fff;
text-transform:uppercase;
padding-right:25px;}

.iframpost{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5GOBQal-AbNJNlZs8iT3JLt2ibE3xycWf0aY-ztGEuwDAs4aSA1oZ5T4sCpSAmSRJ9C8aKsF7wUwt0j3UbAGRIH-azb9-wBPBYAG1OcSa8-dUlqKIZ0EfbTw9nsWUrCb1VUKZApnZz3jS/) no-repeat; /*màu nền của tiện ích*/
height:25px;
}

*{margin:0;padding:0px 0px 0px 0px;}

3. Bây giờ bạn hãy save template lại.
4. Trở về phần tử trang, thêm 1 HTML/Javascript
5. Thêm code bên dưới vào HTML/Javascript vừa thêm ở trên.
Xem Code

<div class="tab" id="neocat-1" onmouseover="Hovercat('1')" onmouseout="Outcat('1')">

<div class="iframpost">
<ul class="dpost">
<li class="active"><a href="#">Thủ thuật blogger</a></li>
<li style="display:none;"><a href="http://www.traidatmui.com/2010/02/blogger-nang-cao.html">Thủ thuật nâng cao </a></li>
<li style="display:none;"><a href="http://www.traidatmui.com/2010/02/blogger-co-ban.html">Thủ thuật cơ bản </a></li>
<li style="display:none;"><a href="http://www.traidatmui.com/2010/02/tien-ich-blogger.html">Tiện ích blog</a></li> </ul>
</div>

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
showRandomImg = true;
tablewidth = 245;
cellspacing = 1;
borderColor = "";
bgTD = "";
imgw = 130; // độ rộng của ảnh thumb
imgh = 100; // chiều cao của ảnh thumb

imgwidth = 60;
imgheight = 60;

fntsize = 12; //Cỡ chữ của các link bài viết liên quan trong cùng nhãn đó
fontsize = 12 // Cỡ chữ của tiêu đề bài viết hiển thị dạng tóm tắt
fontsizecm = 11; // Cỡ chữ của ngày đăng bài

acolor = "";
titlecolor = "";
aBold = false;
icon = "";

text = "no";

showPostDate = false; //Nếu muốn hiển thị ngày đăng bài bạn thay FALSE thành TRUE
poston = "Ngày đăng :";

summaryPost = 350; // số kí tự hiển thị ở phần mô tả
summaryFontsize = 12; //Cỡ chữ bài viết tóm tắt
summaryColor = "#000";
icon2 = "";

numposts = 3; //số bài viết hiển thị trong phần bài viết liên quanlabel = "Advanced blogger"; // Thay thành tên nhãn bài bạn muốn hiển thị
home_page = "http://www.traidatmui.com/"; //Thay thành địa chỉ blog của bạn
</script>
<script src="http://traidatmui-tips.googlecode.com/files/dpost.js" type="text/javascript"></script>
<script src="http://traidatmui-tips.googlecode.com/files/related_dpost.js" type="text/javascript"></script>
</div>

Bạn chỉ việc chỉnh sửa lại code theo các hướng dẫn trong code. Bạn thay các text màu Tím Đậm thành tên thư mục bạn muốn hiển thị và các link tương ứng với các thư mục đó (màu xanh).

6. Cuối cùng là save tiện ích lại

Nguồn Traidatmui

Hiển thị bài viết giống trang tin247.com

Hình ảnh minh họa thủ thuật(hiển thị giống trang tin247.com)

☼ Cách thực hiện thủ thuật:

1. Đầu tiên hãy đăng nhập vào tài khoản Blogger==>>Vào bố cục và thêm phần tử HTML/Javascript==>>Chèn đoạn mã bên dưới vào phần tử tiện ích trên
Xem Code

</table>
<style>
.mota{
position: relative;
z-index: 0;
text-decoration:none;
}

.mota a {
color:#ff0000;
}
.mota:hover{
color:#ff0000;
background-color: transparent;
z-index: 50;
}

.mota span{
position: absolute;
background: #33ccff;
padding: 5px;
left: -1000px;
border: 1px solid #ff9933;
visibility: hidden;
color:#000066;
text-decoration: none;
}

.mota span img{
border-width: 0;
padding: 2px;
}

.mota:hover span{
padding:5px;
visibility: visible;
top: 18px;
left:80px;
width:250px;
background:#ccc;
text-align: justify;
}

.summerypost a {
color:#ff0000;
font-weight:bold;
}
.summerypost a:hover {
color:#000066;}

.summerypost {
color:#000;
font-family:arial;}

.readm a{
color:#ff0000;}
.readm a:hover{
color:#006633;}

.repost{
color:#3366ff;
font-family:arial;}

.repost a{
color:#0066cc;}
.repost a:hover{
color:#ff0000;}

</style>
<script language="JavaScript">
imgr = new Array();

imgr[0] = "http://haimiennam.googlecode.com/files/no.png";

showRandomImg = true;
tablewidth = 245;
cellspacing = 1;
borderColor = "#ff0000";
bgTD = "";

imgw = 130; // độ rộng của ảnh thumb
imgh = 100; // chiều cao của ảnh thumb
imgwidth = 60;
imgheight = 60;

fntsize = 12; //Cỡ chữ của các link bài viết liên quan trong cùng nhãn đó
fontsize = 18; // Cỡ chữ của tiêu đề bài viết hiển thị dạng tóm tắt
fontsizecm = 11; // Cỡ chữ của ngày đăng bài

acolor = "#000";
titlecolor = "#f00";
aBold = true;
icon = "";
text = "Nhận Xét";
showPostDate = false; //Nếu không muốn hiển thị ngày đăng bài bạn thay TRUE thành FALSEposton = "Ngày đăng :";

minisummaryPost= 180; // số kí tự bạn muốn hiển thị cho phần tóm tắt bài viết
summaryPost = 360; // số kí tự hiển thị ở phần mô tả
summaryFontsize = 12; //Cỡ chữ bài viết tóm tắt
summaryColor = "#000";
icon2 = "";

numposts = 8; //số bài viết hiển thị trong phần bài viết liên quan
sobaiviet = 10; //Số bài hiển thị "các bài khác từ chuyện mục"
label = "SoftWare";// Thay thành tên nhãn bài bạn muốn hiển thị
nhan= "SoftWare";//Nhãn hiển thị "các bài khác từ chuyện mục"
home_page = "http://baongocso1.blogspot.com/";//Thay thành địa chỉ blog của bạn

☼ Tùy Chỉnh:
+ Code màu xanh dùng để chỉnh sửa phần mô tả cho các bài viết liên quan khi rê chuột vào link
+ Code màu xám dùng để chỉnh sửa màu của text của bài viết tóm tắt
+ Code màu đỏ dùng để chỉnh sửa màu chữ phần bài viết liên quan

Bạn hãy dựa vào những chú thích trong code để chỉnh sữa màu chữ, màu nền, kích cỡ... cho phù hợp rồi save lại.
Chúc bạn thành công !

Nguồn Traidatmui

Tùy chỉnh phần bài đăng cũ hơn, bài đăng mới hơn, trang chủ trên Blogspot

Hình ảnh minh họa

1. Đăng nhập tài khoản Blogger==>>Vào phần thiết kế (Design)==>>Chọn chỉnh sửa HTML (Edit HTML)==>>Chọn tiếp mở rộng tiện ích (Expand Widget Templates)

☼ Bây giờ bạn có thể chọn 1 trong hai tùy chọn bên dưới

A. Thay bài đăng cũ hơn, bài đăng mới hơn, trang chủ thành hình ảnh

a. Bạn tìm đến code bên dưới hoặc tương tự
Xem Code

<div class='blog-pager' id='blog-pager'>

<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span></b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span></b:if>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

</div>

b. Thay code vừa tìm được thành code bên dưới

<!-- Phần "Bài đăng mới hơn"-->

<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><img src="Link ảnh bài đăng mới hơn"/></a>

</span></b:if>

<!-- Phần "Bài đăng cũ hơn"-->

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><img src="Link ảnh bài đăng cũ hơn"/></a>

</span></b:if>

<!-- Phần "Trang chủ"-->

<a class='home-link' expr:href='data:blog.homepageUrl'><img src="Link ảnh trang chủ"/></a></div>

Bạn thay các link màu đỏ đậm trong code thành link của các ảnh bài đăng mới hơn, bài đăng cũ hơ, trang chủ tương ứng. Bạn có thể sử dụng các chương trình đồ họa để tạo các ảnh đó, nếu không tạo được bạn có thể sử dụng các ảnh bên dưới tạm

B. Xóa/Ẩn đi phần bài đăng cũ hơn, bài đăng mới hơn, trang chủ

Bạn tìm đến code CSS bên dưới và thêm lệnh (display:none;) như bên dưới tùy bạn muốn ẩn phần nào.

/* Nếu muốn ẩn "Bài đăng mới hơn" thêm lệnh vào code như bên dưới*/
#blog-pager-newer-link {
display:none;
float:left;
}
/* Nếu muốn ẩn "Bài đăng cũ hơn" thêm lệnh vào code như bên dưới*/
#blog-pager-older-link {
display:none;
float:right;
}
/* Nếu muốn ẩn cả 3 phần thêm lệnh vào code như bên dưới*/
#blog-pager {
display:none;
text-align:center;
}

Sau khi chọn 1 trong 2 tùy chọn trên và thực hiện xong bạn save template lại

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

Nguồn Traidatmui

Tiện ích bài viết liên quan cũ mới cùng chủ đề

Với tiện ích này thì khi người dùng xem một bài viết nào đó, nó sẽ hiển thị các viết cũ hơn hay bài viết mới hơn trong cùng một nhãn với bài viết đó. Ở đây chúng ta sẽ cho tiện ích này nằm ở cuối mỗi bài đăng trên blog, tiện ích này sẽ giúp người dùng có thể dễ dàng tìm kiếm các bài viết trong chủ đề mà họ đang quan tâm. Bạn có thể xem hình ảnh bên dưới để thấy các hiển thị của tiện ích này.

Hình ảnh minh họa

1. Đăng nhập Blogger ==>> Vào thiết kế, chọn chỉnh sửa HTML==>>Chọn Mở rộng mẫu tiện ích (Expand Widget Templates). Chèn code css sau vào trước thẻ ]]></b:skin>
Xem Code

#related-posts-block {
margin:10px 5px;
font-size:10px;
color:#333; /*màu text của tiện ích*/
font-family:tahoma; /*font chữ của tiện ích*/
}
#related-posts-loading-text{
font-size:12px;
text-align:center;
color:#000099;}

#related-newest-href {
margin:10px 5px 0px 15px;
}
#related-newest-title {
font-size:12px; /*cỡ text của phần "Các bài viết mới cùng chủ đề"*/
margin:10px 5px;
color:#000099; /*màu chữ của phần "Các bài viết mới cùng chủ đề"*/
}
#related-posts-block #related-newest-href a{
font-size:12px; /*cỡ text của tiêu đề bài viết trong phần "Các bài viết mới cùng chủ đề"*/
font-family:Arial, Helvetica, sans-serif;
color:#000066;/*màu chữ của tiêu đề bài viết trong phần "Các bài viết mới cùng chủ đề"*/
}
#related-posts-block #related-newest-href a:hover{
font-family:Arial, Helvetica, sans-serif;
color:#ff00ff;
}
#related-older-href {
margin:10px 5px 0px 15px;
list-style-type:none;
}
#related-older-title {
font-size:12px;/*cỡ text của phần "Các bài viết cũ cùng chủ đề"*/
margin:10px 5px;
color:#000099; /*màu chữ của phần "Các bài viết cũ cùng chủ đề"*/
font-family:Arial, Helvetica, sans-serif;
}
#related-posts-block #related-older-href a{
font-size:12px; /*cỡ text của tiêu đề bài viết trong phần "Các bài viết cũ cùng chủ đề"*/
font-family:Arial, Helvetica, sans-serif;
color:#000066; /*màu chữ của tiêu đề bài viết trong phần "Các bài viết cũ cùng chủ đề"*/
}
#related-posts-block #related-older-href a:hover{
color:#ff00ff;
}

2. Tiếp theo, bạn tìm đến dòng code bên dưới hoặc tương tự

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

3. Chèn code bên dưới vào ngay sau code vừa tìm được
Xem Code

<script type='text/javascript'>
//<![CDATA[
var showdate = true;//Nếu không muốn hiển thị ngày tháng đăng bài, bạn thay True thành False
var max_post = 8;//Số bài viết hiển thị trong mỗi phần (Bài cũ và bài mới) của tiện ích
//]]>
</script>

<b:if cond='data:blog.pageType == &quot;item&quot;'><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 != &quot;true&quot;'>,</b:if></b:loop></b:if></div><div id='post-timestamp-for-related' style='display:none'><data:post.timestampISO8601/></div>
<div id='post-timestamp-for-related' style='display:none'><data:post.timestampISO8601/></div>
<div id='related-posts-block'><div id='related-posts-loading-text'>Loading...<br/><img align='absmiddle' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNetxM1E17FpI5RPR3fzJ27d4wfEg1xwWKF9hX-IOOkHn4KlVdivz0Dx_sOpicKoHBUXvkNWUSNff4Qd6Y4z7Y75tHpiscKfX-h3GI42NLiSP8SkX8kip3-z5BCwbb3sjCpzbDneqXVwpm/'/></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>
<script src='http://traidatmui-tips.googlecode.com/files/related_npost.js' type='text/javascript'/>

4. Cuối cùng save template lại.

Lưu ý: tên các "Nhãn" bài viết nên được đặt bằng tiếng Anh hoặc tiếng Việt không dấu để tránh bị lỗi.

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

Nguồn: Traidatmui