OBin's Blog: blogger

New

Trong nội dung comment Blogger, có rất nhiều người sử dụng để post spam hoặc đặt link đen phá hoại website của bạn, vì thế người quản trị phải thường xuyên kiểm duyệt tốn nhiều thời gian. Để giải quyết vấn đề này một cách tự động, bạn làm theo những bước đơn giản sau:

Hướng dẫn tự động+ remove link out trong nội dung comment Blogger

1 - Tự động remove link out trong nội dung comment Blogger

- Đăng nhập trang quản trị Blogger.

- Chọn menu Template và click chọn Edit HTML

- Tìm tag </body> (Ctrl + F). và dán đoạn code sau vào trên nó:

<script> 
$('.comment-content a[rel$=nofollow]').replaceWith(function(){return ($(this).text());}); 
</script>

- Lưu lại và xem kết quả, đoạn script trên sẽ tự động remove toàn bộ link out mà người comment gắn vào nội dung của họ.

2 - Mở link ở một tab khác

Cách này sẽ giúp bạn tự động gắn thẻ target "_blank" để khi người dùng click vào link trong comment sẽ chuyển sang một tab mới.

- Đăng nhập trang quản trị Blogger.

- Chọn menu Template và click chọn Edit HTML

- Tìm tag </body> (Ctrl + F). và dán đoạn code sau vào trên nó:

<script> 
$(function(){
  $('.comment-content a[rel$=nofollow]').attr("target","_blank");
});
</script>

Lưu ý:
Srcipt dùng trong bài viết dùng Jquery nên bạn phải gắn thêm code Jquery nếu chưa có:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>

Chúc các bạn thành công!

Xem thêm:

- Hướng dẫn gắn nút like facebook cho blogger
- Top 20 template blogger cực đẹp, download miễn phí

- Tạo widget Bài Viết Mới Nhất (Recent Post) có ảnh thumbnail cho Blogger
- Hướng dẫn upload file js, css hay images lên Google Drive sử dụng cho Blogger hoặc website
- Ebook hướng dẫn cách tạo và chỉnh sửa một Blogger Templates
- Cách gắn breadcrumbs cho blogger
- Hướng dẫn gắn các thẻ meta OpenGraph vào blogger
- Hướng dẫn sửa lỗi cấu trúc dữ liệu (Structured Data) trong Blogger

Đối với một website có nhiều bài viết trích dẫn link nguồn hoặc link download thì việc tạo một trang chờ chuyển hướng là vô cùng quan trọng vì nó giúp giải quyết toàn bộ link out gây ảnh hưởng xấu đến SEO. Nhưng đối với blogger thì phải làm như thế nào? Sau đây mình xin chia sẻ cách làm cực kì đơn giản, cách làm này mình cũng thực hiện cho blog này :D

Hướng dẫn tạo trang chờ chuyển hướng ( Redirect Page ) cho blogger

Các bạn thực hiện theo các bước sau:

1 Tạo trang chờ chuyển hướng (Bạn làm theo các bước như trong hình)

Bạn đăng nhập admin Blogger => Chọn tab Trang => Chọn Tab Trang mới để tạo một trang mới

Tại tab tạo Trang mới bạn làm theo các bước như trong hình trên, bước 5 bạn copy đoạn code bên dưới:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
 function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}

var time = 20;
var page = getQueryVariable("t");
function countDown(){
time--;
gett("timecount").innerHTML = time;
if(time == -1){
window.location = page;
}
}
function gett(id){
if(document.getElementById) return document.getElementById(id);
if(document.all) return document.all.id;
if(document.layers) return document.layers.id;
if(window.opera) return window.opera.id;
}
function init(){
if(gett('timecount')){
setInterval(countDown, 1000);
gett("timecount").innerHTML = time;
}
else{
setTimeout(init, 50);
}
}
document.onload = init();

$(document).ready(function(){
 $('.link-out-btn').click(function(){
    window.location = page;
 });
 $('#linkout').text(page);
});

