Hiện là mạng xã hội toàn cầu lớn nhất hiện nay, có thể nói là nhà nhà Facebook, người người Facebook, chính vì vậy việc thêm bình luận (comment) của Facebook cho blogspot là rất cần thiết, vừa tạo được nơi bình luận, chém gió cho mọi người, vừa dễ đưa bài viết tới người đọc bởi hiệu ứng lan truyền của nó. Hôm nay, Blog Cuộc sống muôn màu xin hướng dẫn cả nhà cách thêm khung chat, comment của Facebook cho từng bài viết vào blogspot.

Cách thêm khung bình luận của Facebook vào blogger/blogspot

Khung chat của Facebook cho blogspot

Bước 1: Đăng nhập vào trang quản trị blog.

Vào "Mẫu" chọn "Chỉnh sửa HTML"

Bước 2: Ấn tổ hợp phím Ctrl F, tìm </head>

Có thể bạn nên xem: Thêm comment app facebook cho blogspot

Chèn đoạn code dưới đây vào trước thẻ "</head>".

<script type='text/javascript'>
//<![CDATA[
var purl= location.href;
var fb_href = purl.substring(0,purl.indexOf(".html")+5);
var fbcm ='<div class="fb-comments" data-href="'+fb_href+'" data-num-posts="8" data-width="766"></div>';
//]]>
</script>

Lưu ý: Các bạn có thể thay tùy ý các thông số dưới đây

• data-num-posts="8": Số bình luận được phép hiển thị, nếu nhiều hơn thì tự động gộp lại.
• data-width="766px": Chiều rộng của khung bình luận Facebook.

Bước 3: Ấn tổ hợp phím Ctrl F, tìm </body>

Chèn đoạn code bên dưới và trước thẻ "</body>".

<div id='fb-root'/> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/vi_VN/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

Chèn khung comment facebook vào nơi bạn muốn hiển thị trong blog

Bước 4: Copy đoạn code bên dưới

<b:if cond='data:blog.pageType == "item"'> <script type='text/javascript'> document.write(fbcm); </script> </b:if>

Thông thường ta sẽ chèn nó vào cuối bài viết. Các bạn Ctrl F, tìm dòng <b:include data='post' name='post'/>
Copy và dán đoạn code bên trên vào phía dưới dòng vừa tìm được.

Lưu ý: Một số mẫu template (giao diện) có nhiều hơn một dòng <b:include data='post' name='post'/>, các bạn chọn dòng đầu tiên tìm được nha, sau đó lưu lại, nếu thấy không được thì ta chọn dòng khác :D

Bước 5: Save và xem thành quả

Xem chi tiết

Cách dùng thẻ a để tạo liên kết trong HTML

Đăng ngày 15/08/2015 trong HTML - CSS, HTML căn bản

Trong một bố cục website, việc tạo liên kết giữa các trang với nhau là rất quan trọng, giúp các công cụ tìm kiếm hiểu được sơ đồ trang web bạn có cấu trúc, có mối liên hệ chặt chẽ với nhau qua đó hỗ trợ cho SEO tốt hơn. Bài hôm nay chúng ta sẽ cùng tìm hiểu cách dùng thẻ a để tạo liên kết trong HTML. Bài học nằm trong Serie HTML căn bản.

Cách dùng thẻ a để tạo liên kết như sau

Mỗi một liên kết sẽ nằm trong cặp thẻ <a> </a>

Cú pháp tạo một liên kết (link):

1	<a href="http://hainv9x.com" target="_blank" title="Học lập trình web" rel="follow, index" >BlogLoi.com</a>

Trong đó :

•  href : là đường link đến website đích
•  title : là tiêu đề cho đường link
•  rel : là các thuộc tính dành cho SEO. follow, index là cho phép các công cụ tìm kiếm như google, yahoo vào website của bạn để cập nhật bài viết mới
•  target : gồm các thuộc tính sau (giá trị mặc định là _self)
  •  _blank : chuyển link qua tab mới
  •  _self : chuyển link trên tab hiện tại
  •  _parent : chuyển link đến tab cha của tab hiện tại
  •  _top : nhảy tới tab hiện tại và thường dùng trong iframe chạy tới trang gốc luôn

Ở đây bạn chú ý chữ hainv9x.com nằm trước thẻ đóng </a>. Đây sẽ là văn bản hiển thị ra ngoài trang web cho người dùng xem và nhấp vào.

-------------> hainv9x.com

Liên kết neo – Anchor link

Liên kết neo nói một cách dễ hiểu đó là dẫn người dùng đến một vị trí cụ thể nào đó trong trang web hiện tại.

Cú pháp : href=“#id_name”, khi người dùng nhấp vào thì sẽ nhảy tới vị trí của thẻ HTML có id=”id_name” trong trang hiện tại.

Ví dụ : Khi click vào thẻ a sau thì sẽ nhảy tới thẻ #noidung

1	<a href="#noidung" title="Lập trình web HTML" rel="follow, index">Đi tới #noidung</a>

Thẻ #noidung:

1	<p id="noidung">Hướng dẫn học lập trình web HTML</p>

Ngoài ra, nếu bạn vào một website bán hàng thường sẽ thấy dưới chân trang có chữ Back To Top và khi bạn nhấp vào thì sẽ đưa bạn lên đầu trang, đó chính là một ví dụ điển hình về liên kết neo này, hay ngay website của mình hainv9x.com cũng đang sử dụng định dạng này, bạn nhìn dưới chân trang góc bên phải sẽ thấy.

Lời kết : Kết thúc bài hôm nay bạn đã có thể nắm được cách dùng thẻ a để tạo liên kết HTML trong trang web căn bản, dù website nhỏ hay website lớn thì định dạng này luôn được sử dụng thường xuyên và rất phổ biến hiện nay nó vừa giúp người dùng dễ dàng đi lại giữa các trang web trong một website hay từ website này đến một website khác, vừa giúp các công cụ tìm kiếm thấy được cấu trúc và bố cục chặt chẽ của website mình qua đó đánh giá thứ hạng website cao hơn.

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

Xem chi tiết