Chuyên mục

Blogger
  • Blogger Template 8
    • Seo Blogspot 29
      • Thiết kế Blogspot 26
        • Thủ thuật Blogspot 82
          • Tiện ích Blogspot 31
            Máy tính
            • Phần mềm 45
              • Sửa lỗi Windows 20
                • Thủ thuật Windows 78
                  • Cài đặt Windows 43

                    Code recent posts hiển thị đầy đủ tóm tắt thông tin của một post tích hợp nút tải thêm

                    Sau quá trình tham khảo lại tất cả code được chia sẻ trên mạng và code mình viết từ trước tới nay nếu như áp dụng thử với các Blog khác nhau đều gặp tình trạng chung báo lỗi vì trong code đang thiếu điều kiện khi dữ liệu trong nguồn cấp bị thiếu. Do đó mình quyết định bỏ thời gian ra viết lại và hoàn thành được code đầy đủ không báo lỗi khi áp dụng với các Blog khác nhau

                    Code recent posts hiển thị đầy đủ tóm tắt thông tin của một post tích hợp nút tải thêm

                    Xem demo tại: https://nhipsongnet.blogspot.com

                    Thông tin về code


                    + Hiển thị đầy đủ thông tin tóm tắt của 1 post bao gồm:
                    • Tiêu đề
                    • Liên kết
                    • Ảnh
                    • Tên tác giả
                    • Ảnh tác giả
                    • Liên kết hồ sơ tác giả
                    • Ngày đăng
                    • Nhãn (cuối)
                    • Số nhận xét
                    • Tóm tắt (Đoạn trích)
                    • Nút đọc thêm
                    • Nút chia sẻ (Facebook, Twitter, Google+, Pinterest)
                    + Sửa lỗi:
                    • Bài viết không thêm nhãn
                    • Bài viết không có ảnh
                    • Tắt nhận xét
                    • Không có liên kết hồ sơ tác giả
                    • Tác giả xóa hồ sơ
                    + Cài đặt hiển thị:
                    • Địa chỉ trang chủ Blog: homepage // Nếu sử dụng Blog khác điền đia chỉ Blog còn không bỏ trống
                    • Tên nhãn: labelname // Nếu muốn sử dụng cho 1 nhãn ghi tên nhãn
                    • Số bài mỗi lần tải: numofposts
                    • Số từ của đoạn tóm tắt: snippet
                    • Ảnh bài viết: showthumbnail // Sửa true thành false nếu không hiển thị
                    • Thông tin về: showmeta // Sửa true thành false nếu không hiển thị
                      • Tác giả: showauthor (Ảnh, Tên, Liên kết hồ sơ) // Sửa true thành false nếu không hiển thị
                      • Ngày đăng: showdate // Sửa true thành false nếu không hiển thị
                      • Nhãn (cuối): showlabel // Sửa true thành false nếu không hiển thị
                      • Số nhận xét: showcomment // Sửa true thành false nếu không hiển thị
                    • Tóm tắt (Đoạn trích): showsnippet // Sửa true thành false nếu không hiển thị
                    • Thông tin về: showinfo // Sửa true thành false nếu không hiển thị
                      • Nút đọc thêm: showreadmore // Sửa true thành false nếu không hiển thị
                      • Nút chia sẻ (Facebook, Twitter, Google+, Pinterest): showshare // Sửa true thành false nếu không hiển thị
                    • Ảnh thay thế nếu bài không có ảnh: thumbnail // Giữ nguyên hoặc thay ảnh khác
                    Để code không báo lỗi trước hết bạn cần kiểm tra nguồn cấp dữ liệu Blog để chắc chắn rằng nguồn cấp dữ liệu không bị tắt. Các bạn truy cập mục Cài đặt > Khác > Nguồn cấp dữ liệu trang web > Cho phép nguồn cấp dữ liệu blog > chọn Cho đến dấu ngắt

                    Cài đặt code


                    Chèn script trước thẻ đóng </body> của template

                    Copy
                    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
                    <script>
                    // Cài đặt hiển thị
                    var homepage = "", // Nếu sử dụng Blog khác điền địa chỉ Blog, ví dụ homepage = "https://www.vietblogdao.com" còn không giữ nguyên
                        labelname = "", // Nếu muốn sử dụng cho 1 nhãn ghi tên nhãn ví dụ labelname = "tien-ich-blogspot"
                        numofposts = 10, // Số bài sau mỗi lần tải
                        snippet = 110, // Số từ tóm tắt
                        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 = true, // 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 = "https://4.bp.blogspot.com/-00O66C-eBQs/W0IcokXSnOI/AAAAAAAAL_k/g4KtDm7SkQsoe7_G0vZ_C_nU0Gf_-kyVQCLcBGAs/s1600/safe_image.png", // Ảnh thay thế có thể thay bằng ảnh khác hoặc giữ nguyên
                        readmoretext = "<data:messages.readMore/>", // Đọc thêm
                        commenttext = "<data:messages.comments/>", // Nhận xét
                        postcommenttext = "<data:messages.postAComment/>", // Đăng nhận xét
                        sharetext = "<data:messages.share/>", // Chia sẻ
                        facebooktext = "<b:eval expr='data:blog.sharing.platforms[1].shareMessage'/>", // Chia sẻ với Facebook
                        twittertext = "<b:eval expr='data:blog.sharing.platforms[3].shareMessage'/>", // Chia sẻ với Twitter
                        pinteresttext = "<b:eval expr='data:blog.sharing.platforms[4].shareMessage'/>", // Chia sẻ với Pinterest
                        googletext = "<b:eval expr='data:blog.sharing.platforms[5].shareMessage'/>"; // Chia sẻ với Google+
                    //<![CDATA[
                    function recentposts(json) {
                      if (json.feed.entry) {
                        for (var t = 0; t < json.feed.entry.length; t++) {
                          for (var a = 0; a < json.feed.entry[t].link.length; a++) {
                            if ("alternate" == json.feed.entry[t].link[a].rel) {
                              var post_link = json.feed.entry[t].link[a].href;
                              break
                            }
                          }
                          var post_title = '<div class="post_title"><a href='+ post_link +' title="'+ json.feed.entry[t].title.$t +'">'+ json.feed.entry[t].title.$t +'</a></div>';
                          if (showthumbnail == true) {
                            try {
                              var post_thumb = '<div class="post_thumb"><a href='+ post_link +' title="'+ json.feed.entry[t].title.$t +'"><img alt="'+ json.feed.entry[t].title.$t +'" src='+ json.feed.entry[t].media$thumbnail.url.replace("s72-c", "s1600") +' /></a></div>';
                            } catch (e) {
                              var post_thumb = '<div class="post_thumb"><a href='+ post_link +' title="'+ json.feed.entry[t].title.$t +'"><img alt="'+ json.feed.entry[t].title.$t +'" src='+ thumbnail +' /></a></div>';
                            }
                          } else {
                            var post_thumb = '';
                          }
                          if (showmeta == true) {
                            if (showauthor == true) {
                              for (var i = 0; i < json.feed.entry[t].author.length; i++) {
                                if (json.feed.entry[t].author[i].uri) {
                                  var post_author = '<span class="post_author"><a href='+ json.feed.entry[t].author[i].uri.$t +' title="'+ json.feed.entry[t].author[i].name.$t +'" rel="noopener" target="_blank"><img src='+ json.feed.entry[t].author[i].gd$image.src.replace("s512-c", "s40-c") +' alt="'+ json.feed.entry[t].author[i].name.$t +'"/><span>'+ json.feed.entry[t].author[i].name.$t +'</span></a></span>';
                                } else {
                                  var post_author = '<span class="post_author"><a href="javascript:;" title="'+ json.feed.entry[t].author[i].name.$t +'" rel="noopener" target="_blank"><img src='+ json.feed.entry[t].author[i].gd$image.src.replace("s512-c", "s40-c") +' alt="'+ json.feed.entry[t].author[i].name.$t +'"/><span>'+ json.feed.entry[t].author[i].name.$t +'</span></a></span>';
                                }
                              }
                            } else {
                              var post_author = '';
                            }
                            if (showdate == true) {
                              var post_date = '<span class="post_date">'+ json.feed.entry[t].published.$t.substring(8, 10) + "/" + json.feed.entry[t].published.$t.substring(5, 7) + "/" + json.feed.entry[t].published.$t.substring(0, 4) +'</span>';
                            } else {
                              var post_date = '';
                            }
                            if (showlabel == true) {
                              if (json.feed.entry[t].category) {
                                for (var r = 0; r < json.feed.entry[t].category.length; r++) {
                                  var post_label = '<span class="post_label"><a href="'+ homepage +'/search/label/'+ json.feed.entry[t].category[r].term +'" title="'+ json.feed.entry[t].category[r].term +'">'+ json.feed.entry[t].category[r].term +'</a></span>';
                                }
                              } else {
                                var post_label = '';
                              }
                            } else {
                              var post_label = '';
                            }
                            if (showcomment == true) {
                              if (json.feed.entry[t].thr$total) {
                                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 +'">'+ numofcomments + " " + commenttext +'</a></span>';
                                } else {
                                  var post_comment = '<span class="post_comment"><a href='+ post_link + "#comments" +' title="'+ postcommenttext +'">'+ postcommenttext +'</a></span>';
                                }
                              } else {
                                var post_comment = '';
                              }
                            } else {
                              var post_comment = '';
                            }
                            var post_meta = '<div class="post_meta">'+ post_author + post_date + post_label + post_comment +'</div>';
                          } else {
                            var post_meta = '';
                          }
                          if (showsnippet == true) {
                            var re = /<\S[^>]*>/g;
                            var post_snippet = json.feed.entry[t].summary.$t.replace(re, "");
                            if (post_snippet.length > snippet) {
                              post_snippet = post_snippet.substring(0, snippet);
                              var quoteEnd = post_snippet.lastIndexOf(" ");
                              post_snippet = '<div class="post_snippet"><p>'+ post_snippet.substring(0, quoteEnd) + "..." +'</p></div>';
                            }
                          } else {
                            var post_snippet = '';
                          }
                          if (showinfo == true) {
                            if (showreadmore == true) {
                              var read_more = '<a class="parmalink" href='+ post_link + "#more" +' title="'+ readmoretext +'">'+ readmoretext +'</a>';
                            } else {
                              var read_more = '';
                            }
                            if (showshare == true) {
                              try {
                                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='+ json.feed.entry[t].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='+ json.feed.entry[t].title.$t +'&media='+ json.feed.entry[t].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>');
                              } catch (e) {
                                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='+ json.feed.entry[t].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='+ json.feed.entry[t].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 {
                              var post_share = '';
                            }
                              var post_footer = '<div class="post_footer">'+ read_more + post_share +'</div>';
                          } else {
                              var post_footer = '';
                          }
                          $('#recent-posts').append('<li>'+ post_thumb + post_title + post_meta + post_snippet + post_footer +'</li>');
                        }
                        $('.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")
                        });
                      }
                    }

                    if (labelname != "") {
                      $.ajax({
                        type: 'GET',
                        url: homepage + '/feeds/posts/summary/-/' +labelname,
                        data: {
                          'max-results': numofposts,
                          'alt': 'json'
                        },
                        dataType: 'jsonp',
                        jsonp: 'callback',
                        jsonpCallback: 'recentposts',
                        success: function(a) {
                          var total_posts = a.feed.openSearch$totalResults.$t
                          $('.blog-posts #allposts').attr('value', total_posts)
                          if (total_posts > numofposts) {
                            $('.blog-posts .load-posts').removeClass('hidden')
                            $('.blog-posts .load-posts').on('click', function(e) {
                              $('.blog-posts .loadposts').removeClass('hidden').addClass('spinner').addClass('load')
                              var items = Number($('.blog-posts #numposts').val())
                              items = items + numofposts
                              if (items < total_posts) {
                                $(e.target).addClass('hidden')
                               $('.blog-posts #numposts').val(items)
                                setTimeout(function() {
                                  $.ajax({
                                    type: 'GET',
                                    url: homepage + '/feeds/posts/summary/-/' +labelname,
                                    data: {
                                      'max-results': numofposts,
                                      'start-index': items + 1,
                                      'alt': 'json'
                                    },
                                    dataType: 'jsonp',
                                    jsonp: 'callback',
                                    jsonpCallback: 'recentposts',
                                    success: function() {
                                      var lastposts = items + numofposts
                                      if (lastposts < total_posts) {
                                        $(e.target).removeClass('hidden')
                                        $('.blog-posts .loadposts').addClass('hidden')
                                      } else {
                                        $(e.target).addClass('hidden')
                                        $('.blog-posts .loadposts,.blog-posts .show-posts').addClass('hidden')
                                      }
                                    }
                                  })
                                }, 500)
                              } else {
                                $(e.target).addClass('hidden')
                                $('.blog-posts .loadposts,.blog-posts .show-posts').addClass('hidden')
                              }
                            })
                          } else {
                            $('.blog-posts .show-posts').addClass('hidden')
                          }
                        }
                      })
                    } else {
                      $.ajax({
                        type: 'GET',
                        url: homepage + '/feeds/posts/summary',
                        data: {
                          'max-results': numofposts,
                          'alt': 'json'
                        },
                        dataType: 'jsonp',
                        jsonp: 'callback',
                        jsonpCallback: 'recentposts',
                        success: function(a) {
                          var total_posts = a.feed.openSearch$totalResults.$t
                          $('.blog-posts #allposts').attr('value', total_posts)
                          if (total_posts > numofposts) {
                            $('.blog-posts .load-posts').removeClass('hidden')
                            $('.blog-posts .load-posts').on('click', function(e) {
                              $('.blog-posts .loadposts').removeClass('hidden').addClass('spinner').addClass('load')
                              var items = Number($('.blog-posts #numposts').val())
                              items = items + numofposts
                              if (items < total_posts) {
                                $(e.target).addClass('hidden')
                               $('.blog-posts #numposts').val(items)
                                setTimeout(function() {
                                  $.ajax({
                                    type: 'GET',
                                    url: homepage + '/feeds/posts/summary',
                                    data: {
                                      'max-results': numofposts,
                                      'start-index': items + 1,
                                      'alt': 'json'
                                    },
                                    dataType: 'jsonp',
                                    jsonp: 'callback',
                                    jsonpCallback: 'recentposts',
                                    success: function() {
                                      var lastposts = items + numofposts
                                      if (lastposts < total_posts) {
                                        $(e.target).removeClass('hidden')
                                        $('.blog-posts .loadposts').addClass('hidden')
                                      } else {
                                        $(e.target).addClass('hidden')
                                        $('.blog-posts .loadposts,.blog-posts .show-posts').addClass('hidden')
                                      }
                                    }
                                  })
                                }, 500)
                              } else {
                                $(e.target).addClass('hidden')
                                $('.blog-posts .loadposts,.blog-posts .show-posts').addClass('hidden')
                              }
                            })
                          } else {
                            $('.blog-posts .show-posts').addClass('hidden')
                          }
                        }
                      })
                    }
                    //]]></script>

                    + Chèn code vào vị trí muốn hiển thị ví dụ như widget HTML

                    Copy
                    <div class='blog-posts'>
                      <ul id='recent-posts'/>
                      <div class='show-posts'>
                        <button class='load-posts hidden' expr:arial-label='data:messages.loadMorePosts' role='button'><data:messages.loadMorePosts/></button>
                        <input id='numposts' type='hidden' value='0'/>
                        <input id='allposts' type='hidden' value=''/>
                        <div class='loadposts hidden'/>
                      </div>
                    </div>

                    + CSS tham khảo

                    Copy
                    <style type='text/css'>/* <![CDATA[ */
                    .hidden {display: none;}
                    .show-posts .load-posts {
                        position: relative;
                        background: #f0f1f5;
                        border: solid 1px #f0f1f5;
                        transition: border-color .3s;
                        border-radius: 3px;
                        outline: 0;
                        padding: 0 30px 0 10px;
                        font-size: 15px;
                        color: #3c4043;
                        line-height: 30px;
                        cursor: pointer;
                        -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
                        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
                    }
                    .show-posts .load-posts:hover {
                        border-color: #0af;
                        transition: border-color .3s;
                    }
                    .show-posts .load-posts:after {
                        content: url(https: //2.bp.blogspot.com/-hRPyX5CNH3I/XB5ImK9j8WI/AAAAAAAAOI0/HlT3qBaOIDYOptSseMcv4mGZ1g7bFRYQwCLcBGAs/s12/angle-down.png);
                        position: absolute;
                        right: 10px;
                        top: 1px;
                    }
                    .loadposts.load {
                        height: 50px;
                        position: relative;
                    }
                    .loadposts.spinner:before {
                        content: '';
                        box-sizing: border-box;
                        position: absolute;
                        top: 20%;
                        left: 47%;
                        width: 32px;
                        height: 32px;
                        border-radius: 50%;
                        border: 3px solid #448aff;
                        border-right-color: transparent;
                        animation: spinner .9s linear infinite;
                        -webkit-animation: spinner .9s ease-in-out infinite;
                    }
                    @keyframes spinner {
                        to {transform: rotate(360deg);}
                    }
                    @-webkit-keyframes spinner {
                        to {-webkit-transform: rotate(360deg);}
                    }
                    .blog-posts ul li {
                        list-style-type: none;
                        margin-bottom: 15px;
                        float: left;
                        width: 100%;
                        background-color: #ffffff;
                        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 ul li 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;
                    }
                    .post_title, .post_meta, .post_snippet {
                        display: table;
                        padding: 10px 15px 0 15px;
                    }
                    .post_title a {
                        font-size: 20px;
                        line-height: normal;
                        font-style: normal;
                        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, .post_meta .post_date, .post_meta .post_label {margin-right: 10px;}
                    .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;
                    }
                    .post_snippet p {
                        font-size: medium;
                        font-style: normal;
                        line-height: normal;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -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;
                    }
                    .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;
                    }
                    .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 ul li: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);}
                    @media screen and (max-width: 414px) {
                        .post_thumb {width: 100%;}
                        .post_title a, .post_snippet p {display: block;}
                        .post_footer {margin-top: 15px;}
                    }
                    @media screen and (max-width: 320px) {
                      .post_title a {font-size: medium;}
                    }
                    /* ]]> */</style>

                    Code được mình viết rất kỹ nhưng vẫn có thể gặp sai xót khi nguồn cấp feeds cập nhật thay đổi dữ liệu do đó mình vẫn cập nhật code thường xuyên. Trên tinh thần chia sẻ nên mình không mã hóa code tuy nhiên nếu bạn nào có chia sẻ lại hoặc lấy code về chỉnh sửa vui lòng ghi rõ code gốc được viết bởi tác giả Nguyễn Tuấn. Xin cảm ơn!!!
                    Nội dung chính
                      Bài đăng mới hơn Bài đăng cũ hơn