</script>
<br />
<div>
<h3>
Bạn vừa nhấp vào một liên kết không thuộc <b>www.obinb.com</b>, trang sẽ tự chuyển sang liên kết bạn vừa nhấp sau <span id="timecount"></span> giây!</h3>
<div>
Liên kết bạn muốn đến:</div>
<div>
<span id="linkout"></span></div>
<div class="link-out-btn">
Click vào đây để chuyển trang ngay và luôn!</div>
</div>

Lưu ý: Trong đoạn code trên
- var time = 20 nghĩa là thời gian chờ chuyển là 20 giây, bạn có thể thêm hoặc bớt
- Bạn sửa nội dung www.obinb.com theo ý bạn
- Styles page này bạn tự chỉnh tùy ý.

Sau đó bạn xuất bản page, khi xuất bản bạn được link có dạng như sau:

http://www.obinb.com/p/blog-page_3.html

2 Cách sử dụng

Cách sử dụng rất đơn giản, khi chèn link bạn chỉ cần thêm vào trước link out như sau:
Link out ban đầu : http://linkout-page.com
Link out sau khi thêm: http://www.obinb.com/p/blog-page_3.html?t=http://linkout-page.com
Nghĩa là sau khi click vào link out bạn vừa chèn, thì tự động chuyển sang trang chờ chuyển hướng bạn vừa tạo.
Các bạn có thể xem Demo

Rất đơn giản phải không nào? Chúc các bạn thành công!

Xem thêm:
- Hướng dẫn gắn nút like facebook cho blogger
- Top 20 template blogger cực đẹp, download miễn phí

Một blogger cần phải có nhiều kênh chia sẻ trong đó mạng xã hội Facebook là không thể thiếu. Để dễ dàng like và chia sẻ bài viết hay bạn chỉ cần đặt nút like tại trang chi tiết blog là được.
Sau đây là hướng dẫn nhanh cách gắn nút like (Like button) Facebook cho trang chi tiết blogger:

Bạn vào link sau để lấy code nút like Facebook: https://developers.facebook.com/docs/plugins/like-button

Điền đầy đủ các thông tin cần thiết như kích thước Width, bố cục (Layout) rồi nhấn Get Code, chú ý phần URL to Like bạn cứ để mặc định, khi gắn code vào template sẽ chỉnh lại sau.

Sau khi nhấn Get Code bạn được đoạn code sau:

<div id="fb-root"></div>
<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/sdk.js#xfbml=1&version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Đăng nhập Blogger => Template => Edit => Chèn đoạn code trên vào sau thẻ <body> trong template của bạn.

Bước tiếp theo là gắn nút like vào vị trí mong muốn của bạn, thường thì nút like nằm dưới cuối cùng bài viết trong thẻ <div class="post hentry...

Sau khi tìm đến vị trí cần đặt nút like bạn dán đoạn code này vào, nhấn Save là được.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb-like' data-action='like' data-layout='button_count' data-share='true' data-show-faces='false' expr:href='data:blog.url'></div>
</b:if>

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

Xem thêm:
- Top 20 template blogger cực đẹp, download miễn phí

- Các mẫu theme miễn phí tuyệt đẹp cho Blogger

- Tạo widget Bài Viết Mới Nhất (Recent Post) có ảnh thumbnail cho Blogger
- Hướng dẫn upload file js, css hay images lên Google Drive sử dụng cho Blogger hoặc website
- Ebook hướng dẫn cách tạo và chỉnh sửa một Blogger Templates
- Cách gắn breadcrumbs cho blogger
- Hướng dẫn tạo trang liên hệ cho Blogger
- Hướng dẫn gắn các thẻ meta OpenGraph vào blogger
- Hướng dẫn sửa lỗi cấu trúc dữ liệu (Structured Data) trong Blogger

Sau đây blog xin giới thiệu đến các blogger Top 20 template blogger cực đẹp, download miễn phí.
Với nhiều phong cách thiết kế khác nhau phù hợp với mọi loại hình website từ thời trang đến giải trí hoặc blog cá nhân.

1Elegant

Demo | Download

2Vanice

Demo | Download

3 Square Modern Magazine

Demo | Download

