Thêm Google+ Badge vào blog của bạn

Google Plus Badge sẽ giúp bạn liên kết trang Google+ của bạn tới trang web của bạn. Nhận thêm đề xuất cho trang web của bạn trên tìm kiếm của Google và tăng lượng người xem của bạn trên Google+. Bây giờ chúng ta cùng tìm hiểu cách làm nhé.

#1-Dạng biểu tượng

1. Đăng nhập Blogger
2. Bố cục > Thêm tiện ích > HTML/Javascipt
3. Dán một trong các code dưới vào, có 3 kích thước cho các bạn lựa chọn

<!-- Đặt mã này vào nơi bạn muốn huy hiệu hiển thị -->
<a href="https://plus.google.com/u/0/117801693701287084969?prsrc=3"
   rel="publisher" target="_top" style="text-decoration:none;display:inline-block;color:#333;text-align:center; font:13px/16px arial,sans-serif;white-space:nowrap;">
<img src="//ssl.gstatic.com/images/icons/gplus-64.png" alt="" style="border:0;width:64px;height:64px;"/><br />
<span style="font-weight:bold;">Khanh Blog</span><br /><span>trên Google+</span>
</a>

<!-- Đặt mã này vào nơi bạn muốn huy hiệu hiển thị -->
<a href="https://plus.google.com/u/0/117801693701287084969?prsrc=3"
   rel="publisher" target="_top" style="text-decoration:none;display:inline-block;color:#333;text-align:center; font:13px/16px arial,sans-serif;white-space:nowrap;">
<img src="//ssl.gstatic.com/images/icons/gplus-32.png" alt="" style="border:0;width:64px;height:64px;"/><br />
<span style="font-weight:bold;">Khanh Blog</span><br /><span>trên Google+</span>
</a>

<!-- Đặt mã này vào nơi bạn muốn huy hiệu hiển thị -->
<a href="https://plus.google.com/u/0/117801693701287084969?prsrc=3"
   rel="publisher" target="_top" style="text-decoration:none;display:inline-block;color:#333;text-align:center; font:13px/16px arial,sans-serif;white-space:nowrap;">
<img src="//ssl.gstatic.com/images/icons/gplus-16.png" alt="" style="border:0;width:64px;height:64px;"/><br />
<span style="font-weight:bold;">Khanh Blog</span><br /><span>trên Google+</span>
</a>

Lưu ý: Nhớ thay 117801693701287084969 thành ID Profile G+ của bạn

#2-Dạng huy hiệu

#2.1-Dạng huy hiệu đứng

1. Đăng nhập Blogger
2. Bố cục > Thêm tiện ích > HTML/Javascipt
3. Dán code dưới vào
3.1 - Code dạng đầy đủ

Dạng đầy đủ

<!-- Đặt thẻ này vào nơi bạn muốn tiện ích con kết xuất. -->
<div class="g-person" data-width="180" data-href="//plus.google.com/u/0/117801693701287084969" data-rel="author"></div>

<!-- Đặt thẻ này sau thẻ tiện ích con cuối cùng. -->
<script type="text/javascript">
  window.___gcfg = {lang: 'vi'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

3.2 - Dạng không ảnh bìa

<!-- Đặt thẻ này vào nơi bạn muốn tiện ích con kết xuất. -->
<div class="g-person" data-width="180" data-href="//plus.google.com/u/0/117801693701287084969" data-showcoverphoto="false" data-rel="author"></div>

<!-- Đặt thẻ này sau thẻ tiện ích con cuối cùng. -->
<script type="text/javascript">
  window.___gcfg = {lang: 'vi'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

3.3 - Dạng Không khẩu hiệu cá nhân

<!-- Đặt thẻ này vào nơi bạn muốn tiện ích con kết xuất. -->
<div class="g-person" data-width="180" data-href="//plus.google.com/u/0/117801693701287084969" data-showtagline="false" data-rel="author"></div>

<!-- Đặt thẻ này sau thẻ tiện ích con cuối cùng. -->
<script type="text/javascript">
  window.___gcfg = {lang: 'vi'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

3.4 - Dạng không khẩu hiệu cá nhân, không ảnh bìa

<!-- Đặt thẻ này vào nơi bạn muốn tiện ích con kết xuất. -->
<div class="g-person" data-width="180" data-href="//plus.google.com/u/0/117801693701287084969" data-showtagline="false" data-showcoverphoto="false" data-rel="author"></div>

<!-- Đặt thẻ này sau thẻ tiện ích con cuối cùng. -->
<script type="text/javascript">
  window.___gcfg = {lang: 'vi'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

3.5 - Dạng màu đen
Với các dạng trên thì nó đều có bản màu đen, bạn có thể điều chỉnh cho các huy hiệu trên trở thành màu đen bằng cách thêm thuôc tính data-theme="dark" vào thẻ DIV đầu tiên trong code.
Ví dụ với code 3.1:

<!-- Đặt thẻ này vào nơi bạn muốn tiện ích con kết xuất. -->
<div class="g-person" data-width="180" data-href="//plus.google.com/u/0/117801693701287084969" data-rel="author" data-theme="dark"></div>

<!-- Đặt thẻ này sau thẻ tiện ích con cuối cùng. -->
<script type="text/javascript">
  window.___gcfg = {lang: 'vi'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Như vậy là bạn sẽ có phiên bản màu đen

#2.2-Dạng huy hiệu nằm ngang

1. Đăng nhập Blogger
2. Bố cục > Thêm tiện ích > HTML/Javascipt
3. Dán code dưới vào
3.1 - Màu trắng

<!-- Đặt thẻ này vào nơi bạn muốn tiện ích con kết xuất. -->
<div class="g-person" data-width="273" data-href="//plus.google.com/u/0/117801693701287084969" data-layout="landscape" data-rel="author"></div>

<!-- Đặt thẻ này sau thẻ tiện ích con cuối cùng. -->
<script type="text/javascript">
  window.___gcfg = {lang: 'vi'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

3.2 - Màu đen

<!-- Đặt thẻ này vào nơi bạn muốn tiện ích con kết xuất. -->
<div class="g-person" data-width="273" data-href="//plus.google.com/u/0/117801693701287084969" data-layout="landscape" data-rel="author" data-theme="dark"></div><!-- Đặt thẻ này sau thẻ tiện ích con cuối cùng. -->
<script type="text/javascript">
  window.___gcfg = {lang: 'vi'};

  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

#3-Lưu ý

1. Thay 117801693701287084969 thành ID profile G+ của bạn
2. Thay data-width="273" hay data-width="180" thành chiều rộng bạn mong muốn.
Với huy hiệu dạng đứng thì chiều rộng nhỏ nhất là 180 và lớn nhất là 1600
Với huy hiệu dạng nằm thì chiều rộng nhỏ nhất là 273 và lớn nhất là 1600