Style bài viết phổ biến cho blogger/blogspot

Style này được áp dụng hầu hết trong blogspot, nhưng chỉ là kiểu mặc định của blogger, đến đây mình share 1 thủ thuật tinh chỉnh nó trông đẹp hơn rất nhiều

Hãy chắc blog của bạn đã có widget PopularPosts này và đặt hiển thị tối đa 5 bài nhé. Sau này khi hoàn thành thủ thuật bạn sẽ có thể chỉnh nó lên hơn 5.

- Đăng nhập vào Blog
- Vào Mẫu (Template)
- Chọn Chỉnh sửa HTML (Edit HTML)
- Thêm đoạn code sau vào trước thẻ ]]></b:skin> :

.top1, .top2, .top3, .top4, .top5, .top6, .top7, .top8, .top9, .top10 {border-bottom:1px dotted #ccc;padding-top:6px;font:bold 12px Tahoma;width:280px;margin-left:10px;font: bold 13px Tahoma;color:#FF6600}
.top1 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFZ4Ak9ypt-BmisrrdJ9vzYU5AIQ3oJuxJIBeGiqbVytBCUnMq8O5iCWdwd4c6Sr3HJwIV_ROH0ykRvj-059bJtoDnx0aIBKkjSfb6tNIazYPlRL8P1MGMkop71MWUV_4_IwY59SM5u1Ns/s25/1-popular.png) no-repeat left}
.top2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqx8UHzFjelsXBdtX3F7jKzHqKw_Mc03W7IE0avR3t4xF3HWzLLnPwS8o8_-Bjolx3R4_3mRV1BP1A7WdoqNUrdS2Syo4oCqV_Hxnnuo-6Qmc-dWBLsZ-PV81VW4LSedW4m-Dy_r-gJcn8/s25/2-popular.png) no-repeat left}
.top3 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqPu_y_PynjVcd_NgTUwuC-lDO-bAKEfKb_tV9sjv7NeGr4qE0meFtk4QUs3QhofMupqEbB_1WKqVXzsDJyrOp_rNjKjjrviLcD8U4l8tUpnb6pIo605ZS_Nrd3Xu5MYW6oB41s2Z4snv1/s25/3-popular.png) no-repeat left}
.top4 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIa7KMER9juhgSfzudzb14MmUvoEhnl2DkWXoVOGYEwhe59F0UTbQa3o-2FmmcoJ8g62f-EpCVX-h14ytzFtuwbStMfGFq3IPZF93SwIGptVW3OHSg99rKIIlTEkiCR4HIN3UPwW49PDQ_/s25/4-popular.png) no-repeat left}
.top5 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYhlaaI-yFRSseeqEThqAKD3Adt4NRhxQZHGzIBcNzT1AnX5gx35LfrLeZcFllnSYuJ3-3TjT0op7Ph3qANgwtSqJ_esoQxL6SnqUToKBoHYoo0AZ9PU1Rk0c0PA4m5AZ3xjkSoNtYWaRY/s25/5-popular.png) no-repeat left}
.top6 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyXdVBgAeSwepAUC5EIpU2Nx2JZ5mo68WHu82kBN9ViACGIoijvu9NXotMLC5BeuzqllDIL3w0DGwTCl88dk1TXBXlDIWvCz4KCv9Bt5REoG6e2PIZ1I9PB4raIHNJwsT4pVXVvJQ2bTZB/s25/6-popular-.png) no-repeat left}
.top7 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcG248x6AV0gzTXK8f3mi6bXm6TISJkoDXzoOYxP39CGOW55Eyyx0X-XzE6CzIimPMj8s5koT9k6XfMw1oWf8Bl2Ty7DyUY75CXwBY0jA6Ih8iDqgEXp6zcNL-eqQ1DCIRtrTJ-f6CbItN/s25/7-popular-.png) no-repeat left}
.top8 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYaPmvN7EJFXKEIODLgR708q3-2wuVJU8u5bQ6JDG9ZkKBafZOY6SKvdQJ060nLeiFh6QtLRmtgiBhT6BSmsWTh122Aw9PrSarPnD1wnxwoQimOjmZzWsvwO4dbxmojSeq1CJTvp02UKvK/s25/8-popular.png) no-repeat left}
.top9 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXJEwL0hOgmZpSnCv05HiC3BrTgeVjteKDRR2JTQCK5nxvmknQkUSrLChpIC6yYOB_7RyE8mwyXH_LjEK8RNJqkYYBekFfMllpO4q1PLZXwvUc70BiNcsooz3YOaUW_WcJtibmOcDJPZs-/s25/9-popular.png) no-repeat left}
.top10 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsRK1-9E7C4moiDyo5w4ZeP0z_TMn7Qgl4IRglG3uWHBzBurP2d8Bhdo-Zs9jsSP8RtN-zve5CbIud6fdSIBDvpKwGyIdTy3yrAb0y6_kFixnkP3lNsiGSmyTBV-UFSxUWReT2kenafqmq/s25/10-popula.png) no-repeat left}
.widget-item-control {display:none}
.popular-posts ol{list-style-type:none;}
.popular-posts ol li a, .randoms ul li a {color:#333333}
.PopularPosts img { border: 1px solid #CCCCCC; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); height: 65px;
margin-left: 27px; padding: 2px; z-index: -1;width: 90px;z-index:10}

- Thêm đoạn code sau vào trước thẻ </head> :

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
showRandomImg = true;
summaryPost = 230;
numposts2 = 5;
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBf_bb2YcNrjy08OtQ8x8OuOXZlGsmSCScRS-cySF_yxrfA4Emkg3a3BRX2i0lqOwQfCwtJpPuslQ2tBTmkGaUs1H-eGrHP-i4BuYAghb6w7a4N8lfTsEwXXmoxXdsDx2W3v3DMPqFyXg/s300/no_image.jpg";
aBold = true;

function removeHtmlTag(strx, chop) {
if (strx.indexOf("<") != -1) {
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)
}
}
strx = s.join("")
}
chop = (chop < strx.length - 1) ? chop : strx.length - 2;
while (strx.charAt(chop - 1) != ' ' && strx.indexOf(' ', chop) != -1) chop++;
strx = strx.substring(0, chop - 1);
return strx + ' [...]'
}