4 Gamer

Demo | Download

5 Inspiro

Demo | Download

6BlogStar

Demo | Download

7 Mini Magazine

Demo | Download

8Gridz

Demo | Download

9 Timeline

Demo | Download

10Sora Craft

Demo | Download

11 BlogMag

Demo | Download

12Perk Misty

Demo | Download

13Gagism

Demo | Download

14 Sorbet

Demo | Download

15Loveria

Demo | Download

16Addiction

Demo | Download

17 Sora Article

Demo | Download

18ShotMag

Demo | Download

19Magazine Easy News

Demo | Download

20 Flat Mag

Demo | Download

Xem thêm:
- Hướng dẫn gắn nút like facebook cho blogger

- Các mẫu theme miễn phí tuyệt đẹp cho Blogger

- Tạo widget Bài Viết Mới Nhất (Recent Post) có ảnh thumbnail cho Blogger
- Hướng dẫn upload file js, css hay images lên Google Drive sử dụng cho Blogger hoặc website
- Ebook hướng dẫn cách tạo và chỉnh sửa một Blogger Templates
- Cách gắn breadcrumbs cho blogger
- Hướng dẫn tạo trang liên hệ cho Blogger
- Hướng dẫn gắn các thẻ meta OpenGraph vào blogger
- Hướng dẫn sửa lỗi cấu trúc dữ liệu (Structured Data) trong Blogger

Bạn đang sử dụng Blogger và không muốn hiển thị một số nội dung của giao diện PC trên mobile hoặc ngược lại? Hướng dẫn sau sẽ giúp bạn biết cách detect giao diện mobile trên blogger để chỉnh giao diện hoặc đặt banner hay nội dung bất kì.

1 Sử dụng thuộc tính của widget:

Ví dụ ta có một widget BlogArchive như sau:

<b:widget id='BlogArchive1' title='Blog Archive' type='BlogArchive'>

Để nó có thể hiển thị trên mobile ta đặt thêm thuộc tính: mobile='yes':

<b:widget id='BlogArchive1' mobile='yes' title='Blog Archive' type='BlogArchive'>

Ngược lại để không hiển thị trên mobile ta đặt thuộc tính mobile='no' :

<b:widget id='Attribution1' mobile='no' title='Attribution' type='Attribution'>

Hoặc bạn cũng có thể đặt thuộc tính mobile='only' để widget chỉ hiển thị trên mobile:

<b:widget id='BlogArchive1' mobile='only' title='Blog Archive' type='BlogArchive'>

2 Sử dụng biến điều kiện boolean: data:blog.isMobile

Ví dụ:

  <b:if cond="data:blog.isMobile">
    <!-- Hiển thị text trên mobile -->
    <a href="http://www.obinb.com">
      Copyright www.obinb.com
    </a>
  <b:else/>
    <!-- Hiển thị hình ảnh trên desktop pc -->
    <a href="http://www.obinb.com">
      <img expr:src="data:fullButton" alt="Copyright www.obinb.com"/>
    </a>
  </b:if>

Lưu ý: Nếu bạn tắt giao diện mobile để sử dụng giao diện custom hoặc responsive thì bạn dùng code sau:

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<!-- Đặt nội dung muốn hiển thị trên mobile tại đây -->
<b:else/>
<!-- Đặt nội dung muốn hiển thị trên Pc tại đây -->
</b:if>

3 Sử dụng Class Css mobile mặc định:

Ví dụ ta đặt trong thẻ body như sau:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Sau đó ta sử dụng css để ẩn hoặc hiển thị một nội dung bất kì với từng giao diện:

/* Cho desktop pc */
.date-posts {
  display:none;
}

/* Cho mobile*/
.mobile .date-posts {
  display:block;
}

Vậy là bạn đã tham khảo xong 3 cách làm, chúc các bạn thành công!

