Thêm tiện ích bài viết liên quan dùng google custom cho blogspot

VIEW:

BÀI LIÊN QUAN

Hôm nay lượn lờ thấy tiện ích này hay nên share lại cho mọi người, là một công cụ tuyệt với để có được những bài viết liên quan tới bài post của bạn và lại tăng lượt tương tác với google giúp SEO tốt hơn.

Tạo bài viết liên quan bằng google cse

Bước 1: Đăng ký với Google Custom Search Engine

Vào trang này: https://cse.google.com.vn/cse/ 

Đăng kí một tài khoản và tạo công cụ seach cho website của bạn.

Kích tạo công cụ mới

Bước 2: Điền thông tin của bạn vào:

Điền thông tin đăng kí vói google cse

Bước 3: Kích nhận mã.

Nhận mã công cụ tìm kiếm

Bước 4: Đoạn mã bạn nhận được sẽ tương tự như vậy: 

<script>
  (function() {
    var cx = '016234834991653671290:xjqsx6kubcy';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

Thứ bạn cần có là cái này: 016234834991653671290:xjqsx6kubcy đây là ID của ứng dụng seach google tạo cho website của bạn.

Bước 5: Vào chỉnh sửa Template của blogspot, chỉnh sủa HTML. Thêm đoạn mã css này trước thẻ dóng ]]></b:skin>

thangbme.com

.thangshare{height:346px;margin-bottom:20px;border:1px solid #e6e6e6}
.thangshare h7.heading{font-size: 27px;margin-bottom: 0;background: #666;display: block;padding: 10px;color: #fff;font-weight: bold;}
.thangshare table td,table th{border-width:0;padding:5px 10px}
.thangshare .gsc-webResult .gsc-result{padding:0!important}
.thangshare .gsc-cursor{width:100%;text-align:center;float:left;font-size:20px;margin-top:15px}
.thangshare .gs-result .gs-title,.quan-tam .gs-result .gs-title *{font-weight:bold; text-decoration:underline!important;color:#e72828!important;font-family:tahoma}
.thangshare .gs-result .gs-title a{text-decoration:underline!important;color:#e72828!important}
.thangshare .gs-result a.gs-visibleUrl,.quan-tam .gs-result .gs-visibleUrl{font-weight:700}
.thangshare .gs-bidi-start-align.gs-snippet{line-height:20px;margin:5px 0 0}
.thangshare .gsc-results.gsc-webResult{width:100%}
.thangshare .gsc-search-box,.quan-tam .gsc-above-wrapper-area,.quan-tam .gsc-resultsHeader,.quan-tam .gcsc-branding{display:none}

Bước 6: Đặt đoạn code hiển thị bài viết liên quan này ở vị trí bạn muốn hiển thị, lời khuyên là hãy đặt sau thẻ  <p><data:post.body/></p>. Nhớ thay 016234834991653671290:xjqsx6kubcy thành ID của bạn

thangbme.com

<div class="thangshare">
<h3 class="heading">Ban nen xem</h3>
<div id='cse-search-form' style='width: 100%;height:300px;overflow-y: scroll;'>Loading...</div>
<script src='http://www.google.com/jsapi' type='text/javascript'></script>
<script type='text/javascript'>
google.load('search', '1', {language: 'vi'});
google.setOnLoadCallback(function() {
var customSearchControl = new google.search.CustomSearchControl("016234834991653671290:xjqsx6kubcy");
customSearchControl.setResultSetSize(google.search .Search.FILTERED_CSE_RESULTSET);
customSearchControl.draw('cse-search-form');
customSearchControl.execute("<data:blog.title/>");
}, true);
</script>
</div>

Xong chúc các bạn thành công, demo là website này luôn.