function showrecentposts2(e) {
j = (showRandomImg) ? Math.floor((imgr.length + 1) * Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts2; i++) {
var f = e.feed.entry[i];
var g = f.title.$t;
var h;
if (i == e.feed.entry.length) break;
for (var k = 0; k < f.link.length; k++) {
if (f.link[k].rel == 'alternate') {
h = f.link[k].href;
break
}
}
if ("content" in f) {
var l = f.content.$t
} else if ("summary" in f) {
var l = f.summary.$t
} else var l = "";
if (j > imgr.length - 1) j = 0;
img[i] = imgr[j];
s = l;
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;
if (i == 0) {
var m = '<div class="folder-topnews fl"><img src="' + img[i] + '" title="' + g + '" class="img-subject fl"><p style="padding-bottom:5px"><a href="' + h + '"><b>' + g + '</b></a></p><p>' + removeHtmlTag(l, summaryPost) + '</p></a></div>';
document.write(m)
}
if (i == 1) {
var m = '<div class="folder-othernews fl"><div class="other-folder fl"><img alt="" class="img-other fl" src="' + img[i] + '" alt="' + g + '"><a href="' + h + '">' + g + '</a></div>';
document.write(m)
}
if (i == 2) {
var m = '<div class="fl"><ul><li><a href="' + h + '">' + g + '</a></li>';
document.write(m)
}
if ((i > 2) && (i < numposts2 - 1)) {
var m = '<li><a href="' + h + '">' + g + '</a></li>';
document.write(m)
}
if (i == numposts2 - 1) {
var m = '<li><a href="' + h + '">' + g + '</a></li></ul></div></div>';
document.write(m)
}
j++
}
}
//]]>
</script>
<script>
$(document).ready(function () {
$(".popular-posts ol>li:eq(0)").addClass("top1");
$(".popular-posts ol>li:eq(1)").addClass("top2");
$(".popular-posts ol>li:eq(2)").addClass("top3");
$(".popular-posts ol>li:eq(3)").addClass("top4");
$(".popular-posts ol>li:eq(4)").addClass("top5");
$(".popular-posts ol>li:eq(5)").addClass("top6");
$(".popular-posts ol>li:eq(6)").addClass("top7");
$(".popular-posts ol>li:eq(7)").addClass("top8");
$(".popular-posts ol>li:eq(8)").addClass("top9");
$(".popular-posts ol>li:eq(9)").addClass("top10");
});
</script>

- Tiếp tục tìm đoạn code : <b:widget id='PopularPosts1' Thay thế

<b:widget id='PopularPosts1' locked='false' title='Hot - Xem nhiều' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ol>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>

<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>

<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>

<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
<b:else/>
<div class='item-thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBf_bb2YcNrjy08OtQ8x8OuOXZlGsmSCScRS-cySF_yxrfA4Emkg3a3BRX2i0lqOwQfCwtJpPuslQ2tBTmkGaUs1H-eGrHP-i4BuYAghb6w7a4N8lfTsEwXXmoxXdsDx2W3v3DMPqFyXg/s300/no_image.jpg'/></a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>

<div class='item-content'>
<div class='item-title'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'><img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/></a>
</div>
<b:else/>
<div class='item-thumbnail'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBf_bb2YcNrjy08OtQ8x8OuOXZlGsmSCScRS-cySF_yxrfA4Emkg3a3BRX2i0lqOwQfCwtJpPuslQ2tBTmkGaUs1H-eGrHP-i4BuYAghb6w7a4N8lfTsEwXXmoxXdsDx2W3v3DMPqFyXg/s300/no_image.jpg'/></a>
</div>
</b:if>
<a expr:href='data:post.href' expr:title='data:post.snippet'><data:post.title/></a>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ol>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Cuối cùng lưu lại và xem kết quả.

Style bài viết phổ biến cho blogger/blogspot

Share to:

Đăng nhận xét

Nhận Xét mới

Hỗ Trợ

Style bài viết phổ biến cho blogger/blogspot

Share to:

Next

Bài đăng Mới hơn

Previous

Bài đăng Cũ hơn

Đăng nhận xét