Thư viện

Trải nghiệm

Thứ Năm, tháng 4 03, 2014

Thêm Google plus follow Popup cho blogspot

Tạo một Popup để độc giả đăng ký Google plus và thêm bạn vào vòng kết nối, theo dõi nhận tin.

Chia sẻ:
Là quản trị của một blogger hẳn bạn đang cố gắng để tăng lượng độc giả, thứ hạng cho trang blog của bạn. Có hàng ngàn lời khuyên và thủ thuật để giúp tăng lưu lượng truy cập cho trang của bạn khiến cho bạn khó khăn trọng việc lựa chọn cách thích hợp.

Nhiều người ngĩ đến sử dụng vòng kết nối Google +, tuy nhiên tiện ích Google + tĩnh do blogger cung cấp vẫn còn khá đơn giản chưa tạo được tính đột phá, phong cách riêng và đặc biệt là không có sức hút với độc giả khi họ truy cập vào trang của bạn. Vì vậy, trong bài viết này Namkna sẽ chia sẻ với các bạn một thủ mới, với thủ thuật này khi có người truy cập vào trang của bạn thì sẽ xuất hiện một popup ngay trên trang họ truy cập, qua đó độc giả có thể đăng ký theo dõi nhận tin thông qua tài khoản google + của bạn (cũng giống như đăng ký feedbunner).
Thêm Google plus follow Popup cho blogspot

Các bạn cũng có thể xem demo ở link bên dưới:

» VIEW DEMO


» Tại sao vòng kết nối của Google + lại quan trọng với blog của bạn.


Như chúng ta biết Google pluss đóng một vai trò khá quan trọng trong SEO blogger blog. Nó có thể làm tăng lượng độc giả cho trang của bạn một cách nhanh chóng thông qua vòng kết nối của Google +. Nó làm bài viết của bạn đến được với nhiều người hơn thông qua mối quan hệ có tính ràng buộc lẫn nhau giữa những người trong vòng kết nối của bạn và với bạn bè của họ trên goggle +. Bất cứ khi nào bạn đăng một viết của bạn lên google + nó sẽ gửi một thông báo tới tất cả bạn bè của bạn, đồng thời những người trong vòng kết nối của bạn bè bạn cũng có thể nhận được thông tin này (sức lan tỏa và truyền tải quá tuyệt vời phải không cac bạn).

Điều này hiệu quả càng lơn nếu số lượng bạn bè của bạn trên Google + càng nhiều. Bây giờ câu hỏi đặt ra là làm như thế nào để nhiều người thêm bạn vào trong vòng kết nối của họ. Tiện ích popup hôm nay namkna giới thiệu đến các bạn sẽ giúp các bạn có thể đẩy nhanh tiến trình đó, bạn sẽ nhận thấy hiệu quả tuyệt vời của nó khi áp dụng nó vào trang blog của bạn.

Đây là một tiện ích đơn giản sử dụng mã css và javascript. Đến đây hẳn nhiều người sẽ lo ngại một điều là Javascripts sẽ sẽ làm tăng thời gian tải trang của bạn hơn so với trước đây. Nhưng với thủ thuật này bạn hoàn toàn có thể yên tâm sử dụng bởi mã javascript được tối ưu nên rất gọn gàng để không ảnh hưởng nhiều đến tốc độ trang của bạn, bạn sẽ nhận thấy không quá nhiều sự thay đổi lớn nào khi áp dụng thủ thuật này trên trang của bạn.

» Các tính năng nổi bật

Tiện ích này có rất nhiều tính năng nổi trội, một trong những tính năng nổi bật nhất được xem là ưu điểm chính của thủ thuật này được mình liệt kê dưới đây bạn có thể đọc để tìm hiểu thêm.

  • Không bao giờ tải blog và tiện ích này cùng lúc (bạn có thể khi truy cập chỉ tải tiện ích hoặc bài viết), do vậy sẽ giúp trang của bạn tải nhanh hơn.
  • Thiết kế đẹp và đơn giản, dễ dàng tùy biến theo phong cách riêng của từng người.
  • Tự động xuất hiện trước màn hình dưới dạng popup khi dộc giả truy cập vào trang của bạn.
  • Có tính kích thích độc giả thêm bạn vào trong vòng kết nối của họ.
  • Hiển thị danh sách những người đã thêm bạn vào kết nối của họ (bạn có thể tìm thấy bạn bè của bạn ở đó).
  • Có một nút bỏ qua (Skip To Continue) nếu độc giả muốn tắt hộp pupup đó đi để vào đọc bài viết.

» Làm thế nào để thêm Popup chưa Google plus follow cho blogspot

