Code Sitemap Blogger (Blogspot) Đẹp Giống Bài Đăng mới (Recent post)

Chia sẻ miễn phí bộ code Sitemap blogger, sitemap blogspot, đẹp chuyên nghiệp, code site map dùng cho blogger, blogspot, được thiết ké gọn gàng, sạch.

Mình thấy nhiều blogger hay dùng trang sitemap chỉ có mục tiêu đề thui, mà mình cũng thích dùng mẫu như vậy, không cần phải viết code, chỉ áp dụng code mà các bạn chia sẻ trên mạng là được, không tốn thời gian.
- Hôm nay mình chia sẻ bộ Code Sitemap đầy đủ CSS, HTML và Javascript, hiện tại code sitemap này veotheme đang dùng, mình copy qua từ veotheme.
Code Sitemap Blogger (Blogspot) Đẹp Giống Bài Đăng mới (Recent post)
Code Sitemap Blogger (Blogspot) Đẹp Giống Bài Đăng mới (Recent post)

Các bước thực hiện Code Sitemap blogger

CSS sitemap

<style type='text/css'>
.blog-posts{background-color:unset;padding:0;border-radius:unset;-webkit-box-shadow:unset;box-shadow:unset;-webkit-transition:unset;transition:unset}
.post-item .post-header,.breadcrumbs{display:none}
.post-body img{max-width:unset;border:none;transition:unset}
.post-body img:hover{}
.post-body a,.post-body a:hover,.post-body a:visited{color:#3c4043}
.blog-posts .post{list-style-type:none;margin-bottom:15px;float:left;width:100%;display:block;position:relative;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;overflow:hidden;position:relative;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 2px 0 -2px rgba(0,0,0,0.2),0 0 2px 0 rgba(0,0,0,0.12);-moz-box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 2px 0 -2px rgba(0,0,0,0.2),0 0 2px 0 rgba(0,0,0,0.12);box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 2px 0 -2px rgba(0,0,0,0.2),0 0 2px 0 rgba(0,0,0,0.12);-webkit-transition:box-shadow 0.25s;-moz-transition:box-shadow 0.25s;-ms-transition:box-shadow 0.25s;-o-transition:box-shadow 0.25s;transition:box-shadow 0.25s}
.blog-posts .post:last-child{margin:0}
.blog-posts .post a{color:#3c4043}
.post_thumb{float:left;width:40%}
.post_thumb a{display:flex;position:relative;padding-bottom:56.25%}
.post_thumb img{height:100%;width:100%;position:absolute;top:0;left:0;object-fit:cover}
.post_title,.post_meta,.post_snippet{display:table;padding:10px 15px 0 15px}
.post_title{font-size:20px;line-height:normal;font-style:normal}
.post_title a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
.post_meta{font-size:15px;font-style:normal}
.post_meta .post_author:after,.post_meta .post_date:after,.post_meta .post_label:after{content:'-';padding:0 5px}
.post_meta .post_date{font-size:14px}
.post_meta .post_author img{width:24px;height:24px;overflow:hidden;border-radius:50%;vertical-align:middle;margin-right:5px;display:inline-block}
.post_snippet{font-size:medium;font-style:normal;line-height:normal}
.post_snippet p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}
.post_footer{float:left;width:100%;padding:10px 15px;line-height:20px;border-top:1px solid #ddd}
.post_footer a.parmalink{text-transform:uppercase;font-weight:normal;font-size:12px;position:relative;padding-right:30px}
.post_footer a.parmalink:after{font-family:Material Icons;content:'\e5c8';font-size:18px;color:#707070;position:absolute;right:5px}
.post_footer .post_share{position:relative;float:right}
.post_footer .post_share .share_button{cursor:pointer;font-size:12px;text-transform:uppercase;font-weight:normal;position:relative;padding-left:25px}
.post_footer .post_share .share_button:before{font-family:Material Icons;content:'\e80d';font-size:18px;color:#707070;position:absolute;left:0}
.post_footer .post_share_menu{position:absolute;bottom:100%;right:0;margin-bottom:10px;background:#ffffff;-webkit-border-radius:2px 2px 0 2px;-moz-border-radius:2px 2px 0 2px;border-radius:2px 2px 0 2px;box-shadow:0 -1px 4px 0 rgba(0,0,0,0.1),0 2px 3px -2px rgba(0,0,0,0.2),0 0 7px 0 rgba(0,0,0,0.12);-webkit-transform:scale(0,0);-moz-transform:scale(0,0);-ms-transform:scale(0,0);-o-transform:scale(0,0);transform:scale(0,0);-webkit-transition:all 0.25s;-moz-transition:all 0.25s;-ms-transition:all 0.25s;-o-transition:all 0.25s;transition:all 0.25s;transform-origin:100% 100%}
.blog-posts .post:hover,.post_footer .post_share_menu:hover{-webkit-box-shadow:0 3px 4px 0 rgba(0,0,0,0.14),0 3px 3px -2px rgba(0,0,0,0.2),0 1px 12px 0 rgba(0,0,0,0.12);-moz-box-shadow:0 3px 4px 0 rgba(0,0,0,0.14),0 3px 3px -2px rgba(0,0,0,0.2),0 1px 12px 0 rgba(0,0,0,0.12);box-shadow:0 3px 4px 0 rgba(0,0,0,0.14),0 3px 3px -2px rgba(0,0,0,0.2),0 1px 12px 0 rgba(0,0,0,0.12)}
.post_footer .post_share_menu.opened{-webkit-transform:scale(1,1);-moz-transform:scale(1,1);-ms-transform:scale(1,1);-o-transform:scale(1,1);transform:scale(1,1)}
.post_footer .post_share_menu span{display:block;text-align:left;padding:8px 15px;font-size:15px;white-space:nowrap;color:#3c4043;cursor:pointer}
.post_footer .post_share_menu span:hover{background-color:rgb(230,230,230)}
.show-posts{margin:15px 0 0 0}
@media screen and (max-width:550px){.post_thumb{width:100%}.post_title{font-size:large}.post_title a,.post_snippet p{display:block}.post_footer{margin-top:15px}}
@media screen and (max-width:360px){.post_title{font-size:medium}}
</style>

HTML sitemap

<div class='breadcrumb'>
  <button type='button'>Tất cả nhãn</button>
  <ul class='hidden'>
    <li>Tất cả nhãn</li>
  </ul>
  <div class='all_num_posts'></div>
  <div class='num_posts'></div>
</div>
<div class='all_posts'>
  <div class='blog-posts spinner load'></div>
  <div class='show-posts'>
    <button class='load-posts hidden' arial-label='Tải thêm bài đăng' role='button'>Tải thêm</button>
    <input id='numposts' type='hidden' value='0'/>
    <input id='allposts' type='hidden' value=''/>
    <div class='loadposts hidden'></div>
  </div>
</div>
<div class='label_posts hidden'>
  <div class='blog-posts'></div>
  <div class='show-posts'>
    <button class='load-posts hidden' arial-label='Tải thêm bài đăng' role='button'>Tải thêm</button>
    <input id='numposts' type='hidden' value='0'/>
    <input id='allposts' type='hidden' value=''/>
    <div class='loadposts hidden'></div>
  </div>
</div>

Javascript

    <b:if cond='data:blog.pageId eq 769984141704978802'>
    <script>
    var homepage        = &quot;&quot;,
        numposts        = 15, // Số bài sau mỗi lần tải
        snippet         = 150, // Số từ tóm tắt đoạn trích
        showthumbnail   = true, // Hiển thị Ảnh bài viết sửa thành false nếu không hiển thị
        showmeta        = true, // Hiển thị tác giả, ngày đăng, tên nhãn, số nhận xét sửa thành false nếu không hiển thị
        showauthor      = true, // Hiển thị tác giả sửa thành false nếu không hiển thị
        showdate        = true, // Hiển thị ngày đăng sửa thành false nếu không hiển thị
        showlabel       = false, // Hiển thị tên nhãn sửa thành false nếu không hiển thị
        showcomment     = true, // Hiển thị số nhận xét sửa thành false nếu không hiển thị
        showsnippet     = true, // Hiển thị đoạn tóm tắt sửa thành false nếu không hiển thị
        showinfo        = true, // Hiển thị nút đọc thêm và nút chia sẻ sửa thành false nếu không hiển thị
        showreadmore    = true, // Hiển thị nút đọc thêm sửa thành false nếu không hiển thị
        showshare       = true, // Hiển thị nút chia sẻ sửa thành false nếu không hiển thị
        thumbnail       = &quot;https://4.bp.blogspot.com/-00O66C-eBQs/W0IcokXSnOI/AAAAAAAAL_k/g4KtDm7SkQsoe7_G0vZ_C_nU0Gf_-kyVQCLcBGAs/s1600/safe_image.png&quot;, // Ảnh thay thế có thể thay bằng ảnh khác hoặc giữ nguyên
        messagesposts   = &quot;<data:messages.posts/>&quot;, // Đọc thêm
        readmoretext    = &quot;<data:messages.readMore/>&quot;, // Nhận xét 
        commenttext     = &quot;<data:messages.comments/>&quot;, // Đăng nhận xét
        postcommenttext = &quot;<data:messages.postAComment/>&quot;, // Chia sẻ
        sharetext       = &quot;<data:messages.share/>&quot;,
        facebooktext    = &quot;<b:eval expr='data:blog.sharing.platforms[1].shareMessage'/>&quot;, // Chia sẻ với Facebook
        twittertext     = &quot;<b:eval expr='data:blog.sharing.platforms[3].shareMessage'/>&quot;, // Chia sẻ với Twitter
        pinteresttext   = &quot;<b:eval expr='data:blog.sharing.platforms[4].shareMessage'/>&quot;, // Chia sẻ với Pinterest
        googletext      = &quot;<b:eval expr='data:blog.sharing.platforms[5].shareMessage'/>&quot;; // Chia sẻ với Google+
        //<![CDATA[
        function loadcontent(json) {
          if (json.feed.entry) {
            for (var t = 0; t < json.feed.entry.length; t++) {
              var entry = json.feed.entry[t];
              for (var a = 0; a < entry.link.length; a++) {
                if ('alternate' == entry.link[a].rel) {
                  var post_link = entry.link[a].href;
                  break
                }
              }
              var post_title = '<div class="post_title"><a href='+ post_link +' title="'+ entry.title.$t +'" target="_blank">'+ entry.title.$t +'</a></div>';
              if (showthumbnail == true) {
                if ('media$thumbnail' in entry) {
                  var post_thumb = '<div class="post_thumb"><a href='+ post_link +' title="'+ entry.title.$t +'" target="_blank"><img alt="'+ entry.title.$t +'" src='+ entry.media$thumbnail.url.replace('s72-c', 's1600') +' /></a></div>';
                } else {
                  post_thumb = '<div class="post_thumb"><a href='+ post_link +' title="'+ entry.title.$t +'" target="_blank"><img alt="'+ entry.title.$t +'" src='+ thumbnail +' /></a></div>';
                }
              } else {
                post_thumb = '';
              }
              if (showmeta == true) {
                if (showauthor == true) {
                  for (var i = 0; i < entry.author.length; i++) {
                    if (entry.author[i].uri) {
                      var post_author = '<span class="post_author"><a href='+ entry.author[i].uri.$t +' title="'+ entry.author[i].name.$t +'" target="_blank"><img src='+ entry.author[i].gd$image.src.replace('s512-c', 's40-c') +' alt="'+ entry.author[i].name.$t +'"/><span>'+ entry.author[i].name.$t +'</span></a></span>';
                    } else {
                      post_author = '<span class="post_author"><a href="javascript:;" title="'+ entry.author[i].name.$t +'"><img src='+ entry.gd$image.src.replace('s512-c', 's40-c') +' alt="'+ entry.author[i].name.$t +'"/><span>'+ entry.author[i].name.$t +'</span></a></span>';
                    }
                  }
                } else {
                  post_author = '';
                }
                if (showdate == true) {
                  var post_date = '<span class="post_date">'+ entry.published.$t.substring(8, 10) + '/' + entry.published.$t.substring(5, 7) + '/' + entry.published.$t.substring(0, 4) +'</span>';
                } else {
                  post_date = '';
                }
                if (showlabel == true) {
                  if ('category' in entry) {
                    for (var r = 0; r < entry.category.length; r++) {
                      var post_label = '<span class="post_label"><a href="'+ homepage +'/search/label/'+ entry.category[r].term +'" title="'+ entry.category[r].term +'" target="_blank">'+ entry.category[r].term +'</a></span>';
                    }
                  } else {
                    post_label = '';
                  } 
                } else {
                  post_label = '';
                }
                if (showcomment == true) {
                  if ('thr$total' in entry) {
                    var numofcomments = json.feed.entry[t].thr$total.$t;
                    if (numofcomments >= 0) {
                      var post_comment = '<span class="post_comment"><a href='+ post_link + "#comments" +' title="'+ postcommenttext +'" target="_blank">'+ numofcomments + " " + commenttext +'</a></span>';
                    } else {
                      post_comment = '<span class="post_comment"><a href='+ post_link + "#comments" +' title="'+ postcommenttext +'" target="_blank">'+ postcommenttext +'</a></span>';
                    }
                  } else {
                    post_comment = '';
                  }
                } else {
                  post_comment = '';
                }
                var post_meta = '<div class="post_meta">'+ post_author + post_date + post_label + post_comment +'</div>';
              } else {
                post_meta = '';
              }
              if (showsnippet == true) {
                if ('summary' in entry) {
                  var post_snippet = entry.summary.$t,
                    post_summary = '',
                    re = /<\S[^>]*>/g,
                    post_snippet = post_snippet.replace(re, '');
                  if (post_snippet.length < snippet) {
                    post_summary = post_snippet;
                  } else {
                    post_snippet = post_snippet.substring(0, snippet);
                    var quoteEnd = post_snippet.lastIndexOf(' ');
                    post_snippet = post_snippet.substring(0, quoteEnd);
                    post_summary = post_snippet;
                  }
                  var post_snippet = '<div class="post_snippet"><p>'+ post_summary + "..." +'</p></div>';
                } else {
                  post_snippet = '';
                }
              } else {
                post_snippet = '';
              }
              if (showinfo == true) {
                if (showreadmore == true) {
                  var read_more = '<a class="parmalink" href='+ post_link + "#more" +' title="'+ readmoretext +'" target="_blank">'+ readmoretext +'</a>';
                } else {
                  read_more = '';
                }
                if (showshare == true) {
                  if ('media$thumbnail' in entry) {
                    var post_share = ('<div class="post_share"><span class="share_button">'+ sharetext +'</span><div class="post_share_menu"><span class="facebook social-wrapper" data-href="https://www.facebook.com/sharer/sharer.php?u='+ post_link +'" title="'+ facebooktext +'">'+ facebooktext +'</span><span class="twitter social-wrapper" data-href="https://twitter.com/intent/tweet?url='+ post_link +'&text='+ entry.summary.$t.substring(0, snippet) +'" title="'+ twittertext +'">'+ twittertext +'</span><span class="pinterest social-wrapper" data-href="https://www.pinterest.com/pin/create/button/?url='+ post_link +' &description='+ entry.title.$t +'&media='+ entry.media$thumbnail.url.replace("s72-c", "s1600") +'" title="'+ pinteresttext +'">'+ pinteresttext +'</span><span class="google-plus social-wrapper" data-href="https://plus.google.com/share?url='+ post_link +'" title="'+ googletext +'">'+ googletext +'</span></div></div>')
                  } else {
                    post_share = ('<div class="post_share"><span class="share_button">'+ sharetext +'</span><div class="post_share_menu"><span class="facebook social-wrapper" data-href="https://www.facebook.com/sharer/sharer.php?u='+ post_link +'" title="'+ facebooktext +'">'+ facebooktext +'</span><span class="twitter social-wrapper" data-href="https://twitter.com/intent/tweet?url='+ post_link +'&text='+ entry.summary.$t.substring(0, snippet) +'" title="'+ twittertext +'">'+ twittertext +'</span><span class="pinterest social-wrapper" data-href="https://www.pinterest.com/pin/create/button/?url='+ post_link +' &description='+ entry.title.$t +'&media='+ thumbnail +'" title="'+ pinteresttext +'">'+ pinteresttext +'</span><span class="google-plus social-wrapper" data-href="https://plus.google.com/share?url='+ post_link +'" title="'+ googletext +'">'+ googletext +'</span></div></div>')
                  }
                } else {
                  post_share = '';
                }
                var post_footer = '<div class="post_footer">'+ read_more + post_share +'</div>'
              } else {
                post_footer = '';
              }
              $('.all_posts .blog-posts').append('<article class="post">'+ post_thumb + post_title + post_meta + post_snippet + post_footer +'</article>');
            }
            $('.post_share').each(function() {
              var d = $(this);
              $('.share_button', d).click(function(n) {
                return n.preventDefault(), $div = $('.post_share_menu', d), $div.toggleClass('opened'), $('.post_share_menu').not($div).removeClass('opened'), !1
              })
            }), $('html').click(function() {
                $('.post_share_menu').removeClass('opened')
            })
            var e = document.getElementsByClassName('social-wrapper'),
            n = e.length;
            for (i = 0; i < n; i++) e[i].addEventListener('click', function(e, n, a) {
              e = this.getAttribute("data-href");
              var i = screen.width / 2 - 200,
                d = screen.height / 2 - 225;
              window.open(e, "popUpWindow", "height=450,width=400,left=" + i + ",top=" + d + ",resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes")
            });
          }
        }
        function loadpost(json) {
          if (json.feed.entry) {
            for (var t = 0; t < json.feed.entry.length; t++) {
              var entry = json.feed.entry[t];
              for (var a = 0; a < entry.link.length; a++) {
                if ('alternate' == entry.link[a].rel) {
                  var post_link = entry.link[a].href;
                  break
                }
              }
              var post_title = '<div class="post_title"><a href='+ post_link +' title="'+ entry.title.$t +'" target="_blank">'+ entry.title.$t +'</a></div>';
              if (showthumbnail == true) {
                if ('media$thumbnail' in entry) {
                  var post_thumb = '<div class="post_thumb"><a href='+ post_link +' title="'+ entry.title.$t +'" target="_blank"><img alt="'+ entry.title.$t +'" src='+ entry.media$thumbnail.url.replace('s72-c', 's1600') +' /></a></div>';
                } else {
                  post_thumb = '<div class="post_thumb"><a href='+ post_link +' title="'+ entry.title.$t +'" target="_blank"><img alt="'+ entry.title.$t +'" src='+ thumbnail +' /></a></div>';
                }
              } else {
                post_thumb = '';
              }
              if (showmeta == true) {
                if (showauthor == true) {
                  for (var i = 0; i < entry.author.length; i++) {
                    if (entry.author[i].uri) {
                      var post_author = '<span class="post_author"><a href='+ entry.author[i].uri.$t +' title="'+ entry.author[i].name.$t +'" target="_blank"><img src='+ entry.author[i].gd$image.src.replace('s512-c', 's40-c') +' alt="'+ entry.author[i].name.$t +'"/><span>'+ entry.author[i].name.$t +'</span></a></span>';
                    } else {
                      post_author = '<span class="post_author"><a href="javascript:;" title="'+ entry.author[i].name.$t +'"><img src='+ entry.gd$image.src.replace('s512-c', 's40-c') +' alt="'+ entry.author[i].name.$t +'"/><span>'+ entry.author[i].name.$t +'</span></a></span>';
                    }
                  }
                } else {
                  post_author = '';
                }
                if (showdate == true) {
                  var post_date = '<span class="post_date">'+ entry.published.$t.substring(8, 10) + '/' + entry.published.$t.substring(5, 7) + '/' + entry.published.$t.substring(0, 4) +'</span>';
                } else {
                  post_date = '';
                }
                if (showlabel == true) {
                  if ('category' in entry) {
                    for (var r = 0; r < entry.category.length; r++) {
                      var post_label = '<span class="post_label"><a href="'+ homepage +'/search/label/'+ entry.category[r].term +'" title="'+ entry.category[r].term +'" target="_blank">'+ entry.category[r].term +'</a></span>';
                    }
                  } else {
                    post_label = '';
                  } 
                } else {
                  post_label = '';
                }
                if (showcomment == true) {
                  if ('thr$total' in entry) {
                    var numofcomments = json.feed.entry[t].thr$total.$t;
                    if (numofcomments >= 0) {
                      var post_comment = '<span class="post_comment"><a href='+ post_link + "#comments" +' title="'+ postcommenttext +'" target="_blank">'+ numofcomments + " " + commenttext +'</a></span>';
                    } else {
                      post_comment = '<span class="post_comment"><a href='+ post_link + "#comments" +' title="'+ postcommenttext +'" target="_blank">'+ postcommenttext +'</a></span>';
                    }
                  } else {
                    post_comment = '';
                  }
                } else {
                  post_comment = '';
                }
                var post_meta = '<div class="post_meta">'+ post_author + post_date + post_label + post_comment +'</div>';
              } else {
                post_meta = '';
              }
              if (showsnippet == true) {
                if ('summary' in entry) {
                  var post_snippet = entry.summary.$t,
                    post_summary = '',
                    re = /<\S[^>]*>/g,
                    post_snippet = post_snippet.replace(re, '');
                  if (post_snippet.length < snippet) {
                    post_summary = post_snippet;
                  } else {
                    post_snippet = post_snippet.substring(0, snippet);
                    var quoteEnd = post_snippet.lastIndexOf(' ');
                    post_snippet = post_snippet.substring(0, quoteEnd);
                    post_summary = post_snippet;
                  }
                  var post_snippet = '<div class="post_snippet"><p>'+ post_summary + "..." +'</p></div>';
                } else {
                  post_snippet = '';
                }
              } else {
                post_snippet = '';
              }
              if (showinfo == true) {
                if (showreadmore == true) {
                  var read_more = '<a class="parmalink" href='+ post_link + "#more" +' title="'+ readmoretext +'" target="_blank">'+ readmoretext +'</a>';
                } else {
                  read_more = '';
                }
                if (showshare == true) {
                  if ('media$thumbnail' in entry) {
                    var post_share = ('<div class="post_share"><span class="share_button">'+ sharetext +'</span><div class="post_share_menu"><span class="facebook social-wrapper" data-href="https://www.facebook.com/sharer/sharer.php?u='+ post_link +'" title="'+ facebooktext +'">'+ facebooktext +'</span><span class="twitter social-wrapper" data-href="https://twitter.com/intent/tweet?url='+ post_link +'&text='+ entry.summary.$t.substring(0, snippet) +'" title="'+ twittertext +'">'+ twittertext +'</span><span class="pinterest social-wrapper" data-href="https://www.pinterest.com/pin/create/button/?url='+ post_link +' &description='+ entry.title.$t +'&media='+ entry.media$thumbnail.url.replace("s72-c", "s1600") +'" title="'+ pinteresttext +'">'+ pinteresttext +'</span><span class="google-plus social-wrapper" data-href="https://plus.google.com/share?url='+ post_link +'" title="'+ googletext +'">'+ googletext +'</span></div></div>')
                  } else {
                    post_share = ('<div class="post_share"><span class="share_button">'+ sharetext +'</span><div class="post_share_menu"><span class="facebook social-wrapper" data-href="https://www.facebook.com/sharer/sharer.php?u='+ post_link +'" title="'+ facebooktext +'">'+ facebooktext +'</span><span class="twitter social-wrapper" data-href="https://twitter.com/intent/tweet?url='+ post_link +'&text='+ entry.summary.$t.substring(0, snippet) +'" title="'+ twittertext +'">'+ twittertext +'</span><span class="pinterest social-wrapper" data-href="https://www.pinterest.com/pin/create/button/?url='+ post_link +' &description='+ entry.title.$t +'&media='+ thumbnail +'" title="'+ pinteresttext +'">'+ pinteresttext +'</span><span class="google-plus social-wrapper" data-href="https://plus.google.com/share?url='+ post_link +'" title="'+ googletext +'">'+ googletext +'</span></div></div>')
                  }
                } else {
                  post_share = '';
                }
                var post_footer = '<div class="post_footer">'+ read_more + post_share +'</div>'
              } else {
                post_footer = '';
              }
              $('.label_posts .blog-posts').append('<article class="post">'+ post_thumb + post_title + post_meta + post_snippet + post_footer +'</article>');
            }
            $('.post_share').each(function() {
              var d = $(this);
              $('.share_button', d).click(function(n) {
                return n.preventDefault(), $div = $('.post_share_menu', d), $div.toggleClass('opened'), $('.post_share_menu').not($div).removeClass('opened'), !1
              })
            }), $('html').click(function() {
                $('.post_share_menu').removeClass('opened')
            })
            var e = document.getElementsByClassName('social-wrapper'),
            n = e.length;
            for (i = 0; i < n; i++) e[i].addEventListener('click', function(e, n, a) {
              e = this.getAttribute("data-href");
              var i = screen.width / 2 - 200,
                d = screen.height / 2 - 225;
              window.open(e, "popUpWindow", "height=450,width=400,left=" + i + ",top=" + d + ",resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes")
            });
          }
        }
        $.ajax({
          type: 'GET',
          url: homepage + '/feeds/posts/summary',
          data: {
            'max-results': numposts,
            'alt': 'json'
          },
          dataType: 'jsonp',
          jsonp: 'callback',
          jsonpCallback: 'loadcontent',
          success: function(a) {
            $('.all_posts .blog-posts').removeClass('spinner').removeClass('load')
            var total_posts = a.feed.openSearch$totalResults.$t
            $('.breadcrumb .all_num_posts').append('<span>' + total_posts + ' ' + messagesposts + '</span>')
            $('.all_posts #allposts').attr('value', total_posts)
            for (var k = 0; k < a.feed.category.length; k++) {
              var l = a.feed.category[k].term
              $('.breadcrumb ul').append('<li>' + l + '</li>')
            }
            $('.breadcrumb ul li:first-child').on('click', function() {
              var text = $(this).text()
              $('.breadcrumb button').text(text)
              $('.breadcrumb ul').addClass('hidden')
              $('.all_posts').removeClass('hidden')
              $('.label_posts').addClass('hidden')
              $('.breadcrumb .all_num_posts').show()
              $('.breadcrumb .num_posts').empty()
            })
            $('.breadcrumb ul li:not(:first-child)').each(function() {
              $(this).on('click', function(event) {
                $('.all_posts').addClass('hidden')
                $('.label_posts').removeClass('hidden')
                $('.label_posts .blog-posts').empty()
                $('.label_posts .blog-posts').addClass('spinner').addClass('load')
                var labelname = $(event.target).text()
                $('.breadcrumb button').text(labelname)
                $('.breadcrumb ul').addClass('hidden')
                $('.label_posts .show-posts').removeClass('hidden')
                $('.label_posts #numposts').val(0)
                $('.breadcrumb .num_posts').empty()
                $('.breadcrumb .all_num_posts').hide()
                $.ajax({
                  type: 'GET',
                  url: homepage + '/feeds/posts/summary/-/' + labelname,
                  data: {
                    'max-results': numposts,
                    'alt': 'json'
                  },
                  dataType: 'jsonp',
                  jsonp: 'callback',
                  jsonpCallback: 'loadpost',
                  success: function(c) {
                    $('.label_posts .blog-posts').removeClass('spinner').removeClass('load')
                    var totalposts = c.feed.openSearch$totalResults.$t
                    $('.breadcrumb .num_posts').append('<span>' + totalposts + ' ' + messagesposts + '</span>')
                    $('.label_posts #allposts').attr('value', totalposts)
                    if (totalposts > numposts) {
                      $('.label_posts .load-posts').removeClass('hidden')
                      $(document).off('click', '.label_posts .load-posts').on('click', '.label_posts .load-posts', function(d) {
                        $('.label_posts .loadposts').removeClass('hidden').addClass('spinner').addClass('load')
                        var items = Number($('.label_posts #numposts').val())
                        items = items + numposts
                        if (items < totalposts) {
                          $(d.target).addClass('hidden')
                          $('.label_posts #numposts').val(items)
                          setTimeout(function() {
                            $.ajax({
                              type: 'GET',
                              url: homepage + '/feeds/posts/summary/-/' + labelname,
                              data: {
                                'max-results': numposts,
                                'start-index': items + 1,
                                'alt': 'json'
                              },
                              dataType: 'jsonp',
                              jsonp: 'callback',
                              jsonpCallback: 'loadpost',
                              success: function() {
                                var lastposts = items + numposts
                                if (lastposts < totalposts) {
                                  $(d.target).removeClass('hidden')
                                  $('.label_posts .loadposts').addClass('hidden').removeClass('spinner').removeClass('load')
                                } else {
                                  $(d.target).addClass('hidden')
                                  $('.label_posts .loadposts,.label_posts .show-posts').addClass('hidden')
                                }
                              }
                            })
                          }, 500)
                        } else {
                          $(d.target).addClass('hidden')
                          $('.label_posts .loadposts,.label_posts .show-posts').addClass('hidden')
                        }
                      })
                    } else {
                      $('.label_posts .show-posts').addClass('hidden')
                    }
                  }
                })
              })
            })
            if (total_posts > numposts) {
              $('.all_posts .load-posts').removeClass('hidden')
              $(document).off('click', '.all_posts .load-posts').on('click', '.all_posts .load-posts', function(e) {
                $('.all_posts .loadposts').removeClass('hidden').addClass('spinner').addClass('load')
                var items = Number($('.all_posts #numposts').val())
                items = items + numposts
                if (items < total_posts) {
                  $(e.target).addClass('hidden')
                  $('.all_posts #numposts').val(items)
                  setTimeout(function() {
                    $.ajax({
                      type: 'GET',
                      url: homepage + '/feeds/posts/summary',
                      data: {
                        'max-results': numposts,
                        'start-index': items + 1,
                        'alt': 'json'
                      },
                      dataType: 'jsonp',
                      jsonp: 'callback',
                      jsonpCallback: 'loadcontent',
                      success: function() {
                        var lastposts = items + numposts
                        if (lastposts < total_posts) {
                          $(e.target).removeClass('hidden')
                          $('.all_posts .loadposts').addClass('hidden').removeClass('spinner').removeClass('load')
                        } else {
                          $(e.target).addClass('hidden')
                          $('.all_posts .loadposts,.all_posts .show-posts').addClass('hidden')
                        }
                      }
                    })
                  }, 500)
                } else {
                  $(e.target).addClass('hidden')
                  $('.all_posts .loadposts,.all_posts .show-posts').addClass('hidden')
                }
              })
            } else {
              $('.all_posts .show-posts').addClass('hidden')
            }
          }
        })
        $('.breadcrumb button').click(function(e) {
          e.stopPropagation()
          $('.breadcrumb ul').toggleClass('hidden')
        })
        $('.breadcrumb ul').click(function(e) {
          e.stopPropagation()
        })
        $('html').click(function() {
          $('.breadcrumb ul').addClass('hidden')
        })
        $('.scrollTop').click(function() {
          $('html, body').animate({
            scrollTop: 0
            }, '200')      
        })
       //]]></script>
     </b:if>
- Chú ý các bước làm vẫn tương tự như 1 code bình thường được dùng cho blogger, nếu bạn cần hỗ trợ thì vui lòng để lại lời nhắn dưới phần comments nha.