Home » Thủ thuật blogger » Style bài viết phổ biến cho blogger/blogspot

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

[tintuc]
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/AVvXsEgy-nBitFikKsA2kFv09ucYoxx1cCoS0R51YGWRcUXtM-7DqIG1SBtBniXZGa89o3QvodGgf1QXg947XkZAUsgw3A9EiaQrUT3JyRV1t95nOhVY-GCuZlkaoBsLlIBV15WA6AyYcUSe7PX1/s25/1-popular.png) no-repeat  left}
.top2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX_-kvWknM2FjGBvmIJzRW8CC1LpDPt4AJ0eSgxX70q-rKR5oIKQxxgLcNzsMjihaPRd_uOZETMUTcCxfVHn5PCrriYb6B0-wv_sykW-EedbeXHDdhv4oVFXD21tRp_VSbenmzWcVPz32T/s25/2-popular.png) no-repeat  left}
.top3 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6_aIiLkTVmSbdxXanWqXk0Z0FQp6zJyfifsPqTArC2VTXaK2eR50LWkMNlO1Wu57p5hlFW_2w0xBArImLflV11rNoqEAQWnzrOb-qEcn_tgLpYu5jIWK7MBwiU2blI-8bYSyYVQq_RZ7-/s25/3-popular.png) no-repeat  left}
.top4 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYRj5WGEW_IJF-3fUFqvyjeh6z00Ox4BTeMry4IwtEFldKtpJScYWrfHjgOTH6m4eTo5cDxaVehVK5ar_21huopqz4DFfNAa2yMqOboUN9zfpny2jmIZEaj2aVcM_CThD4uvTHMNjudHAf/s25/4-popular.png) no-repeat  left}
.top5 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtEY26PFabSlKrFKjVa9UwtJzU4kUKyRG0QUVfEY3AC8PNMRphhg3NQlBZp8zBGEZlcmrTWWV49ReTPY-t4xSXt0S5nO679n91dqoP-DLekw0ZVqnemgVrUVjawuk5rIgPonNS5kpmsEjd/s25/5-popular.png) no-repeat  left}
.top6 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_y8IwbLR4kFP6E4ZxrcLlUNVEl6nuumyIz8A1wC8O8xQ2dRT33sDPl1e9fVvqvL4AjHjwRluWl-u1PqbuM2UkQ-fYzCJ2W0EiEOGgZp5v9QJqq35cOrtLpYtbYHDmYyt2GKbjpBU2JwS3/s25/6-popular-.png) no-repeat  left}
.top7 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgksWjd7sxUdQvxksrTMh1gcog7xyKscN7so0kF_lOkx0ghgiHPBpXxfjfzko05j21bkZQhJ4AiOPJ3eJJQ27RsCWWplAJlxdI49ktC4rlh0w_7AarLlkL4zL4y1C9LQfxFBapMYNVypkG4/s25/7-popular-.png) no-repeat  left}
.top8 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiQ9eHWJNac228cXmKpGJykITWIILSKjueK9p9O3FabNziXkKlJsdtc4ZNAREcwWTRLU_4L2wXAhMGAXJDIsbGoAHMAtuQyqo9Az2DZ6raWwEtqQzbK0ThRohCf3DageeqL-8n4PWkWhFj/s25/8-popular.png) no-repeat  left}
.top9 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmmEkjBm3Ar61Zxj3v-NHYw-mLF4sel_wzyNhMPNSnt7YM5CZGjyvZ_wHQxSrGoo8n2S5ZN9KV5bn0PIC0jEMwrX3pA5mcN4oF0arp_nbP3Q3EgjvLL_YnIzOr8XLrvYlzf7Z8vgeAusoQ/s25/9-popular.png) no-repeat  left}
.top10 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCdB9QsgIHEty3N0FR_lRHBux0sGt_nh6TMQQ36jEI1RbUMrXk29NNISzUKI4Gnh6msDfXGRWng-pmMKAK9nEVcn86mZj6Sc718jxkYe52J_paxnZl9wEuUaMooU4z55bRyuc62l6dW1by/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/AVvXsEjyuFfCPO9S3DuHm0BZXUUM7GgAH5vv0Hvi1dUwSfD5ZNK1SZZhEreN814GhBGH6mOZdjWBpe7lCSoIbXwnSIbaG3GYBzzk6b630Q7wrVoYoQpwkyAq6Ox8xSP0xUwhcVCRCp-4GAFP8Uc/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 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>
  <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/AVvXsEjyuFfCPO9S3DuHm0BZXUUM7GgAH5vv0Hvi1dUwSfD5ZNK1SZZhEreN814GhBGH6mOZdjWBpe7lCSoIbXwnSIbaG3GYBzzk6b630Q7wrVoYoQpwkyAq6Ox8xSP0xUwhcVCRCp-4GAFP8Uc/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/AVvXsEjyuFfCPO9S3DuHm0BZXUUM7GgAH5vv0Hvi1dUwSfD5ZNK1SZZhEreN814GhBGH6mOZdjWBpe7lCSoIbXwnSIbaG3GYBzzk6b630Q7wrVoYoQpwkyAq6Ox8xSP0xUwhcVCRCp-4GAFP8Uc/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>
[/tintuc]
Nguyễn Hữu Trung 06:51 Nhãn: /
post-edit

Không có nhận xét nào:

- Không chèn liên kết Spam quảng cáo. có thể xem ở đây Liên Kết Bạn Bè
- Nội dung nên liên quan tới bài viết.
- Hãy đóng góp ý kiến của bạn để Blogger Việt hoàn thiện hơn.

Đăng ký: Đăng Nhận xét (Atom)