1. Đăng nhập vào bảng điều khiển trang blog của bạn.
2. Vào phần Mẫu (Template)
3. Bấm chọn Thêm tiện ích (Add Widget) => Chọn tạo một tiện ích HTML/Javascripts và dán đoạn code bên dưới vào phần nội dung của tiện ích vừa tạo.
<style type="text/css">
* html #popupgooogle{position:absolute;}
#popupgooogle{display:block;top:0px;left:0px;width:100%;height:100%;position:fixed;background:#ddd;margin:0;overflow-y:auto;}
#popgoogle{z-index:9999;background:#fff;overflow:none;}
.popgoogle{width:400px;height:440px;position:fixed;top:45%;left:50%;margin-top:-220px;margin-left:-200px; border:10px solid #999;padding:20px;}
.exe-title {background:#000;color:#fff;font-size:20px !important;font-weight:bold;margin:5px 0;border:15px solid #ddd;padding:10px;line-height:25px;font-family:arial!important;}
</style>
<!--[if lte IE 6]>
<style type="text/css">
/*<![CDATA[*/
html {overflow-x:auto; overflow-y:hidden;}
/*]]>*/
</style>
<![endif]-->
<div id="popupgooogle">
<div id="popgoogle" class="popgoogle">
<center><h3 class="exe-title">Theo dõi các bài viết mới thông qua Google + Bằng cách click vào nút Follow</h3></center>
<center>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/u/0/106326556171217599260" data-source="blogger:blog:followers" data-width="310">
</div>
<script type="text/javascript">
(function() {
window.___gcfg = {'lang': 'en'};
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</center>
<br />
<center style=" float:right; margin-right:35px; font-size:10px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://namkna.blogspot.com/">Namkna</a></center>
<center style=" float:left;font-size:10px;cursor:pointer;margin-left:35px" ><a style=" font-size:9px; color:#3B78CD; text-decoration:none;" onmouseup="document.getElementById('popupgooogle').style.display='none'">Skip To Continue</a></center>
</div>
</div>
» Tùy chỉnh code:
  • Thay đoạn https://plus.google.com/u/0/106326556171217599260 thành URL trang google + của bạn.
  • Tiện ích này được cài đặt mặc định ngôn ngữ là tiếng anh (các bạn có thể thấy trong hình ảnh minh họa ở đầu bài viết) Nếu muốn chuyển sang ngôn ngữ là tiếng việt rất đơn giản bạn chỉ cần đổi đoạn window.___gcfg = {'lang': 'en'}; thành window.___gcfg = {'lang': 'vi'}; với vi là viết tắt của vietnamese (tiếng việt).
  • Skip to Continue là nút bấm tắt hộp Popup để vào đọc bài viết.

4. Lưu mẫu lại và kiểm tra kết quả đã thực hiện nha.
Nếu gặp bất kỳ khó khăn hay vướng mắc nào khi áp dung thủ thuật này, đừng ngần ngại hãy để lại comment của bạn ở phần nhận xét mình sẽ hỗ trợ bạn trong thời gian sớm nhất.

8 nhận xét:

  1. Cám ơn bạn đã chia sẻ bài viết thủ thuật hay này.
    Mình làm theo hướng dẫn của bạn và thành công rồi

    dich vu bao ve tphcm - công ty bảo vệ , dịch vụ bảo vệ

    Trả lờiXóa
  2. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  3. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  4. có thể cho nó hiện lên 1 lần duy nhất khi người đọc truy cập vào blog đc ko? chứ thế này khi người ta bấm vào bài viết khác..v.v...thì nó vẫn xuất hiện đều đều....

    Trả lờiXóa
    Trả lời
    1. bài viết này mình không thêm cookie hiện một lần để tối ưu tốc độ bạn ak.

      Xóa
  5. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  6. b có thể chỉnh sửa code lại để cho popup này chỉ hiện ở 1 góc phải-trái màn hình đc ko? m ko thích kiểu popup toàn trang thế này...rất mong b giúp...thank b nhiều

    Trả lờiXóa
    Trả lời
    1. 1. Nếu bạn muốn bỏ phần nền màu xám khi hiện pop thì bạn xóa đoạn bên dưới:

      #popupgooogle{display:block;top:0px;left:0px;width:100%;height:100%;position:fixed;background:#ddd;margin:0;overflow-y:auto;}


      2. Để căn chỉnh popup Bạn chú ý cho mình đoạn này:

      .popgoogle{width:400px;height:440px;position:fixed;top:45%;left:50%;margin-top:-220px;margin-left:-200px; border:10px solid #999;padding:20px;}

      Bạn có thể sửa top:45%;left:50% lại cho thích hợp ví dụ:

      - để căn chinh góc dưới cùng bên trái:

      .popgoogle{width:400px;height:440px;position:fixed;bottom:0;left:0;margin-top:-220px;margin-left:-200px; border:10px solid #999;padding:20px;}

      - để căn góc dưới cùng bên phải:

      .popgoogle{width:400px;height:440px;position:fixed;bottom:0;right:0;margin-top:-220px;margin-left:-200px; border:10px solid #999;padding:20px;}

      - Trên cùng bên trái:

      .popgoogle{width:400px;height:440px;position:fixed;top:0;left:0;margin-top:-220px;margin-left:-200px; border:10px solid #999;padding:20px;}

      - Trên cùng bên phải:
      .popgoogle{width:400px;height:440px;position:fixed;top:0;right:0;margin-top:-220px;margin-left:-200px; border:10px solid #999;padding:20px;}


      - Ngoài ra width:400px;height:440px chính là độ rộng khung pop hiện lên đó nha.

      Xóa