Thêm bài viết liên quan bằng Google Custom Search Engine

Thêm bài viết liên quan cho Blogspot bằng Google Custom Search Engine.

Chào các bạn,

Như các bạn thường thấy, sau mỗi bài viết trên các Blog hay website chúng ta thường sẽ thấy một danh sách các bài viết liên quan. Và chúng ta cũng có khá nhiều cách để thêm bài viết liên quan cho Blogspot.

Tuy nhiên, hôm nay mình sẽ chia sẻ tới các bạn một cách khá hay nữa đó là dùng công cụ Google Custom Search Engine.

Các bước thực hiện

Bước 1: Đăng nhập vào gmail và truy cập vào địa chỉ sau: cse.google.com

Bước 2: Click vào Tạo công cụ tìm kiếm tùy chỉnh.

Bước 3: Các bạn điền tên địa chỉ web của mình vào phần Trang web để tìm kiếm. Nếu có nhiều hơn 1 tên miền thì cứ điền mỗi tên miền vào 1 dòng là được. Sau đó là chọn tên cho công cụ tìm kiếm, cái này thì nó tự động rồi, nhưng nếu bạn muốn sửa lại thì cũng không sao. Sau khi nhập xong thì click vào Tạo.

Bước 4: Click vào Nhận mã.

Bước 5: Bây giờ, các bạn sẽ nhận được một đoạn mã tương tự như sau:

Các bạn hãy chú ý đến đoạn chữ mà mình đã bôi vàng '011635554619310511016:er_vk4k6eim'

Bước 6: Bây giờ, các bạn hãy copy dòng trên và thay vào phần xxxxxxxxxxx đoạn code dưới đây.

	<div class="quan-tam">
	<h3 class="heading">Bạn nên xem</h3>
	<div id='cse-search-form' style='width: 100%;height:300px;overflow-y: scroll;'>Đang tải...</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("xxxxxxxxxxx");
	customSearchControl.setResultSetSize(google.search .Search.FILTERED_CSE_RESULTSET);
	customSearchControl.draw('cse-search-form');
	customSearchControl.execute("yyyyyyyyyyy");
	}, true);
	</script>
	</div>

Bước 7: Các bạn tiếp tục thay phần yyyyyyyyyyy thành <data:blog.title/>. Sau đó copy đoạn code đã hoàn thiện và dán vào vị trí muốn hiển thị. Ví dụ dưới đây là đoạn code đã hoàn thiện của mình:

	<div class="quan-tam">
	<h3 class="heading">Bạn nên xem</h3>
	<div id='cse-search-form' style='width: 100%;height:300px;overflow-y: scroll;'>Đang tải...</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("011635554619310511016:er_vk4k6eim");
	customSearchControl.setResultSetSize(google.search .Search.FILTERED_CSE_RESULTSET);
	customSearchControl.draw('cse-search-form');
	customSearchControl.execute("<data:blog.title/>");
	}, true);
	</script>
	</div>

Bước 8: Các bạn chèn đoạn CSS sau vào blog cho đẹp xíu nhé 🙂

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

Lời Kết : Như vậy là mình đã hướng dẫn các bạn cách thêm bài viết liên quan cho Blogspot bằng Google Custom Search Engine rồi. Với cách này, nó sẽ lấy tên bài viết của các bạn làm từ khóa tìm kiếm và sau đó đưa ra các bài viết có tựa đề tương tự hoặc có chứa các từ khóa trong tên bài viết của bạn.

Theo Đôi Guốc Mộc Blog