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/AVvXsEj6I6hO-dAKvWuogbLZ6Mx1k3E0DV6t2pR9GnSWc0CBPZbUAawtCyKO2WVFNmHo2CAPhZffKWAGYF2HmP9LdUyZ8LH_D8pS3h33b9rVrVcOuX8Y9bU25DPyU7DhEffwoE2SqL2T9NyuBJ6f/s25/1-popular.png) no-repeat left}

.top2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj36KJ6JCqG6bBzbXzwe3J3APGRkXwojV9jHcXQKnObonXLvR_WMpYdTppNkIptGTZ2V6wk3Ae1pRJuS3BA6rDEdPhGwKUdmfTO1u3547zH7KSiTQSFDoqvWBRImLEOZWxwieyeqCRefcbn/s25/2-popular.png) no-repeat left}

.top3 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlPBJzmH36HogI3-wF7XsR6JSxoNoow1iqkqLvrpoIBDu2tWTzW7y8V6cDHpVFkXNxDXGs1XonMLEqSwQRyJq77nw_FDvNZhYwMVmdUm5FmswHtni9iO0KBbLNkRtf4_a3GOtJCatCIT7r/s25/3-popular.png) no-repeat left}

.top4 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYknizhvAuVQvr9hvXPo5So8mmyDcP6z8RMADxB1GTOv-B5RLNPJX3BfWU4uZALeLgKwtTCZAHG7Tq-iQGV1AWVZiCAe5dIyjn-9YD-o0288mgH30c37Ezf63s3t-6ES1io0yTrGgAj1LK/s25/4-popular.png) no-repeat left}

.top5 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKNSxqXq3BRzRMlOKfvZAKxBr3l8jLU13_oNY6YLp0PStelvLp55iO8zeBP062VVva_nVFXcstxy2fliei9vBpPEyV4cpJ_3JINtxFCsoGSoQUMhYvtQ8L71h25voxDdI9c_SpHYbHHIbe/s25/5-popular.png) no-repeat left}

.top6 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhocqWr7UlJMOzJqyEuKPyG8q58e7sNBy5ZniKOemQgy1nMiejfzwBmtc_aerHLIrGQyd_bzOZtczrS_Eqo9XaRVMs7VIwByil3M8kXEQ25wSN6p8_78hN7dw48cFUe7-6W5Md2ulPaGjWb/s25/6-popular-.png) no-repeat left}

.top7 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ-epUIebE60yt_gwxpWq0gcrpIY7_efDbD7QOnPZXJE-YjSB0_zfLUeb-zVV-nyzWK-YZmEXZKbFAUluA7I9piJM6hLjS-wpmvZI3T_g8fUyAxrOYrWHRXN9YHLHAiSXlYVxypno_BfU6/s25/7-popular-.png) no-repeat left}

.top8 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAG-ayOiFUO1iihwr0fyJb64pDzWy3IlCODq7w_4oyrY80e9LOZ32QHR1jCiSzTOoiZ5M-yGQfQzqMImT9jeBBMQiTp-OB3y6xq2EMbZE7ElN2VXFNj68gRff2xT3j-lOay2pglsDquQG6/s25/8-popular.png) no-repeat left}

.top9 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJDx7jIIwyZ0LADTmKzebeQaXRmNHkfLnGDDk4TJoe9buLg9hpnHbu6qr8QZb38ZWSsBjoxEXLjAAkP6Kh0Rxtei7395UfKQdXafeqE9AoueAaoOr5JUHGQQfjSsiYbVYOTnl_qvb0KSeu/s25/9-popular.png) no-repeat left}

.top10 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm866XJwQzSHggdkeQITBBotmUZLM-xrq1oM-hhS2kcbKLQQfp7zqKGVKHs2R2_F4R5JcWXe7Z_-3QDBZx6YykcgOL2nYzzxtekqicxyFrHjawpmNmzbMvy66qrGcr3QCNawcrmT5UZ2N2/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> :

//<![CDATA[

imgr = new Array();

showRandomImg = true;

summaryPost = 230;

numposts2 = 5;

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEq_AJubOJWOd99xhKNsmxCuzj7w1D7wISOxeH6Uv_8XoDNYBYgbvOgJQPHRJzEeg-9RpUgYJiY6rZu-dpevgaBNHbKDPbHvnFZwNrExlm9Sl9DSQAvTyjANNUYn4Ej9m4aUaJpREag0k/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>

$(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 của tiện ích popular post như bên dưới:

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

<ol>

<b:loop values='data:posts' var='post'>

<li>

<b:if cond='data:showThumbnails == "false"'>

<b:if cond='data:showSnippets == "false"'>

<b:else/>

</b:if>

<b:else/>

<b:if cond='data:showSnippets == "false"'>

<b:if cond='data:post.thumbnail'>

</a>

</div>

<b:else/>

</div>

</b:if>

</div>

<b:else/>

<b:if cond='data:post.thumbnail'>

</div>

<b:else/>

</div>

</b:if>

</div>

</b:if>

</li>

</b:loop>

</ol>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

Số lượng:
Giá tiền:
Phí ship:
Tổng cộng:

Giỏ hàng của bạn X Đóng