Website F-PHN: 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/AVvXsEhfliDbTmFb340Iy5CpU39ax6wfIRySKOXziooIJe7csL9Zy-37OI3dUiFzJE5L0v5JioPLdHyd7knAzjIoVAou1j777Qa-YHParOjnmyXFqYrpqnpyxVu-tO1puh7YCMySsfK9xFjdkB6f/s25/1-popular.png) no-repeat left}

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

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

.top4 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwugqdwKyZKHrNzKtNf3FVNha0_s1Igo_Gg78kzi2GjCdD7j84M52cxj44UoM-73RhHQqM0Cr9SvT6s2o4zRCs7tNQG5RqMDI0wlqqxCATNOMG_Ht41l9BpYkJ5MKZ_4HdfTL-1vxc0tib/s25/4-popular.png) no-repeat left}

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

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

.top7 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwe6IrP5V9GkrZujQfxPKeiwjc3f2_IIFMgbkfAolAY7_CJSu6DjbYz3DVNE41Hz2DYrCHF_Ykb7cGGdQrBLSlc4LpvsCqUMpOp7C8CQokLEe9l_8mbyhQOPI46FZbbKzxqtKrSAmy65lF/s25/7-popular-.png) no-repeat left}

.top8 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirZjPIC9WqfG_acQwPNb_SCGNfJOMbypsAy0Xi8l1JVb22SzejFC6Z9NCychc-QEpMjDv97vzvujZ03Uc0lPsK5bcT4bbXVd8iQ9pRRQoE_Q7GOK2pHvmhvRmiRTeZqufvBWuJ2XhmtCfC/s25/8-popular.png) no-repeat left}

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

.top10 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJz0kB5pKKfyr_vrxEPQbUfApYYxOhdfrgBARWOVZ2AS9rhgqBn3egELgOPZdkJ0BcFbUZncM5itxxrk4-JyirnenXyNtmOKWcMPf1QSJ2ZBUq-a-rY2XE5Bxt27QxmmK5VpEzCATr95bB/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/AVvXsEgko6_uWnfkobBp0T53fl5WfWkMWgshjyQenR0qr7ag_oSXP5Zkhebm1s0xYfUG831z1GuyPWLCqw3mpPGriFrHWvFXceUTBDAB53ZMBcqOJWvYXywVrYdieCCCN-y4XxMSUZ3l28zkW8U/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/AVvXsEgko6_uWnfkobBp0T53fl5WfWkMWgshjyQenR0qr7ag_oSXP5Zkhebm1s0xYfUG831z1GuyPWLCqw3mpPGriFrHWvFXceUTBDAB53ZMBcqOJWvYXywVrYdieCCCN-y4XxMSUZ3l28zkW8U/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/AVvXsEgko6_uWnfkobBp0T53fl5WfWkMWgshjyQenR0qr7ag_oSXP5Zkhebm1s0xYfUG831z1GuyPWLCqw3mpPGriFrHWvFXceUTBDAB53ZMBcqOJWvYXywVrYdieCCCN-y4XxMSUZ3l28zkW8U/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>