Xem thêm:
- Tạo widget Bài Viết Mới Nhất (Recent Post) có ảnh thumbnail cho Blogger
- Hướng dẫn upload file js, css hay images lên Google Drive sử dụng cho Blogger hoặc website
- Ebook hướng dẫn cách tạo và chỉnh sửa một Blogger Templates
- Cách gắn breadcrumbs cho blogger
- Hướng dẫn tạo trang liên hệ cho Blogger
- Hướng dẫn gắn các thẻ meta OpenGraph vào blogger
- Hướng dẫn sửa lỗi cấu trúc dữ liệu (Structured Data) trong Blogger

Mặc định Blogger không có sẵn widget Bài Viết Mới Nhất (Recent Post) nhưng chỉ cần vài thao tác đơn giản sau bạn sẻ tạo ra một widget có chức năng tương tự.

1 Đầu tiên bạn đăng nhập Blogger, chọn Layout, click Add Widget tại vị trí bạn muốn đặt widget, trong bài viết này là cột phải hoặc trái (style được viết cho dạng cột).
Khi cửa sổ Widget mở ra bạn chọn HTML/Javascript

Trong khung nhập nội dung bạn copy đoạn code dưới đây là paste vào:

<script style="text/javascript" src="http://yourjavascript.com/2151392498/recentposts.js"></script>
<script style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>

Trong đó, bạn có thể cài đặt các thông số sau theo ý mình:

- posts_no là số bài được hiển thị
- showpoststhumbs là cài đặt ảnh đại diện bài viết ( true là có, false là không)
- readmorelink là cài đặt link xem thêm ( true là có, false là không)
- showcommentslink là cài đặt link comment ( true là có, false là không)
- posts_date là cài đặt thời gian bài viết ( true là có, false là không)
- post_summary là cài đặt đoạn mô tả ngắn trích từ nội dung bài viết ( true là có, false là không)
- summary_chars là độ dài của mô tả, tính bằng số kí tự

