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/AVvXsEiWgyUxymWWddUz34lXAsJELO8NJ5YW9PAgEWjWETkhGpjbM5nz3_F70fyAmX9ZEMyiBK8PyisvtucVXa1SKz3XnUPmTgnbdj3xwQpGnQ3g0yBEsCHXZn5LUwHgGzz4tvJau6k1E3vFnAPF/s25/1-popular.png) no-repeat left}
.top2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ6JxNWylIikEZ2HjyI0Ngje9W0YSMeTG1XXCbVdhTcw7IhyphenhyphenGaFKYA09EaHqFeMJWMHuqQgypVL0jHEb2UMyQoqS3LcFFbyI5LBXpD7DdPFmHzXRnAiNFIQcnNznyZsfCGszXL0gQNwydT/s25/2-popular.png) no-repeat left}
.top3 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpNyAnYDbNE6eelw8fodeWmIsitBKO0MixuKq-okoIX-38diQS87pK_6T4zzevCOGOcJGCUkdWW8Q-zxsbBz1TpTr_mbYtDkMtugrYAotC4TbuGSBVIWCnU6Os2_JzsdPz3tthy7IsMuwH/s25/3-popular.png) no-repeat left}
.top4 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZQA-TtR7du2aWizKkS_djHc-BPjrxA8H3sDnyua8Y9wnUt7u1TD6oMur-OAmo8tEumMhS7-D40jNBzuWolwgCHdfQ7xrH3PfnZAej-2kji_SdxHphvM8EMtlg61rU5rj4-GSbal8MtZLp/s25/4-popular.png) no-repeat left}
.top5 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRyTn1yqife-07xtIou970FaBInc7IK52N_T8oh0xbaRe9R0ebbLeBaxCZqJjMdunKxmqlo-6xPUNi01uWiOeOdFqwum02vj5mjOc1WlXD4n5McYRqU0YGLVSOdA9FSSWzuWO8Tg9bPtsR/s25/5-popular.png) no-repeat left}
.top6 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk1PuuMLx5PXuELVIH9N6UrTHohf6wIGc5WTqTSwhGe9tsunSw3BgwPyUhOuYr2t3yhnTvEF0vQ-wQ0eSfwq61pXxvahyphenhyphentlBW4eXKVuFyZB2873kaFJzhWZFwX6p26_VVLM8FvgoJR6uQd/s25/6-popular-.png) no-repeat left}
.top7 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf1kmQIzfsRHgj_Fc9aq5UHCJT8jMI_Y-hjyrIE03d0O48oR9lE8j78SsrbB4MliXafkHca2SIqCo63YaFicUL4h5UbkTHpFaVsdR9TW7gpJGT4ystUs3tcnnIBKYHb3ZGz8aRksQu-Srq/s25/7-popular-.png) no-repeat left}
.top8 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-E2a29gAfvyQYf_0E9_VBKo7o-8gKR-PF_8hHt8nF-mYVkJothURLtEF5DNusdLLJrWNbdfSdcmG5TLvVg6Wv1CD9SPsmzjHAHMfTYzkC8TcUnNaMZ71Rjwjm607VlSH67TZTNy08vquH/s25/8-popular.png) no-repeat left}
.top9 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil2HFtul42K0foOOMQelH3A4-UZmqe8yFyGRaq-9d4zT_TFsFQ2QBicbcelC6PkYU-BCUnWR7CNKuFIz9CC6XxAYyb3igfr8aRM3qTo3n-YQaT6SOxAsr0CThWCF0IWgbh0KwA4aw7WWPs/s25/9-popular.png) no-repeat left}
.top10 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL-1lu5aeKjZlGQpnNkU32vG9zAJckWY-vVV4h-k0EnIHL07c2u3t2Cf2i34owPcUA3yv6WzuU89xqdwwNbTrssEMN7jO0ggTLNd_7pd4VIdeesCZh07xNBoeGSnF9mGA73ihalcNGsksM/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/AVvXsEhsnN5urvRKI6HICjEXF5XKIWqiMs_dtNHUCjKu2zc1Wakqr9Jo7M2VDURNGHzDj43AqvTr6L3focV-Y0OtOlVuR6Ehooae56gB-2PFFy7KdbHhHjQIUx0ZASI29RwppZCVEA9JOY6TGas/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/AVvXsEhsnN5urvRKI6HICjEXF5XKIWqiMs_dtNHUCjKu2zc1Wakqr9Jo7M2VDURNGHzDj43AqvTr6L3focV-Y0OtOlVuR6Ehooae56gB-2PFFy7KdbHhHjQIUx0ZASI29RwppZCVEA9JOY6TGas/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/AVvXsEhsnN5urvRKI6HICjEXF5XKIWqiMs_dtNHUCjKu2zc1Wakqr9Jo7M2VDURNGHzDj43AqvTr6L3focV-Y0OtOlVuR6Ehooae56gB-2PFFy7KdbHhHjQIUx0ZASI29RwppZCVEA9JOY6TGas/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

Đăng nhận xét

Quảng Cáo

LOADDING - HEADER TREN DAU

Shopping Cart