Showing posts with label blogspot. Show all posts
Showing posts with label blogspot. Show all posts

Wednesday, April 2, 2014

Cách thêm comment facebook vào blogspot và hướng dẫn quản lý comment

Bạn chắc chắn muốn biết cách thêm comment của facebook vào blogspot ngay lập tức, nhưng đợi chút, chúng ta cần biết một số thứ trước khi làm điều đó.

Bản thân blogspot là của Google vì vậy nó có tùy chọn rất dễ dàng để bạn bật comment Google+, điều này là nên làm, vì comment Google+ tạo ra tương tác tốt hơn kiểu comment cổ điển của blogspot.

Tuy nhiên dù rất nhiều người dùng Google nhưng không phải ai cũng tạo tài khoản Google và cốt yếu hơn: ngay bây giờ họ chưa đăng nhập Google (thường chỉ khi cần xem email họ mới đăng nhập).

Ở tình huống ngược lại gần như ai cũng đang đăng nhập Facebook ngay lúc này! Hãy thử kiểm chứng trên chính bản thân bạn và vài người khác nữa.

Vì lý do đó ngoài sử dụng Google+, việc bổ sung comment Facebook cho web-blog là điều hết sức quan trọng giúp bạn tạo điều kiện thuận lợi cho người dùng để lại thông điệp. Không chỉ có thế kiểu comment mạng xã hội này có thể tạo điều kiện phổ biến bài đăng đến bạn bè của người bình luận.

Hôm nay Blog Mạng Lưới Toàn Cầu sẽ hướng dẫn bạn từng bước một để tích hợp khung bình luận Facebook vào blogspot và kèm theo đó là hướng dẫn quản lý comment (cái này cũng rất quan trọng vì nếu không có quản lý thì sẽ xuất hiện bình luận vớ vẩn hoặc không mong muốn)

Bước 1: Tạo app (ứng dụng)

Truy cập vào https://developers.facebook.com/apps để tạo ứng dụng. Bạn nhấn vào +Creat New App để bắt đầu tạo:

Nhập tên ứng dụng

Nhập mã bảo vệ:

Nhập mã kiểm tra

Bước 2: Lấy mã ứng dụng

Sau khi tạo thành công bạn sẽ thấy mã ứng dụng, hãy copy mã này ra đâu đó để sau này bạn sẽ dùng lại, cái này vô cùng quan trọng vì nếu không có mã ứng dụng thì không quản lý được comment.

Lấy mã ứng dụng

Bạn có thể thấy mã ứng dụng của tôi là: 639362859452357

Bước 3: Bật sửa code

Bạn vào Mẫu > Chỉnh sửa HTML

Chỉnh sửa HTML

Bạn sẽ thấy một đống code, bạn phải click con trỏ chuột vào đó rồi nhấn Ctrl + F để bật tính năng tìm kiếm.

Tính năng tìm kiếm code
Tính năng tìm kiếm code nếu bạn đã quen với blogspot rồi thì hẳn đã dùng nhiều lần. Với bạn nào còn chưa quen thì chức năng này giúp bạn tìm được vị trí các thẻ - nó giống kiểu tìm chữ trong word ấy.

Bước 4: Sửa thẻ mở html

Đây là thẻ mở html trang blogspot của tôi, của bạn cũng gần tương tự - nó ở ngay đầu mấy dòng code:

<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' >

Nếu không nhìn ra, bạn gõ <html vào ô tìm kiếm để tìm vị trí thẻ này:

Tìm thẻ mở html


Điều bạn quan tâm không phải là hiểu ý nghĩa của thẻ html trên (tôi cũng không hiểu gì đâu) mà là đưa dòng code xmlns:fb='http://ogp.me/ns/fb#' vào bên trong thẻ trên. Và đây là kết quả:

<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:fb='http://ogp.me/ns/fb#' >

Bước 5: Thêm thẻ meta

Trước thẻ đóng </head> và sau thẻ mở <head> (tức là ở giữa 2 cặp thẻ này) bạn thêm đoạn code dưới đây vào:

<meta content='Thay mã ứng dụng của bạn vào đây' property='fb:app_id'/>

Vị trí của thẻ meta mã ứng dụng

Bạn lấy mã ứng dụng của bạn ở bước 2 để dùng trong bước 5 này. Chú ý là nếu bạn cho cái thẻ meta trên ngoài cặp thẻ <head> là nó không chạy đâu nhé.

Bước 6: Thêm khung comment

Bạn sắp thành công...Thường thì comment người ta hay để ở cuối mỗi bài viết. Bạn tìm đoạn mã <b:include data='post' name='post'/> rồi copy - paste đoạn code sau ngay bên dưới:

<!--facebook comment-->

<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 = &quot;//connect.facebook.net/vi_VN/all.js#xfbml=1&amp;appId=thay mã ứng dụng của bạn vào đây&quot;;
  fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>

<!--facebook comment-->

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

<!--facebook comment-->
<fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' numposts='5' width='530'/>
<!--facebook comment-->

</b:if>

Có 2 chú ý, thứ nhất bạn phải thay mã ứng dụng của bạn vào, thứ hai 530 là kích thước chiều ngang của comment, con số này là khác nhau giữa các website, bạn tùy chỉnh để nó hợp với độ rộng của trang web của bạn.

Và đây là kết quả:

Tích hợp comment facebook thành công

Bước 7: Quản lý comment

Sau 6 bước trên là mọi người đã bình luận trên trang web của bạn được rồi, giờ ở phần này chúng ta thiết lập quyền quản trị, theo đó bạn điều chỉnh để bất cứ ai bình luận sẽ không hiện lên ngay lập tức mà phải được sự cho phép của bạn.

