20:51 - 17/06/2013

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://lh6.googleusercontent.com/-rKDlZYX-hnw/UXJ7yVfij6I/AAAAAAAADhI/6muOfY1b7sk/s25/1-popular.png) no-repeat  left}
    .top2 {background: url(https://lh4.googleusercontent.com/-38TMwWp9PQw/UXJ7ydbkP1I/AAAAAAAADhM/cHwUXZOfqSI/s25/2-popular.png) no-repeat  left}
    .top3 {background: url(https://lh4.googleusercontent.com/-DH65HbUllRI/UXJ7y5KmIGI/AAAAAAAADh8/SqPUjsQX4sU/s25/3-popular.png) no-repeat  left}
    .top4 {background: url(https://lh4.googleusercontent.com/-Ox4qp-whjfI/UXJ7zA99UqI/AAAAAAAADiM/FS9rpjMpSKk/s25/4-popular.png) no-repeat  left}
    .top5 {background: url(https://lh6.googleusercontent.com/-AXrdqYDouxA/UXJ7zbQG1DI/AAAAAAAADiA/eTVhua9xZdc/s25/5-popular.png) no-repeat  left}
    .top6 {background: url(https://lh5.googleusercontent.com/-DxVtvtvDsso/UXJ7zlBkI9I/AAAAAAAADhg/1384eMHEYcY/s25/6-popular-.png) no-repeat  left}
    .top7 {background: url(https://lh4.googleusercontent.com/-BhyztfyC9Do/UXJ70ETt39I/AAAAAAAADh4/p_VtFPzTnAM/s25/7-popular-.png) no-repeat  left}
    .top8 {background: url(https://lh6.googleusercontent.com/-aYX7Vq64U50/UXJ70NLLvrI/AAAAAAAADhw/7PspRDENyY0/s25/8-popular.png) no-repeat  left}
    .top9 {background: url(https://lh3.googleusercontent.com/-Ivfbr7XCYZ4/UXJ70UVPQUI/AAAAAAAADh0/8B4xFs84eeI/s25/9-popular.png) no-repeat  left}
    .top10 {background: url(https://lh4.googleusercontent.com/-75wIsFyYBSg/UXJ7yuuzLZI/AAAAAAAADhA/roN9zENG90M/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://lh4.googleusercontent.com/-pmYnlGErk4I/UM1U-f81LTI/AAAAAAAACu4/8lTz9QwAFt8/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://lh4.googleusercontent.com/-pmYnlGErk4I/UM1U-f81LTI/AAAAAAAACu4/8lTz9QwAFt8/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://lh4.googleusercontent.com/-pmYnlGErk4I/UM1U-f81LTI/AAAAAAAACu4/8lTz9QwAFt8/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]

Bình luận & Góp ý

0 nhận xét:

Đăng nhận xét