Hướng dẫn chèn link, code, ảnh và video YouTube vào nhận xét Blogger

Bạn muốn xem:

Những bạn viết blog sử dụng nền tảng Blogger đều đã biết khung nhận xét mặc định có rất nhiều hạn chế nhưng ngược lại bạn dễ quản lý phần nhện xét của người đọc hơn và nếu bài viết có nhiều lượt nhận xét cũng giúp cho bài viết được mau lên thứ hạng tìm kiếm của Google. Bài viết này mình sẽ hướng dẫn các bạn cách chèn link, code, ảnh và video từ YouTube vào nhận xét của Blogger giúp cho phần nhận xét được phong phú hơn qua đó cũng giúp cho người đọc có nhiều lựa chọn khi đăng nhận xét.

1. Hướng dẫn chèn link

Mặc định thì Blogger cho phép bạn chèn link nhưng không phải ai cũng biết và cách chèn cũng khá đơn giản với mẫu sau đây:

Chèn link

Copy

<a href='link' rel='nofollow'>link</a>

Ví dụ:

Copy

<a href='http://www.blogthuthuatwin10.com/2017/09/gioi-thieu-video-blogger-template-lam-site-chia-se-video-tu-youtube.html' rel='nofollow'>http://www.blogthuthuatwin10.com/2017/09/gioi-thieu-video-blogger-template-lam-site-chia-se-video-tu-youtube.html</a>

Output sẽ ra

Copy

http://www.blogthuthuatwin10.com/2017/09/gioi-thieu-video-blogger-template-lam-site-chia-se-video-tu-youtube.html

Chèn email

Copy

<a href='mailto:địa chỉ email' rel='nofollow'>địa chỉ email</a>

Ví dụ:

Copy

<a href='mailto:nguyenanhtuan2401@gmail.com' rel='nofollow'>nguyenanhtuan2401@gmail.com</a>

Output sẽ ra

Copy

nguyenanhtuan2401@gmail.com

Chèn chữ ký kèm theo nhận xét

Cái này bạn nên làm bằng cách chèn link blog của bạn ngay sau phần nhận xét để giúp cho blog bạn có trafic. Ví dụ khi nhận xét

Copy

Cảm ơn bạn

<a href='http://www.blogthuthuatwin10.com/' rel='nofollow'>www.blogthuthuatwin10.com</a>

Output sẽ ra

Copy

Cảm ơn bạn

www.blogthuthuatwin10.com

2. Hướng dẫn chèn code

Code ở đây có thể là đoạn css, html hoặc javascript. Yêu cầu đoạn code không được quá dài và không sử dụng ký tự đặc biệt với thẻ div và span ví dụ không chèn được <div> mà chèn &lt;div&gt; trong đó &lt; tương đương dấu < và &gt; tương đương dấu > và khoẳng trắng là &nbsp; Xem ví dụ với mẫu sau đây:

Copy

<script>

  $.ajax({

      type: "GET",

      dataType: "json",

      url: 'https://www.googleapis.com/youtube/v3/videos?part=statistics&id=ID video&key=API key',

      success: function (data) {

      var viewCount = data.items[0].statistics.viewCount;

          $(".viewCount").html(viewCount);

      var likeCount = data.items[0].statistics.likeCount;

          $(".likeCount").html(likeCount);

      var dislikeCount = data.items[0].statistics.dislikeCount;

          $(".dislikeCount").html(dislikeCount);

      var commentCount = data.items[0].statistics.favoriteCount;

          $(".commentCount").html(commentCount);

      }

 });

</script>

Khi chèn vào nhận xét phải chèn như sau:

Copy