Bạn truy cập vào: https://developers.facebook.com/tools/comments sau đó chọn ứng dụng của bạn, rồi nhấn vào thiết lập, một cửa sổ mới bật ra, bạn chọn như hình dưới đây:

Quản lý comment

OK, như vậy là tất cả đã xong. Mỗi lần ai đó comment bài viết sẽ có thông báo cho bạn, và khi bạn vào khu vực quản trị nó sẽ trông giống như thế này:

Kiểm duyệt comment

Nhấn vào Chấp nhận để đồng ý cho comment đó xuất hiện công khai. Nhấn Visit Website để ghé thăm trang web của bạn nơi mà người dùng mới bình luận.

Chúc trang web của bạn mau phát triển và nhận được nhiều bình luận từ độc giả.

Tuesday, April 1, 2014

Cách chèn quảng cáo Google Adsense vào blogspot

Mình viết bài bằng blogspot, số lượng người xem tương đối ổn định nên đã thử vận may với hệ thống quảng cáo lớn nhất thế giới Google Adsense. Sau khi gửi yêu cầu đăng ký, thất bại rồi lại đăng ký lại (vài lần!), cuối cùng mình đã thành công.

Nhưng mình gặp phải một số khó khăn khi chèn mã quảng cáo Adsense vào web, và hôm nay sau khi đã chèn thành công, mình muốn chia sẻ chi tiết để bạn đỡ mất công lọ mọ các trang web nước ngoài.

Nên chọn kích thước quảng cáo nào?

Trước tiên bạn truy cập vào https://www.google.com/adsense để lấy mã quảng cáo. Về kích thước, có 4 kích thước Google Adsense khuyên dùng, đó là:
  • Hình chữ nhật trung bình: 300 x 250
  • Hình chữ nhật lớn: 336 x 280
  • Hình chữ nhật dài: 728 x 90
  • Hình chữ nhật đứng rộng: 160 x 600
Ngoài 4 loại trên còn rất nhiều kích thước khác, nhưng Google bảo chúng ta nên dùng những kích thước trên vì điều đó đem lại doanh thu tốt hơn.

Bạn được phép đặt ba đơn vị quảng cáo trong đó có tối đa một đơn vị kích thước 300 x 600. Thường thì nếu cột phải có kích thước nhỏ bạn đặt đơn vị quảng cáo 160 x 600, còn nếu có kích thước đủ lớn bạn đặt đơn vị có kích thước 300 x 600.

Nên chọn loại quảng cáo nào?

Có 3 loại cho bạn chọn lựa:
  • Quảng cáo văn bản
  • Quảng cáo văn bản và hiển thị hình ảnh
  • Quảng cáo hiển thị hình ảnh
Mặc định của Google là quảng cáo văn bản và hiển thị hình ảnh vì nó đem lại cơ hội tốt hơn cho chúng ta, tuy nhiên nếu bạn thấy vị trí đặt quảng cáo thích hợp với chữ hơn thì đặt văn bản, thích hợp với hình ảnh hơn thì đặt hiển thị hình ảnh.

Lấy mã quảng cáo google adsense

Các vị trí nên đặt quảng cáo

Và đây cũng là điều Google khuyên về ba vị trí mà bạn nên đặt. Tất nhiên là bạn nên đặt đồng thời cả ba.
  • Quảng cáo nằm ở đầu bài viết
  • Quảng cáo nằm ở cuối bài viết
  • Quảng cáo nằm ở cột bên phải (hoặc bên trái)
Vị trí đặt quảng cáo google adsense

Việc đặt quảng cáo vào cột bên phải (hoặc trái) là dễ nhất, bạn chỉ việc vào bố cục > thêm tiện ích > HTML/JavaScript rồi copy - pase đoạn code lấy được từ Google Adsense vào rồi nhấn lưu. Giả dụ với trang web của tôi vì cột bên phải rộng nên tôi chọn quảng cáo có kích thước 300 x 600.

Bạn chèn mã quảng cáo vào thì bị lỗi - tại sao vậy?

Việc chèn quảng cáo vào đầu và cuối bài viết thì không dễ như chèn vào cột bên phải, bạn cần phải vào Mẫu > Chỉnh sủa HTML để làm việc này. Và bạn sẽ thường xuyên gặp lỗi như thế này:

Attribute name "async" associated with an element type "script" must be followed by the ' = ' character

Để sửa lỗi trên bạn chỉ cần thêm dòng như sau vào code: async="async"

Ví dụ cụ thể, code Google Adsense đang như thế này: 

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- MLTC foot post 336v280 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-712987019925812345"
     data-ad-slot="6386538945"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Bạn phải sửa lại thành như thế này thì khi chèn vào mới không bị lỗi:

<script async="async" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- MLTC foot post 336v280 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-712987019925812345"
     data-ad-slot="6386538945"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Tìm vị trí code để đặt quảng cáo

Câu hỏi tiếp theo: làm sao chèn code vào đúng đầu và cuối mỗi bài viết? Thông thường ở đầu bài viết thì bạn sẽ phải tìm đến vị trí <data:post.body/> rồi copy paste đoạn code của Google Adsense ở trên <data:post.body/> là OK. Tuy nhiên việc này không đảm bảo thành công 100% nó hiển thị đúng, bạn nên dùng thêm công cụ Firebug (addonn của FireFox) để tìm chính xác vị trí dưới tiêu đề của bài viết.

Tiếp theo bạn phải quan tâm đến cú pháp, bạn chỉ hiển thị quảng cáo khi người truy cập vào nội dung bài viết, vì vậy bạn phải để câu lệnh của blogspot bao bên ngoài mã quảng cáo adsense như thế này:

<!--Quang cao Google-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
       Mã quảng cáo Adsense của bạn
</b:if>
<!--Quang cao Google End-->

