6 Widget Option To Create Related Post in Blogger With Thumbnails and Summary or Not

In addition of Tab Menu widget that I had written in the previous article at title Creating Responsive Drop Down Menu At Blogger Using HTML + CSS And Basic Horizontal Menu Blogger. Related Post is one of widget that is always there on a blog, which in general related post widget is placed after / below the post.

And in earlier article I have said a little about the related post on blogger, which if we want to create a related post on blogger, then every post is required to have a label, for more details please see:

Well, on this occasion I will write about how to create a related post on blogger, which then this related post you can put under the post or at top of the post.

This related post script for blogger that we will use it we can use to create a related post with thumbnails in blogger or not, as well as related post with summary or not, it depends on our desire.

Because the related post widget script has 6 styles selection or can be called 6 in 1 related post widget for blogger.

The 6 Related Post Widget Options For Bloggers are:

Style 1: Related Post Title List
Style 2: Related Post Thumbnail with Summary
Style 3: Related Post Thumbnail with Post Title
Style 4: Related Post Thumbnail with Tooltip Hover
Style 5: Related Post Thumbnail with Title Overlay Hover
Style 6: Related Post Title List with Tooltip Hover

To see each widget selection please see demo here.

How to Install Widget Related Post Under Blogger Post

The steps that must be done to install the related post below blogger post are as follow:

Sign into Blogger Dashboard
Open Template page
Backup first your current template to prepare if there any case happen that are not desirable.
Then click Edit HTML

If you are already on blogger template editor page, then please find this code
<b: includable id ='post' var ='post'>
Then find the code
<data: post.body />
Which is not far below the code <b: includable id='post' var='post'>
In which the code (<data: post.body />) is the code that will display the entire content of the post.

If you are, friends, want to create related post just below (at the end of the post / article), then please put the related post script for bloggers just below that code.

Or you can also put it in a different position, for example after the code
<div class ='post-footer ">
or <div class ='post-footer-line post-footer-line-3'>

Or it could be placed before </ b: includable> (cover code <b: includable id='post' var='post'>)

Most importantly the related post script is still in the code
<b: includable id='post' var ='post'> and code </ b: includable> (cover)

Adding Related Post Script On Blogger Mobile Template

If you activated blogger mobile template on your blog template setting, then you will also need to add related post script over on mobile template.

Now please find the code <b:includable id="mobile-post 'var='post'> in your template blogger.

If you have found it, then please put related post script just below <data: post.body/>, not far below the <b: includable id="mobile-post 'var='post'> earlier.

Or you may also put it in different position, the important is it still in <b: includable id = "mobile-post 'var =' post '> and </ b: includable> (cover mobile-post).

6 in One Related Post Widget Script for Blogger

After determining where to install the related post widget, then the next thing that is needed is a related post script for blogger.

And one of the related post widget script for blogger that we can use is this 6 in One Related Post Widget For Blogger (script)


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-post' class='related-post'/>
<script type='text/javascript'>
  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop></b:if>];
  var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h4&gt;Related Post:&lt;/h4&gt;&quot;,
      numPosts: 5,
      summaryLength: 370,
      titleLength: &quot;auto&quot;,
      thumbnailSize: 80,
      noImage: &quot;chrome://global/skin/media/imagedoc-darknoise.png&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      moreText: &quot;Read More&quot;,
      widgetStyle: 1,
      callBack: function() {}
  };
