Hướng dẫn tạo hộp download có thời gian đếm ngược

Button download chuyển link ư, bình thường quá. Hãy sử dụng hộp download có thời gian đếm ngược này, nó vừa làm blog của bạn trở nên chuyên nghiệp hơn, vừa giữ chân người dùng lâu hơn.

Cách thực hiện

Bước 1: chèn đoạn js này trước thẻ đóng body

<script type='text/javascript'>

//<![CDATA[

function generate(){var e,n=document.getElementById("downloadx"),t=document.getElementById("btnx"),a=document.getElementById("downloadx").href,l=30,d=document.createElement("span");n.parentNode.replaceChild(d,n),e=setInterval(function(){--l<0?(d.parentNode.replaceChild(n,d),clearInterval(e),window.location.replace(a),n.style.display="inline"):(d.innerHTML="<p style='font-family:Google Sans, sans-serif'>Vui lòng chờ "+l.toString()+" seconds...</p>",t.style.display="none")},1e3)}
//]]>

</script>

Bạn để ý đoạn l=30 có nghĩa là 30s, bạn chỉnh sửa lại số giây tùy ý.

Bước 2: chèn css

#btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#007fff;color:#eeeeee;float:right;text-transform:capitalize;font-weight:500;transition:all 0.5s;font-size:15px}

#btnx:hover,#downloadx:hover{background:#222222;color:#eeeeee;outline:none}

.download_now{display:block;margin:0 auto;border-radius:4px}