Câu lệnh này đơn giản chỉ có nghĩa là nếu tôi đang ở bài post thì ông hiển thị quảng cáo cho tôi, còn nếu tôi đang ở label hoặc trang chủ hoặc các trang khác thì không.

Chú ý nhỏ: bạn cũng nên đánh dấu quảng cáo bằng cách thêm dòng <!--Quang cao Google--> hay cái gì khác tùy bạn để lần sau bạn tìm code quảng cáo để chỉnh sửa được dễ dàng hơn.

Còn cuối bài viết thì như thế nào? Đoạn code nên chèn vào thường nằm sau dòng này:

 <div class='post-footer'>
 <div class='post-footer-line post-footer-line-1'>

Tuy nhiên mình vẫn muốn nhắc lại là bạn nên dùng Firebug để tìm vị trí chính xác nếu vị trí trên không đạt.

Làm sao tôi biết tôi đã chèn quảng cáo thành công?

Sau khi chèn nếu bạn thấy quảng cáo hiện lên luôn thì bạn đã thành công (úi zời thế thì nói làm giề!). He, mình nói thế là còn có trường hợp nữa, đó là quảng cáo chưa hiện lên luôn nhưng nếu bạn thấy một khoảng không bị chiếm giữ ở đó thì nghĩa là đã có không gian để hiển thị quảng cáo rồi đấy. Sau vài phút sẽ có quảng cáo thôi, bạn đừng lo.

Quảng cáo trên trang chủ và các trang label thì như thế nào?

Chúng ta có tối đa ba đơn vị quảng cáo được phép đặt, quảng cáo ở cột bên phải thì ta để chung cho cả bài post lẫn trang chủ và trang label rồi

Với bài post đã có 2 quảng cáo riêng cho nó ở đầu và cuối bài viết. Với trang chủ và label tương tự như vậy, ta cũng được phép đặt 2 quảng cáo nữa.

Cú pháp để hiển thị quảng cáo cho trang chủ, label (và cả lưu trữ nữa) là như sau:

<!-- quang cao google -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
        Mã quảng cáo Google Adsense
</b:if>
<!-- quang cao google -->

Vị trí đặt quảng cáo thì tùy bạn chọn sao cho hợp lý. Bạn có thể nhìn trang của tôi làm thí dụ nếu thích.

Kiếm được nhiều tiền không vậy?

Bạn cứ mừng vì đăng ký thành công Google Adsense đi đã! Bài viết càng chất lượng, càng nhiều lượt xem và click vào quảng cáo bạn càng kiếm được nhiều. Nhưng bạn đừng tham mà tự bấm hoặc nhờ người khác bấm nhé, sẽ bị khóa tài khoản ngay.

Cuối cùng điều quan trọng hết sức là tìm hiểu kỹ các điều khoản của Adsense, rất nhiều và phức tạp đấy - nhưng về cơ bản là cứ làm ăn trung thực thì bạn cứ yên tâm. Mình cũng đang tiếp tục tìm hiểu luật chơi đây. Chúc các bạn hợp tác tốt với Google.

Sunday, December 22, 2013

Cách ẩn bài viết mới nhất khỏi trang chủ trong Blogspot

Bài viết mới nhất trong Blogspot mặc định sẽ được hiện lên đầu tiên khi khách truy cập vào trang chủ, tiếp theo sau là các bài viết cũ hơn. Có thể vì lý do nào đó mà bạn không muốn bài viết mới nhất hiện ra, việc này được thực hiện rất đơn giản bằng thủ thuật thay đổi ngày up bài.

Blogspot (cũng như đa số các hệ quản trị nội dung khác) sắp xếp bài viết nào lên trước phụ thuộc vào ngày bạn up bài viết đó lên. Do vậy, đơn giản chỉ cần để ngày up bài trong quá khứ thì bài viết đấy sẽ không còn hiện ra bên ngoài trang chủ nữa. Cách làm như sau, ở phần Cài đặt bài đăng bên tay phải của khung soạn thảo bài viết bạn nhấn vào Lịch biểu hoặc Được xuất bản vào:

Lịch biểu thay đổi ngày up bài trên lý thuyết

Lịch biểu này chính là ngày điều chỉnh thời gian đăng bài viết, nếu bạn không chỉnh sửa gì thì nó sẽ là ngày của hôm bạn up bài, như trên hình là ngày 22/1/2014 (ngày tôi viết bài này). Tôi sẽ lùi ngày up bài về 1 tháng tức là 22/12/2013, sau đó nhấn Hoàn thành để xác nhận. 

Ngày up bài đã lùi về quá khứ 1 tháng

Như vậy là xong, khi bạn nhấn Xuất bản, mặc dù bài này là bài viết mới nhất nhưng nó sẽ không hiện ra trang chủ.

Đây cũng là cách giúp bạn điều chỉnh thứ tự xuất hiện bài viết trong thư mục (nhãn) bất kỳ, nếu muốn bài A ở sau bài B, bạn chỉ việc điều chỉnh thời gian up bài của bài A ở trong quá khứ so với thời gian up bài của bài B.

Wednesday, December 18, 2013

Tạo bài viết liên quan thủ công trong blogspot

Trong một bài viết trước đây, mình có hướng dẫn các bạn cách tạo bài viết liên quan tự động cho blogspot. Cách này có ưu điểm là bạn đỡ tốn công nhọc sức mỗi lần viết bài mới, nhưng có nhược điểm là đôi khi nó không đúng với nhu cầu của mình lắm. Vì vậy hôm nay Blog Mạng Lưới Toàn Cầu sẽ hướng dẫn bạn cách tạo bài viết liên quan theo cách thủ công, giúp bạn chủ động hơn, chọn chính xác bài viết muốn liên kết.

