Thủ Thuật Blogspot

  • Khắc phục lỗi đăng video lên Blogspot bị tràn ra ngoài trên điện thoại

    Chào bạn hôm nay Blog Hồng chia sẻ cho bạn cách khắc phục lỗi đăng video lên Blogspot bị tràn ra ngoài trên điện thoại, nhiều bạn sử dụng blogspot khi đăng video bị tràn ra ngoài không responsive trên điện thoại làm không thân thiện với Google thì đây là điều mà các bạn cần.

    Khắc phục lỗi đăng video lên Blogspot bị tràn ra ngoài trên điện thoại
    Khắc phục lỗi đăng video lên Blogspot bị tràn ra ngoài trên điện thoại

    Có 2 cách để cho các bạn lựa chọn

    Cách 1 : Sử dụng CSS thuần

    Với hướng dẫn này các bạn sử dụng hoàn toàn là CSS và đơn giản nhất là bạn sử dụng đoạn code sau chèn trên thẻ </head> hoặc /head

    <style type=’text/css’>
    /* CSS Only */
    .post-body iframe{width:100%!important;}
    @media screen and (max-width:960px){
    .post-body iframe{max-height:90%}}
    @media screen and (max-width:768px){
    .post-body iframe{max-height:75%}}
    @media screen and (max-width:600px){
    .post-body iframe{max-height:60%}}
    @media screen and (max-width:480px){
    .post-body iframe{height:auto!important;max-height:auto!important}}
    </style>

    Lưu ý : Thẻ class .post-body sẽ hoạt động tùy thuộc vào blog của bạn đang sử dụng thẻ gì, nếu thêm code vào mà vẫn không hoạt động có thể sửa post-body thành post.

    Cách 2 : Sử dụng CSS kèm Javascript

    Các theo tác dưới đây các bạn truy cập vào Chủ đề > Chỉnh sửa HTML và chèn code trên thẻ </head> hoặc /head
    Bước 1 : Thao tác với CSS

    /* Youtube Responsive bloghong.com*/
    @keyframes littleShine{0%{background-position:-400px 0}100%{background-position:400px 0}} .loader{position:relative;width:100%;float:left;overflow:hidden;height:350px;margin-right:12px;animation:littleShine .85s linear infinite;background:#f5f5f5 linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,.75) 20%,rgba(255,255,255,0) 30%);background-size:800px 100px} .videoyoutube{text-align:center;margin:auto;width:100%;} .video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;} .video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

    Bước 2 : Thao tác với Javascript đoạn này có thẻ chèn bên trên thẻ </body> hoặc /body

    <script type=’text/javascript’> //<![CDATA[
    // Youtube Responsive Bloghong.com
    setTimeout(function(){$(“.video-youtube”).each(function(){$(this).replaceWith(‘<iframe class=”video-youtube loader” src=”‘+$(this).data(“src”)+'” allowfullscreen=”allowfullscreen” height=”281″ width=”500″></iframe>’)})},5e3); //]]>
    </script>

    Bước 3 : Chỉnh sửa HTML khi chèn Video
    Như vậy khi chèn video bạn chỉ cần chèn đoạn code như sau :

    <div class=”videoyoutube”> <div class=”video-responsive”>
    <div class=”video-youtube loader” data-src=”//www.youtube.com/embed/31k_DB8KVQM“> </div> </div>
    </div></div>
    </div>

    Link video các bạn click nút chia sẻ và lấy link video như hình dưới

    Khắc phục lỗi đăng video lên Blogspot bị tràn ra ngoài trên điện thoại

    Như vậy các video các bạn đăng lên đã khắc phục lỗi đăng video lên Blogspot bị tràn ra ngoài trên điện thoại. Chúc các bạn thành công nhé.

  • Ghim bài viết cũ lên trên cùng cho Blogspot mới nhất

    Chào các bạn hôm nay mình sẽ chia sẽ cho các bạn thủ thuật nhỏ trong blogspot, đó là đưa một bài viết cũ lên trên đầu trang. Thủ thuật này giúp những bài viết lâu ngày bị quên lãng hay những bài viết hay mà kém view thì các bạn có thể dùng thủ thuật này để đưa bài viết lên đầu trang ( giống bài viết mới ) vẫn giữ nguyên các nhận xét và view mà bài viết đã đạt được trước đây.

    CÁC BƯỚC THỰC HIỆN:

    Bước 1: Các bạn vào blogger.com ⇒ bài đăng

    Ghim bài viết cũ lên trên cùng cho Blogspot mới nhất

    Bước 2: Chọn bài viết cần đưa lên đầu trang và nhấn vào chỉnh sữa

    Ghim bài viết cũ lên trên cùng cho Blogspot mới nhất

    Bước 3: Sau khi đã vào mục chỉnh sữa các bạn chọn mục cài đặt bài đăng ⇒ lịch biểu ⇒ tích vào ô tự động ⇒ hoàn thành

    Ghim bài viết cũ lên trên cùng cho Blogspot mới nhất

    Lưu ý: Các bạn cũng có thể thay đổi phần đặt ngày và giờ theo ý muốn
    VD: Mình đặt bài viết mình là 09 thg 08, 2018 có nghĩa là bài viết này sẽ xuất hiện ở đầu trang tới ngày 09/08/2018, còn mọi bài đăng mới của bạn sẽ đúng ở top 2 bài viết đầu trang.

    Bước 4: Sau khi đã làm xong bước 3 các bạn nhấn vào xuất bản và bài viết cũ của bạn sẽ đứng đầu trang
    Chúc các bạn thành công!

  • Cách đưa khung Comments lên trên các bình luận mới

    Mặc định các nhận xét của người đọc và tác giả khi xuất bản luôn được đặt bên trên khung nhận xét, điều này hơi bất lợi nếu bài viết có nhiều nhận xét khi phải scroll chuột đến khung nhận xét. Tuy nhiên bạn có thể đặt khung nhận xét này nằm trên với thủ thuật đơn giản sau đây.

    CÁC BƯỚC THỰC HIỆN:

    Bước 1: Các bạn tìm <div class=’comments-content’> thường thì nó sẽ nằm trong thẻ tag <b:includable id=’threaded_comments’ var=’post’> với widget Blog1 version 1<b:includable id=’threadedComments’ var=’post’> với widget Blog1 version 2
    Các bạn chỉ cần để ý đến đoạn HTML như sau (hoặc tương tự):

    <div class=’comments-content’>
    <b:if cond=’data:post.embedCommentForm’>
    <b:include data=’post’ name=’threaded_comment_js’ />
    </b:if>
    <div id=’comment-holder’>
    <data:post.commentHtml />
    </div>
    </div>
    <p class=’comment-footer’>
    <b:if cond=’data:post.allowNewComments’>
    <b:include data=’post’ name=’threaded-comment-form’ />
    <b:else />
    <data:post.noNewCommentsText />
    </b:if>
    </p>

    Cách đưa khung Comments lên trên các bình luận mới
    Cách đưa khung Comments lên trên các bình luận mới
    Bước 2: Các bạn chỉ cần chú ý đoạn mình đánh dấu màu xanh và đỏ với màu xanh là phần nhận xét và màu đỏ là khung nhận xét, bây giờ bạn chỉ việc đưa màu đỏ lên trên màu xanh hay màu xanh xuống dưới màu đỏ là được.

    Sau khi thay đổi thì nó sẽ có dạng như sau:

    <p class=’comment-footer’>
    <b:if cond=’data:post.allowNewComments’>
    <b:include data=’post’ name=’threaded-comment-form’ />
    <b:else />
    <data:post.noNewCommentsText />
    </b:if>
    </p>
    <div class=’comments-content’>
    <b:if cond=’data:post.embedCommentForm’>
    <b:include data=’post’ name=’threaded_comment_js’ />
    </b:if>
    <div id=’comment-holder’>
    <data:post.commentHtml />
    </div>
    </div>

    Cách đưa khung Comments lên trên các bình luận mới
    Hình minh họa
    Bước 3: Fix lỗi cho các blog1 version 1 khi khung nhận xét lúc ở trên lúc ở dưới
    Các bạn chỉ cần thay toàn bộ HTML của thẻ <b:includable id=’threaded_comment_js’ var=’post’>

    thành đoạn HTML phía dưới:

    <script async=’async’ expr:src=’data:post.commentSrc’ type=’text/javascript’/>
    <b:template-script inline=’true’ name=’threaded_comments’/>
    <script type=’text/javascript’>
    blogger.widgets.blog.initThreadedComments(
    <data:post.commentJso/>,
    <data:post.commentMsgs/>,
    <data:post.commentConfig/>);
    </script>

    Cách đưa khung Comments lên trên các bình luận mới
    Hình minh họa

    Chúc các bạn thành công!

  • Tạo hộp đăng ký nhận tin bằng FeedBurner cho Blogspot

    FeedBurner là sản phẩm nguồn cấp dữ liệu miễn phí được Google mua lại vào năm 2007, giúp nhà xuất bản phân tích, tối ưu hoá, quảng bá, và kiếm thu nhập quảng cáo từ các nguồn cấp dữ liệu RSS của họ.

    FeedBurner có rất nhiều tác dụng đặc biệt là trong quá trình thiết kế của một trang Web, hiện nây rất nhiều tiện ích yêu cầu phải có feed mới có thể chạy được. Do vậy hôm nay Blog Hồng sẽ hướng dẫn các bạn đăng ký một FeedBurner cho blogspot của các bạn.

    » Phần 1: Cách đăng ký Feed Bunner từ google cho blogspot hoặc website:

    1.1- Trước tiên các bạn phải có một địa chỉ gmail (Chính là địa chỉ mail đăng nhập vào Blog của bạn). Nếu chưa có tài khoản gmail bạn hãy vào đây để đăng ký láy một tài khoản gmail.

    1.2- Sau khi đã có tài khoản gmail các bạn truy cập vào trang tạo feed sau:

    http://www.feedburner.com/



    1.3- Tại trang feedbunner các bạn đăng nhập bằng địa chỉ gmail của mình
    Lưu ý: Đăng nhập bằng địa chỉ Gmail Blog của bạn như thế mới có thể sử dụng cho blog của các bạn được.

    Tạo hộp đăng ký nhận tin bằng FeedBurner cho Blogspot
    Tạo hộp đăng ký nhận tin bằng FeedBurner cho Blogspot
    Tạo hộp đăng ký nhận tin bằng FeedBurner cho Blogspot
    Tạo hộp đăng ký nhận tin bằng FeedBurner cho Blogspot

    1.4- Sau khi đăng nhập tại ô “Burn a feed right this instant” bạn điền địa chỉ blog của bạn vào.

    Tạo hộp đăng ký nhận tin bằng FeedBurner cho Blogspot

    1.5- Tại cửa sổ tiếp theo có 2 lựa chọn là Atom hoặc RSS các bạn bấm chọn vào RSS.

    Tạo hộp đăng ký nhận tin bằng FeedBurner cho Blogspot
    – Tiếp tục chọn next.
    Tạo hộp đăng ký nhận tin bằng FeedBurner cho Blogspot
    – Chọn Next
    Tạo hộp đăng ký nhận tin bằng FeedBurner cho Blogspot
    Tạo hộp đăng ký nhận tin bằng FeedBurner cho Blogspot
    Tạo hộp đăng ký nhận tin bằng FeedBurner cho Blogspot
    Tạo hộp đăng ký nhận tin bằng FeedBurner cho Blogspot

    – Đến đây hoàn tất đăng ký Feed

    » Phần 2 Tùy chỉnh và lấy link feed:

    2.1- Bạn bấm vào ô Edit Feed Detail..

    Tạo hộp đăng ký nhận tin bằng FeedBurner cho Blogspot
    – Nếu bạn nào tạo rồi nhưng thoát ra từ trước rồi thì thay đổi Tại phần quản lý feedburner bấm vào tên feed bạn vừa tạo. sau đó bấm vào Edit Feed Detail để lấy link dán vào blog.

    Tạo hộp đăng ký nhận tin bằng FeedBurner cho Blogspot

    2,2- Bạn cũng có thể tiến hành thay đổi tên feed bàng cách bấm vào Edit Feed Detail, tại ô Feed Address bạn thay đổi lại tên sao cho dễ nhớ sau đo bấm Save Feed Detail.

    Tạo hộp đăng ký nhận tin bằng FeedBurner cho Blogspot
    – Đó chính là link feed để dán vào blog của bạn:
    Tạo hộp đăng ký nhận tin bằng FeedBurner cho Blogspot

    » Phần 3:: Cài đặt Feed cho Blog.

    3.1- Bạn đăng nhập vào Blog.

    3.2- Chọn Cài đặt (Setting)
    3.3- Chọn Khác.
    3.4- Điền tên Feed ở trên vào ô URL Chuyển hướng Nguồn cấp dữ liệu Bài đăng.

    Tạo hộp đăng ký nhận tin bằng FeedBurner cho Blogspot
    3.5- Chọn: Lưu cài đặt (Save Setting)

    » Cập nhật lỗi không lưu được feed trong blog.

    – Nếu gặp khó khăn khi lưu feed trong web/blog của bạn. bạn hãy xem bài viết sau: sửa lỗi FeedBurner’s 512K limit không lưu được fedd blog

    Chúc thành công!

  • Khắc phục lỗi Blogspot lỗi trên thiết bị Android hoặc IOS

    Dã bao giờ bạn gặp những lỗi CSS chỉ xuất hiện trên Iphone mà trên các thiết bị khác lại không bị gì chưa? Mình thì rồi đó, trong lúc loay hoay để xử lý thì tình cờ mình tìm ra cách dùng CSS thôi cũng xử lý riêng được, chúng ta cùng tìm hiểu xem cách ấy như thế nào nhé ( ngoài cách sử dụng CSS ra thì chúng ta có thể sử dụng Javascript để phát hiện thiết bị IOS nữa. )
    Khắc phục lỗi Blogspot lỗi trên thiết bị Adroid hoặc IOS
    Khắc phục lỗi Blogspot lỗi trên thiết bị Adroid hoặc IOS

    Thuộc tính CSS

     Sao chép
    @supports (-webkit-overflow-scrolling: touch) { /* CSS specific to iOS devices */
    } @
    @
    @supports not (-webkit-overflow-scrolling: touch) { /* CSS for other than iOS devices */
    }
    Phía trên là đoạn CSS để viết cho 2 trường hợp thiết bị IOS và thiết bị khác IOS mình sẽ giải thích đoạn css ấy như sau:


    Đoạn css -webkit-overflow-scrolling: touch nó sẽ chỉ hoạt động trên safari mobile. còn thằng @supports nó sẽ nhận diện những thiết bị nào hỗ trợ đoạn css –webkit-overflow-scrolling: touch hoặc không (@supports not) từ đấy ta có thể css cho các thiết bị ios.

    Hỗ trợ trình duyệt

    Hiện tại thuốc tính @supports vẫn còn hạn chế trong việc hỗ trợ các trình duyệt nên chúng ta cần cân nhắc khi sử dung, chi tiết về việc hỗ trợ của các trình duyệt chúng ta có thể xem ở bảng bên dưới
    Khắc phục lỗi Blogspot lỗi trên thiết bị Android hoặc IOS
    Khi có đoạn code này trong tay bạn có thể tùy ý biết thêm CSS vào đúng vị trí để Khắc phục lỗi Blogspot lỗi trên thiết bị Adroid hoặc IOS
  • Lazy Load hình ảnh và Adsense cho Blogspot (Giúp blogspot tải nhanh hơn)

    Nếu bạn đang dùng Blogspot mà chưa biết đến Lazy Load thì đây là bài viết dành cho bạn. Lazy Load là hình thức load chậm cho hình ảnh và Google Adsense. Khi bạn chưa sử dụng đoạn code này đồng nghĩa khi khách hàng vào website blogspot của bạn tất cả hình ảnh hay quảng cáo từ trên xuống dưới sẽ đồng loạt load lên 1 lần, làm blog của bạn rất lâu để tải hết trang.
    Lazy Load hình ảnh và Adsense cho Blogspot (Giúp blogspot tải nhanh hơn)
    Lazy Load hình ảnh và Adsense cho Blogspot (Giúp blogspot tải nhanh hơn)
    Chính vì vậy khi sử dụng đoạn code lazy load blogspot và Google Adsense dưới đây mình chia sẻ cho các bạn thì blog của bạn sẽ tải dần dần. Khi vào website thì blog sẽ tải trang những gì mà họ nhìn thấy. Và tiếp tục tải nếu khách hàng cuộn xuống bên dưới.
    Cuộn trang đến đâu Lazy Load sẽ tải hỉnh ảnh và quảng cáo đến đó cho nên mình mới gọi đây là hình thức tải chậm giúp Blogspot của bạn sẽ tải nhanh hơn trông thấy.
    Các bạn lưu ý rằng Lazy Load sẽ làm blogspot của bạn tải nhanh hơn chứ không làm tăng điểm PageSpeed Insights. PageSpeed Insights nhiều khi nó chỉ là một cái gì đó Ảo diệu thôi. Mình nói vậy chắc các bạn hiểu chứ.

    Cách thêm Lazy Load hình ảnh và Google Adsense vào Blogspot

    #Bước 1 : Chủ đề > Chỉnh sửa HTML > Tìm đến thẻ đóng </body> hoặc /body
    #Bước 2 : Thêm đoạn code sau bên trên thẻ vừa tìm được
    <script type=’text/javascript’>
    //<![CDATA[
    // AdSense by Bloghong.com
    var lazyadsense=!1;window.addEventListener(“scroll”,function(){(0!=document.documentElement.scrollTop&&!1===lazyadsense||0!=document.body.scrollTop&&!1===lazyadsense)&&(!function(){var e=document.createElement(“script”);e.type=”text/javascript”,e.async=!0,e.src=”https://cdn.jsdelivr.net/gh/Arlina-Design/quasar@master/arlinablock.js”;var a=document.getElementsByTagName(“script”)[0];a.parentNode.insertBefore(e,a)}(),lazyadsense=!0)},!0);
    // Lazy Load bloghong.com
    (function(a){a.fn.lazyload=function(b){var c={threshold:0,failurelimit:0,event:”scroll”,effect:”show”,container:window};if(b){a.extend(c,b)}var d=this;if(“scroll”==c.event){a(c.container).bind(“scroll”,function(b){var e=0;d.each(function(){if(a.abovethetop(this,c)||a.leftofbegin(this,c)){}else if(!a.belowthefold(this,c)&&!a.rightoffold(this,c)){a(this).trigger(“appear”)}else{if(e++>c.failurelimit){return false}}});var f=a.grep(d,function(a){return!a.loaded});d=a(f)})}this.each(function(){var b=this;if(undefined==a(b).attr(“original”)){a(b).attr(“original”,a(b).attr(“src”))}if(“scroll”!=c.event||undefined==a(b).attr(“src”)||c.placeholder==a(b).attr(“src”)||a.abovethetop(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.rightoffold(b,c)){if(c.placeholder){a(b).attr(“src”,c.placeholder)}else{a(b).removeAttr(“src”)}b.loaded=false}else{b.loaded=true}a(b).one(“appear”,function(){if(!this.loaded){a(“<img />”).bind(“load”,function(){a(b).hide().attr(“src”,a(b).attr(“original”))[c.effect](c.effectspeed);b.loaded=true}).attr(“src”,a(b).attr(“original”))}});if(“scroll”!=c.event){a(b).bind(c.event,function(c){if(!b.loaded){a(b).trigger(“appear”)}})}});a(c.container).trigger(c.event);return this};a.belowthefold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).height()+a(window).scrollTop()}else{var d=a(c.container).offset().top+a(c.container).height()}return d<=a(b).offset().top-c.threshold};a.rightoffold=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).width()+a(window).scrollLeft()}else{var d=a(c.container).offset().left+a(c.container).width()}return d<=a(b).offset().left-c.threshold};a.abovethetop=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollTop()}else{var d=a(c.container).offset().top}return d>=a(b).offset().top+c.threshold+a(b).height()};a.leftofbegin=function(b,c){if(c.container===undefined||c.container===window){var d=a(window).scrollLeft()}else{var d=a(c.container).offset().left}return d>=a(b).offset().left+c.threshold+a(b).width()};a.extend(a.expr[“:”],{“below-the-fold”:”$.belowthefold(a, {threshold : 0, container: window})”,”above-the-fold”:”!$.belowthefold(a, {threshold : 0, container: window})”,”right-of-fold”:”$.rightoffold(a, {threshold : 0, container: window})”,”left-of-fold”:”!$.rightoffold(a, {threshold : 0, container:window})”})})(jQuery);$(function(){$(“img”).lazyload({placeholder:”https://3.bp.blogspot.com/-xtM_7x0_cU4/XIok1BisovI/AAAAAAAAPUc/QGJpBJZ3QBM_Spkd9r3-SMurEUbRI1pOQCLcBGAs/s1600/loadingku.gif”,effect:”fadeIn”,threshold:”0″})});
    //]]>
    </script>
    #Bước 3 : Lưu mẫu lại và thử tải lại trang chủ để xem thành quả nhé.

    Chúc các bạn có sự trả nghiệm blogspot tuyệt vời.

    Hãy tham gia cộng đồng Blogspot trên Facebook để cho đi và nhận lại những điều ý nghĩa hơn

  • Khắc phục lỗi reply (trả lời) trên blogspot mới nhất 2019

    Gần đây một số blog bị lỗi không trả lời (reply) comment được trên blog của mình, hóng mãi mới có cao nhân sữa được lỗi này. Cách này vừa sữa lỗi vừa tối ưu bớt js, được hướng dẫn bởi Blog Hồng. Các bạn cùng xem hướng dẫn nhé.

    Khắc phục lỗi reply (trả lời) trên blogspot mới nhất 2019

    Đầu tiên: Tích hợp jQuery (nếu blog chưa có): dán sau thẻ <head>

    <script src=’//cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js’ type=’text/javascript’></script>

    1. Sữa lỗi reply comment đối với Blog1 version 1

    Tìm đến thẻ <b:includable id=’threaded_comment_js’ var=’post’> và thay toàn bộ nội dung bên trong nó thành:

    <script type=’text/javascript’>//<![CDATA[
    $(function() {
    const t = $(“#comment-editor-src”).attr(“href”);
    $(“.comment-reply”).each(function() {
    var e = $(this);
    e.on(“click”, function(n) {
    $(“.comment-actions”).show(), n.preventDefault();
    let r = e.parents(“li”).attr(“id”).substr(1),
    c = t.split(“?”);
    $(“#comment-editor”)[0].src = c[0] + “?parentID=” + r + “&” + c[1], e.parent().hide(), e.parents(“li”).append($(“.comment-form”)[0])
    })
    })
    });
    //]]></script>

    2. Sữa lỗi reply comment đối với Blog1 version 2

    Tìm đến thẻ <b:includable id=’threadedCommentJs’ var=’post’> và thay toàn bộ nội dung bên trong nó thành:

    <script>//<![CDATA[
    $(function() {
    const t = $(“#comment-editor-src”).attr(“href”);
    $(“a[o=’r’]”).each(function() {
    var n = $(this);
    n.on(“click”, function(e) {
    $(“.comment-actions”).show(), e.preventDefault();
    let o = n.parents(“.comment-block”).attr(“id”).substr(1),
    c = t.split(“?”);
    $(“#comment-editor”)[0].src = c[0] + “?parentID=” + o + “&” + c[1], n.parent().hide(), n.parents(“li”).append($(“.comment-form”)[0])
    })
    })
    });
    //]]></script>

    Chỉ mấy bước đơn giản vậy thôi, blog mình version 1 cũng bị lỗi và đã fix được ở bước 1.

    Cập nhật: áp dụng chung cho Ver1 và Ver2

    <script type=’text/javascript’>//<![CDATA[
    $(window).on(“load”, function() {
    function n(n, t) {
    $(n).each(function() {
    var n = $(this);
    n.on(“click”, function(e) {
    $(“.comment-actions,.cancel-comment”).show(), e.preventDefault();
    let c = n.parents(t).attr(“id”).substr(1),
    m = o.split(“?”);
    $(“#comment-editor”)[0].src = m[0] + “?parentID=” + c + “&” + m[1], n.parent().hide(), n.parents(“li”).append($(“.comment-form”)[0])
    })
    })
    }
    $(“.comment-form”).append(‘<a class=”cancel-comment” style=”font-family:Roboto,sans-serif;font-weight:700;font-size:12px;color:#ff0000;cursor:pointer;”>CANCEL</a>’), $(“.cancel-comment”).hide();
    const o = $(“#comment-editor-src”).attr(“href”);
    $(“.comment-block[id]”).length ? n(“a[o=’r’]”, “.comment-block”) : n(“.comment-reply”, “li”), $(“.cancel-comment”).on(“click”, function() {
    $(“.comment-actions”).show(), $(“#comment-editor”)[0].src = o, $(“.comments-content”).before($(“.comment-form”)[0]), $(this).hide()
    })
    });
    //]]></script>

  • Cách mới nâng cấp nhận xét Blogger lên phiên bản mới

    Cách mới nâng cấp nhận xét Blogger lên phiên bản mới

    Nâng cấp lên skin mới

    Skin mới của blogger comment form có thể bắt gặp ở các theme mặc định của blogger. Trong bài này tôi sẽ hướng dẫn bạn cập nhật lên skin của theme contempo

    Thêm b:templateUrl=’indie.xml’ vào thẻ <html …>


    2018 06 23 145456

    Chèn tiếp đoạn code sau vào <b:skin><![CDATA[

    /*<Variable name=”robotoNormal15″ description=”Roboto Normal 15″ type=”font” default=”15px Roboto, sans-serif” hideEditor=”true” value=”15px Roboto, sans-serif”/><Variable name=”robotoNormal16″ description=”Roboto Normal 16″ type=”font” default=”16px Roboto, sans-serif” hideEditor=”true” value=”16px Roboto, sans-serif”/><Variable name=”robotoLightItalic15″ description=”Roboto Light Italic 15″ type=”font” default=”italic 300 15px Roboto, sans-serif” hideEditor=”true” value=”italic 300 15px Roboto, sans-serif”/><Variable name=”robotoBold22″ description=”Roboto Bold 22″ type=”font” default=”bold 22px Roboto, sans-serif” hideEditor=”true” value=”bold 22px Roboto, sans-serif”/><Variable name=”robotoBold30″ description=”Roboto Bold 30″ type=”font” default=”bold 30px Roboto, sans-serif” hideEditor=”true” value=”bold 30px Roboto, sans-serif”/><Variable name=”robotoBold45″ description=”Roboto Bold 45″ type=”font” default=”bold 45px Roboto, sans-serif” hideEditor=”true” value=”bold 45px Roboto, sans-serif”/>
    <Group description=”Body”> <Variable name=”body.text.font” description=”Font” type=”font” default=”$(robotoNormal15)” value=”15px Roboto, sans-serif”/> <Variable name=”body.text.color” description=”Color” type=”color” default=”#757575″ value=”#757575″/> <Variable name=”body.background.height” description=”Background height” type=”length” min=”420px” max=”640px” default=”480px” value=”480px”/> <Variable name=”body.background” description=”Background” color=”$(body.background.color)” type=”background” default=”$(color) none repeat scroll top left” value=”$(color) url(https://themes.googleusercontent.com/image?id=L1lcAxxz0CLgsDzixEprHJ2F38TyEjCyE3RSAjynQDks0lT1BDc1OxXKaTEdLc89HPvdB11X9FDw) no-repeat scroll top center /* Credit: Michael Elkan (http://www.offset.com/photos/394244) */;”/> <Variable name=”body.background.color” description=”Body background color” type=”color” default=”#eee” value=”#eeeeee”/> <Variable name=”body.background.blur” description=”Background blur” type=”length” min=”0px” max=”50px” default=”0px” value=”0px”/> <Variable name=”body.link.color” description=”Link color” type=”color” default=”#2196f3″ value=”#2196f3″/> <Variable name=”body.link.visited.color” description=”Visited link color” type=”color” default=”$(body.link.color)” value=”#2196f3″/> <Variable name=”body.link.hover.color” description=”Link Hover Color” type=”color” default=”$(body.link.color)” value=”#2196f3″/> <Variable name=”labels.text.color” description=”Label text color” type=”color” default=”$(body.link.color)” value=”rgba(0,0,0,0.54)”/> <Variable name=”labels.background.color” description=”Label background color” type=”color” red=”$(labels.text.color.red)” green=”$(labels.text.color.green)” blue=”$(labels.text.color.blue)” default=”rgba($red, $green, $blue, 0.05)” value=”#f7f7f7″/></Group>
    <Group description=”Posts” selector=”div.widget.Blog”> <Variable name=”posts.title.color” description=”Post title color” type=”color” default=”#212121″ value=”#212121″/> <Variable name=”posts.title.font” description=”Post title font” type=”font” default=”$(robotoBold22)” value=”bold 22px Roboto, sans-serif”/> <Variable name=”posts.stream.title.font” description=”Post title stream font” type=”font” default=”$(robotoBold30)” value=”bold 30px Roboto, sans-serif”/> <Variable name=”posts.background.color” description=”Post background color” type=”color” default=”#fff” value=”#ffffff”/> <Variable name=”posts.text.font” description=”Post text font” type=”font” default=”$(body.text.font)” value=”15px Roboto, sans-serif”/> <Variable name=”posts.text.color” description=”Post text color” type=”color” default=”$(body.text.color)” value=”#757575″/> <Variable name=”posts.byline.color” description=”Post byline color” type=”color” default=”rgba(0, 0, 0, 0.54)” value=”rgba(0, 0, 0, 0.54)”/> <Variable name=”blockquote.font” description=”Blockquote font” type=”font” default=”$(robotoLightItalic15)” value=”italic 300 15px Roboto, sans-serif”/> <Variable name=”blockquote.color” description=”Blockquote color” type=”color” default=”#444″ value=”#444444″/> <Variable name=”posts.icons.color” description=”Post icons color” type=”color” default=”#707070″ value=”#707070″/> <Variable name=”tabs.font” description=”Font” type=”font” family=”$(robotoNormal15.family)” size=”$(robotoNormal15.size)” default=”700 normal $(size) $(family)” value=”700 normal $(size) $(family)”/> <Variable name=”tabs.color” description=”Text color” type=”color” default=”#ccc” value=”#cccccc”/> <Variable name=”tabs.selected.color” description=”Selected color” type=”color” default=”#fff” value=”#ffffff”/> <Variable name=”tabs.overflow.background.color” description=”Popup background color” type=”color” default=”$(posts.background.color)” value=”#ffffff”/> <Variable name=”tabs.overflow.color” description=”Popup text color” type=”color” default=”$(posts.text.color)” value=”#757575″/> <Variable name=”tabs.overflow.selected.color” description=”Popup selected color” type=”color” default=”$(posts.title.color)” value=”#212121″/></Group>*/


    Nếu gặp lỗi Invalid variable declaration in page skin: Variable name must not be declared twice. Input: body.background tức biến này được định nghĩa 2 lần, bạn có thể đổi thành <Variable name=”body1.background”…> để lưu được mẫu

    Kết quả:

    Cách mới nâng cấp nhận xét Blogger lên phiên bản mới

    Chúc các bạn thành công !!!

    Nguồn : Lượm nhặt
  • Cách nâng cấp comment Blogger từ phiên bản cũ lên bản mới 2019

    Chào các bạn, chào mừng các bạn trở lại với Blog Hồng – Bloghong.com

    Bài viết hôm nay tôi sẽ hướng dẫn các bạn nâng cấp khung bình luận của Blogspot lên phiên bản mới với thiết kế mới, giao diện mới cùng các tính năng mới. Thủ thuật này sẽ chỉnh sửa khá nhiều thứ trong template vì vậy tôi khuyên các bạn hãy sao lưu lại template trước khi thực hiện đề phòng lỗi xảy ra hay hư hỏng template.

    Các nâng cấp comment Blogger từ phiên bản cũ lên bản mới 2019

    Blog Hồng sẽ sử dụng mẫu khung nhận xét trong suốt của Theme Contempo (phiên bản mới). Nào cùng xem và thực hiện!!!

    Nâng cấp khung nhận xét phiên bản mới

    #Bước 1. Tìm và thay cả đoạn <html thành đoạn bên dưới

    <html b:css=’false’ b:defaultwidgetversion=’2′ b:layoutsVersion=’3′ b:responsive=’true’ b:templateUrl=’fancy.xml’ b:templateVersion=’1.2.0′ expr:dir=’data:blog.languageDirection’ oncontextmenu=’return true’ xmlns=’http://www.w3.org/1999/xhtml’ xmlns:b=’http://www.google.com/2005/gml/b’ xmlns:data=’http://www.google.com/2005/gml/data’ xmlns:expr=’http://www.google.com/2005/gml/expr’>

    #Bước 2. Tìm thẻ <b:skin><![CDATA[ và thêm toàn bộ CSS sau vào ngay bên dưới, nhấn mạnh là ngay bên dưới luôn nhé.

    /*
    <Group description=”Body”>
    <Variable name=”body.background” description=”Background” type=”background” color=”$(body.background.color)” default=”$(color) none repeat scroll top left” value=”#ffffff url(#) no-repeat scroll top center /* Credit: Mae Burke (http://www.offset.com/photos/389967) */;”/>
    <Variable name=”body.background.color” description=”Background color” type=”color” default=”transparent” value=”transparent”/>
    <Variable name=”body.title.font.small” description=”Title font (small)” type=”font” default=”$(garamond20)” value=”normal 400 14px Roboto, sans-serif”/>
    <Variable name=”body.title.font.large” description=”Title font (large)” type=”font” default=”$(garamond24)” value=”normal 400 24px Roboto, sans-serif”/>
    <Variable name=”body.title.color” description=”Title color” type=”color” default=”#000″ value=”#000000″/>
    <Variable name=”body.action.font.small” description=”Action font (small)” type=”font” default=”$(Roboto12)” value=”normal 400 12px Roboto, sans-serif”/>
    <Variable name=”body.action.font.large” description=”Action font (large)” type=”font” default=”$(Roboto14)” value=”normal 400 14px Roboto, sans-serif”/>
    <Variable name=”body.action.color” description=”Action color” type=”color” default=”#4267b2″ value=”#4267b2″/>
    <Variable name=”body.text.font” description=”Text font” type=”font” default=”$(garamond20)” value=”normal 400 14px Roboto, sans-serif”/>
    <Variable name=”body.text.color” description=”Text color” type=”color” default=”#000″ value=”#000000″/>
    <Variable name=”body.link.color” description=”Link color” type=”color” default=”#4267b2″ value=”#4267b2″/>
    <Variable name=”body.widget.title.font.small” description=”Gadget title font (small)” type=”font” default=”$(Roboto12)” value=”normal 400 12px Roboto, sans-serif”/>
    <Variable name=”body.widget.title.font.large” description=”Gadget title font (large)” type=”font” default=”$(Roboto14)” value=”normal 400 14px Roboto, sans-serif”/>
    <Variable name=”body.widget.title.color” description=”Gadget title color” type=”color” default=”rgba(0, 0, 0, 0.54)” value=”rgba(0, 0, 0, 0.54)”/>
    <Variable name=”body.filter.background.color” description=”Filter background color” type=”color” default=”#302c24″ value=”#302c24″/>
    <Variable name=”body.filter.text.font.small” description=”Filter text font (small)” type=”font” default=”$(Roboto12)” value=”normal 400 12px Roboto, sans-serif”/>
    <Variable name=”body.filter.text.font.large” description=”Filter text font (large)” type=”font” default=”$(Roboto14)” value=”normal 400 14px Roboto, sans-serif”/>
    <Variable name=”body.filter.text.color” description=”Filter text color” type=”color” default=”rgba(255, 255, 255, 0.54)” value=”rgba(255, 255, 255, 0.54)”/>
    <Variable name=”body.filter.keyword.font.small” description=”Filter keyword font (small)” type=”font” default=”$(RobotoBold12)” value=”normal 700 12px Roboto, sans-serif”/>
    <Variable name=”body.filter.keyword.font.large” description=”Filter keyword font (large)” type=”font” default=”$(RobotoBold14)” value=”normal 700 14px Roboto, sans-serif”/>
    <Variable name=”body.filter.keyword.color” description=”Filter keyword color” type=”color” default=”rgba(255, 255, 255, 0.87)” value=”rgba(255, 255, 255, 0.87)”/>
    <Variable name=”body.filter.link.font.small” description=”Filter link font (small)” type=”font” default=”$(RobotoBold12)” value=”normal 700 12px Roboto, sans-serif”/>
    <Variable name=”body.filter.link.font.large” description=”Filter link font (large)” type=”font” default=”$(RobotoBold14)” value=”normal 700 14px Roboto, sans-serif”/>
    <Variable name=”body.filter.link.color” description=”Filter link color” type=”color” default=”#4267b2″ value=”#4267b2″/>
    </Group>*/

    #Bước 3. Lưu mẫu và hoàn tất nâng cấp khung nhận xét.
    Tùy biến khung nhận xét mớiThông thường sau khi nâng cấp thì khung nhận xét sẽ giống như mặc định, nếu bạn muốn trông bắt mắt hơn, khác biệt hơn thì bạn có thể viết thêm CSS cho nó theo mẫu dưới đây:

    .comments iframe {
    /* CSS */
    }

     Còn đây là CSS tùy biến của Blog Hồng:

    .comments iframe {background: #fff;padding: 0 10px;box-sizing:border-box;border-radius: 10px}

    Tổng kết

    Không có gì để tổng kết, chúc bạn một ngày vui vẻ!

    Nguồn : BSW
  • Cách cập nhật Blogger phiên bản cũ lên bản mới

    Update Blogger Layout, Default Widget and b:Skin to New Version, step-by-step

    Trong thời gian vừa qua Blogger đã tiến hành một số cập nhật mới liên quan đến giao diện. Thông thường các phiên bản trước Blogger sẽ tự động cập nhật cho người dùng, tuy nhiên dường như trong lần nâng cấp này Blogger chỉ nâng cấp đối với những ai dùng các chủ đề phiên bản mới. Vậy còn đối với những người dùng phiên bản cũ hơn thì liệu có được cập nhật hay không?

    Câu trả lời là có, nhưng bạn sẽ phải tiến hành cập nhật một cách thủ công. Bài viết sau đây của Iris Tips sẽ hướng dẫn cho các bạn từng bước một cách cập nhật Blogger Layout, Default Widget và b:Skin lên phiên bản mới.

    Cách cập nhật Blogger phiên bản cũ lên bản mới

    Blogger Layout, Default Widget và b:Skin có gì mới

    #1 b:Skin phiên bản mới đã hỗ trợ đầy đủ các tính năng CSS script và Webkit mới nhất.

    #2 Default Widget cũng có 1 số nâng cấp, ví dụ như tiện ích Popular Post đã hiển thị thêm nút Read More phía sau mỗi bài viết.

    Cách cập nhật Blogger phiên bản cũ lên bản mới

    #3 Và cuối cùng thay đổi dễ nhận thấy nhất là Blogger Layout, lên phiên bản mới chữ “Chỉnh sửa” (“Edit”) sẽ được thay thế bằng icon

    Cách cập nhật Blogger phiên bản cũ lên bản mới

    #4 Ngoài ra trên layout sẽ hiển thị thêm icon hoặc cho tính năng ẩn hiện tiện ích ngay trên chính trang Bố cục mà không cần phải sử dụng CSS như trước nữa.

    Cách cập nhật Blogger phiên bản cũ lên bản mới

    Cách nâng cấp Blogger Layout, Default Widget và b:Skin lên phiên bản mới

    b:Skin

    #Bước 1 :  Vào Chủ đề >> Chỉnh sửa HTML tìm đến dòng code <b:skin><![CDATA[/* và thay thế nó thành <b:skin version=’1.0.0′><![CDATA[/*

    Blogger Layout Version 3

    #Bước 2: Tìm kiếm đoạn code sau

    <html b:version=’2′ class=’v2′ expr:dir=’data:blog.languageDirection’ xmlns=’http://www.w3.org/1999/xhtml’ xmlns:b=’http://www.google.com/2005/gml/b’ xmlns:data=’http://www.google.com/2005/gml/data’ xmlns:expr=’http://www.google.com/2005/gml/expr’>

    #Bước 3 : Thay thế nó thành

    <html b:version=’2′ class=’v2′ b:layoutsVersion=’3′ expr:dir=’data:blog.languageDirection’ xmlns=’http://www.w3.org/1999/xhtml’ xmlns:b=’http://www.google.com/2005/gml/b’ xmlns:data=’http://www.google.com/2005/gml/data’ xmlns:expr=’http://www.google.com/2005/gml/expr’>

    Default Widget Version 2

    #Bước 1 : Tìm kiếm dòng code b:layoutsVersion=’3′ (vừa mới thêm vào ở bước trên) và chèn vào trước nó dòng code b:defaultwidgetversion=’2′. Đoạn code hoàn chỉnh sau khi chỉnh sửa sẽ trở thành.

    <html b:version=’2′ class=’v2′ b:defaultwidgetversion=’2′ b:layoutsVersion=’3′ expr:dir=’data:blog.languageDirection’ xmlns=’http://www.w3.org/1999/xhtml’ xmlns:b=’http://www.google.com/2005/gml/b’ xmlns:data=’http://www.google.com/2005/gml/data’ xmlns:expr=’http://www.google.com/2005/gml/expr’>

    #Bước 2 : Thêm đoạn code markup phiên bản mới bên dưới đây vào sau thẻ ]]></b:skin> hoặc </b:template-skin>

    <b:defaultmarkups>
    <b:defaultmarkup type=’Common’>
    <b:includable id=’responsiveImage’ var=’settings’>
    <b:comment>Add in the high-res thumb for youtube images.</b:comment>
    <b:if cond=’not data:settings.image.isYoutube’>
    <b:include data=’settings’ name=’super.responsiveImage’/>
    <b:else/>
    <b:with value=’resizeImage(data:post.featuredImage.youtubeMaxResDefaultUrl, 1152, &quot;4:3&quot;)’ var=’highRes’>
    <b:include data='{ image: data:settings.image, imageSizes: [320,490], sourceSizes: &quot;(max-width: 640px) 100vw, (max-width: 1024px) 576px, 490px&quot;, enhancedSourceset: data:highRes }’ name=’super.responsiveImage’/>
    </b:with>
    </b:if>
    </b:includable>
    </b:defaultmarkup>
    <b:defaultmarkup type=’BlogSearch’>
    <b:includable id=’searchSubmit’>
    <b:if cond=’data:widget.sectionId == &quot;search_top&quot;’>
    <label>
    <input type=’submit’/>
    <b:include data='{ iconClass: &quot;touch-icon search-icon&quot; }’ name=’searchIcon’/>
    </label>
    <b:else/>
    <b:include name=’super.searchSubmit’/>
    </b:if>
    </b:includable>
    </b:defaultmarkup>
    <b:defaultmarkup type=’AdSense,Blog’>
    <b:includable id=’defaultAdUnit’>
    <!– Clear out style (need non-empty string) –>
    <b:with value=’&quot;/* Done in css. */&quot;’ var=’style’>
    <b:include name=’super.defaultAdUnit’/>
    </b:with>
    </b:includable>
    </b:defaultmarkup>
    <b:defaultmarkup type=’Blog,FeaturedPost,PopularPosts’>
    <b:includable id=’sharingButtonContent’>
    <b:message name=’messages.share’/>
    </b:includable>
    <b:includable id=’postLabels’>
    <b:include cond=’data:view.isSingleItem and data:widget.type == &quot;Blog&quot;’ name=’super.postLabels’/>
    </b:includable>
    <b:includable id=’headerByline’>
    <b:if cond=’data:view.isSingleItem and data:widget.type == &quot;Blog&quot;’>
    <b:include name=’super.headerByline’/>
    <b:else/>
    <b:include data='{ items: [&quot;author&quot;, &quot;timestamp&quot;] }’ name=’headerBylineOverride’/>
    </b:if>
    </b:includable>
    <b:includable id=’footerBylines’>
    <b:if cond=’data:view.isSingleItem and data:widget.type == &quot;Blog&quot;’>
    <b:include name=’super.footerBylines’/>
    <b:else/>
    <b:include data='{ items: [[&quot;share&quot;, &quot;comments&quot;]] }’ name=’footerBylinesOverride’/>
    </b:if>
    </b:includable>
    <b:includable id=’emailPostIcon’>
    <!– Replace icon with text –>
    <span class=’byline’>
    <a class=’flat-button’ expr:href=’data:post.emailPostUrl’><data:messages.emailPost/></a>
    </span>
    </b:includable>
    </b:defaultmarkup>
    <b:defaultmarkup type=’Blog’>
    <b:includable id=’main’>
    <b:if cond=’not data:posts.any’>
    <div class=’no-posts’>
    <b:eval expr=’data:view.isSearch ? data:messages.noResultsFound : data:messages.theresNothingHere’/>
    </div>
    </b:if> <!– Display title on homepage –>
    <b:if cond=’data:posts.any and data:view.isHomepage’>
    <h3 class=’title’><data:messages.latestPosts/></h3>
    </b:if>
    <!– Filter out the featured post, but only on the homepage. –>
    <b:with value='(data:widgets.FeaturedPost filter w =&gt; w.sectionId == &quot;page_body&quot;) map (w =&gt; w.postId)’ var=’featuredPostIds’>
    <b:with value=’data:view.isHomepage ? data:posts filter (post =&gt; post.id not in data:featuredPostIds) : data:posts’ var=’posts’>
    <b:include name=’super.main’/>
    </b:with>
    </b:with>
    </b:includable>
    <b:includable id=’commentFormIframeSrc’ var=’post’>
    <b:with value=’data:template.isAlternateRendering ? (&quot;&amp;skinvariant=&quot; + data:template.variant) : &quot;&quot;’ var=’variantParam’>
    <a expr:href=’data:post.commentFormIframeSrc + &quot;&amp;skin=soho&quot; + data:variantParam’ id=’comment-editor-src’/>
    </b:with>
    </b:includable>
    <b:includable id=’commentForm’ var=’post’>
    <b:with value=’&quot;90px&quot;’ var=’cmtIframeInitialHeight’>
    <b:include data=’post’ name=’super.commentForm’/>
    </b:with>
    </b:includable>
    <b:includable id=’threadedCommentForm’ var=’post’>
    <b:with value=’&quot;90px&quot;’ var=’cmtIframeInitialHeight’>
    <b:include data=’post’ name=’super.threadedCommentForm’/>
    </b:with>
    </b:includable>
    <b:includable id=’postCommentsAndAd’ var=’post’>
    <!– Always render inline ad inside container –>
    <div class=’post-outer-container’>
    <div class=’post-outer’>
    <b:include data=’post’ name=’post’/>
    </div>
    <b:include cond=’data:view.isSingleItem’ data=’post’ name=’commentPicker’/>
    <b:include cond=’data:post.includeAd and data:post.adNumber lt (data:view.isHomepage ? 2 : 3)’ data=’post’ name=’inlineAd’/>
    </div>
    </b:includable>
    <b:includable id=’post’ var=’post’>
    <b:if cond=’data:view.isSingleItem’>
    <div class=’post-sidebar’>
    <b:if cond=’data:widgets.Blog.first.allBylineItems.share and data:post.shareUrl’>
    <div class=’post-sidebar-item post-share-buttons’>
    <b:with value=’data:widget.instanceId + &quot;-&quot; + (data:regionName ?: &quot;byline&quot;) + &quot;-&quot; + data:post.id’ var=’sharingId’>
    <b:include data='{ sharingId: data:sharingId, originalUrl: data:post.url, shareUrl: data:post.shareUrl, platforms: data:blog.sharing.platforms, }’ name=’sharingButtons’/>
    </b:with>
    </div>
    </b:if>
    <b:if cond=’data:widgets.Blog.first.allBylineItems.labels and data:post.labels’>
    <div class=’post-sidebar-item post-sidebar-labels’>
    <div><data:messages.labels/></div>
    <ul>
    <b:loop index=’i’ values=’data:post.labels’ var=’label’>
    <li><a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a></li>
    </b:loop>
    </ul>
    </div>
    </b:if>
    </div>
    </b:if>
    <div class=’post’>
    <b:class cond=’data:view.isMultipleItems and data:post.featuredImage’ name=’has-featured-image’/>
    <b:class cond=’data:view.isMultipleItems and not data:post.featuredImage’ name=’no-featured-image’/>
    <b:include data=’post’ name=’postMeta’/>
    <b:if cond=’data:view.isSingleItem’>
    <b:include name=’headerByline’/>
    <b:include data=’post’ name=’postTitle’/>
    <div class=’post-body-container’>
    <b:include data=’post’ name=’postBody’/>
    </div>
    <b:else/>
    <b:if cond=’data:post.featuredImage’>
    <div class=’snippet-thumbnail’>
    <a b:whitespace=’remove’ expr:href=’data:post.url’>
    <b:comment>Max width is 576, so max size @ 2x is 1152.</b:comment>
    <b:include data='{ image: data:post.featuredImage, imageSizes: [320,490,576,1152], sourceSizes: &quot;(max-width: 576px) 100vw, (max-width: 1024px) 576px, 490px&quot; }’ name=’responsiveImage’/>
    </a>
    <b:include name=’headerByline’/>
    </div>
    <b:else/>
    <b:include name=’headerByline’/>
    </b:if>
    <b:include data=’post’ name=’postTitle’/>
    </b:if>
    <b:include data=’post’ name=’postFooter’/>
    </div>
    </b:includable>
    <b:includable id=’feedLinks’>
    <!– Don’t render –>
    </b:includable>
    </b:defaultmarkup>
    <b:defaultmarkup type=’BlogArchive’>
    <b:includable id=’main’ var=’this’>
    <details class=’collapsible extendable’>
    <b:attr cond=’data:view.isArchive’ name=’open’ value=’open’/>
    <b:with value=’true’ var=’renderAsDetails’>
    <b:with value=’data:messages.archive’ var=’defaultTitle’>
    <b:include name=’super.main’/>
    </b:with>
    </b:with>
    </details>
    </b:includable>
    <b:includable id=’flat’>
    <b:include data='{ buttonClass: &quot;flat-button&quot;, items: data:this.data, itemSet: &quot;data&quot;, itemsMarkup: &quot;super.flat&quot; }’ name=’extendableItems’/>
    </b:includable>
    <b:includable id=’hierarchy’>
    <b:include data='{ buttonClass: &quot;flat-button&quot;, limit: 1, items: data:this.data, itemSet: &quot;data&quot;, itemsMarkup: &quot;super.hierarchy&quot; }’ name=’extendableItems’/>
    </b:includable>
    </b:defaultmarkup>
    <b:defaultmarkup type=’FeaturedPost’>
    <b:includable id=’main’>
    <b:with value=’data:messages.featured’ var=’defaultTitle’>
    <b:include name=’super.main’/>
    </b:with>
    </b:includable>
    <b:includable id=’snippetedPostContent’>
    <b:with value=’data:postDisplay.showFeaturedImage and data:post.featuredImage’ var=’hasImage’>
    <div class=’post-content’>
    <b:class cond=’data:hasImage’ name=’has-featured-image’/>
    <b:class cond=’not data:hasImage’ name=’no-featured-image’/> <!– Change the order and add a snippet container –>
    <b:include cond=’data:hasImage’ data=’post’ name=’snippetedPostThumbnail’/>
    <div class=’post-text-container’>
    <b:include name=’headerByline’/>
    <b:include cond=’data:this.postDisplay.showTitle’ name=’snippetedPostTitle’/>
    <b:with value=’&quot;featured-post&quot;’ var=’snippetPrefix’>
    <b:include cond=’data:this.postDisplay.showSnippet’ data=’post’ name=’postSnippet’/>
    </b:with>
    <div class=’post-footer’>
    <b:include name=’footerBylines’/>
    <!– TODO(sarnesjo): Use the postJumpLink call (in case it’s been customized). –>
    <a class=’jump-link flat-button’ expr:href=’data:post.url’><data:messages.readMore/></a>
    </div>
    </div>
    </div>
    </b:with>
    </b:includable>
    <b:includable id=’snippetedPostByline’ var=’post’>
    <b:include name=’headerByline’/>
    </b:includable>
    <b:includable id=’snippetedPostThumbnail’>
    <b:include data='{image: data:featuredImage, maxSize: 954, selector: &quot;.hero-thumb&quot;}’ name=’responsiveImageStyle’/>
    <a class=’thumb-link’ expr:href=’data:post.url’><div class=’thumb hero-thumb’/></a>
    </b:includable>
    </b:defaultmarkup>
    <b:defaultmarkup type=’Header’>
    <b:includable id=’image’>
    <b:include name=’super.image’/>
    <!– If we are replacing the title, force it to render anyway, and it’ll be hidden in CSS. –>
    <b:include cond=’data:this.imagePlacement == &quot;REPLACE&quot;’ name=’title’/>
    </b:includable>
    <b:includable id=’title’>
    <div>
    <b:class cond=’data:this.imagePlacement == &quot;REPLACE&quot;’ name=’replaced’/>
    <b:include name=’super.title’/>
    </div>
    </b:includable>
    </b:defaultmarkup>
    <b:defaultmarkup type=’Label’>
    <b:includable id=’main’ var=’this’>
    <details class=’collapsible extendable’>
    <b:attr cond=’data:view.isLabelSearch’ name=’open’ value=’open’/>
    <b:with value=’true’ var=’renderAsDetails’>
    <b:with value=’data:messages.labels’ var=’defaultTitle’>
    <b:include name=’super.main’/>
    </b:with>
    </b:with>
    </details>
    </b:includable>
    <b:includable id=’list’>
    <b:include data='{ buttonClass: &quot;flat-button&quot;, items: data:this.labels, itemSet: &quot;labels&quot;, itemsMarkup: &quot;super.list&quot; }’ name=’extendableItems’/>
    </b:includable>
    <b:includable id=’cloud’>
    <b:include data='{ buttonClass: &quot;flat-button&quot;, items: data:this.labels, itemSet: &quot;labels&quot;, itemsMarkup: &quot;super.cloud&quot; }’ name=’extendableItems’/>
    </b:includable>
    </b:defaultmarkup>
    <b:defaultmarkup type=’PageList’>
    <b:includable id=’content’>
    <div class=’widget-content’>
    <b:if cond=’data:widget.sectionId == &quot;page_list_top&quot;’>
    <b:include name=’overflowablePageList’/>
    <b:else/>
    <b:include name=’pageList’/>
    </b:if>
    </div>
    </b:includable>
    <b:includable id=’overflowButton’>
    <a><data:messages.moreEllipsis/></a>
    </b:includable>
    </b:defaultmarkup>
    <b:defaultmarkup type=’PopularPosts’>
    <b:includable id=’main’>
    <!– Default the title to ‘Popular posts’. –>
    <b:with value=’data:messages.popularPosts’ var=’defaultTitle’>
    <b:include name=’super.main’/>
    </b:with>
    </b:includable>
    <b:includable id=’snippetedPostContent’>
    <div class=’post’>
    <b:class cond=’data:post.featuredImage’ name=’has-featured-image’/>
    <b:class cond=’not data:post.featuredImage’ name=’no-featured-image’/>
    <b:if cond=’data:post.featuredImage’>
    <div class=’snippet-thumbnail’>
    <a b:whitespace=’remove’ expr:href=’data:post.url’>
    <b:include data='{ image: data:post.featuredImage, imageSizes: [330,660,1320], sourceSizes: &quot;(max-width: 660px) 100vw, 660px&quot; }’ name=’responsiveImage’/>
    </a>
    <b:include name=’headerByline’/>
    </div>
    <b:else/>
    <b:include name=’headerByline’/>
    </b:if>
    <b:include cond=’data:this.postDisplay.showTitle’ name=’snippetedPostTitle’/>
    <div class=’post-footer’>
    <b:include name=’footerBylines’/>
    </div>
    </div>
    </b:includable>
    </b:defaultmarkup>
    <b:defaultmarkup type=’Profile’>
    <b:includable id=’main’ var=’this’>
    <!– Remove widget title –>
    <b:include name=’content’/>
    </b:includable>
    <b:includable id=’teamProfileLink’>
    <!– Remove background image, add “Visit profile” message –>
    <a class=’profile-link g-profile’ expr:href=’data:userUrl’>
    <b:include name=’profileImage’/>
    <div class=’profile-name-wrapper’>
    <div class=’profile-name’><data:display-name/></div>
    <div class=’visit-profile’><data:messages.visitProfile/></div>
    </div>
    </a>
    </b:includable>
    <b:includable id=’userProfileLink’>
    <!– Remove background image –>
    <a class=’profile-link g-profile’ expr:href=’data:userUrl’ rel=’author’>
    <data:displayname/>
    </a>
    </b:includable>
    <b:includable id=’viewProfileLink’>
    <!– Change message to “Visit profile” –>
    <a class=’profile-link’ expr:href=’data:userUrl’ rel=’author’>
    <data:messages.visitProfile/>
    </a>
    </b:includable>
    <b:includable id=’defaultProfileImage’>
    <div class=’default-avatar-wrapper’>
    <b:include data='{ iconClass: &quot;avatar-icon&quot; }’ name=’defaultAvatarIcon’/>
    </div>
    </b:includable>
    </b:defaultmarkup>
    </b:defaultmarkups>

    #Bước 3 : Và cuối cùng là lưu theme lại.

    Chỉnh sửa lần cuối

    Từ nay các tiện ích bạn thêm vào sẽ được mặc định là phiên bản mới. Tuy nhiên các tiện ích đang có sẵn sẽ vẫn ở phiên bản cũ. Có 2 cách để bạn lựa chọn.

    #Bước 1 : Xóa tiên ích cũ đi và copy đoạn code của nó vào tiện ích mới thêm vào.

    # Bước 2 : Hoặc chỉnh sửa các tiện ích cũ theo cách sau

    Cách cập nhật Blogger phiên bản cũ lên bản mới

    #a Vào Chủ đề >> Chỉnh sửa HTML >> Chuyển đến tiện ích và click chọn lần lượt các tiện ích, tìm kiếm và thay thế version=’1′ thành version=’2′ visible=’true’

    Cách cập nhật Blogger phiên bản cũ lên bản mới

    #b Tìm kiếm và thay thế đoạn code

    <b:includable id=’main’>
    <!– only display title if it’s non-empty –>
    <b:if cond=’data:title != &quot;&quot;’>
    <h4 class=’title’><data:title/></h4>
    </b:if>
    <div class=’widget-content’>
    <data:content/>
    </div>
    </b:includable>

    thành

    <b:includable id=’main’>
    <b:include name=’widget-title’/>
    <div class=’widget-content’>
    <data:content/>
    </div>
    </b:includable>

    #c Lưu theme lại và hãy vào Bố cục để kiểm tra kết quả nhé.

    Lưu ý: Đối với 2 widget là Blog1 và PopularPost bạn không nên nâng cấp lên phiên bản mới. Vì khi nâng cấp 1 số template sẽ bị vỡ layout hoàn toàn do cấu trúc code khác biệt giữa 2 phiên bản.

    Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.

    Chúc bạn thành công!