<script>

  $.ajax({

      type: "GET",

      dataType: "json",

      url: 'https://www.googleapis.com/youtube/v3/videos?part=statistics&id=ID video&key=API key',

      success: function (data) {

      var viewCount = data.items[0].statistics.viewCount;

          $(".viewCount").html(viewCount);

      var likeCount = data.items[0].statistics.likeCount;

          $(".likeCount").html(likeCount);

      var dislikeCount = data.items[0].statistics.dislikeCount;

          $(".dislikeCount").html(dislikeCount);

      var commentCount = data.items[0].statistics.favoriteCount;

          $(".commentCount").html(commentCount);

      }

 });

</script>

3. Hướng dẫn chèn ảnh và video từ YouTube và khung chứa code

Phần này bạn phải cần đến đoạn javascript chèn trước thẻ đóng </body> và một ít css nhỏ trong template thì mới chèn được ảnh, video và khung chứa code trong nhận xét. Trước hết hãy chèn đoạn javascript bên dưới trước thẻ đóng </body>

Copy

<script src='//cdn.rawgit.com/blogthuthuatwin10/jquery/master/comments.min.js' type='text/javascript'/>

Tiếp theo thêm css trước </b:skin>

Copy

.image,iframe{width:100%}.image,img{height:auto}pre{background:#f9f9f9;border:1px solid #d3d6db;max-height:400px;font:16px Roboto,sans-serif;color:#333;text-align:left;overflow:auto;margin:0 0 25px;padding:0 20px;line-height:1.6em;transition:all .3s ease-out 0s;white-space:pre-wrap}

Nếu bạn sợ không tương thích với các thẻ khác đã có sẵn thì chèn sau thẻ </b:skin> cũng được

Copy

<b:if cond='data:blog.pageType != &quot;index&quot;'>

<style type='text/css'>

.image,iframe{width:100%}.image,img{height:auto}pre{background:#f9f9f9;border:1px solid #d3d6db;max-height:400px;font:16px Roboto,sans-serif;color:#333;text-align:left;overflow:auto;margin:0 0 25px;padding:0 20px;line-height:1.6em;transition:all .3s ease-out 0s;white-space:pre-wrap}

</style>

</b:if>

Khi chèn xong trong template lưu lại bây giờ ta tiến hành chèn ảnh, video và khung chứa code

Chèn ảnh

Cú pháp như sau:

Copy

[img]link ảnh[/img]

Ví dụ:

Copy

[img]https://2.bp.blogspot.com/-ltcLseRpmTU/WaK13YJiLZI/AAAAAAAAPp4/4ZT-WOQpW6Q-iOHqWn-l4nxjf9XqliW_ACLcBGAs/w726-h290-c/disqus.png[/img]

Chèn video từ YouTube

Cú pháp như sau:

Copy

Chèn link video trực tiếp

Ví dụ:

Copy

https://www.youtube.com/watch?v=Ibi9yRjMQKA

Chèn code trong khung

Mẫu:

Copy

[pre]

code

[/pre]

Ví dụ:

Copy

[pre]

<script>

  $.ajax({

      type: "GET",

      dataType: "json",

&nbsp; &nbsp; &nbsp; url: 'https://www.googleapis.com/youtube/v3/videos?part=statistics&amp;id=<b>ID video</b>&key=<b>API key</b>',

&nbsp; &nbsp; &nbsp; success: function (data) {

&nbsp; &nbsp; &nbsp; var viewCount = data.items[0].statistics.viewCount;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".viewCount").html(viewCount);

&nbsp; &nbsp; &nbsp; var likeCount = data.items[0].statistics.likeCount;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".likeCount").html(likeCount);

&nbsp; &nbsp; &nbsp; var dislikeCount = data.items[0].statistics.dislikeCount;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".dislikeCount").html(dislikeCount);

&nbsp; &nbsp; &nbsp; var commentCount = data.items[0].statistics.favoriteCount;

&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".commentCount").html(commentCount);

&nbsp; &nbsp; &nbsp; }

&nbsp;});

&lt;/script&gt;

<br>

[/pre]

Bạn có thể xem demo phần nhận xét về bài viết này trong phần nhận xét bên dưới.

loading...

  

Loading...