How to Make a Related Post with Google CSE by Igniel - TAMASEO

Custom Search Engine (CSE) is a service from Google that is specialized for searching blogs. Usually the results from CSE will only appear when you do a search activity first.

It turns out that there are many ways to make related posts on blogs using Google CSE, one of which is being able to display more related articles divided into several pages.

What are related posts? Related post is a list of articles that have the same topic of discussion as the main article being read. Its function is to attract visitors to open other articles.

Create related posts with Google CSE (Custom Search Engine)

Here's how to make a related post with Google CSE by Igniel. If you want to try, please follow the steps below:

1. First, you have to create a new CSE unit first.
2. Visit https://cse.google.com . 
3. In the site to search column , fill in your blog's URL, followed by a slash and an asterisk. For example: www.urlsobat.com/* 
4. In Language select Indonesia or adjust to the language of your blog.  
5. In the name of the search engine , fill in what you want. This is the name of the Google CSE unit. 
6. Done? Click the create button 
   
7. On the Look and feel menu , select result only . Then click Save & Get Code .   

The cse code that you previously created will appear. Note that this section is the search engine ID that you will need later.

var cx = '0080xxxxxxxxxxxxxx:abcd_fg'

Settings on Blogs

To improve the appearance, add the following CSS code. Save above before </style> or ]]></b:skin>

/* Related Post with Google CSE by Igniel (igniel.com) */
#ignielRelated {margin:0px; padding:0px; text-align:center; border-top:0px; border:1px solid #008c5f; border-top:0px} #ignielRelated h3{font-size:18px; font:bold 18px Tahoma,sans-serif; margin:0px 0px 5px 0px; background:#008c5f; color:#fff; text-align:left; text-transform:uppercase; overflow:hidden; padding: 7px 20px}
#ignielCSE {padding:0 20px 10px 20px; text-align:left; width:auto; height:100%; line-height:18px}
#ignielCSE .cse .gsc-control-cse, .gsc-control-cse {padding:0px}
#ignielCSE .gsc-control-cse {margin:0px; padding:0px}
#ignielCSE .gsc-control-cse .gsc-table-result {margin:0 0 15px 0}
#ignielCSE .gsc-results {width:100%}
#ignielCSE .gsc-search-box, #ignielCSE .gsc-above-wrapper-area, #ignielCSE .gsc-resultsHeader {display:none}
#ignielCSE .gsc-webResult .gsc-result {padding:0px}
#ignielCSE .gsc-webResult .gsc-result:nth-child(4) {border-bottom:0}
#ignielCSE .gs-result .gs-title, #ignielCSE .gs-result .gs-title * {text-decoration:none; color:#008c5f; font-size:14px; font-weight:600; padding-bottom:18px}
#ignielCSE .gs-result .gs-snippet {font-size:12px}
#ignielCSE .gsc-reviewer, #ignielCSE .gs-result a.gs-visibleUrl, #ignielCSE .gs-result .gs-visibleUrl{color:#767676}
#ignielCSE .gsc-table-cell-thumbnail, #ignielCSE .gs-promotion-image-cell {padding-right:10px}
#ignielCSE .gsc-results .gsc-cursor-box {margin:0px}
#ignielCSE .gsc-preview-reviews ul {margin:0px}
#ignielCSE .gsc-cursor .gsc-cursor-page.gsc-cursor-current-page, #ignielCSE .gsc-cursor .gsc-cursor-page {color:#fff; text-decoration:none; margin:5px 10px 0 0; padding: 5px 10px; border-radius: 5px; display:inline-block}
#ignielCSE .gsc-cursor .gsc-cursor-page.gsc-cursor-current-page {background:#2f303f !important}
#ignielCSE .gsc-cursor .gsc-cursor-page {background:#008c5f}
#ignielCSE .gsc-cursor .gsc-cursor-page:hover {background:#2f303f}
#ignielCSE .gsc-url-top {padding:0px}
#ignielCSE .gs-webResult .gs-snippet, .gs-imageResult .gs-snippet, .gs-fileFormatType {color:#2f303f}
#ignielCSE .gsc-thumbnail-inside {padding:0px}

Search code . Use it to make it easier. If there are multiple codes, select the last one. Because each template structure is definitely different <data:post.body/> CTRL+F 

Save the following script below <data:post.body/>

<b:if cond='data:view.isPost'>
<div id='ignielRelated'>
<h3>Artikel Terkait</h3>
<div id='ignielCSE'/>
<script>//<![CDATA[
// Related Post with Google CSE by Igniel (igniel.com)
function ignielCSE() {
  if (document.readyState != 'complete') {
    return google.setOnLoadCallback(ignielCSE, true);
  }
  google.search.cse.element.render({gname:'gsearch', div:'ignielCSE', tag:'searchresults-only', attributes:{linkTarget:'', webSearchResultSetSize:'small'}});
  var element = google.search.cse.element.getElement('gsearch');
  //]]>
  element.execute(&quot;<b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'> <data:label.name/> <b:if cond='data:label.isLast != &quot;true&quot;'>, </b:if></b:loop></b:if>&quot;);
  //<![CDATA[
};
window.__gcse = {
  parsetags: 'explicit',
  callback: ignielCSE
};
(function() {
var cx = '0080xxxxxxxxxxxxxx:abcde_fg';
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>
</div>
<div class='clear'/>
</b:if>

• Save theme

Arrangement:

The text in blue is the number of related posts with CSE displayed, you can change it by:  

1. small : 4 results per page
2. large : 8 results per page
3. filtered_cse : up to 10 results per page, maximum 10 per page
4. It can also be a number, for example 5,6,7 etc
5. Replace the red one with your search engine ID  

The list that appears on Google CSE is only Google indexed pages.