Thủ Thuật Blogspot

  • Thêm Tiện Ích Google Dịch Cực Nhẹ Vào Blogger

     Chào mừng bạn đến với Nguyễn Lâm Blog, hôm nay mình sẽ chia sẻ cho các
    bạn tiện ích Google Dịch nhé.

    Thêm Tiện Ích Google Dịch Cực Nhẹ Vào Blogger

    Nếu blog của bạn có nhiều lượt truy cập nước ngoài thì tiện ích này là một sự
    lựa chọn rất tốt cho blog của bạn. Nó sẽ giúp cho những người đọc đó chuyển
    qua ngôn ngữ của họ một cách dễ dàng.

    Ở trong phần bố cục của Blogger cũng có tiện ích Google Dịch, các bạn có thể
    vào Bố cục -> Thêm tiện ích -> Google Dịch nhưng sẽ làm blog của bạn
    nặng hơn.

    Còn tiện ích mình chia sẻ dưới đây sẽ nhẹ hơn nhiều, bởi vì mình có sử dụng
    lazyload, nó sẽ không làm cho tốc độ tải trang của bạn chậm đi.

    Cách Thêm Tiện Ích Google Dịch Cực Nhẹ Vào Blogger

    Để thêm tiện ích Google dịch vào blogger các bạn hãy làm như sau nhé.

    Bước 1: Như thường lệ, các bạn hãy truy cập vào Trang chủ Blogger.

    Bước 2: Nhấp vào Chủ đề Chỉnh sửa HTML.


    Bước 3
    : Tìm đến thẻ ]]></b:skin> và dán nó vào trên thẻ đó nhé.

    #google_translate_element{padding:0;margin-right:5px;margin-top:15px}
    .goog-te-banner-frame.skiptranslate,.goog-te-gadget-simple img,img.goog-te-gadget-icon,.goog-te-menu-value span{display:none!important}
    .goog-te-menu-frame{box-shadow:none!important}
    .goog-te-gadget-simple{background-color:transparent!important;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d='M20,5H10.88L10,2H4A2,2 0 0,0 2,4V17A2,2 0 0,0 4,19H11L12,22H20A2,2 0 0,0 22,20V7A2,2 0 0,0 20,5M7.17,14.59A4.09,4.09 0 0,1 3.08,10.5A4.09,4.09 0 0,1 7.17,6.41C8.21,6.41 9.16,6.78 9.91,7.5L10,7.54L8.75,8.72L8.69,8.67C8.4,8.4 7.91,8.08 7.17,8.08C5.86,8.08 4.79,9.17 4.79,10.5C4.79,11.83 5.86,12.92 7.17,12.92C8.54,12.92 9.13,12.05 9.29,11.46H7.08V9.91H11.03L11.04,10C11.08,10.19 11.09,10.38 11.09,10.59C11.09,12.94 9.5,14.59 7.17,14.59M13.2,12.88C13.53,13.5 13.94,14.06 14.39,14.58L13.85,15.11L13.2,12.88M13.97,12.12H13L12.67,11.08H16.66C16.66,11.08 16.32,12.39 15.1,13.82C14.58,13.2 14.21,12.59 13.97,12.12M21,20A1,1 0 0,1 20,21H13L15,19L14.19,16.23L15.11,15.31L17.79,18L18.5,17.27L15.81,14.59C16.71,13.56 17.41,12.34 17.73,11.08H19V10.04H15.36V9H14.32V10.04H12.36L11.18,6H20A1,1 0 0,1 21,7V20Z' fill="%23161617"/%3E%3C/svg%3E") center / 12px no-repeat;-webkit-transition:all .2s ease;transition:all .2s ease;background-size: 20px 20px;display:inline-block;font-weight:400;line-height: 1.8;padding:0 6px;text-align:center;white-space:nowrap;vertical-align: middle;-ms-touch-action: manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select: none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-left:none!important;border-top:none!important;border-bottom:none!important;border-right:none!important;border-radius: 4px}
    body{top:0px!important}

    Nếu vị trí nút Google Dịch bị lệch, các bạn có thể chỉnh như sau:

    • margin-right:5px – Nếu giá trị càng lớn thì nó sẽ sang bên trái.
    • margin-top:15px – Nếu giá trị càng lớn thì sẽ càng đi xuống.


    Bước 4
    : Thêm nút Google Dịch này vào chỗ các bạn muốn nó hiển thị nhé. Của
    mình là để trên phần đầu của bài viết.

    <div id='google_translate_element'></div>


    Bước 5
    : Thêm JavaScript này vào trên thẻ </body> nhé. Mình sẽ tích hợp
    cho các bạn 2 loại, 1 là trì hoãn và 2 là lazy nhé.

    JavaScript Trì Hoãn

    Với loại này, nó sẽ đợi load xong trang web của bạn rồi mới xuất hiện.

    <script>/*<![CDATA[*/
    (function() { var add = document.createElement('script'); var crs = document.createAttribute('crossorigin'); crs.value="anonymous"; add.setAttributeNode(crs); add.defer = true; add.src="https://cdn.jsdelivr.net/gh/nguyenlamblog/nguyenlamblog.xyz@1b07d7e/JS/translate.js"; var sc = document.getElementsByTagName('head')[0]; sc.parentNode.insertBefore(add, sc); })();
    /*]]>*/
    </script>
    <script>
    function googleTranslateElementInit(){new google.translate.TranslateElement({pageLanguage:&#39;vi&#39;,includedLanguages:&#39;en,id,vi,zh-CN,th,ru,ms,ko,ja,it,hi,fr,es,de,ar,tr,jw,sn&#39;,layout:google.translate.TranslateElement.InlineLayout.SIMPLE},&#39;google_translate_element&#39;)}$(&quot;.hover&quot;).mouseleave(function (){$(this).removeClass(&quot;hover&quot;)});
    </script>

    JavaScript Lazy

    Với loại này, nó sẽ không xuất hiện cho đến khi bạn cuộn trang nhé.

    <script>/*<![CDATA[*/
    var lazyts=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyts||0!=document.body.scrollTop&&!1===lazyts)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/nguyenlamblog/nguyenlamblog.xyz@1b07d7e/JS/translate.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyts=!0)},!0);
    /*]]>*/
    </script>
    <script>
    function googleTranslateElementInit(){new google.translate.TranslateElement({pageLanguage:&#39;vi&#39;,includedLanguages:&#39;en,id,vi,zh-CN,th,ru,ms,ko,ja,it,hi,fr,es,de,ar,tr,jw,sn&#39;,layout:google.translate.TranslateElement.InlineLayout.SIMPLE},&#39;google_translate_element&#39;)}$(&quot;.hover&quot;).mouseleave(function (){$(this).removeClass(&quot;hover&quot;)});
    </script>

    Các bạn cấu hình như sau:

    • pageLanguage:&#39;id&#39 – Các bạn thay chữ id đó thành ngôn ngữ bài viết của bạn.
    • en,id,vi,zh-CN,th,ru… – Các ban có thể thêm hoặc bớt ngôn ngữ mà nó sẽ dịch.

    Danh sách viết tắt các ngôn ngữ: Truy cập tại đây nhé.

    Cuôi cùng lưu chủ đề và xem kết quả nhé.

    ———————————–


  • Thiết Lập Tên Miền Qua Cloudflare Cho Blogger

     Blogger là một trong những nền tảng blog phổ biến nhất cho cả blog cá
    nhân và chuyên nghiệp, và Cloudflare là Mạng phân phối nội dung (CDN) đáng tin
    cậy và rất phổ biến mà có lẽ ai cũng đã từng nghe đến.

    thiet-lap-ten-mien-qua-cloudflare-cho-blogger

    Trong bài viết này, mình sẽ hướng dẫn cho các bạn cách dùng tên miền qua
    Cloudflare cho blogger một cách dễ dàng nhé.

    Trước khi vào bài viết, chúng ta cùng tìm hiểu thêm về một số kiến thức về
    Cloudflare.

    Cloudflare là gì?

    cloudflare-la-gi

    Cloudflare là Mạng phân phối nội dung (CDN) bao gồm hàng trăm trung tâm dữ
    liệu đặt tại hơn 100 quốc gia. Được thành lập bởi Matthew Prince vào năm 2009,
    Cloudflare đã phát triển để xử lý từ 5 đến 10% lưu lượng truy cập internet
    toàn cầu, biến Cloudflare trở thành một trong những CDN lớn nhất trên thế
    giới.

    Cloudflare hoạt động như thế nào?

    Bộ nhớ đệm

    Một CDN như Cloudflare sử dụng một quá trình gọi là bộ nhớ đệm. Bộ nhớ đệm là
    nơi lưu trữ dữ liệu được kiểm tra thường xuyên để truy xuất nhanh hơn.

    Cloudflare sẽ kiểm tra trang web của bạn thường xuyên để giữ cho bộ nhớ cache
    của nó được cập nhật. Cloudflare CDN sau đó sẽ phân phát bộ nhớ cache đó cho
    bất kỳ khách truy cập nào yêu cầu trang web của bạn. Lợi ích chính của việc sử
    dụng Cloudflare là khách truy cập trên khắp thế giới sẽ tải xuống trang web
    của bạn từ một vị trí gần họ hơn về mặt vật lý, mang lại cho họ thời gian tải
    nhanh hơn. Điều đó cũng có nghĩa là vì một số yêu cầu được xử lý hoàn toàn bởi
    CDN, máy chủ của bạn sẽ chịu tải thấp hơn và nhiều khách truy cập sẽ có thể
    xem trang web của bạn cùng một lúc.

    Lọc lưu lượng truy cập

    Điều này hoạt động như một lớp bảo vệ khác đối với các mối đe dọa từ bên
    ngoài, cùng với tường lửa của bạn và các biện pháp bảo mật khác mà bạn có thể
    đã thực hiện. Cloudflare được biết đến với việc triển khai một số kỹ thuật lọc
    mạnh mẽ nhất trên mạng của họ, mà trang web của bạn có thể tận dụng.

    Mạng DNS

    Cloudflare không chỉ là CDN – họ còn vận hành mạng Hệ thống tên miền (DNS)
    hiệu suất cao nhất thế giới.

    Trong cấu hình mặc định, Cloudflare được thiết lập làm máy chủ định danh miền
    của bạn, vì vậy khách truy cập của bạn sẽ tận hưởng khả năng phân giải DNS
    nhanh do mạng Cloudflare cung cấp.

    Lợi ích của Cloudflare là gì?

    Cloudflare có một gói miễn phí cho phép bạn thử nhiều lợi ích của chúng mà
    không cần trả phí.

    Dưới đây là bốn lợi ích chính của việc sử dụng Cloudflare:

    • Bảo vệ chống lại lưu lượng truy cập độc hại
    • Giảm độ trễ
    • Giảm quá trình tải của máy chủ
    • Chứng chỉ SSL chung

    Cách Thiết Lập Tên Miền Qua Cloudflare Cho Blogger

    Để thiết lập tên miền qua Cloudflare cho blogger các bạn hãy làm như sau.

    1. Đăng ký tài khoản Cloudflare

    Truy cập Cloudflare.com và đăng ký bằng địa chỉ e-mail của bạn.

    2. Thêm địa chỉ trang web của bạn

    them-ten-mien-vao-cloudflare

    Nhập tên miền của bác bạn vào và đợi nó load.

    3. Chọn gói của bạn

    chon-goi-cho-tai-khoan-cloudflare

    Cloudflare sẽ yêu cầu bạn chọn một gói cho tài khoản Cloudflare của bạn. Nếu
    bạn có tiền thì hãy chọn gói trả phí, nhưng mình nghĩ gói miễn phí cũng đã có
    các tính năng cần thiết rồi. Sau khi chọn gói xong thì ấn tiếp tục.

    Đợi một lúc để Cloudflare quét DNS của tên miền, sau đó sẽ được tự động thêm
    vào trong cấu hình Cloudflare của bạn.

    sau-khi-quet-xong-dns

    Hiện tại mình chưa có DNS nào, các bạn ấn Contiue để bỏ qua bước này nhé, lát
    nữa mình sẽ hướng dẫn thêm CNAME và IP của Blogger cho nhé.

    4. Thay đổi NameServers của bạn thành NameServers Cloudflare

    Để thay đổi NameServers của bạn thành NameServers của Cloudflare, các bạn hãy
    truy cập vào phần quản lý tên miền của bạn.

    Dưới đây là ví dụ. (Hình ảnh)

    cau-hinh-nameserver-1
    cau-hinh-nameserver-2

    Sau đó xóa các Namesevers cũ và thay thế bằng Nameservers của Cloudflare.

    thay-the-nameservers-cua-cloudflare

    5. Thêm tên miền vào Blogger và cấu hình CNAME

    cach-them-ten-mien-vao-blogger

    Đến bước này, các bạn hãy truy cập bài viết Cách Thêm Tên Miền Vào Blogger Update 2021
    và làm theo hướng dẫn nhé.

    Lưu ý: Bạn phải sử dụng tên miền riêng vì Cloudflare không hỗ trợ domain.blogspot.com.

    Fix Lỗi Bật HTTPS Cho Blogger Khi Trỏ Qua Cloudflare

    Sau khi thêm tên miền cho blogger qua Cloudflare xong, có nhiều bạn sẽ gặp vấn
    đề về bật HTTPS (SSL) cho nên mình cũng sẽ hướng dẫn cho các bạn cách fix lỗi.

    Sẽ có 2 cách sau:

    Cách 1: Tắt DNS của Clouflare

    1. Các bạn hãy đăng nhập vào Cloudflare, chuyển qua tab DNS.

    2. Nhấp vào Edit và hãy tắt DNS bằng cách nhấp vào biểu tượng đám mây màu vàng
    cho nó chuyển sang màu xám.

    tat-dns-only-cua-cloudflare

    3. Ấn Save, các CNAME và IP khác cũng làm tương tự như vậy.

    4. Vào Blogger.com và bật HTTPS cho blog của bạn trong phần Cài đặt.

    Cách 2. Tắt SSL của Blogger và dùng SSL của Cloudflare

    1. Vào Blogger.com và tắt HTTPS trong phần Cài đặt.

    2. Đăng nhập vào Cloudflare và chuyển qua tab SSL/TLS.

    3. Chọn Flexible.

    chon-flexible-trong-ssl

    4. Vẫn ở đó chọn tab con Edge Certificates, cuộn xuốn và bật Alway Use
    HTTPS.

    bat--alway-use-https

    5. Chuyển qua tab DNS và bật Proxied ở phần Proxy Status

    bat-proxied-cloudflare

    Lưu ý: Ở cách này, trong phần DNS các đám mây màu vàng nhé.

    Kết luận

    Vậy là mình đã hướng dẫn cho các bạn cách sử dụng cloudflare để thêm tên miền
    cho blogger rồi.

    Nếu thấy hữu ích đừng quên đánh giá 5 sao và bình luận ở dưới nhé. Cảm ơn các
    bạn đã theo dõi.

    ———————————–


  • Thêm Bài Viết Liên Quan Vào Giữa Bài Viết Blogger

    them-bai-viet-lien-quan-vao-blogger

    Blogger là một nền tảng tốt cho các blogger mới bắt đầu. Tuy nhiên,
    Blogger thiếu nhiều tính năng cần thiết trong các nền tảng blog hiến nay. Một
    trong những tính năng bị thiếu được quan tâm nhiều nhất đó là bài viết liên
    quan. Bài viết liên quan rất hữu ích để hiển thị các bài đăng liên quan khác
    cho người đọc của bạn và giảm tị lệ thoát.

    Trong bài viết này, mình sẽ hướng dẫn cho các bạn thêm tính năng bài viết liên
    quan vào blog của bạn. Tính năng này rất nhẹ nên sẽ không gây ảnh hưởng gì đến
    tốc độ tải trang của bạn.

    Trước khi hướng dẫn thì chúng ta cùng lướt qua các tính năng của nó đã nhé.

     

    Các Tính Năng


    • Tự động
      : Khi bạn thêm bài viết liên quan vào blogger, nó sẽ bắt đầu tự động
      hiển thị các bài đăng có liên quan trên trang web của bạn và đưa vào giữa bài
      viết. Không cần phải chỉnh sửa gì nữa.

    • Có thể tùy biến
      : Tính năng này sử dụng CSS nên bạn có thể chỉnh sửa theo phong
      cách của bạn.

    • Kiểm soát tỷ lệ thoát
      : Nó sẽ giảm tỷ lệ thoát, điều này sẽ làm cho điểm SEO
      của bạn tốt hơn trong công cụ tìm kiếm của Google.

    • Bán đáp ứng
      : Nếu bạn đang sử dụng chủ đề blogger đáp ứng, thì tiện ích con
      cũng sẽ áp dụng kích thước theo chiều rộng bài đăng trên blog của bạn. Nhưng
      trong chủ đề không đáp ứng sẽ không thể điều chỉnh theo chiều rộng trang web.

    Tính năng này sẽ có một số template không hỗ trợ, nếu không làm được thì các bạn hãy đợi thêm các bài hướng dẫn khác nhé.

    Thêm Bài Viết Liên Quan Vào Giữa Bài Viết Blogger

    Để thêm bài viết liên quan vào Blogger, các bạn hãy làm theo các bước sau đây.

    Để tránh các sai sót khi thêm, các bạn nên sao lưu template lại.


    1
    . Hãy truy cập trang tổng quan Blogger. Và đi tới tùy chọn Chủ đềChỉnh sửa
    HTML
    để mở trình chỉnh sửa chủ đề.


    2
    . Sao chép toàn bộ CSS bên dưới và dán nó trên thẻ ]]></b:skin>

    /* Related Posts */
    .bspostRelatedIn{text-align: left;
        padding: 15px;
        margin: 30px 0;
        border: 1px solid #ddd;
        border-radius: 3px;
        font-size: 15px;
        position: relative;} 
    #bspostRelatedIn_title{font-size: 16px;
        margin: 0;
        display: inline-block;
        padding: 0 10px;
        position: absolute;
        top: -14px;
        left: 10px;
        background-color: #fefefe;
        color: #7d7d7d;} 
    .bspostRelatedIn ul {
        list-style: none;
        padding: 3px 22px 0;   
    } 
    .bspostRelatedIn li{ border-radius: 5px;
        line-height: 1.7em;
        margin-bottom: 0.433333em;
        list-style: disc;
    } 
    .bspostRelatedIn li:hover {text-decoration: underline;}

    Các bạn có thể tùy chọn các kiểu hiển thị danh sách, hãy thay CSS như bên dưới
    thành các CSS mình sẽ cấp.

    .bspostRelatedIn li{ border-radius: 5px;
        line-height: 1.7em;
        margin-bottom: 0.433333em;
        list-style: disc;
    } 

    Các CSS bạn có thể thay thế:

    Kiểu 1:


    Bài viết liên quan :Thiết Lập Tên Miền Qua Cloudflare Cho Blogger

    • Thêm Tiện Ích Google Dịch Cực Nhẹ Vào Blogger

    • Áp dụng Lazy load Adsense cho Blogger

    .bspostRelatedIn li {
        border-radius: 5px;
        line-height: 1.7em;
        margin-bottom: 0.433333em;
        list-style: circle;
    }

    Kiểu 2:


    Bài viết liên quan :1. Thiết Lập Tên Miền Qua Cloudflare Cho Blogger

    2. Thêm Tiện Ích Google Dịch Cực Nhẹ Vào Blogger

    3. Áp dụng Lazy load Adsense cho Blogger

    .bspostRelatedIn li {
        border-radius: 5px;
        line-height: 1.7em;
        margin-bottom: 0.433333em;
        list-style: decimal;
    }

    Kiểu 3:


    Bài viết liên quan :01. Thiết Lập Tên Miền Qua Cloudflare Cho Blogger

    02. Thêm Tiện Ích Google Dịch Cực Nhẹ Vào Blogger

    03. Áp dụng Lazy load Adsense cho Blogger

    .bspostRelatedIn li {
        border-radius: 5px;
        line-height: 1.7em;
        margin-bottom: 0.433333em;
        list-style: decimal-leading-zero;
    }


    3
    . Sau khi thêm và lựa chọn CSS mà mình thích xong, các bạn thãy thêm
    JavaScript này vào trên thẻ </head> nhé.

    <b:if cond='data:blog.pageType == &quot;item&quot;'> 
    <script type="text/javascript"> 
    //<![CDATA[ 
    var bspostRelatedIn = new Array(); var bspostRelatedInNum = 0; var relatedUrls = new Array(); function related_results_labels(json) { for (var i = 0; i < json.feed.entry.length; i++) { var entry = json.feed.entry[i]; bspostRelatedIn[bspostRelatedInNum] = entry.title.$t; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') {relatedUrls[bspostRelatedInNum] = entry.link[k].href; bspostRelatedInNum++; break;}}}} function removeRelatedDuplicates() { var tmp = new Array(0); var tmp2 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = bspostRelatedIn[i];}} bspostRelatedIn = tmp2; relatedUrls = tmp;} function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false;} function printRelatedLabels() { var r = Math.floor((bspostRelatedIn.length - 1) * Math.random()); var i = 0; document.write('<ul>'); while (i < bspostRelatedIn.length && i < 3) { document.write('<li><a href="' + relatedUrls[r] + '">' + bspostRelatedIn[r] + '</a></li>'); if (r < bspostRelatedIn.length - 1) { r++; } else { r = 0;} i++;} document.write('</ul>');let element = document.createElement('a');element.href="https://www.bloggerspice.com/";element.pathname="embed" + element.pathname;console.log(element.toString());}//]]> 
    </script> 
    </b:if>

    Ở bspostRelatedIn.length && i < 3 Thay thế số 3 thành số bài bạn muốn hiển thị.


    4
    . Bước này là quan trọng nhất nè, thêm HTML và JavaScript vào nơi cần
    hiển thị. Các bạn hãy tìm đến <data:post.body/> xóa và thay bằng
    JavaScript bên dưới.

    <div expr:id='&quot;post1&quot; + data:post.id'/> 
    <div class="bspostRelatedIn"> 
    <b:if cond='data:post.labels'> 
    <b:loop values="data:post.labels" var="label"> 
    <b:if cond='data:blog.pageType == &quot;item&quot;'> 
    <script expr:src="https://www.nguyenlamblog.xyz/2021/06/&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;" type="text/javascript"/> 
    </b:if> 
    </b:loop> 
    </b:if> 
    <div id='bspostRelatedIn_title'>Also Read</div>
    <script type="text/javascript"> 
    removeRelatedDuplicates(); 
    printRelatedLabels(); 
    </script> 
    </div> 
    <div expr:id='&quot;post2&quot; + data:post.id'><p><data:post.body/></p></div> 
    <script type="text/javascript"> 
    var obj0=document.getElementById(&quot;post1<data:post.id/>&quot;); 
    var obj1=document.getElementById(&quot;post2<data:post.id/>&quot;); 
    var s=obj1.innerHTML; 
    var t=s.substr(0,s.length/2); 
    var r=t.lastIndexOf(&quot;&lt;br&gt;&quot;); 
    if(r&gt;0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+4);} 
    </script>

    Ở max-results=3 Thay số 3 giống với số bài bạn muốn hiển thị ở trên.


    5
    . Đến đó là xong rồi, các bạn hãy ấn vào lưu chủ đề và qua blog của bạn xem
    kết quả nhé.

    Theo mặc định, số lượng bài viết tối đa trong phân đoạn này là 3. Nhưng giá trị này có thể được tăng hoặc giảm để phù hợp với nhu cầu của bạn.

    Kết luận

    Vậy là mình đã hướng dẫn cho các bạn thêm bài viết liên qua vào blogger
    rồi. Nếu bạn gặp bất kỳ vấn đề nào hoặc có bất kỳ đề xuất nào về tiện ích
    bài đăng liên quan ở trên thì hãy bình luận cho mình và mọi người biết nhé.
    Cảm ơn các bạn đã đọc.

    ———————————–

     

  • Hiển thị các bài viết Blog1 theo một nhãn hay một số nhãn cố định

    Sử dụng quy tắc lọc lấy Nhãn trong vòng lặp b:loop của các bài đăng để hiển thị các bài đăng theo tên Nhãn đã lọc tại trang chủ blogspot

    Mặc định trang chủ hiển thị các bài đăng gần đây cho tất cả các nhãn, tuy nhiên bạn có thể sử dụng quy tắc lọc lấy nhãn trong vòng lặp b:loop của các bài đăng để hiển thị số bài đăng theo tên nhãn đã lọc tại trang chủ.

    Lưu ý quan trọng: Cách làm này liên quan trực tiếp đến số bài hiển thị tại trang chủ mà bạn chọn hiển thị, mặc định thì số bài được hiển thị tại trang chủ là 7 bài đăng, bạn có thể cài đặt hiển thị nhiều hơn. Vấn đề mình muốn đề cập ở đây giả sử số bài đăng ở trang chủ là 7 bài đăng mới nhất cho tất cả các nhãn nhưng nếu bạn lọc lấy một nhãn hay một số nhãn cố định thì trong 7 bài đăng đó nếu có nhãn của bài đăng nào nằm trong bộ lọc sẽ hiển thị và số bài đăng không bằng 7 nữa và có thể sẽ ít hơn.

    hien thi bai viet blog1 theo nhan

    Ví dụ: Tại chang chủ hiển thị 7 bài đăng cho tất cả các nhãn như sau:

    + Nhãn A: 2 bài đăng
    + Nhãn B: 4 bài đăng
    + Nhãn C: 1 bài đăng

    Nếu bạn lọc lấy nhãn A => Số bài đăng chỉ còn 2 bài, tương tự với nhãn B => 4 bài và nhãn C => 1 bài. Nếu bạn lọc lấy nhãn A và C => số bài đăng sẽ hiển thị là 3, tương tự nếu lọc lấy nhãn B và C => số bài đăng sẽ hiển thị là 5.

    Cách làm như sau:

    Trong widget Blog1, mở rộng thẻ tag <b:includable id=’main’ var=’top’>, trong này bạn sẽ thấy một đoạn thẻ dữ liệu b:loop có dạng sau:

    <b:loop values=’data:posts’ var=’post’>
      <b:include data=’post’ name=’post’/>
    </b:loop>

    Bạn thay lại như sau:

    + Áp dụng cho 1 Nhãn duy nhất

    <b:if cond=’data:view.isHomepage’>
     <b:loop values=’data:posts where (p => p.labels any (l => l.name == “Tên Nhãn“))’ var=’post’>
        <b:include data=’post’ name=’post’/>
      </b:loop>
    <b:else/>
      <b:loop values=’data:posts’ var=’post’>
        <b:include data=’post’ name=’post’/>
      </b:loop>
    </b:if>

    Hiển thị các bài viết tại trang chủ theo một nhãn hay một số nhãn cố định

    Sử dụng quy tắc lọc lấy Nhãn trong vòng lặp b:loop của các bài đăng để hiển thị các bài đăng theo tên Nhãn đã lọc tại trang chủ blogspot

    Mặc định trang chủ hiển thị các bài đăng gần đây cho tất cả các nhãn, tuy nhiên bạn có thể sử dụng quy tắc lọc lấy nhãn trong vòng lặp b:loop của các bài đăng để hiển thị số bài đăng theo tên nhãn đã lọc tại trang chủ.

    Lưu ý quan trọng: Cách làm này liên quan trực tiếp đến số bài hiển thị tại trang chủ mà bạn chọn hiển thị, mặc định thì số bài được hiển thị tại trang chủ là 7 bài đăng, bạn có thể cài đặt hiển thị nhiều hơn. Vấn đề mình muốn đề cập ở đây giả sử số bài đăng ở trang chủ là 7 bài đăng mới nhất cho tất cả các nhãn nhưng nếu bạn lọc lấy một nhãn hay một số nhãn cố định thì trong 7 bài đăng đó nếu có nhãn của bài đăng nào nằm trong bộ lọc sẽ hiển thị và số bài đăng không bằng 7 nữa và có thể sẽ ít hơn.

    Hiển thị các bài viết tại trang chủ theo một nhãn hay một số nhãn cố định

    Ví dụ: Tại chang chủ hiển thị 7 bài đăng cho tất cả các nhãn như sau:

    + Nhãn A: 2 bài đăng
    + Nhãn B: 4 bài đăng
    + Nhãn C: 1 bài đăng

    Nếu bạn lọc lấy nhãn A => Số bài đăng chỉ còn 2 bài, tương tự với nhãn B => 4 bài và nhãn C => 1 bài. Nếu bạn lọc lấy nhãn A và C => số bài đăng sẽ hiển thị là 3, tương tự nếu lọc lấy nhãn B và C => số bài đăng sẽ hiển thị là 5.

    Cách làm như sau:

    Trong widget Blog1, mở rộng thẻ tag <b:includable id=’main’ var=’top’>, trong này bạn sẽ thấy một đoạn thẻ dữ liệu b:loop có dạng sau:

    <b:loop values=’data:posts’ var=’post’>
      <b:include data=’post’ name=’post’/>
    </b:loop>

    Bạn thay lại như sau:

    + Áp dụng cho 1 Nhãn duy nhất

    <b:if cond=’data:view.isHomepage’>
     <b:loop values=’data:posts where (p => p.labels any (l => l.name == “Tên Nhãn”))’ var=’post’>
        <b:include data=’post’ name=’post’/>
      </b:loop>
    <b:else/>
      <b:loop values=’data:posts’ var=’post’>
        <b:include data=’post’ name=’post’/>
      </b:loop>
    </b:if>

    Ví dụ:

    <b:if cond=’data:view.isHomepage’>
     <b:loop values=’data:posts where (p => p.labels any (l => l.name == “windows-setup“))’ var=’post’>
        <b:include data=’post’ name=’post’/>
      </b:loop>
    <b:else/>
      <b:loop values=’data:posts’ var=’post’>
        <b:include data=’post’ name=’post’/>
      </b:loop>
    </b:if>

    Ảnh minh họa:

    Hiển thị các bài viết Blog1 theo một nhãn hay một số nhãn cố định

    Khi áp dụng quy tắc này tại trang chủ sẽ chỉ hiển thị các bài đăng cho Nhãn có tên: windows-setup

    + Áp dụng cho các Nhãn khác nhau:

    <b:if cond=’data:view.isHomepage’>
     <b:loop values=’data:posts where (p => p.labels any (l => l.name in [“Tên Nhãn 1″,”Tên Nhãn 2″,”Tên Nhãn 3,”Tên Nhãn n”]))’ var=’post’>
        <b:include data=’post’ name=’post’/>
      </b:loop>
    <b:else/>
      <b:loop values=’data:posts’ var=’post’>
        <b:include data=’post’ name=’post’/>
      </b:loop>
    </b:if>

    Ví dụ:

    <b:if cond=’data:view.isHomepage’>
     <b:loop values=’data:posts where (p => p.labels any (l => l.name in [“windows-setup“,”sua-loi-windows“, “thu-thuat-windows”]))’ var=’post’>
        <b:include data=’post’ name=’post’/>
      </b:loop>
    <b:else/>
      <b:loop values=’data:posts’ var=’post’>
        <b:include data=’post’ name=’post’/>
      </b:loop>
    </b:if>

    Khi áp dụng quy tắc này tại trang chủ sẽ chỉ hiển thị các bài đăng cho các Nhãn có tên: windows-setup, sua-loi-windows, thu-thuat-windows . Chúc các bạn thành công.

  • Code liên kết nguồn tự động cho Blogspot

    Chia sẽ các bạn liên kết nguồn tự động cho Blogger, khi có một ai đó coppy bài viết của bạn dán đến một nơi khác thì đoạn code này sẽ thực hiện và để lại nguồn bên dưới.

    Hãy dán đoạn code này trên thẻ </body> trong theme blogspot của bạn hoặc website.

    <script type=’text/javascript’>
    //<![CDATA[
    function copaslink(){var e,n=document.getElementsByTagName(“body”)[0],t=(e=window.getSelection())+(“<br/><br/>Sumber : <a href='”+document.location.href+”‘>”+document.location.href+”</a><br/>”),o=document.createElement(“div”);o.style.position=”absolute”,o.style.left=”-99999px”,n.appendChild(o),o.innerHTML=t,e.selectAllChildren(o),window.setTimeout(f
    unction(){n.removeChild(o)},0)}document.oncopy=copaslink; //]]>
    </script>

    Code liên kết nguồn tự động cho Blogspot
    Code liên kết nguồn tự động cho Blogspot
  • Sửa lỗi Header (LOGO) làm trùng thẻ H1 cho Blogspot

    Tất cả các blogspot khi tiến hành cải thiện seo với việc chỉnh sửa tối ưu hóa cho thẻ h1 và h3 thì đến 90% các bạn ít quan tâm tới việc phân bổ thẻ H1 khi nó được gán là tiêu đề blogspot tại các trang trong blogspot.
    Xin lưu ý:
    – Lỗi thẻ H1 chỉ xẩy ra khi bạn đã tối ưu thẻ H3 mà mặc định của blogger là tiêu đề bài viết thành thẻ H1 khi xem ở trang bài viết.Thông qua thủ thuật Sửa tiêu đề bài viết thành H1
    – Cần xem người thiết kế template họ để tiêu đề bài viết là H3 hay H2 bằng cách vào trang chủ blogspot chuột phải chọn xem mã nguồn.

    Như trong ảnh họ đặt tiêu đề bài viết là H3

    Code bài này viết cho tiêu đề bài viết là H3 nếu template của bạn tiêu đề bài viết là H2 thì phải đổi toàn bộ H3 trong code thành H2.

    Sửa lỗi Header (LOGO) làm trùng thẻ H1 cho Blogspot
    Tiêu đề blog là H1 ở trang chủ
    Sửa lỗi Header (LOGO) làm trùng thẻ H1 cho Blogspot
    Tiêu đề bài viết là H3 ở trang chủ

    Sẽ xẩy ra 2 trường hợp lỗi Header

    Trường hợp 1:Không sử dụng logo

    Trong trường hợp này blogger sẽ lấy tiêu đề blogspot là chữ làm thẻ H1
    Tại trang chủ mọi chuyện rất ổn vì tiêu đề blog là H1 và tiêu đề bài viết là H3 hoặc H2 tùy thuộc vào người chỉnh template.
    Nhưng ở trang bài viết lại xẩy ra vấn đề là có 2 thẻ H1 vì 1 của tiêu đề blog và 1 của tiêu đề bài viết sau khi đã tối ưu thẻ h3 thành h1
    Trường hợp 2: Sử dụng logo(hình ảnh) thay cho tiêu đề blog.

    Sửa lỗi Header (LOGO) làm trùng thẻ H1 cho Blogspot


    Trong trường hợp này blogger tự động xóa bỏ thẻ h1 và thay thế là hình ảnh do vậy trang chủ không có thẻ h1

    Nếu các bạn kiểm tra trên một số công cụ seo online thì thấy rõ vấn đề này.
    Vậy làm thế nào để khắc phục việc thiếu và trùng lặp thẻ h1 tại trang chủ và trang bài viết.
    Công việc cần làm là:Sửa lỗi thẻ H1 tại trang chủ và trang bài viết cho blogspot

    Đối với trường hợp 1:Không sử dụng logo(hình ảnh)

    Các bạn vào chỉnh sửa mẫu tìm tới đoạn:

    <!–No header image –>
    <div id=’header-inner’>
    <div class=’titlewrapper’>
    <h1 class=’title’>
    <b:include name=’title’/>
    </h1>
    </div>

    Tôi lấy cả <!–No header image –> để các bạn dễ nhận thấy nó trong mẫu.
    Sửa thành:

    <!–No header image –>
    <div id=’header-inner’>
    <div class=’titlewrapper’>
    <b:if cond=’data:blog.pageType == &quot;index&quot;’>
    <h1 class=’title’>
    <b:include name=’title’/>
    </h1>
    <b:else/>
    <h3 class=’title’>
    <b:include name=’title’/></h3>
    </b:if>
    </div>

    Đối với trường hợp 2:Sử dụng logo thay cho tiêu đề blog(trường hợp này là phổ biến)

    Với trường hợp này bạn tìm tới đoạn code:

    <!–Show the image only–>
    <div id=’header-inner’>
    <a expr:href=’data:blog.homepageUrl’ style=’display: block’>
    <img expr:alt=’data:title’ expr:height=’data:height’ expr:id=’data:widget.instanceId + &quot;_headerimg&quot;’ expr:src=’data:sourceUrl’ expr:width=’data:width’ style=’display: block’ title=”/>
    </a>
    <!–Show the description–>

    Nhưng ta chỉ cần thay từ

    <a expr:href=’data:blog.homepageUrl’ style=’display: block’>
    ……Tới……..
    </a>

    Và thay nó thành:

    <b:if cond=’data:blog.pageType == &quot;index&quot;’>
    <h1 style=’text-indent:-9999px;margin:0;padding:0;height:0px;’ itemprop=’name’>
    <a expr:href=’data:blog.homepageUrl’ itemprop=’url’ style=’display: block’>
    <img expr:alt=’data:title’ expr:height=’data:height’ expr:id=’data:widget.instanceId + &quot;_headerimg&quot;’ expr:src=’data:sourceUrl’ expr:width=’data:width’ itemprop=’logo’ style=’display: block’/><span><data:blog.title/></span></a>
    </h1>
    <b:else/>
    <h3 style=’text-indent:-9999px;margin:0;padding:0;height:0px;’ itemprop=’name’>
    <a expr:href=’data:blog.homepageUrl’ itemprop=’url’ style=’display: block’>
    <img expr:alt=’data:title’ expr:height=’data:height’ expr:id=’data:widget.instanceId + &quot;_headerimg&quot;’ expr:src=’data:sourceUrl’ expr:width=’data:width’ itemprop=’logo’ style=’display: block’/><span><data:blog.title/></span></a></h3>
    </b:if>

  • Blogspot không nhận đúng thumbnail khi chia sẻ lên Facebook

    Khắc phục Blogspot không nhận đúng thumbnail khi chia sẻ lên Facebook

    Như các bạn đã biết khi chia sẻ một trang bài viết hay trang chủ của một blogspot lên mạng xã hội Facebook thường có title (tiêu đề), description (mô tả), ảnh thumbnail, ảnh đại diện… của bài viết hay blogspot đó.Để làm được điều này trong phần seo on page của blogspot cần có các thẻ meta hỗ trợ.

    Vấn đề là khi ta thay đổi ảnh thumbnail trong bài viết cũng như trang chủ blogspot thì khi share link lên facebook ảnh thumbnail vẫn là ảnh cũ được share từ lần trước do Facebook đã lưu lại kết quả này gần như vô thời hạn.Vậy ta có cách gì để facebook cập nhật lại ảnh thumbnail cho blogspot, và dưới đây là hướng dẫn sửa lỗi facebook không cập nhật ảnh trang chủ và trang bài viết của blogspot khi share link do thay đổi ảnh.

    Sau đây là 2 phần hướng dẫn làm sao có ảnh thumbnail khi share link lên facebook và cách để facebook cập nhật lại ảnh mới do thay đổi.

    PHẦN 1:Tạo ảnh đại diện trang chủ và trang bài viết khi share link lên facebook cho blogspot.

    Phần này có quá nhiều bài hướng dẫn nhưng tôi vẫn xin hướng dẫn lại.

    Bạn thêm các thẻ meta sau vào sau thẻ <head>

    <!– Social Media meta tags bloghong.com–>
    <b:if cond=’data:blog.url == data:blog.homepageUrl’>
    <meta expr:content=’data:blog.title’ property=’og:title’/>
    <meta content=’website’ property=’og:type’/>
    <b:if cond=’data:blog.metaDescription != &quot;&quot;’>
    <meta expr:content=’data:blog.metaDescription’ property=’og:description’/>
    </b:if>
    </b:if>
    <b:if cond=’data:blog.pageType == &quot;item&quot;’>
    <meta expr:content=’data:blog.pageName’ property=’og:title’/>
    <meta expr:content=’data:blog.canonicalUrl’ property=’og:url’/>
    <meta content=’article’ property=’og:type’/>
    </b:if>
    <meta expr:content=’data:blog.title’ property=’og:site_name’/>
    <b:if cond=’data:blog.postImageUrl’>
    <meta expr:content=’data:blog.postImageUrl’ property=’og:image’/>
    <b:else/>
    <b:if cond=’data:blog.postImageThumbnailUrl’>
    <meta expr:content=’data:blog.postThumbnailUrl’ property=’og:image’/>
    <b:else/>
    <meta content=’Ảnh đại diện trang chủ blogspot‘ property=’og:image’/>
    </b:if>
    </b:if>

    • Thay Ảnh đại diện trang chủ bằng link ảnh của bạn 

    Lưu ý : nhớ kiểm tra blog của bạn đã  có đoạn code trên chưa, nếu có rồi mà chưa có link ảnh trang chủ thì chỉ cần thêm link ảnh vào là được nhé.

    Ảnh đại diện khi share trang chủ nên có kích cỡ 550×350.
    Và nhớ vào Cài đặt ⇒Tùy chọn tìm kiếm⇒Bật thẻ Meta(Mô tả)và ghi mô tả cho trang chủ và mô tả tìm kiếm cho trang bài viết khi viết bài.

    PHẦN 2: Sửa lỗi facebook không cập nhật ảnh trang chủ và trang bài viết của blogspot khi share link do thay đổi ảnh

    Khi bạn thay đổi ảnh đại diện của trang chủ hay trong bài viết muốn facebook cập nhật ngay thì bạn làm như sau:

    Bạn vào trang Sharing Debugger tất nhiên cần đăng nhập tài khoản facebook của mình.

    Blogspot không nhận đúng thumbnail khi chia sẻ lên Facebook

    Bạn dán URL trang chủ hay trang bài viết cần cập nhật lại rồi nhấn Debug và nó sẽ chuyển sang tab sau:

    Blogspot không nhận đúng thumbnail khi chia sẻ lên Facebook

    Bạn nhẫn vào Thu thập lại là hoàn thành(ok)

  • Code popup lấy thông tin họ tên, email và số điện thoại khách hàng bằng Google Docs

    Tất cả mọi người khi phát triển web/blog ai cũng muốn blog của mình được nhiều người quan tâm và thực sự có ích với họ.Bằng nhiều cách như xây dựng nội dung hữu ích, tạo giao diện dễ sử dụng, các gói khuyến mại tri ân…thì việc tạo các tiện ích giúp khách truy cập dễ dàng kết nối với web/blog cũng là một lựa chọn.

    Code popup lấy thông tin họ tên, email và số điện thoại khách hàng bằng Google Docs
    Code popup lấy thông tin họ tên, email và số điện thoại khách hàng bằng Google Docs

    Dưới đây là Code popup lấy thông tin họ tên, email và số điện thoại khách hàng bằng Google Docs có hỗ trợ giao diện Mobile – The popup receives the new post through the email for blogspot giúp bạn thực hiện điều đó.

    ƯU ĐIỂM CHỈ HIỂN THỊ ĐÚNG 1 LẦN

    Để cài đặt tiện ích này bạn vào bố cục tiến hành thêm một tiện ích HTML/javascript rồi dán đoạn code sau vào và lưu lại, hoặc có thể dán code nằm trên thẻ </body> hoặc /body

    <style type=’text/css’>
    .follow-email {
        float: left;
        width: 100%;
        background: #006600;
        position: relative;
    }
    .follow-email .left {
        width: 220px;
        float: left;
        background: #004400;
        padding: 10px;
        position: relative;
        z-index: 99;
    }
    .follow-email .left input {
           line-height: 40px;
        float: left;
        width: 90%;
        margin: 5px 0;
        padding: 0 10px;
        border: 0;
    }
    .submitbutton{background:#ff0000;color:#fff
    }
    .follow-email .right {
        float: left;
        position: absolute;
        padding: 20px 20px 20px 270px;
    }
    .follow-email .right h3 {
        font-size: 28px;
        text-align: center;
        color: #fff;
        border-bottom: 3px dashed #004400;
        padding-bottom: 10px;
        margin-bottom: 10px;
        margin-top: 0px;
    }
    .follow-email .right ul {
        padding-left: 20px;
        margin: 0;
    }
    .follow-email .right ul li {
        list-style-type: circle;
        font-size: 18px;
        line-height: 26px;
        color: #fff;
    }
    #fbox-background {
        display: none;
        background: rgba(0,0,0,0.8);
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99999;
    }
    #fbox-close {
        width: 100%;
        height: 100%;
    }
    #fbox-display {
      background: #ff0000;
        border: 5px solid #ff0000;
        width: 700px;
        height: 230px;
        position: absolute;
        top: 33%;
        left: 24%;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
    #fbox-button {
        z-index: 99;
        float: right;
        cursor: pointer;
        position: absolute;
        right: 0px;
        top: -1px;
    }
    #fbox-button:before {
        content: “CLOSE”;
        padding: 5px 8px;
        background: #ff0000;
        color: #eaeaea;
        font-weight: bold;
        font-size: 10px;
        font-family: Tahoma;
    }
    #fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {
        color: #aaaaaa;
        font-size: 9px;
        text-decoration: none;
        text-align: center;
        padding: 5px;
    }
    @media screen and (max-width:800px){
    #fbox-display{max-width:100%;top: 20%;left: 2%;float:none}
    }
    @media screen and (max-width:640px){
    #fbox-display{max-width:100%;top: 20%;left: 0%;float:none;}
    .follow-email .right h3{font-size:22px}
    .follow-email .right ul li{font-size:14px}
    }
    @media screen and (max-width:480px){
    .follow-email .right{max-width:100%;padding:180px 5px 5px;float:none;text-align:center;position: relative;}
    .follow-email .left{background: #006600;width:100%;text-align:center;float:none;margin-top:20px}
    .follow-email .left input{width:100%;text-align:center;}
    #fbox-display{height:auto}
    #fbox-button:before{width:100%;}
    svg{display:none}
    }
    @media screen and (max-width:360px){.follow-email .right{padding-top:150px}}
    @media screen and (max-width:240px){.follow-email .right ul li{display:none}}
    </style>
    <script type=’text/javascript’>
    //<![CDATA[
    jQuery.cookie = function (key, value, options) {
    // key and at least value given, set cookie…
    if (arguments.length > 1 && String(value) !== “[object Object]”) {
    options = jQuery.extend({}, options);
    if (value === null || value === undefined) {
    options.expires = -1;
    }
    if (typeof options.expires === ‘number’) {
    var days = options.expires, t = options.expires = new Date();
    t.setDate(t.getDate() + days);
    }
    value = String(value);
    return (document.cookie = [
    encodeURIComponent(key), ‘=’,
    options.raw ? value : encodeURIComponent(value),
    options.expires ? ‘; expires=’ + options.expires.toUTCString() : ”, // use expires attribute, max-age is not supported by IE
    options.path ? ‘; path=’ + options.path : ”,
    options.domain ? ‘; domain=’ + options.domain : ”,
    options.secure ? ‘; secure’ : ”
    ].join(”));
    }
    // key and possibly options given, get cookie…
    options = value || {};
    var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
    return (result = new RegExp(‘(?:^|; )’ + encodeURIComponent(key) + ‘=([^;]*)’).exec(document.cookie)) ? decode(result[1]) : null;
    };
    //]]>
    </script>
    <script type=’text/javascript’>
    jQuery(document).ready(function($){
    if($.cookie(‘popup_facebook_box’) != ‘yes’){
    $(‘#fbox-background’).delay(5000).fadeIn(‘medium’);
    $(‘#fbox-button, #fbox-close’).click(function(){
    $(‘#fbox-background’).stop().fadeOut(‘medium’);
    });
    }
    $.cookie(‘popup_facebook_box’, ‘yes’, { path: ‘/’, expires: 1});
    });
    </script>
    <div id=’fbox-background’>
    <div id=’fbox-close’>
    </div>
    <div id=’fbox-display’>
    <div id=’fbox-button’>
    </div>
    <div class=’follow-email’>
    <div class=’left’>
    <form action=’https://docs.google.com/forms/u/2/d/e/1FAIpQLSdbdFo5rqvOpWY5JA-PVL9vJMyqFfLnmjaDEWmGRs3XYod9iw/formResponse’ id=’Contact-Form’ method=’POST’ target=’hidden_iframe’ onsubmit=”myFunction()”>
    <input name=’entry.111′ onblur=’if (this.value == “”) {this.value = “Your Name”;}’ onfocus=’if (this.value == “Your Name”) {this.value = “”;}’ type=’text’ value=’Your Name’/>
    <input name=’entry.111′ onblur=’if (this.value == “”) {this.value = “Your Email”;}’ onfocus=’if (this.value == “Your Email”) {this.value = “”;}’ type=’text’ value=’Your Email’/>
    <input name=’entry.111′ onblur=’if (this.value == “”) {this.value = “Số Điện Thoại”;}’ onfocus=’if (this.value == “Your Email”) {this.value = “”;}’ type=’text’ value=’Số Điện Thoại’/>
    <input name=’uri’ type=’hidden’ value=’Tdblimag’/>
    <input name=’loc’ type=’hidden’ value=’vi_VN’/>
    <input class=’submitbutton’ type=’submit’ value=’Nhận tin’/>
    </form>
    </div>
    <svg fill=’#004400′ height=’170′ style=’float: left’ width=’25’>
    <path d=’M0 0 L0 170 L25 85 Z’></path>
    </svg>
    <div class=’right’>
    <h3>Nhận tin mới qua Email</h3>
    <ul>
    <li>Cập nhật tin tức hoàn toàn miễn phí qua Email</li>
    <li>Đảm bảo an toàn thông tin của bạn</li>
    <li>Tuyệt đối không spam</li>
    </ul>
    </div>
    </div>
    </div>
    </div>

    Sau đó cấu hình forms google docs như video bên dưới để được thông báo qua mail  nhé

  • Code chuyển hướng trang 404 về trang chủ hoặc trang bất kỳ

    Trên trang báo lỗi 404 thường người ta đã để liên kết click để trở về trang chủ của blogspot cho khách truy cập vô tình nhấn phải trang có liên kết bị lỗi hoặc đã bị xóa khi tìm kiếm.Nếu muốn khách truy cập không phải click quay lại trang chủ mà vẫn đưa họ về trang chủ ta có thể sử dụng đoạn javascript nhỏ gọn để thực hiện điều này.

    Code chuyển hướng trang 404 về trang chủ hoặc trang bất kỳ
    Code chuyển hướng trang 404 về trang chủ hoặc trang bất kỳ

    Sau đây là code tự động chuyển hướng trang báo lỗi 404 về trang chủ cho blogspot – The code automatically redirects the 404 error page to the blogspot home page sử dụng javascript.
    Cách thực hiện đơn giản là bạn vào chỉnh sửa mấu tùy chọn một trong số các code sau rồi dán trước thẻ </body> với điều kiện blog của bạn đã có trang báo lỗi.

    Blogspot không phải AMP

    1- Code hẹn giờ (vào 1 lát mới chuyển)

    <b:if cond=’data:blog.pageType in {&quot;error_page&quot;}’>
    <script>
    setTimeout(function () {
    window.location.replace(“<data:blog.homepageUrl/>“);
    }, 6000); //Ở đây là 6s(1000=1s).
    </script>
    </b:if>

    Lưu ý : đoạn mình in đậm tự động gọi trang chủ, nếu muốn chuyển về 1 trang khác thì thay link vào đó nhé

    2- Code chuyển ngay

    <b:if cond=’data:blog.pageType in {&quot;error_page&quot;}’>
    <script>
    setTimeout(function () {
    window.location.replace(“<data:blog.homepageUrl/>“);
    });
    </script>
    </b:if>

    Hoặc sử dụng code

    <b:if cond=’data:blog.pageType in {&quot;error_page&quot;}’>
    <script>
    window.location.replace(“<data:blog.homepageUrl/>“);
    </script>
    </b:if>

    Blogspot AMP ?m=1



    Đối với blogspot AMP chỉ xuất hiện trên Mobile với URL mobile ?m=1 ta cũng có thể áp dụng nhưng chỉ cho trang xem trên máy tính để bàn.

    1- Code hẹn giờ

    <b:if cond=’data:blog.pageType in {&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;false&quot;’>
    <script>
    setTimeout(function () {
    window.location.replace(“<data:blog.homepageUrl/>“);
    }, 6000);
    </script>
    </b:if>

    2- Code chuyển ngay

    <b:if cond=’data:blog.pageType in {&quot;error_page&quot;} and data:blog.isMobileRequest == &quot;false&quot;’>
    <script>
    setTimeout(function () {
    window.location.replace(“<data:blog.homepageUrl/>”);
    });
    </script>
    </b:if>

  • Tích hợp nút Share Zalo vào blogspot hoặc website chi tiết

    Cài đặt nút chia sẻ zalo gồm 2 trường hợp:
    – Hướng dẫn tạo nút chia sẻ zalo mặc định cho blogspot website.
    – Hướng dẫn tạo nút chia sẻ zalo tùy chỉnh cho blogspot website.


    Nếu như những nút chia sẻ của Facebook, Twitter hay G+ đã quá phổ biến đối với blogspot/website thì nút chia sẻ của Zalo hiện tại thấy rất ít blog sử dụng.Zalo là mạng xã hội của người Việt. Zalo được phát triển bởi VNG. Ngày nay Zalo được sử dụng khá phổ biến cho việc kinh doanh và phát triển thương hiệu.Vậy tại sao chúng ta không tận dụng nó để tăng traffic cho blog/web vì tại phần ứng dụng của nó cũng cung cấp một số tiện ích có thể tích hợp vào blog ví dụ như nút chia sẻ…

    Hướng dẫn tạo nút chia sẻ zalo mặc định cho blogspot website

    Nếu bạn chưa có tài khoản Zalo thì hãy đăng ký cho mình một tài khoản trước khi thực hiện việc cài đặt này

    Bước 1: Truy cập http://oa.zalo.me/ và đăng nhập vào tài khoản zalo của mình.

    Tích hợp nút Share Zalo vào blogspot hoặc website chi tiết
    Tích hợp nút Share Zalo vào blogspot hoặc website chi tiết

    Bước 2: Hãy tạo cho mình một Official Account nếu bạn đã có thì bỏ qua bước này.

    Tích hợp nút Share Zalo vào blogspot hoặc website chi tiết
    Tích hợp nút Share Zalo vào blogspot hoặc website chi tiết

    Chọn loại tài khoản phù hợp với blog của mình.
    Sau khi tạo xong bạn sẽ có một giao diện như thế này

    Tích hợp nút Share Zalo vào blogspot hoặc website chi tiết

    Bước 3: Bạn chọn mục Quản lý -> Thông tin tài khoản để lấy Official Account ID

    Tích hợp nút Share Zalo vào blogspot hoặc website chi tiết
    Tích hợp nút Share Zalo vào blogspot hoặc website chi tiết

    Bạn cần ghi nhớ Official Acecount ID trong phần khoanh đỏ để dùng cho code sau này.

    Bước 4: Tiếp theo bạn truy cập vào http://developers.zalo.me/docs/social/share
    Trong này sẽ cho bạn tạo nút chia sẽ, nút theo dõi và widget cho Official Account của mình.
    Ở đây mình sẽ chọn nút chia sẽ. Điền đầy đủ thông tin theo yêu cầu.

    Tích hợp nút Share Zalo vào blogspot hoặc website chi tiết

    Sau khi lấy mã bạn sẽ được file javascript và đoạn mã HTML để cài vào blog.
    + Dán file js vào trước thẻ </body>

    <script src=”https://sp.zalo.me/plugins/sdk.js”></script>

    Lưu ý:File js có thể dùng async=’async’
    Hoặc dùng javascript sau thay cho file js trên

    <script>
    if (!window.disableZalo && window.innerWidth > 600) {
    (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)){ return; }
    js = d.createElement(s); js.id = id;js.async=true;
    js.onload = function(){
    // remote script has loaded
    };
    js.src = “//sp.zalo.me/plugins/sdk.js”;
    fjs.parentNode.insertBefore(js, fjs);
    }(document, ‘script’, ‘zalo-jssdk’));
    }
    </script>

    + Dán đoạn html sau vào nơi cần hiển thị nút chia sẻ.

    <b:if cond=’data:blog.pageType == &quot;item&quot;’>
    <div class=”zalo-share-button” expr:data-href=”data:post.canonicalUrl” data-oaid=”ID của Trang” data-layout=”1″ data-color=”blue” data-customize=”false”></div>
    </b:if>

    Thay ID của Trang thành Official Acecount ID ở bước 3.

    Trong đó:

    data-layout: Nút chia sẻ bào gồm biểu tượng Zalo và nội dung “Chia sẻ”

    Mặc định: nút chia sẻ chỉ chứa biểu tượng Zalo
    data-oaid: Zalo Official Account ID
    data-customize: true/false. Mặc định: false.
    Nếu thiết lập true, layout mặc định của nút Chia sẻ sẽ không hiển thị,
    nhà phát triển có thể tùy chỉnh nút Chia sẻ theo cách riêng của họ.
    data-href: URL muốn chia sẻ.
    Ví dụ đoạn mã hoàn chỉnh có dạng:

    <b:if cond=’data:blog.pageType == &quot;item&quot;’>
    <div class=”zalo-share-button” expr:data-href=”data:post.canonicalUrl” data-oaid=”579745863508352884″ data-layout=”1″ data-color=”blue” data-customize=”false”></div>
    </b:if>

    Lưu ý: Phần data-layout có 4 kiểu nút tương ứng với 1, 2, 3, 4 để bạn lựa chọn do vậy bạn có thể tự thay đổi từ 1-4 theo ý thích.

    Hướng dẫn tạo nút chia sẻ zalo tùy chỉnh cho blogspot website

    Các bước cũng gần tương tụ như trường hợp cài đặt nút chia sẻ zalo mặc định chỉ khác đôi chút.
    Bước 1;Thêm CSS

    .rrssb-zalo{cursor:pointer}
    .rrssb-zalo a{background-color:#018fe5;padding:6px 10px 0 0;border-radius:3px}
    .rrssb-zalo svg{height:18px;margin-top:6px;margin-left:10px}
    .zshare-zalo{display:inline-block;cursor:pointer;border-radius:3px;height:20px;background:#008fe5;color:#fff;padding:0 5px}
    .zshare-zalo:hover{background:#0c7abf}
    .zshare-zalo svg{margin-top:1px}
    .zshare-label{display:inline-block;font-weight:bold;font-size:13px;line-height:16px;height:20px;vertical-align:top;color:white;margin-left:3px;margin-top:6px}

    Bước 2:Thêm file js trước </body>

    <script src=”https://sp.zalo.me/plugins/sdk.js”></script>

    Bước 3:Thêm nút chia sẻ zalo vào vị trí bạn muốn

    <b:if cond=’data:blog.pageType == &quot;item&quot;’>
    <div class=”rrssb-zalo”>
    <a class=”zalo-share-button” expr:data-href=”data:post.canonicalUrl” data-oaid=”Zalo Official Account ID của bạn” data-layout=”icon-text” data-customize=”true”>
    <svg version=”1.1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink” x=”0px” y=”0px” viewBox=”0 0 150.3 149.9″ enable-background=”new 0 0 150.3 149.9″ xml:space=”preserve” style=”height: 18px;”>
    <g id=”Layer_1″>
    </g>
    <g id=”Layer_2″>
    <g>
    <path fill=”#FFFFFF” d=”M128,70.3c-2.4,0-4.3,1-5.6,3c-1.2,1.8-1.8,3.9-1.8,6.4c0,2.6,0.6,4.8,1.7,6.5c1.3,2,3.2,3.1,5.7,3.1
    c2.4,0,4.3-1,5.7-3.1c1.2-1.8,1.7-3.9,1.7-6.5c0-2.5-0.6-4.6-1.8-6.4C132.2,71.3,130.4,70.3,128,70.3z” />
    <path fill=”#FFFFFF” d=”M65.3,70.7c-2.3,0-4.2,0.9-5.5,2.8c-1.2,1.7-1.8,3.7-1.8,6.2c0,2.5,0.6,4.6,1.7,6.3
    c1.3,1.9,3.2,2.9,5.6,2.9c2.3,0,4.2-1,5.5-3c1.1-1.7,1.7-3.8,1.7-6.2c0-2.4-0.6-4.4-1.8-6.1C69.4,71.7,67.6,70.7,65.3,70.7z” />
    <path fill=”#FFFFFF” d=”M75.1,0C33.6,0,0,32.3,0,72.2c0,20.9,9.3,39.8,24.1,52.9l-1.3,24.8l22.1-11.7c9.3,3.9,19.5,6.1,30.3,6.1
    c41.5,0,75.1-32.3,75.1-72.2C150.3,32.3,116.6,0,75.1,0z M37.7,98.8H14.5c-5.4,0-8.1-1.9-8.1-5.8c0-1.8,1.1-4.2,3.2-7l20.7-27.4
    H15.4c-5.5,0-8.2-1.7-8.2-5.2c0-3.5,2.7-5.3,8.2-5.3H35c6.6,0,9.9,1.9,9.9,5.6c0,1.7-1.1,4-3.4,7.1L21.3,88.1h16.3
    c5.5,0,8.2,1.8,8.2,5.3C45.9,97,43.2,98.8,37.7,98.8z M83.8,91.1c0,5.5-1.8,8.2-5.5,8.2c-2.4,0-4.2-1.3-5.4-3.9
    c-2.3,2.9-5.5,4.3-9.4,4.3c-5.2,0-9.4-2.1-12.6-6.2c-3-3.8-4.5-8.4-4.5-13.6c0-5.3,1.6-9.9,4.7-13.7c3.3-4.1,7.6-6.2,12.8-6.2
    c3.8,0,6.8,1.3,9,4c1.3-2.4,3.1-3.6,5.4-3.6c3.7,0,5.5,2.7,5.5,8.1V91.1z M103.1,91.1c0,5.5-1.8,8.2-5.5,8.2
    c-3.8,0-5.6-2.7-5.6-8.2V52.6c0-5.5,1.9-8.2,5.6-8.2c3.7,0,5.5,2.7,5.5,8.2V91.1z M128,99.9c-5.7,0-10.3-1.9-13.9-5.8
    c-3.5-3.8-5.2-8.5-5.2-14.3c0-5.7,1.7-10.5,5.2-14.2c3.6-3.9,8.2-5.8,13.9-5.8c5.7,0,10.3,1.9,13.9,5.8c3.4,3.8,5.1,8.5,5.1,14.3
    c0,5.8-1.7,10.5-5.1,14.3C138.3,98,133.7,99.9,128,99.9z” />
    </g>
    </g>
    <g id=”Layer_3″>
    </g>
    </svg>
    <span class=”zshare-label” style=””>Chia sẻ</span>
    </a>
    </div>
    </b:if>

    + Với code trên bạn có thể tùy biến theo ý mình dựa vào css

    <div class=”rrssb-zalo”>
    <a class=”zalo-share-button” expr:data-href=”data:post.canonicalUrl” data-oaid=”Zalo Official Account ID của bạn” data-layout=”icon-text” data-customize=”true”>
    Vị trí bạn tùy biến theo sở thích
    <span class=”zshare-label” style=””>Chia sẻ</span>
    </a>
    </div>

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