</script>
<script type='text/javascript'>//<![CDATA[
/*! Related Post Widget for Blogger by Taufik Nurrohman => http://gplus.to/tovic */
var randomRelatedIndex,showRelatedPost;!function(e,t,a){var l={widgetTitle:"<h4>Related Post:</h4>",widgetStyle:1,homePage:"http://www.makeonblog.com",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:!1,moreText:"Baca Selengkapnya",callBack:function(){}};if("object"==typeof relatedPostConfig)for(var i in relatedPostConfig)l[i]=relatedPostConfig[i];l.homePage=l.homePage.replace(/\/?\?m=\d+|\/+$/,"");var s=function(e){var l=t.createElement("script");l.type="text/javascript",l.src=e,a.appendChild(l)},r=function(e,t){return Math.floor(Math.random()*(t-e+1))+e},n=function(e){var t,a,l=e.length;if(0===l)return!1;for(;--l;)t=Math.floor(Math.random()*(l+1)),a=e[l],e[l]=e[t],e[t]=a;return e},o="object"==typeof labelArray&&labelArray.length>0?"/-/"+n(labelArray)[0]:"",m=function(e){var t=e.feed.openSearch$totalResults.$t-l.numPosts,a=r(1,t>0?t:1);s(l.homePage+"/feeds/posts/summary"+o+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+l.numPosts+"&callback=showRelatedPost")},d=function(e){var a,i,s,r,o,m=t.getElementById(l.containerId),d=n(e.feed.entry),h=l.widgetStyle,p=l.widgetTitle+'<ul class="related-post-style-'+h+'">',c=l.newTabLink?' target="_blank"':"",u='<span style="display:block;clear:both;"></span>';if(m){for(var g=d.length,b=0;b<l.numPosts&&b!==g;b++){i=d[b].title.$t,s="auto"!==l.titleLength&&l.titleLength<i.length?i.substring(0,l.titleLength)+"&hellip;":i,r="media$thumbnail"in d[b]&&l.thumbnailSize!==!1?d[b].media$thumbnail.url.replace(/\/s\d+(\-c)?\//,"/s"+l.thumbnailSize+"-c/"):l.noImage,o="summary"in d[b]&&l.summaryLength>0?d[b].summary.$t.replace(/<br *\/?>/gi," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,l.summaryLength)+"&hellip;":"";for(var A=0,f=d[b].link.length;f>A;A++)if("alternate"==d[b].link[A].rel){a=d[b].link[A].href;break}p+=2==h?'<li><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+l.thumbnailSize+'" height="'+l.thumbnailSize+'"><a class="related-post-item-title" title="'+i+'" href="'+a+'"'+c+">"+s+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+o+'</span> <a href="'+a+'" class="related-post-item-more"'+c+">"+l.moreText+"</a></span>"+u+"</li>":3==h||4==h?'<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+a+'"'+c+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+l.thumbnailSize+'" height="'+l.thumbnailSize+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+i+'" href="'+a+'"'+c+">"+s+"</a></div>"+u+"</li>":5==h?'<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+a+'" title="'+i+'"'+c+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+l.thumbnailSize+'" height="'+l.thumbnailSize+'"><span class="related-post-item-tooltip">'+s+"</span></a>"+u+"</li>":6==h?'<li><a class="related-post-item-title" title="'+i+'" href="'+a+'"'+c+">"+s+'</a><div class="related-post-item-tooltip"><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+l.thumbnailSize+'" height="'+l.thumbnailSize+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+o+"</span></span>"+u+"</div></li>":'<li><a title="'+i+'" href="'+a+'"'+c+">"+s+"</a></li>"}m.innerHTML=p+="</ul>"+u,l.callBack(e)}};randomRelatedIndex=m,showRelatedPost=d,s(l.homePage+"/feeds/posts/summary?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")}(window,document,document.getElementsByTagName("head")[0]);
//]]></script>
</b:if>

Please copy and paste the script above to any position that you want, for example, after code <data:post.body/>

Before clicking the Save Template button do not forget the set first the widget script if it’s necessary.

The Way of Widget Related Post Setting to Determine the Thumbnail or No (Define style 1-6)

Related post widget script for bloggers that I wrote above is made with some settings that we can customize based on our wishes.

Here are some settings that can customize by ou own wishes:

widgetTitle: "<h4>Related Post:</h4>" → Related Post is a title that is on the related post list
numPosts: 5 → number 5 is the value which will determine the amount to be displayed of related post.
summaryLength: 370 → number 370 is the value of the number of posts summary that will be displayed.
ThumbnailSize: 80 → number 80 is the value used to determine the width and height of the thumbnail on the related post.
noImage: "chrome://global/skin/media/imagedoc-darknoise.png" → chrome://global/skin/media/imagedoc-darknoise.png is the default thumbnail that will be displayed if the post does not have pictures.
containerId: "related-post" → Related-post is id area that will display related post list (see at the script you can find the code <div id="related-post'class="related-post'/>)
moreText: "Read More" → Read More is a text read more that will be displayed if you use the related post with summary.
widgetStyle: 1 → Number 1 is the value that will determine the related post style, you can replace the number 1 to number 2, 3, 4, 5, or 6 according to the style related post that you want (sequence according the style list that I wrote above).

Well, those are some settings that important to know to set this related post widget script.

As for the code <b:if cond='data: blog.pageType =="item"'> and </b:if> is the code that will create related post widget will appear only on Post page.

How to Add Style (CSS) To Related Post Widget

After successfully installing the related post script on your blogger blog, then the next step should be done is to give style /add css code to related post widget with the appropriate styles that you have been set on the related post script above.

And you friends can install this related post CSS before the code ]]></b:skin> in the template that you use.

Or you can also install it before </head> by adding a little code, namely:


<style type='text/css'>
/*** Paste CSS Related Post Here ***/
</style>

I started from style 1 to style 6 as sequence.
Style 1 = Related Post Title List


.related-post {
  margin:2em auto 0;
  font:normal normal 11px/1.4 Arial,Sans-Serif;
}
.related-post h4 {
  font-size:150%;
  margin:0 0 .5em;
}

Style 2 = Related Post Thumbnail with Summary


.related-post {
  margin:2em auto 0;
  font:normal normal 11px/1.4 Arial,Sans-Serif;
}
.related-post h4 {
  font-size:150%;
  margin:0 0 .5em;
}
/* Style 2 */
.related-post-style-2,
.related-post-style-2 li {
  margin:0;
  padding:0;
  list-style:none;
}
.related-post-style-2 li {
  padding:10px;
  border-top:1px solid #eee;
  overflow:hidden;
}
.related-post-style-2 li:first-child {border-top:none}
.related-post-style-2 .related-post-item-thumbnail {
  width:80px;
  height:80px;
  max-width:none;
  max-height:none;
  background-color:transparent;
  border:none;
  padding:0;
  float:left;
  margin:2px 10px 0 0;
}
.related-post-style-2 .related-post-item-title {
  font-weight:bold;
  font-size:110%;
}
.related-post-style-2 .related-post-item-summary {
  display:block;
  overflow:hidden;
}
.related-post-style-2 .related-post-item-more {}

Style 3 = Related Post Thumbnail with Post Title


.related-post {
  margin:2em auto 0;
  font:normal normal 11px/1.4 Arial,Sans-Serif;
}
.related-post h4 {
  font-size:150%;
  margin:0 0 .5em;
}

/* Style 3 */
.related-post-style-3,
.related-post-style-3 li {
  margin:0;
  padding:0;
  list-style:none;
  word-wrap:break-word;
  overflow:hidden;
}
.related-post-style-3 .related-post-item {
  display:block;
  float:left;
  width:80px;
  height:auto;
  padding:10px;
  border-left:1px solid #eee;
  margin-bottom:-989px;
  padding-bottom:999px;
}
.related-post-style-3 .related-post-item:first-child {border-left:none}
.related-post-style-3 .related-post-item-thumbnail {
  display:block;
  margin:0 0 10px;
  width:80px;
  height:80px;
  max-width:none;
  max-height:none;
  background-color:transparent;
  border:none;
  padding:0;
}
.related-post-style-3 .related-post-item-title {font-weight:bold}

Style 4 = Related Post Thumbnail with Tooltip Hover


.related-post {
  margin:2em auto 0;
  font:normal normal 11px/1.4 Arial,Sans-Serif;
}
.related-post h4 {
  font-size:150%;
  margin:0 0 .5em;
}
/* Style 4 */
.related-post-style-4,
.related-post-style-4 li {
  margin:0;
  padding:0;
  list-style:none;
  word-wrap:break-word;
  overflow:visible;
  position:relative;
  outline:none;
}
.related-post-style-4 .related-post-item {
  display:block;
  float:left;
  width:80px;
  height:auto;
  padding:10px;
}
.related-post-style-4 .related-post-item-thumbnail {
  display:block;
  margin:0 0 10px;
  width:80px;
  height:80px;
  max-width:none;
  max-height:none;
  background-color:transparent;
  border:none;
  padding:0;
}
.related-post-style-4 .related-post-item-title {font-weight:bold}
.related-post-style-4 .related-post-item-tooltip {
  border:1px solid #bbb;
  background-color:white;
  width:150%;
  text-align:center;
  position:absolute;
  bottom:100%;
  left:0;
  z-index:999;
  margin-bottom:-30px;
  padding:10px 10px 12px;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.2);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.2);
  box-shadow:0 1px 3px rgba(0,0,0,.2);
  display:none;
}
.related-post-style-4 .related-post-item:last-child .related-post-item-tooltip {
  left:auto;
  right:0;
}
.related-post-style-4 .related-post-item-tooltip:before,
.related-post-style-4 .related-post-item-tooltip:after {
  content:"";
  display:block;
  width:0;
  height:0;
  border:10px solid transparent;
  border-top-color:inherit;
  position:absolute;
  top:100%;
  left:37px;
}
.related-post-style-4 .related-post-item-tooltip:after {
  border-top-color:white;
  border-width:9px;
  margin-left:1px;
}
.related-post-style-4 .related-post-item:last-child .related-post-item-tooltip:before,
.related-post-style-4 .related-post-item:last-child .related-post-item-tooltip:after {
  right:37px;
  left:auto;
}
.related-post-style-4 .related-post-item:last-child .related-post-item-tooltip:after {
  margin-left:auto;
  margin-right:1px;
}
.related-post-style-4 .related-post-item:focus {outline:none}
.related-post-style-4 .related-post-item:focus .related-post-item-tooltip,
.related-post-style-4 .related-post-item:hover .related-post-item-tooltip {display:block}

Style 5 = Related Post Thumbnail with Title Overlay Hover


.related-post {
  margin:2em auto 0;
  font:normal normal 11px/1.4 Arial,Sans-Serif;
}
.related-post h4 {
  font-size:150%;
  margin:0 0 .5em;
}
/* Style 5 */
.related-post-style-5,
.related-post-style-5 li {
  margin:0;
  padding:0;
  list-style:none;
  word-wrap:break-word;
  overflow:hidden;
}
.related-post-style-5 .related-post-item {
  display:block;
  float:left;
  width:80px;
  height:auto;
  padding:10px;
  border-left:1px solid #eee;
}
.related-post-style-5 .related-post-item:first-child {border-left:none}
.related-post-style-5 .related-post-item-wrapper {
  display:block;
  position:relative;
  overflow:hidden;
}
.related-post-style-5 .related-post-item-thumbnail {
  display:block;
  margin:0;
  width:80px;
  height:80px;
  max-width:none;
  max-height:none;
  background-color:transparent;
  border:none;
  padding:0;
}
.related-post-style-5 .related-post-item-tooltip {
  display:block;
  background-color:black;
  background-color:rgba(0,0,0,.9);
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  padding:10px;
  line-height:normal;
  font-style:italic;
  color:white;
  overflow:hidden;
  display:none;
}
.related-post-style-5 .related-post-item:focus .related-post-item-tooltip,
.related-post-style-5 .related-post-item:hover .related-post-item-tooltip {display:block}

Style 6 = Related Post Title List with Tooltip Hover


.related-post {
  margin:2em auto 0;
  font:normal normal 11px/1.4 Arial,Sans-Serif;
}
.related-post h4 {
  font-size:150%;
  margin:0 0 .5em;
}
/* Style 6 */
.related-post-style-6 li {position:relative}
.related-post-style-6 .related-post-item-thumbnail {
  width:80px;
  height:80px;
  max-width:none;
  max-height:none;
  background-color:transparent;
  border:none;
  padding:0;
  float:left;
  margin:0 10px 0 0;
}
.related-post-style-6 .related-post-item-title {
  display:block;
  font-weight:bold;
}
.related-post-style-6 .related-post-item-summary {
  display:block;
  overflow:hidden;
  font-size:11px;
}
.related-post-style-6 .related-post-item-tooltip {
  position:absolute;
  bottom:100%;
  left:-10px;
  z-index:999;
  margin-bottom:10px;
  border:1px solid #bbb;
  background-color:white;
  padding:10px;
  width:90%;
  height:auto;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.2);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.2);
  box-shadow:0 1px 3px rgba(0,0,0,.2);
  display:none;
}
.related-post-style-6 .related-post-item-tooltip:before,
.related-post-style-6 .related-post-item-tooltip:after {
  content:"";
  display:block;
  width:0;
  height:0;
  border:10px solid transparent;
  border-top-color:inherit;
  position:absolute;
  top:100%;
  left:35px;
}
.related-post-style-6 .related-post-item-tooltip:after {
  border-top-color:white;
  border-width:9px;
  margin-left:1px;
}
.related-post-style-6 li:hover .related-post-item-tooltip {display:block}

Well, that are 6 CSS code that can be used according related post widget style that you have been set before.

Please modify the CSS code as necessary if you want.