2 Bạn vào mục Template chọn Edit HTML, copy đoạn code dưới đây paste vào trước thẻ </head> trong template:

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb {padding:2px;width:65px;height:65px;float:left;margin: 0px 10px 10px; background: #fff; border: 1px solid #69B7E2;}
.recent-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin-bottom: 5px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 15px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;padding: 4px 10px; border-radius: 100%;}
.recent-posts-container a { text-decoration:none; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #2aace3;}
.recent-posts-details {margin: 5px 0px 0px 92px; }
.recent-posts-details a{ color: #777;}
</style>

Bạn có thể chỉnh sửa lại style và font chữ theo ý mình, trong style này sử dụng font Oswald của Google Fonts.
Các bạn nhấn Lưu và xem kết quả nhé!

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

Xem thêm:
- Hướng dẫn upload file js, css hay images lên Google Drive sử dụng cho Blogger hoặc website
- Ebook hướng dẫn cách tạo và chỉnh sửa một Blogger Templates
- Cách gắn breadcrumbs cho blogger
- Hướng dẫn tạo trang liên hệ cho Blogger
- Hướng dẫn gắn các thẻ meta OpenGraph vào blogger
- Hướng dẫn sửa lỗi cấu trúc dữ liệu (Structured Data) trong Blogger

Hướng dẫn upload file js, css hay images lên Google Drive sử dụng cho Blogger hoặc website. Các bước thực hiện khá đơn giản. Ưu điểm là host nhanh, có thể chỉnh sửa file trực tiếp trên host, quản lý file dễ dàng và đặc biệt là hoàn toàn miễn phí.

Đầu tiên bạn phải có tài khoản Google, đăng nhập vào link drive.google.com

Sau khi đăng nhập Google Dive, bạn tiến hành tạo folder chưa file cần upload

Sau khi tạo folder bạn tiến hành share folder đó để sử dụng như một hosting, làm theo thứ tự như trong hình từ trên xuống:

Sau khi đã bật chế độ public cho folder, bạn tiến hành mở folder đó ra và upload file. Sau khi upload file bạn lấy id của file như sau:

Bạn copy đường dẫn và dán vào thanh địa chỉ :

Ví dụ: https://drive.google.com/open?id=0ByZ5fZboLO6CWVpefWi12NU1ER2s

Đoạn text được bôi đỏ là id của file, bạn copy phần này lại.

Dán vào thay cho phần files_id trong link bên dưới

https://googledrive.com/host/files_id

Sẻ thành link file host có thể sử dụng trên blog hoặc website như sau:

https://googledrive.com/host/0ByZ5fZboLO6CWVpefWi12NU1ER2s

Với link này bạn có thể chèn vào web dễ dàng, ví dụ với file js như sau:

<script src="https://googledrive.com/host/0ByZ5fZboLO6CWVpefWi12NU1ER2s" type="text/javascript"></script>

Lưu ý: Nếu bạn chỉ muốn share file không phải folder thì cách share file cũng tương tự.

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

Xem thêm:
- Tạo widget Bài Viết Mới Nhất (Recent Post) có ảnh thumbnail cho Blogger
- Ebook hướng dẫn cách tạo và chỉnh sửa một Blogger Templates
- Cách tạo và thêm sitemap vào Webmaster cho Blogger

Ebook hướng dẫn cách tạo Blogger Template, Ebook bằng tiếng Anh gồm 8 chương hướng dẫn các bạn thiết kế custom một giao diện Blogger.

Chapter 1 Blogger Template Structure
Chapter 2 Template Header
Chapter 3 Template body and API's
Chapter 4 Inside widget - "Includable"
Chapter 5 Blogger data tags 1
Chapter 6 Blogger data tags 2
Chapter 7 How Blogger widget work
Chapter 8 General steps of making a Blogger template

Tác giả ebook: TheSimplexDesign blog

Download miễn phí tại đây:

Nếu bạn là một người am hiểu về SEO thì khái niệm Structured Data thì không phải bàn, trong webmaster bạn sẻ thấy phần Structured Data của Blogger luôn có những lỗi phổ biến như: "Missing Required Field Updated Error", "Page Contains Property "image_url" Which Is Not Part of The Schema Error", "Page Contains Property blogid, postid Which Is Not Part of The Schema Error". Sau đây là hướng dẫn nhanh giúp các bạn fix những lỗi này giúp cho việc SEO Blogger tốt hơn.

1. Fix lỗi "Missing Required Field Updated Error"
Đăng nhập blogger => Templates => Edit => Ctrl + F tìm đoạn code sau:

<data:post.timestamp/>

Thay bằng đoạn code sau:

<span class='updated'><data:post.timestamp/></span>

Lưu ý: Bạn phải thực hiện 2 lần việc này.

Sau đó lưu lại vào Google Webmaster để kiểm tra lại.

2. Fix lỗi "Page Contains Property "image_url" Which Is Not Part of The Schema Error"
Đăng nhập blogger => Templates => Edit => Ctrl + F tìm đoạn code sau:

<meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>

Thay bằng đoạn code sau:

<meta expr:content='data:post.firstImageUrl' itemprop='image'/>

- Sau đó lưu lại vào Google Webmaster để kiểm tra lại.

3. Fix lỗi "Page Contains Property blogid, postid Which Is Not Part of The Schema Error"
Lỗi này gồm 2 lỗi nhỏ là:

Error: Page contains property "blogid" which is not part of the schema.
Error: Page contains property "postid" which is not part of the schema.

Ta thực hiện fix như sau:
- Đầu tiên: Backup template của bạn
- Tìm 2 dòng code sau và xóa nó đi:

<meta expr:content='data:blog.blogId' itemprop='blogId'/>
<meta expr:content='data:post.id' itemprop='postId'/>

- Sau đó lưu lại vào Google Webmaster để kiểm tra lại.

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

Trong blogger thường hỗ trợ sẵn khung comment bằng tài khoản Google và nhiều openid khác nhau nhưng không hỗ trợ comment Facebook, vì vị muốn thêm comment Facebook bạn phải tự tay làm. Nhưng cũng không khó lắm đâu các bạn, chỉ cần làm theo các bước sau là bạn cũng có thể làm dễ dàng.

Bước 1: Đăng nhập blogger => Template => Edit HTML => Tìm (Ctrl + F) đoạn <html và thành <html xmlns:og='http://ogp.me/ns#'

Bước 2: Tìm <body> thêm đoạn code sau vào:

<div id="fb-root"></div>
    <script>
    window.fbAsyncInit = function() {
    FB.init({
    appId : 'YOUR_APP_ID',
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml : true // parse XFBML
    });
    };
    (function() {
    var e = document.createElement('script');
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
    }());
    </script

Thay YOUR_APP_ID thành App ID của bạn

Bước 3: Tìm thẻ <head> thêm vào bên dưới đoạn code sau:
<meta property = "fb:app_id" content= "YOUR_APPLICATION_ID" />Thay YOUR_APP_ID thành App ID của bạn

Bước 4: Tìm đoạn code sau: <div class='post-footer-line post-footer-line-2'>

Dán đoạn code sau vào bên dưới:

<b:if cond='data:post.isFirstPost'>   
<script>(function(d){
 var js, id = &#39;facebook-jssdk&#39;; if (d.getElementById(id)) {return;}
 js = d.createElement(&#39;script&#39;); js.id = id; js.async = true;
 js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
 d.getElementsByTagName(&#39;head&#39;)[0].appendChild(js);
}(document));</script>
</b:if>
<a expr:href='data:post.url + &quot;#fb-root&quot;'><fb:comments-count expr:href='data:post.canonicalUrl'/> comments</a>

Bước 5: Tìm <div class='post-footer-line post-footer-line-3'>
Dán đoạn code sau vào bên dưới:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<script>(function(d){
 var js, id = &#39;facebook-jssdk&#39;; if (d.getElementById(id)) {return;}
 js = d.createElement(&#39;script&#39;); js.id = id; js.async = true;
 js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
 d.getElementsByTagName(&#39;head&#39;)[0].appendChild(js);
}(document));</script>
<div style='margin: 20px 0 0 0;'><fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='900'/></div>
</b:if>

Sau đó các bạn lưu lại và chạy thử trong trang chi tiết bài viết xem kết quả nhé.

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

Graph Meta là thẻ meta không thể thiếu khi bạn muốn làm SEO web thông qua mạng xã hội Facebook, nhưng đối với một blogger thì thế nào? Sau đây là hướng dẫn các bạn cách gắn thể Graph Meta đơn giản nhất.

1 Vào Template => Edit Template => Ctr + F tìm thẻ <html

=> Chèn code định dạng dưới vào như sau: <html codehere>

xmlns:og='http://ogp.me/ns#

2 Ctr + F tìm <title><data:blog.pageTitle/></title> chèn đoạn code sau lên trên:

<!-- Open Graph Meta Tags begin -->

    <meta expr:content='data:blog.pageTitle' property='og:title'/>

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

    <b:if cond='data:blog.postImageThumbnailUrl'>

      <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>

    </b:if>

    </b:if>

    <b:if cond='data:blog.pageType != &quot;item&quot;'><meta content='linkDefaultImageOg.jpg' property='og:image'/></b:if>

    <meta expr:content='data:blog.title' property='og:title'/>

    <meta expr:content='data:blog.canonicalUrl' property='og:url'/>

    <b:if cond='data:blog.metaDescription'>

      <meta expr:content='data:blog.metaDescription' property='og:description'/>

    </b:if>

    <meta content='61737022491256' property='fb:app_id'/> <!-- App id facebook  Nếu bạn không có thì xóa dòng này-->

    <!-- Open Graph Meta Tags end-->

3 Sửa những nội dung mặc định thành của website bạn và lưu lại.

- linkDefaultImageOg.jpg = Link hình ảnh mặc định của blog
- 61737022491256 = app id Facebook

Thử like hoặc share một nội dung nào đó trên trang bạn xem, bài viết sẻ được hiển thị đầy đủ gồm có Title, images, description, link => Bạn đã thành công!

Xem thêm:
- Ebook hướng dẫn cách tạo và chỉnh sửa một Blogger Templates
- Hướng dẫn sửa lỗi cấu trúc dữ liệu (Structured Data) trong Blogger
- Hướng dẫn gắn nhanh comment Facebook cho blogger
- Tạo widget Bài Viết Mới Nhất (Recent Post) có ảnh thumbnail cho Blogger

Tạo và thêm sitemap vào Webmaster trong Blogger là một bước trong quá trình làm SEO cho blog của bạn. Sau đây mình sẻ hướng dẫn cách tạo sitemap đơn giản cho blogger:

Bước 1: Tạo sitemap
Thực ra sitemap trong blogger đã có sẵn, bạn chỉ cần móc nó ra sử dụng thôi
Bạn copy đoạn text sau:

User-agent: *
Disallow: /search
Allow: /
 
Sitemap: http://yourblogger.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500

dashboard >> settings >> search preferences

dashboard >> settings >> search preference

Đăng nhập vào admin blogger -> dashboard >> settings >> search preferences -> Paste vào khung robots.txt:

Sau đó nhấn nút Save Changes

Bước 2: Submit Blogger sitemap của bạn trong Google webmaster tools -> add/test sitemaps:

 Sau đó bạn nhấn nút Submit sitemap để hoàn tất.

Mặc định Blogger không có trang liên hệ mà chỉ có gadget form liên hệ, nhưng chỉ cần vài bước đơn giản bạn cũng có thể làm một trang liên hệ riêng cho blog của mình.

Các bạn làm theo các bước sau:

1. Tạo form liên hệ bằng gadget:
Bạn đăng nhập admin => Bố cục => Chọn 1 vị trí bất kì để đặt gadget, chọn Thêm tiện ích => Tiện ích khác => Biểu mẫu liên hệ như trong hình

Điền thông tin cơ bản rồi nhấn Lưu lại

2. Ẩn Form liên hệ tại vị trí vừa Add:
Bạn vào Template => Edit HTML => Search và xóa đoạn code được bôi đỏ bên dưới:

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>

    <b:includable id='main'>

  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
       
 <input class='contact-form-name' expr:id='data:widget.instanceId + 
&quot;_contact-form-name&quot;' name='name' size='30' 
type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
       
 <input class='contact-form-email' expr:id='data:widget.instanceId + 
&quot;_contact-form-email&quot;' name='email' size='30' 
type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
       
 <textarea class='contact-form-email-message' cols='25' 
expr:id='data:widget.instanceId + 
&quot;_contact-form-email-message&quot;' name='email-message' 
rows='5'/>
        <p/>
        <input 
class='contact-form-button contact-form-button-submit' 
expr:id='data:widget.instanceId + 
&quot;_contact-form-submit&quot;' 
expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
         
 <p class='contact-form-error-message' 
expr:id='data:widget.instanceId + 
&quot;_contact-form-error-message&quot;'/>
          <p
 class='contact-form-success-message' expr:id='data:widget.instanceId + 
&quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>

</b:includable>

  </b:widget>

Sau đó bạn nhấn Lưu

3. Tạo trang liên hệ:
Bạn vào Pages => Tạo trang mới => mở khung soạn thảo ở chế độ HTML sau đó dán đoạn code bên dưới vào rồi nhấn Lưu

<div class='widget ContactForm' id='ContactForm1'>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p>Name</p>
        <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
        <p>E-mail *</p>
        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
        <p>Message *</p>
        <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
        <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit'/>
        <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
        <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
      </form>
    </div>
  </div>
</div>

Lưu ý: Trước khi nhấn lưu bạn nhớ đặt tên cho trang ví dụ như "Liên hệ" và cài đặt tùy chọn không cho phép Comment.

4. Style cho trang liên hệ:
Bạn vào Template => Edit HTML => Search "</b:skin>" và dán đoạn code này bên trong.

.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}
.contact-form-button-submit:hover{
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;
}

Sau đó nhấn Lưu và xem kết quả :

Lưu ý: Link trang liên hệ là link trang bạn vừa tạo nhé.

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

Xem thêm:
- Hướng dẫn gắn nút like facebook cho blogger
- Top 20 template blogger cực đẹp, download miễn phí

Có thể bạn quan tâm

Xem nhiều trong tuần

Giải đáp