.download-now{background-image:url('');color:#cccccc;padding:15px;display:block;background-size:480px;background-blend-mode:exclusion;background-color:#111111}
.download-title{color:#fff;display:inline-block;font-size:1.2em;line-height:38px;text-align:left}

.file-info{padding:15px;background:#cccccc;color:#222;font-size:14px}

#downloadx{float:right}

#downloadx{padding:10px 20px;border-radius:3px;background:#ffc832;text-decoration:none;color:#222;float:right;text-align:center;font-size:15px;text-transform:capitalize;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

.download_button span{display:inline-block;line-height:38px;float:right}

.file-description{display:block}

.file-description span{font-size:12px}

Bước 3: Chuyển sang tab HTMl trong khi viết bài và chèn đoạn code dưới này

<div class="download_now">

  <div class="download-now">

    <div class="download_button">

    <div class="download-title">Download free</div>

    <button onclick="generate()" id="btnx"><i class="fas fa-cloud-download-alt"></i> Download</button>

    <a id="downloadx" href="#" style="display:none"><i class="fas fa-cloud-download-alt"></i> Get Link</a>

    </div>

    <div class="file-description">

        <span class="file-size"> <i class="fa fa-file fa-fw" aria-hidden="true"></i> <strong>File Type:</strong> 130KB ZIP File</span>

    </div>

  </div>

  <div class="file-info"><i class="fas fa-info-circle"></i> Khôi Ròm Blog V5.0

  </div>

</div>

Nhớ chỉnh sửa cho phù hợp nhé!

Tổng hợp các mẹo trong chỉnh sửa, thiết kế blogspot

Trong khi chỉnh sửa, thiết kế template blogspot, chắc hẳn các bạn đã gặp không ít khó khăn vì các lỗi rất nhỏ mà tìm mãi không được. Các lỗi như lưu không được code, hay là sau khi lưu code xong bị mã hóa, bôi đỏ, bôi cam ...
Sau đây mình sẽ hướng dẫn các bạn một vài mẹo mà mình biết trong thiết kế template blogspot.

1 Ctrl+z, ctrl+y

Tương tự như trong Word soạn thảo văn bản, nút Ctrl+Z - Undo. Nghĩa là trở lại một thao tác trước đó, bạn rất cần tổ hợp phím này bởi vì lỡ như bạn vừa mới chỉnh sửa xong nhưng bị lỗi, hay muốn trở lại thao tác trước đó, hãy nhấn Ctrl+Z.

Và tổ hợp phím còn lại là Ctrl+Y - Redo. Nghĩa là tiến tới thao tác trước đó. Nếu bạn vừa nhấn Ctrl+Z và muốn tiến tới thao tác cuối, hãy nhấn lại Ctrl+Y.

Và Ctrl+C (copy), Ctrl+V (paste), Ctrl+X (cut) thì bất kì ai cũng phải biết rồi đúng không.

2 The entity name must immediately follow the '&' in the entity reference

Nếu sau khi nhấn lưu, dòng chữ lỗi The entity name must immediately follow the '&' in the entity reference xuất hiện và nó được chỉ hướng đến đoạn text/html thì bạn hãy thêm amp; đăng sau &. Khi đó đoạn code sẽ thành &

Nếu sau khi nhấn lưu, dòng chữ lỗi The entity name must immediately follow the '&' in the entity reference xuất hiện và nó được chỉ hướng đến đoạn javascript thì bạn hãy thêm cặp thẻ \\<![CDATA[ và \\]]>. Khi đó chúng ta sẽ có

<script type='text/javascript'>//<![CDATA[


Javascript đặt trong này


//]]></script>

3 Lỗi không lưu được vì javascript

Như đã đề cập ở mục 2, chúng ta chỉ cần thêm cặp thẻ \\<![CDATA[ và \\]]> là lưu được ngay.

4 Lỗi bị lag, đứng trang, đơ trang

Lỗi này có thể do các đoạn code của bạn quá rối, hoặc được nén quá mức.
Để khăc phục, chúng ta tắt trang này đi, sau đó truy cập vào lại chỉnh sửa html. Nhanh chóng ctrl+A và copy dán vào notepad+. Tiếp sau đó chúng ta sẽ tìm các đoạn code bị nén quá mức (thường là javascript và css), dùng công cụ Làm đẹp code để giãn ra. Sửa lại vào notepad+. Rồi copy dán lại vào blogger bình thường.

5 The element type must be terminated by the matching end-tag

Trong blogger, các thẻ bắt buộc phải có thẻ đóng. Vì vậy cho dù thẻ input, br, img ... phải luôn kèm thẻ đóng.
Ta có thể sửa lại thành <br/>, <input type='' class=''/>, <img src=''/>

6 Nên dùng dấu ngắt trang khi viết bài

Mình khuyên các bạn nên sử dụng dấu ngắt trang, để ngắt đoạn cần thiết chỉ trích xuất ra trang index.
Nếu ở trang soạn thảo, các bạn có thể thêm dấu ngắt trên toolbar.
Nếu ở trang html, các bạn dùng <a name="more"></a>.

7 Thẻ all head meta

Nếu bạn không quá giỏi để thêm cá thẻ meta tag seo theo ý thích, các bạn có thể xem bộ thẻ meta tổng hợp của mình hoặc chỉ cần một dòng <b:include data='blog' name='all-head-content'/> đặt bên dưới thẻ mở <head> là đủ.

8 Loại bỏ code không dùng nhưng vẫn lưu lại

Các bạn muốn đoạn code đó không chạy/xuất hiện trong website của bạn nhưng bạn vẫn muốn giữ lại để sau này cần ta có thể thực hiện theo cách sau:
- Thêm <!-- ở phía đầu và --> ở phía cuối đối với HTML
- Thêm /* ở phía đầu và */ ở phía cuối đối với CSS và javascript giữa dòng

9 Đang được tiếp tục cập nhật

Một vài cách SEO ON PAGE hiệu quả dành cho Blogspot

SEO ONPAGE là gì?

SEO ONPAGE là kỹ thuật SEO tại website và chỉ trên website đó, những thay đổi trên website đều được gọi là SEO ONPAGE (ONPAGE: yếu tố bên trong).

Các tiêu chí để web chuẩn SEO ONPAGE cho blogspot

GOOGLE CRAWLER đọc web và phân tích website thông qua 1 web page và đọc các thẻ html. Các bạn có thể xem web page đó bằng cách view-source trang web của bạn.

5 tiêu chí quan trọng cho SEO ONPAGE

1 Bộ thẻ meta đầy đủ, chuẩn SEO
Bộ thẻ meta tag seo 2020 chuẩn cho blogspot
2 Nội dung trong mô tả tìm kiếm phải chứa từ khóa SEO chính
Sau khi làm theo hướng dẫn ở mục 1, khi viết bài, bạn hãy nhập mô tả của bài viết ở khung bên phải. Nội dung trong mô tả tìm kiếm phải chứa từ khóa SEO chính.
3 Chỉnh link có chứa từ khóa SEO chính (nên để URL ngắn)
Khi viết bài, ấn vào liên kết cố định ở khung bên phải >  liên kết cố định tùy chỉnh >  chỉnh sửa link, nối các từ bằng dấu gạch ngang.
Ví dụ:

cach-seo-onpage-cho-blogspot-2018.html

4 Tỉ lệ text/html nên chứa khoảng 25% trở lên
Tỉ lệ text/html nên chứa khoảng 25% trở lên, không nên để quá nhiều ảnh nhưng nội dung lại quá ngắn, văn bản phải có chứa anchor text (neo văn bản chứa từ khóa SEO - liên kết nội bộ)
5 File Robot.txt chuẩn, cho phép nhện Google truy cập được website
Đây là file Robot.txt chuẩn nhất, bạn thay thế link website của bạn nhé.
Vào cài đặt > tùy chọn tìm kiếm > Robot.txt tùy chỉnh > dán code này vào và lưu.

User-agent: Mediapartners-Google

Disallow:

User-agent: *

Allow: /

Allow: /search/label/

Disallow: *max-results=*

Disallow: *archive.html

Disallow: *?m=0

Disallow: /search?*

Disallow: *?showComment=*

Disallow: *?spref=fb

Disallow: *?spref=tw

Disallow: *?spref=gp

Disallow: *?utm_source=*

Sitemap: https://www.sharetemplate.blog/feeds/posts/default?orderby=UPDATED

Sitemap: https://www.sharetemplate.blog/sitemap.xml

6 tiêu chí điểm + với Google

1 Thẻ h1 - thẻ Heading
Dùng duy nhất 1 thẻ cho mỗi trang (các bạn có thể view-source từng trang một để chỉnh sửa cho phù hợp)
2 Thẻ h2
Mô tả ngắn gọn nội dung chính, có chứa từ khóa SEO
3 Mỗi trang luôn có đầy đủ thẻ h1, h2, h3
Chỉ có một thẻ h1 trong mỗi trang
Không được chỉ có thẻ h1, h3 mà không có h2 hoặc tương tự...
4 Tối ưu tốc độ tải trang
Chúng ta nên giảm bớt và nén css + js, tăng tốc độ trang web làm giảm tỉ lệ thoát trang, lấy Google PageSpeed Insights làm tiêu chí chuẩn cho trang web (mặc dù nó đo không đúng)
5 Sử dụng nofollow cho các liên kết bên ngoài
Ví dụ: <a href="https://www.chiasetemplate.blog" rel=nofollow"> Liên kết ngoài </a>
6 Thêm thẻ alt='nội dung mô tả' cho các ảnh trên webpage
Ví dụ: <img src="#" alt="mô tả nội dung"/>

Tổng kết

Như vậy là mình đã hướng dẫn các bạn cách làm một website chuẩn SEO ONPAGE, nếu có thắc mắc, góp ý, báo lỗi thì hãy bình luận bên dưới nhé. Like một cái cho mình có động lực nào!

Hướng dẫn cài đặt đơn hàng thông qua Google Form

Hướng dẫn cài đặt đơn hàng hiện trên bảng tính của google và thông báo qua email ngay lập tức. Thủ thuật này rất đơn giản thôi, các bạn xem video nhé.

Code

function guiBieuMau(e)


{


  // Thay thế bằng địa chỉ email của bạn


  var email = "diachimail@gmail.com";


  // Tiêu đề của email được gửi về


  var subject = "Đơn đặt hàng tại shop ABCD";


  // Không rành thì đùng đụng vào code ở dưới nhé


  var s = SpreadsheetApp.getActiveSheet();


  var columns = s.getRange(1,1,1,s.getLastColumn()).getValues()[0];


  var message = "";


  for ( var keys in columns ) {


    var key = columns[keys];


    if ( e.namedValues[key] && (e.namedValues[key] != "") ) {




      message += key + ' :: '+ e.namedValues[key] + "\n\n";


    }


  }


  MailApp.sendEmail(email, subject, message);


}