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/AVvXsEj9GOx-olTW_D0Eynpn1Cw74UWEeeRyqQXi05zgKU2Q_RNtgurxOQz9IZlgpRxar8eGk-1E9P0Madj5DMfmTG6nwusUtwl7pcnhpZgvc7lA1dbeu4hMW_JeTLLN63hRUHd7oRGNA8nqldEv/s25/1-popular.png) no-repeat  left}

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

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

.top4 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOLqvj82DYG_kuo6gdTaPR3-zDPf7Myzl5UNvF73klShmiQjiHywydD0nmzF9vVoYnaOEdXH4iCBmnZJK0Bk_qPxMPUaWxg8L3MeVJsycFoJTmcr3PrRCOtqVC_P8WcAphgPkAtpHTr9u8/s25/4-popular.png) no-repeat  left}

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

.top6 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxOQijfgtOKakAKSihXhGLV_dTOS16l4Q5AvuL2MMV_ApOp5l2jDmQs5-8gv6S2zy94-_DZ6ds_vCpMeXbgTR5y6nwWESKANnvb3qsilMx4-yE7AXfwTa_93XWKMhLH6tc-IzOzuM8e1aS/s25/6-popular-.png) no-repeat  left}

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

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

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

.top10 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM-QjADQ-uZTdhjR2AALgj6BDEOWhs3gvLt3DrejLDbog4sdHMqRvMgYfN-eeFE6MU7sYfHN3qbukRpAEg6ex7r7UbijySpi8m17KqMCBgaN4FhzqazP3BYNqvjwthwN28Mq67Ty5BMrpW/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/AVvXsEieQA5RhOtmgSB5GQ1mISALuoMhB8-Cn5bbPU5sSpzh8hhM_TRPiVzUAUfhiPoESNsuC8EToQpElPEqgC5p5uw475ZICoN0YAl6qJ9PtaJdARDxvroEhxTxzfhVcSDPBRmJjtTmZAT5isI/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 () {

  $(&quot;.popular-posts ol&gt;li:eq(0)&quot;).addClass(&quot;top1&quot;);

  $(&quot;.popular-posts ol&gt;li:eq(1)&quot;).addClass(&quot;top2&quot;);

  $(&quot;.popular-posts ol&gt;li:eq(2)&quot;).addClass(&quot;top3&quot;);

  $(&quot;.popular-posts ol&gt;li:eq(3)&quot;).addClass(&quot;top4&quot;);

  $(&quot;.popular-posts ol&gt;li:eq(4)&quot;).addClass(&quot;top5&quot;);

  $(&quot;.popular-posts ol&gt;li:eq(5)&quot;).addClass(&quot;top6&quot;);

  $(&quot;.popular-posts ol&gt;li:eq(6)&quot;).addClass(&quot;top7&quot;);

  $(&quot;.popular-posts ol&gt;li:eq(7)&quot;).addClass(&quot;top8&quot;);

  $(&quot;.popular-posts ol&gt;li:eq(8)&quot;).addClass(&quot;top9&quot;);

  $(&quot;.popular-posts ol&gt;li:eq(9)&quot;).addClass(&quot;top10&quot;);

 });

</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 == &quot;false&quot;'>

          <b:if cond='data:showSnippets == &quot;false&quot;'>

            <!-- (1) No snippet/thumbnail -->

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

          <b:else/>

            <!-- (2) Show only snippets -->

            <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 == &quot;false&quot;'>

            <!-- (3) Show only thumbnails -->

            <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/AVvXsEieQA5RhOtmgSB5GQ1mISALuoMhB8-Cn5bbPU5sSpzh8hhM_TRPiVzUAUfhiPoESNsuC8EToQpElPEqgC5p5uw475ZICoN0YAl6qJ9PtaJdARDxvroEhxTxzfhVcSDPBRmJjtTmZAT5isI/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/>

            <!-- (4) Show snippets and thumbnails -->

             <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/AVvXsEieQA5RhOtmgSB5GQ1mISALuoMhB8-Cn5bbPU5sSpzh8hhM_TRPiVzUAUfhiPoESNsuC8EToQpElPEqgC5p5uw475ZICoN0YAl6qJ9PtaJdARDxvroEhxTxzfhVcSDPBRmJjtTmZAT5isI/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 cùng lưu lại và xem kết quả.