Skip to main content

How To Make Related Post

By


Related articles / Related post very useful for the visitors of your blog, because it will be easier for visitors to read articles that still have the same topic. Even if you look at when you use the google search at the bottom there are still some search suggestions or anything related to the article you were looking for, I conclude it is something that is almost the same function as the related post or article related but perhaps different naming it. 

after knowing some of the above so I agree with the master seo that install related post or article related is one of the techniques suggested seo, because Google also uses the same thing.

How to make related Post

1. Log into Blogger Template >> 

2. Select the Edit HTML >> Wait until open HTML Code 

3. Find the code "]]> </ b: skin>" and place the following code right above it.

     /* Related Posts --- */
    .related-post .post-thumbnail {
    z-index: 1;
    position: relative;
    width: 98px;
    height: 98px;
    margin: 0;
    display: block;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: inset 2px 2px 5px #444;
    -moz-box-shadow: inset 2px 2px 5px #444;
    box-shadow: inset 2px 2px 5px #555;
    }
    .related-post {
    float: left;
    position: relative;
    width: 98px;
    height: 98px;
    margin: 0 10px 10px 0;
    background: #F6F6F6;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    }
    .related-post .related-post-title {
    display: none;
    float: left;
    background: #000;
    color: #fff;
    text-shadow: none;
    font-weight: bold;
    padding: 10px;
    position: absolute;
    top: -20px;
    left: 40px;
    z-index: 2;
    width: 200px;
    -webkit-box-shadow: 0 0 2px #444;
    -moz-box-shadow: 0 0 2px #444;
    box-shadow: 0 0 2px #444;
    }    .related-post:hover .related-post-title {display: block;}

4. Then look up the code similar to the code below >> code search first and if there is no next find codes.

<div class='post-footer'>
        <div class='post-footer-line post-footer-line-1'/>
          <div class='post-footer-line post-footer-line-2'/>
          <div class='post-footer-line post-footer-line-3'/>
        </div>
      </div> 

5. If you find a code similar to the code above, copy the following code just below the above code.


<div id='related-posts'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script type='text/javascript'>//<![CDATA[
    var ry='<h3>Related Posts</h3>';rn='<h3>&nbsp;&nbsp;&nbsp;No related post available</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';
    var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkHv2sz1sRDPwSTLjtmLmhiKdtJ2AGPhYe_dOcgqNOI2-NBVFBwRSqoWHZHtH4fi88b_MeSPpQLnH6iJZlRJ2QldSTTIPtUQZTqNYOmqLlKWW3zRjij86S7KKXjRnwqyt_Ey4fnOOKwRFe/'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><div class="related-post-title">'+titles[c]+'</div><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
    //]]></script>
    <b:loop values='data:post.labels' var='label'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
    </b:loop>
    <script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
    </b:if>
    </div>    <div class='clear'/>

Remarks:
  •      Red color number of articles will be shown.
  
6. Save your template >> Done 

Now your template already own a related article or related post to allow visitors to explore your blog.

Labels:

Comments

Post a Comment

Popular posts from this blog

Explore Borobudur and Prambanan can be via Google Maps

By
There is a new experience if you are a fan of Google Maps application. One of them, the tourist area of ​​Borobudur Temple in Magelang, Central Java, now can be explored using the digital map. Not only that several other attractions such as Prambanan, Ratu Boko Complex and the National Museum in Jakarta can also be accessed. The beauty of Borobudur can be aligned with the world's other attractions such as the Taj Mahal in India. The launch of Street View images from Borobudur temple can be accessed via Google Maps. The launch event coincided with the commemoration of World Tourism Day. Google's mission is to organize the world's information, making it accessible and useful to everyone Shinto added, the event was also simultaneously launched the Google Cultural Institute for Indonesia. Borobudur presence of Street View images and stories in the history of the Cultural Institute is expected to help preserve the culture and history to the younger generation. In addition th...
Post a Comment
Read more

New GoPro Hero Plus, There's WiFi and Bluetooth

By
GoPro camera line has earned refreshment. Company known for its action camera (cam action) has released the entry-level model called Hero +. Hero + is positioned between the previous series, the Hero and Hero + LCD. That is, he has the ability on Hero and minus a few features of the Hero + LCD. Hero + itself has a body with exactly the same design with Hero. The difference, the new product is equipped with WiFi and Bluetooth wireless capabilities. WiFi and Bluetooth in Hero + can be used to access applications on smartphones GoPro. Through the application, users can control the camera, view the results of the captured video, and edit videos directly from the smartphone. the ability of the Hero + made the same as the Hero + LCD, the record 1080p video at 60fps, compared to 30 fps in Hero. The camera also has an 8-megapixel image sensor, up from 5 megapixels in Hero. Ability to dive into the water also reaches 40 meters. The difference with the Hero + LCD, Hero + is not equipped wit...
Post a Comment
Read more

Suzuki GSX comes with New Concept

By
Japanese manufacturer , Suzuki Motor Corporation has the latest edition GSX . Even Suzuki has also been leaked images New GSX concept that reportedly will be on display at the Tokyo Motor Show ( TMS ) . So far the Suzuki GSX - R does not change much . Some minor updates to the GSX - R1000 is already present in mid- 2017 as an initial model . In a press release Suzuki , said if the latest GSX concept symbolizes a motor with high performance . Using the latest engine Suzuki inline -four ( 4 cylinder ), which makes the aura sportbike more viscous . Maybe it's time Suzuki challenge to its competitors . Wake up from sleep length , Suzuki GSX eventually do with a refresher reincarnated as one of the most iconic motor sport in the world .
Post a Comment
Read more