Cách làm như sau. Đầu tiên bạn viết ra tên danh sách các bài viết liên quan (các bài bạn muốn liên kết), chẳng hạn với bài này, tôi viết ra danh sách đó như dưới đây:

Cách tạo bài viết ngẫu nhiên cho blogspot
Hướng dẫn tạo menu ngang cho blogspot
Cách tạo fanpage cho blogspot

OK, tiếp theo tôi làm 3 mục trên thành danh sách bằng cách quét cả ba rồi nhấn vào biểu tượng 3 dấu gạch ngang trên khung soạn thảo:


Bạn tick vào dấu chấm tròn hay 1,2,3 đều được, tôi thường chọn dấu chấm tròn, kết quả:
  • Cách tạo bài viết ngẫu nhiên cho blogspot
  • Hướng dẫn tạo menu ngang cho blogspot
  • Cách chèn fanpage vào blogspot
Vâng, vậy là bạn đã hoàn thành bước đầu, giờ chúng ta tiến hành tạo liên kết cho chúng. Bạn quét vào tiêu đề trong danh sách rồi nhấn vào biểu tượng ghi chữ Liên kết trên khung soạn thảo.

Tạo liên kết trong blogspot

Một khung sẽ bật ra cho bạn điền thông tin, nó sẽ giống như dưới đây:


Ở cái địa chỉ web, bạn phải điền địa chỉ trang mà bạn muốn liên kết vào, cuối cùng nhấn OK là được, kết quả:
Bạn đã thấy bài viết đầu tiên có liên kết rồi đúng không, làm tương tự cho các tiêu đề bài viết phía dưới, và đây là kết quả cuối cùng:
Giờ cả 3 đều có liên kết roài nhé :)

P/S: Bài viết được tạo cảm hứng từ câu hỏi của bạn xanh la cay 

Thursday, October 24, 2013

Tiện ích Bài viết liên quan cho Blogspot


Blogspot có nhiều ưu điểm, ví dụ như giao diện viết bài đơn giản, thân thiện, hosting thoái mái, chịu tải lớn giúp chủ trang không lo lắng khi lượng người dùng tăng đột biến. Nhưng yếu điểm của Blogspot là nó không có nhiều widget hỗ trợ giống như các CMS khác.
Thực tế Blogspot chỉ có khoảng 20 tiện ích mà người dùng cảm thấy thực sự có ích:

Một số tiện ích của Blogspot

Còn lại phần đa đều phải tự tìm trên mạng, chẳng hạn tiện ích bình luận gần đây hay bài viết mới nhất đều phải tự tìm. Và lần này cũng vậy, tiện ích bài viết liên quan - điều rất quan trọng để giữ chân độc giả lâu hơn cũng không được Blogspot cho vào kho tiện ích mặc định.

Một điều chắc chắn không phải Google không làm được, nhưng lý do gì mà họ không bổ sung các widget cơ bản đó vào thì tôi vẫn chưa rõ.

Quay lại vấn đề trọng tâm. Tại sao chúng ta cần tạo tự động các bài viết liên quan? Điều này nói cho cùng là cần thiết cho các trang web có số lượng bài viết lớn. Bởi vì khi đó, một bài viết thường liên quan đến vài bài khác, và mỗi lần viết bài mới bạn phải mất rất nhiều công sức cập nhật mối liên kết qua lại giữa chúng với nhau.

Tuy nhiên ở khía cạnh khác, tạo các mối nối bằng tay giữa các bài tạo ra sự liên kết mạnh mẽ hơn, vì bạn biết rõ nhất với bài viết A thì bài viết C là liên quan nhất chứ không phải bài B, trong khi đó hệ thống tự động có thể đưa ra bài B cho độc giả.

Do vậy để cân bằng bạn nên kết hợp cả hai, vẫn có những liên kết bằng tay ngay trong bài và một hệ thống auto các bài liên quan ở cuối.

Và bây giờ sẽ là đoạn code để làm điều đó. Nếu bạn có kinh nghiệm với Blogspot thì mới nên làm nhé, mới dùng mà chiến cái này luôn là hơi bị nhức đầu đấy! Backup lại Template của bạn phòng khi lỗi nhé.

Vào mẫu chọn chỉnh sửa HTML

chỉnh sửa HTML

Tìm thẻ đóng </head> 


Và paste đoạn code dưới đây vào trước thẻ </head>:

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
margin-right:5px;
color:black;
background-color:#CCC;
text-align:center;
}
#related-posts a:hover{
background-color:#2AA4CF;
color:#FFF;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4udKhlC23pd4S1HAyGeV_3lz2CDURZu4_wyPta2hix0PdkVke-ou25_O9hFDBBfO1WEoH8pPi9aSYQv2zrYqePu8VtNalG0YXdd9A9sRAYZA7JLEiBotD2t5mzWJMgH0GK7Skk9reuQ/s1600/no-image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Bài Viết Liên Quan&quot;;
</script>
<script src='https://googledrive.com/host/0BxKUKf8tfKupSnQ0Znd2Tm5xT1E' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Nếu muốn thay đổi số lượng bài viết liên quan thì điều chỉnh giá trị: var maxresults=5; thường để 3 cho đến 5.

Tìm đến dòng <div class='post-footer'>

Rồi paste đoạn code dưới đây vào sau dòng đó:

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
</b:if></b:if>

<!-- Related Posts with Thumbnails Code End-->

Cuối cùng nhấn Save để lưu tempalte. Chú ý là nhiều template thì bạn phải paste vào sau: <div class='post-footer-line post-footer-line-1'> chứ không phải <div class='post-footer'> thì nó mới hiện bài viết liên quan. Bạn cứ thử lần lượt, cái nào OK thì dùng.

Bài viết lấy code mẫu từ trang: http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html

Nếu quá chán với code, bạn có thể dùng http://www.linkwithin.com/ nó cũng tạo bài viết liên quan rất đẹp mắt thông qua chỉ vài click thôi chứ không nhức đầu như trên đâu, yếu điểm là trang web chậm đi đôi chút.

Tuesday, October 8, 2013

Tùy chỉnh chức năng Nhận xét trong Blogspot

Nhận xét và Bình luận

Nhận xét thể hiện cho sự tương tác giữa độc giả và trang web của bạn, tôi luôn coi nhận xét là phần vô cùng quan trọng. Một trang web có nhiều nhận xét luôn là trang sở hữu traffic tốt. Độc giả sẽ khen nếu bài hay, góp ý nếu có thiếu sót, chia sẻ kiến thức mới...gì thì gì, điều đó tạo ra những nội dung bất ngờ và thú vị mà nhiều khi bạn không ngờ tới.

Vậy nhiệm vụ của bạn là gì?
  • Khuyến khích độc giả chia sẻ nhận xét.
  • Không tạo ra khó khăn khi nhận xét, chẳng hạn như yêu cầu phải đăng nhập phức tạp...

Hệ thống Nhận xét - Bình luận mặc định của Blogspot

Blogspot cung cấp cho chúng ta tùy chọn đa dạng cho phần nhận xét mặc định của nó...Ở giao diện quản lý, bạn vào phần Cài đặt > Bài đăng - Nhận xét:

Bài đăng và nhận xét

Bạn chú ý đến khu vực tùy chọn của Nhận xét. Ở phần Vị trí nhận xét bạn chọn được nhúng (bình thường cái này đã được chọn là mặc định rồi)

Bình luận được nhúng
Ở phần Ai có thể nhận xét có tới 4 tùy chọn cho bạn, nếu muốn kích thích người dùng, hãy để như trong hình, tức là Bất kỳ người nào. Với các lựa chọn còn lại, người dùng phải đăng nhập thì mới đăng nhận xét được. Nếu bạn để Người dùng có Tài khoản Google thì cũng không tệ lắm vì giờ đa số mọi người đều có Gmail...

Ai có thể nhận xét

Ở phần Kiểm duyệt nhận xét có 3 chọn lựa, nếu bạn để Bất kỳ ai cũng có thể nhận xét thì nên để Luôn luôn kiểm duyệt - chế độ này sẽ không Show ra nhận xét cho đến khi bạn đồng ý nhận xét đó không vi phạm điều gì (thí dụ chửi tục, nói linh tinh...) - chính bạn sẽ là người kiểm duyệt:

Kiểm duyệt nhận xét

Nếu để Thỉnh thoảng thì Blogspot chỉ yêu cầu bạn kiểm duyệt với nhận xét nó nghi ngờ. Với Không bao giờ thì bất kỳ nhận xét nào của người đọc sẽ được Show ra ngay lập tức mà không thông qua bất cứ sự kiểm duyệt nào. Tùy vào nội dung Blog, nếu thấy thích hợp và tự tin, để Không bao giờ cũng là ý tưởng hay - mặc dù nó có rủi ro chút ít khi bạn gặp "trẻ trâu" hoặc spamer!.

Nếu người dùng đã đăng nhận xét, bạn vào đâu để kiểm duyệt? Rất đơn giản thôi, bạn vào phần Nhận xét ở trang quản trị, vào tiếp Đang chờ kiểm duyệt:

Đang chờ kiểm duyệt

Nếu nhận xét OK thì click Xuất bản, nếu vi phạm nhấn Xóa, nếu là của Spamer thì click Spam.

Xuất bản - Xóa - Spam

...Nếu quá bận rộn, ít khi vào Blog, thì bạn có thể điền email vào Gửi email yêu cầu kiểm duyệt, Blogspot sẽ gửi nhận xét tới email cho bạn. Như thế bạn sẽ không bỏ lỡ nhiều nhận xét. Tất nhiên nếu bạn hay vào Blog thì không cần dùng tính năng này nữa.
Tiếp đến ở phần Hiển thị xác minh từ bạn nên để Không:
Hiển thị xác minh từ

Tính năng của hiển thị xác minh từ là để chống Spam:

Xác minh từ chống spam

Xác định nhận xét được nhập vào do con người chứ không phải tự động bởi máy, nói chung đa số các blog mới làm thì ít bị spam lắm nên bạn không cần - điều này giúp người dùng thoải mái hơn, bởi vì gõ những ký tự nghiêng ngả xiêu vẹo (capcha) đâu có đơn giản.

Tuy nhiên, nếu sau này bạn thấy Blog bị spam thì chỉ cần chuyển Không thành Có, chúng ta tùy tình hình mà thay đổi chứ cũng không cứng nhắc làm gì.

Cuối cùng là Thư thông báo mẫu nhận xét, đây là đoạn văn bản bạn thêm vào ngay phía trên ô soạn thảo nhận xét, bạn có thể dùng nó để kích thích người đọc để lại bình luận...

Thông báo mẫu Bình luận

Và đây là kết quả:

Mẫu kết quả khi người dùng nhìn vào Form bình luận
Thêm tính năng bình luận gần đây vào cột bên phải trang Blog của bạn là cách hay để thu hút khách ghé thăm
OK như vậy là bạn đã hoàn thành cấu hình Nhận xét trong Blogspot. Tiếp theo tôi sẽ giới thiệu hệ thống nhận xét khác, bạn chỉ sử dụng một trong hai hệ thống nhận xét này thôi nhé.

Hệ thống nhận xét của Google+

Từ khi Google+ ra đời, họ cho phép bạn sử dụng tính năng Nhận xét của Google+ trên Blog thay vì chức năng mặc định, cách làm như sau:

Ở bên tay trái giao diện quản lý Blog bạn nhấn vào Google+

Google+

Tiếp đến tick vào sử dụng Nhận xét của Google+ trên blog

Sử dụng tính năng Nhận xét của Google+

Điểm mạnh của nhận xét Google+ là khi ai đó đặt câu hỏi, sau đó bạn trả lời thì người hỏi sẽ biết bạn vừa trả lời để rồi người hỏi sẽ vào trang web để xem.

OK, như vậy là xong, mỗi hệ thống có ưu điểm riêng, cá nhân mình từng xài hệ thống nhận xét của Blogspot nhưng hiện tại sử dụng hệ thống comment của Facebook và Google+

Sunday, October 6, 2013

Cách tạo danh sách khi viết bài trong Blogspot

Danh sách dạng số các việc cần làm

Danh sách là cách hay để làm bài viết của bạn rõ ràng và dễ hiểu hơn. Thêm danh sách vào Blogspot rất đơn giản, bạn có 2 tùy chọn:
  1. Thêm danh sách được đánh số như thế này hoặc
  • Thêm danh sách với dấu đầu dòng (theo mặc định là chấm tròn)

Để thêm danh sách vào bài viết, bạn nhấn vào biểu tượng như hình dưới đây ở trang soạn thảo:

Thêm danh sách vào blogspot

Nếu muốn danh sách dạng số thì nhấn vào biểu tượng tương ứng (bên trái), dạng chấm tròn thì ở bên phải.

Một số câu hỏi:
  • Khi nào tôi nên tạo danh sách? Bạn nên tạo danh sách khi dữ liệu là trong một nhóm và liên quan mật thiết đến nhau, thí dụ danh sách sinh viên trong lớp, danh sách các thành viên trong gia đình, danh sách các trang web được truy cập nhiều nhất Việt Nam hay danh sách các việc cần làm trước khi đi ngủ.
  • Khi nào thì tôi nên dùng danh sách dạng số, khi nào dùng dạng chấm tròn? Bạn nên dùng danh sách dạng số trong trường hợp danh sách của bạn cần có thứ tự, chẳng hạn, danh sách những người giàu nhất thế giới - tức là có người xếp số 1, người xếp số 2, vv. Còn danh sách các nước trong ASEAN, thì nên dùng chấm tròn, vì bạn không có ý định mô tả nước nào là quan trọng nhất, trong khi đó danh sách các nước có diện tích nhỏ nhất thế giới thì lại nên sử dụng dạng số.

2 cách chèn video vào Blogspot

Nội dung đa phương tiện

Video là nội dung đa phương tiện mà mọi người thường thích thú, bởi đa số thích xem hơn đọc... Chèn video vào Blogspot cũng hết sức dễ dàng, hôm nay chúng ta sẽ tiến hành nhúng video từ vài nguồn khác nhau.
Đầu tiên là...

Youtube

Bạn nhấn vào biểu tượng chèn video trên khu vực soạn thảo:


Một cửa sổ bật ra, bạn có nhiều lựa chọn:
  • Tải lên: nếu bạn có video của mình và hiện chưa up nó lên bất cứ trang chia sẻ nào thì bạn cần chọn tải lên.
Tải video từ máy tính lên

  • Từ Youtube: một video bất kỳ của ai đó mà bạn muốn nhúng vào Blogspot. Để lấy video đó, bạn chỉ cần vào Youtube, copy đường link rồi paste vào ô tìm kiếm, tiếp đến chọn video cho bạn.
Chọn một video nào đó từ Youtube

  • Video trên Youtube của tôi: nếu bạn đã có video của mình trên Youtube thì nhấn vào đây, nó sẽ liệt kê đầy đủ video mà bạn đã up lên để bạn chọn lựa.
Chọn video của bạn trên Youtube
  • Ngoài ra là các tùy chọn từ điện thoại hoặc từ webcam. Những cái này thì ít dùng hơn.
Dưới đây là video từ Youtube mà tôi vừa nhúng, một con robot chạy rất giống động vật thật:


...Blogspot của Google nên họ ưu tiên nhúng Video từ Youtube (vì Youtube cũng thuộc Google), trường hợp bạn muốn nhúng video từ nhà cung cấp khác thì làm thế nào? Tôi sẽ trình bày luôn.

Nhúng video từ bất kỳ nhà cung cấp nào

Giả dụ tôi muốn nhúng video từ Vimeo, trước tiên tôi cần có đoạn code nhúng, ví dụ tôi lấy đoạn code nhúng video https://vimeo.com/75660130 (Khi bạn nhấn vào nút Share hoặc Embed ở các trang chia sẻ họ sẽ cho code để nhúng)

Lấy code nhúng

<iframe src="//player.vimeo.com/video/75660130" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/75660130">Art On Fire - Stunningly Beautiful Burning Man 2013 Time Lapse</a> from <a href="http://vimeo.com/sparkpictures">Spark Pictures</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
Giờ để nhúng bạn cần nhấn vào phần HTML (phía trên bên trái)

Nhấn vào HTML để thêm code

Bạn sẽ thấy một số cái mà bạn không hiểu, nhưng đừng quan tâm, kéo thanh trượt dọc xuống cuối bài viết và paste đoạn code mà bạn lấy được vào. 

Art On Fire - Stunningly Beautiful Burning Man 2013 Time Lapse from Spark Pictures on Vimeo.

OK vậy là đã nhúng xong, bạn lại nhấn vào Viết (cạnh HTML) để trở về giao diện quen thuộc...

Ví dụ tiếp theo là nhúng video từ Zing, cách làm thì cũng tương tự, vào video đó nhấn nút Embed:


Copy đoạn Nhúng blog rồi cũng chuyển sang chế độ HTML và paste code đó vào:


Cách SEO ảnh trong Blogspot


Tối ưu hóa hình ảnh với máy tìm kiếm là phần khá quan trọng cho SEO web. Điều đầu tiên, dù công nghệ rất tiến bộ, Google không còn mù ảnh nữa, nhưng dù sao nó vẫn không thể nhìn hình ảnh như cách chúng ta thấy được.

Câu trên ngụ ý là bạn cần phải cung cấp thêm thông tin để giúp các bọ tìm kiếm có khả năng phân tích bức ảnh của bạn đang nói về cái gì.

Với Blogspot, thao tác SEO cho ảnh rất đơn giản và tiện lợi. Sau khi chèn bức ảnh nào đó vào bài viết thành công, bạn click chuột vào ảnh. Nó sẽ hiện ra bảng cho phép các lựa chọn, nhấn tiếp vào Thuộc tính.

Thuộc tính hình ảnh trong Blogspot

Một cửa sổ bật ra, nơi đây bạn sẽ điền các thông tin để mô tả bức ảnh:

Viết mô tả cho ảnh trong Blogspot

Bạn có lẽ muốn hỏi, văn bản tiêu đề là gì, văn bản thay thế là gì, tôi xin trả lời luôn:
  • Văn bản tiêu đề giống như tên của bức ảnh, bạn hãy đặt tên sao cho nó mô tả sát với bức ảnh nhất, đừng viết quá ngắn, cũng không cần quá dài dòng.
  • Văn bản thay thế là khi ảnh bị lỗi hoặc vì lý do nào đó mà ảnh không tải về được thì trình duyệt sẽ Show đoạn đó ra cho người đọc, để người xem dù không thấy ảnh cũng hiểu một chút về bức ảnh.
  • Bạn nên để Văn bản tiêu đề và văn bản thay thế giống nhau cho đỡ mất công viết. Điều này không ảnh hưởng gì.
Ngoài ra có thể thêm chú thích cho ảnh, sẽ có một đoạn văn bản dưới bức ảnh để làm cho bức ảnh đó dễ hiểu, rõ nghĩa hơn. Thường thì không có cũng không sao, trừ với bức ảnh phức tạp, đòi hỏi mô tả cao thì bạn cần điền thêm chú thích.

Saturday, October 5, 2013

Hướng dẫn tạo bài viết mới trong Blogspot

Viết bài trong Blogspot

Thực sự thì viết bài với giao diện của Blogspot không có gì phức tạp nhưng cũng là người từng dùng và đang dùng nên tôi biết khi mới tiếp xúc bao giờ cũng có khó khăn. Trong bài viết này Blog Mạng Lưới Toàn Cầu sẽ hướng dẫn bạn cách viết bài mới trong Blogspot.

Đầu tiên, sau khi đăng nhập vào Blogspot, bạn nhân vào nút tạo bài mới:

Nút viết bài mới

Một khung soạn thảo sẽ hiện ra...Ở phía trên cùng là tên bài viết - nơi bạn nhập tiêu đề:

Tiêu đề bài viết

Khu vực hình vuông phía dưới hết sức quan trọng, và bạn sẽ thấy nó gần giống với ứng dụng văn phòng MSWord, chúng ta sẽ bắt đầu nói về phần này ngay bây giờ. Tôi sẽ không đi theo thứ tự từ trái sang phải mà bắt đầu từ phần dễ trước.

Bôi đậm, nghiêng, gạch dưới văn bản


Bôi đậm, in nghiêng, gạch dưới văn bản

Quét văn bản bất kỳ, nhấn vào nút B nó sẽ được bôi đậm như thế này - bạn sẽ có kết quả tương tự khi nhấn tổ hợp phím Ctrl + B.

Muốn in nghiêng chữ thì nhấn vào nút I, hoặc nhấn tổ hợp phím Ctrl + I. Còn nếu bạn muốn chữ gạch dưới thì nhấn U hoặc Ctrl + U.

Một thành phần ít dùng hơn nhưng cũng khá thú vị đó là gạch ngang chữ. Nó biểu thị rằng đoạn văn bản đó không đúng, chẳng hạn như thế này: Lếu nà bạn tôi xẽ đi ngủ xớm, tôi vừa viết một câu sai chính tả nhưng tôi không xóa mà để nó gạch ngang ở giữa.

Chèn hình ảnh vào bài viết


Chèn hình ảnh
Bài viết sinh động thường phải có hình ảnh, muốn chèn ảnh bạn nhấn vào nút chèn hình ảnh! Khung sau sẽ hiện ra:

Tải ảnh lên

Bạn nhấn vào Tải lên sau đó nhấn chọn tệp để chọn một bức ảnh cần up từ máy tính của bạn, sau khi ảnh tải xong thì nhấn vào Thêm hình ảnh đã chọn.

Trường hợp bạn không muốn up ảnh lên mà lấy luôn đường dẫn ảnh từ trang web khác thì nhấn Từ URL. Ảnh từ trang khác có lợi điểm là bạn đỡ mất công up, nhưng nhược điểm là SEO sẽ kém hơn, và ảnh của bạn phụ thuộc vào trang đó, nếu ảnh của họ bị làm sao đó, thì trang của bạn ảnh cũng không hiện lên được. Nên trong thực tế nếu viết Blog chuyên nghiệp ít ai lấy ảnh từ URL bên ngoài, trừ trường hợp bất khả kháng hoặc ảnh từ một trang uy tín.

Thí dụ tôi lấy link ảnh Đại tướng Võ Nguyên Giáp từ trang Vnexpress.net:

Lấy link ảnh của trang web khác chèn vào trang mình

Tạo liên kết đến các bài khác hoặc trang web khác

Liên kết là thành phần đặc biệt quan trọng, nó giúp độc giả của bạn biết được nơi họ có thể đến trong các click tiếp theo. Liên kết có 2 kiểu:
  • Liên kết đến các bài viết khác trong trang web của bạn.
  • Liên kết đến các trang web khác.
Giả dụ tôi muốn tạo liên kết cho đoạn sau tới trang chủ: Đây là trang chủ của Blog. Tôi sẽ phải nhấn vào Liên kết rồi làm như hình sau:

Liên kết đến bài, trang khác

Ở phần Liên kết này sẽ liên kết tới URL nào? bạn điền địa chỉ muốn trỏ tới vào. Nếu muốn Mở liên kết trong cửa sổ mới thì tick vào ô đó, khi ấy khi người dùng click vào link họ sẽ được đưa sang tab mới, nói chung nếu là liên kết tới bài khác trên trang của bạn thì thường chúng ta không tick cái này, còn liên kết đến các trang web khác thì mới tick.

Riêng phần Thêm thuộc tính 'rel=nofollow' bạn không cần tick, trừ khi trang web bạn trỏ tới bạn cảm thấy không đáng tin tưởng thì mới làm vậy. Nhiều người lo sợ (trước đây mình cũng thế!) nếu không thêm nofollow vào thì sẽ ảnh hưởng đến SEO, bọ tìm kiếm sẽ sớm rời trang của mình. Thực tế thì ngược lại, nếu trong các bài viết bạn trỏ tới các trang bên ngoài chất lượng, trang của bạn sẽ được đánh giá cao hơn, do vậy không cần thêm nofollow.

Căn chỉnh Trái, Giữa, Phải cho văn bản và hình ảnh


Nếu bạn từng dùng ứng dụng văn phòng nào đó thì chức năng này chắc chắn không còn xa lạ.
Căn chỉnh văn bản, hình ảnh

Các tùy chọn là:
  • Căn trái: mặc định văn bản sẽ được căn trái, do vậy bạn chẳng cần làm gì thì văn bản đã được căn trái sẵn rồi. 
  • Căn giữa: trong hầu hết giao diện Blogspot, ảnh được căn giữa. Dĩ nhiên bạn cũng căn giữa được văn bản.
  • Căn phải: bạn sẽ hiếm khi sử dụng căn phải.
  • Căn đều: dùng cho văn bản, nó sẽ căn đều cả 2 phía.
Tôi sẽ lấy một đoạn văn bản mẫu để căn, bạn không cần quan tâm đến ý nghĩa của văn bản mà chỉ cần chú ý xem nó được căn như thế nào:
  • Căn giữa: Văn bản sẽ được đưa vào chính giữa
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dictum turpis ligula, ac posuere justo laoreet ut. Sed a interdum velit, ut iaculis nibh. Nam orci purus, malesuada id cursus vitae, porta eget quam. Nunc semper, lacus posuere iaculis rutrum, felis erat sollicitudin dolor, nec tristique quam ipsum id elit.
  • Căn phải:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dictum turpis ligula, ac posuere justo laoreet ut. Sed a interdum velit, ut iaculis nibh. Nam orci purus, malesuada id cursus vitae, porta eget quam. Nunc semper, lacus posuere iaculis rutrum, felis erat sollicitudin dolor, nec tristique quam ipsum id elit.
  • Căn đều: văn bản sẽ được căn đều ở cả 2 lề, bạn sẽ không còn thấy thò ra thụt vào ở cả 2 bên (trừ dòng cuối cùng).
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dictum turpis ligula, ac posuere justo laoreet ut. Sed a interdum velit, ut iaculis nibh. Nam orci purus, malesuada id cursus vitae, porta eget quam. Nunc semper, lacus posuere iaculis rutrum, felis erat sollicitudin dolor, nec tristique quam ipsum id elit.

Làm văn bản nổi bật với màu sắc và nền

Nếu bạn muốn làm nổi bật phần nào đó, bạn có thể làm đoạn đó có màu sắc khác đi. Chẳng hạn tôi muốn đoạn này phải được đánh dấu có màu đỏ. Hình dưới đây sẽ cho bạn biết làm thế nào, đơn giản chỉ là quét phần văn bản cần đánh dấu, nhấn vào nút A rồi chọn màu:

Màu sắc cho chữ

Tiếp theo là bút highlight, nó sẽ thay đổi nền của văn bản như thế này. Thao tác cũng giống phần trước:

Màu sắc cho nền chữ

Thay đổi kích thước và font chữ

Chẳng hạn tôi muốn đoạn này nổi bật hơn bằng cách tăng cỡ chữ lên. Để tăng cỡ chữ bạn nhấn vào nút TT rồi chọn kích cỡ mong muốn:

Thay đổi kích cỡ chữ

Chuẩn là kích cỡ mặc định của trang web, phía dưới là lớn dần, phía trên là nhỏ dần.

Thêm vào đó bạn có 7 tùy chọn font chữ khác nhau bao gồm Arial, Courier, Georgia, Helvetica, Times, Trebuchet và Verdana. Bạn chỉ cần nhấn vào biểu tượng chữ F rồi chọn font mong muốn:

Thay đổi font chữ

Muốn quay trở lại font ban đầu thì nhấn font chữ mặc định.

Dấu ngắt nhảy

Nếu bạn không dùng dấu ngắt nhảy thì sau khi post bài, bài viết của bạn sẽ trưng ra toàn bộ trên blog, dùng dấu ngắt, bài viết sẽ hiện ra phần để xem trước, muốn xem tiếp, độc giả cần ghé thăm trực tiếp. Đọc bài viết này để biết cách sử dụng.