Related Posts Widget with Thumbnails and Summary for Blogger

There are several tutorials quite old which have explained different methods for displaying related posts in Blogger [1] [2] but in this tutorial, I will show you how to implement a very beautiful Related Posts widget that comes along with Thumbnails and Posts Snippets, as well. If you want to add it, follow the next steps below:

How to Add Related Posts Widget with Summary to Blogger

Step 1. From your Blogger Dashboard, go to Template and click on Edit HTML


Step 2. Tick the "Expand Widget Templates" checkbox:
 Step 3. Find (CTRL + F) this tag:

</head>

...and paste the following code just above it:
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedpSummary = new Array();
var relatedThumb = new Array();
var relatedTitlesNum = 0;

var relatedPostsNum = 4; // number of entries to be shown
var relatedmaxnum = 75; // the number of characters of summary
var relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpQL2KXMxCpDdKz8cmeWkLG0LQD968s8WKYvd7s-Jeec295FGxMwyjb0nqwhGBRU27I4D9LHKctUWQ-ZZoE0ngq1IKm_HeKNqhDBr40EQH5vo6-9k0rEnDNhAF4khf1Y_egxu6MdX46P1v/s1600/no_image.jpg"; // default picture for entries with no image

function readpostlabels(json) {
  var entry, postimg, postcontent, cat;
  for (var i = 0; i < json.feed.entry.length; i++) {
    entry = json.feed.entry[i];
    if (i==json.feed.entry.length) { break; }
    relatedTitles[relatedTitlesNum] = entry.title.$t;
    postcontent = "";
    if ("content" in entry) {
      postcontent = entry.content.$t;
    } else if ("summary" in entry) {
      postcontent = entry.summary.$t;
    }
    relatedpSummary[relatedTitlesNum] = removetags(postcontent,relatedmaxnum);
    if ("media$thumbnail" in entry) {
      postimg = entry.media$thumbnail.url;
    } else {
      postimg = relatednoimage;
    }
    relatedThumb[relatedTitlesNum] = postimg;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        relatedUrls[relatedTitlesNum] = entry.link[k].href;
        break;
      }
    }
    relatedTitlesNum++;
  }
}
function showrelated() {
  var tmp = new Array(0);
  var tmp2 = new Array(0);
  var tmp3 = new Array(0);
  var tmp4 = new Array(0);
  for(var i = 0; i < relatedUrls.length; i++) {
    if(!contains(tmp, relatedUrls[i])) {
      tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i];
      tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];
      tmp3.length += 1; tmp3[tmp3.length - 1] = relatedpSummary[i];
      tmp4.length += 1; tmp4[tmp4.length - 1] = relatedThumb[i];
    }
  }
  relatedTitles = tmp2; relatedUrls = tmp; relatedpSummary = tmp3; relatedThumb = tmp4;
  for(var i = 0; i < relatedTitles.length; i++){
    var index = Math.floor((relatedTitles.length - 1) * Math.random());
    var tempTitle = relatedTitles[i]; var tempUrls = relatedUrls[i];
    var tempResum = relatedpSummary[i]; var tempImage = relatedThumb[i];
    relatedTitles[i] = relatedTitles[index]; relatedUrls[i] = relatedUrls[index];
    relatedpSummary[i] = relatedpSummary[index]; relatedThumb[i] = relatedThumb[index];
    relatedTitles[index] = tempTitle; relatedUrls[index] = tempUrls;
    relatedpSummary[index] = tempResum; relatedThumb[index] = tempImage;
  }
  var somePosts = 0;
  var r = Math.floor((relatedTitles.length - 1) * Math.random());
  var relsump = r;
  var output;
  var dirURL = document.URL;

  while (somePosts < relatedPostsNum) {
    if (relatedUrls[r] != dirURL) {

      output = "<div class='relatedsumposts'>";
      output += "<a href='" + relatedUrls[r] + "' rel='nofollow'  target='_self' title='" + relatedTitles[r] + "'><img src='" + relatedThumb[r] + "' /></a>";
      output += "<h6><a href='" + relatedUrls[r] + "' target='_self'>" + relatedTitles[r] + "</a></h6>";
      output += "<p>" + relatedpSummary[r] + " ... </p>";
      output += "</div>";
      document.write(output);
     
      somePosts++;
      if (somePosts == relatedPostsNum) { break; }
    }
    if (r < relatedTitles.length - 1) {

      r++;
    } else {
     
      r = 0;
    }

    if(r==relsump) { break; }
  }
}
function removetags(text,length){
  var pSummary = text.split("<");
  for(var i=0;i<pSummary.length;i++){
    if(pSummary[i].indexOf(">")!=-1){
      pSummary[i] = pSummary[i].substring(pSummary[i].indexOf(">")+1,pSummary[i].length);
    }
  }
  pSummary = pSummary.join("");
  pSummary = pSummary.substring(0,length-1);
  return pSummary;
}
function contains(a, e) {
  for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
  return false;
}
//]]>
</script>
Note:  
  • To change the number of posts that are being displayed, modify the value in red (4)
  • To change the number of characters to be shown in posts summary, modify the value in green (75)
  • To change the default pic for posts with no images, add your URL instead of the one marked in blue

... also paste the code below just above the </head> tag:
<style>
.relatedsumposts {
  float: left;
  margin: 0px 5px;
  overflow: hidden;
  text-align: center;
  /* width and height of the related posts area */
  width: 120px;
  height: 210px;
}

.relatedsumposts:hover {
background-color: #F3F3F3; -webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

.relatedsumposts img:hover {
-khtml-opacity:0.4;
-moz-opacity:0.4;
opacity:0.4;
}

.relatedsumposts a {
  /* link properties */
color: #linkcolor;
  display: inline;
  font-size: 10px;
  line-height: 1;
}
.relatedsumposts img {
  /* thumbnail properties */
margin-top: 2px;
  height: 82px;
  padding: 5px;
  width: 82px;
border: 1px solid #fff;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.relatedsumposts h6 {
  /* title properties */
  display: table-cell;
  height: 5em;
  margin: 5px 0 0;
  overflow: hidden;
  padding-bottom: 2px;
  vertical-align: middle;
  width: 130px;
}

.relatedsumposts p {
  /* summary properties */
border-top: 1px dotted #777777;
border-bottom: 1px dotted #777777;
color: #summarycolor;
  font-size: 10px;
  height: 4em;
  line-height: 1;
  margin: 5px 0 0;
  overflow: hidden;
  padding: 5px 0 15px 0;
  text-align: left;
}
</style>
Note:  
  • Modify the values in red to adjust the width (120) and height (210) of the widget area
  • Replace #linkcolor with the hex value of your color to change the color of post titles
  • To change the size of thumbnails, modify the values marked in violet (82)
  • To determine the border roundness, modify the values in orange (100)
  • To change the color of the post snippet, change #summarycolor with color hex value

Step 4. Search (CTRL + F) for the following fragment:

<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>

... and add this code just below it:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=readpostlabels&amp;max-results=50&quot;' type='text/javascript'/>
  </b:if>

The entire fragment should look like this:

          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=readpostlabels&amp;max-results=50&quot;' type='text/javascript'/>
  </b:if>
          </b:loop>

Step 5. Find this fragment of code:

</b:includable>
<b:includable id='postQuickEdit' var='post'>

Note: if you can't find it, then search only for the code in red

! Click on the sideways arrow to expand the code, then scroll down until you reach to the highlighted line !

...add just ABOVE it, add the following:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='post-footer-line post-footer-line-4'>
    <div id='relatedpostssum'><div style='text-align: left; font-size: 15px; margin-bottom: 10px; font-weight: bold;'>RELATED POSTS</div>
      <script type='text/javascript'>showrelated();</script>
    </div>
    <div style='clear:both;'/>
  </div>
</b:if>
Screenshot

Step 6. Save your Template... and hopefully we're done...

Enjoy!
0 comments
Labels: , , , ,

CSS Basics. How to Apply Rounded Corners On Images #2

blogger tricks, css tricks, border radiusIn the previous post I have mentioned that we will learn to round images using CSS, without needing to edit them one by one using a program. Now that we have seen the basics of CSS, let's try to apply to some images.

What we will do is to upload an image as normal (HTML) and then add some rules in our style sheet that will transform the outer shape as a circle... or at least to appear round. This will depend on the proportions of image that we use.

In fact, we can apply this effect to any image, to all of an area or to all in our blog. That depends on your tastes.

Marking up HTML

Obviously the first thing we need for in order to round an image is an idem. The code could be more complicated, but an image is built within the img tag and basically looks like this:

<img src="image_URL"/>

Screenshot:




This is how we make it look something like the one from the left. Normally, it should also keep an alt text and sometimes it carries some forced dimensions (with width and/or height). When you upload an image, the code inside the Blogger editor also contains a link that is pointing to the original image.

But if we want to modify this image using CSS, we need to incorporate a class selector. We can add it in two ways: within the img tag or to a parent box. The name that I have chosen for the selector is roundedcorners:

<img class="roundedcorners" src="image_URL"/>


<div class="roundedcorners">
<img src="image_URL"/>
</div>


Applying style to all homogeneous elements

But that selector alone will do nothing. It needs to be linked to a style rule that tells what to do with it. As much as we add classes, if these are not defined in the CSS, the appearance of the image (or a certain element) will not change.

To change the shape of all the images on our blog, this would be what we should add to our CSS:

img {
border: 2px solid #BADA55;
margin: 0;
padding: 0;
border-radius: 900px;
-moz-border-radius: 900px;
}

And how it translates to your browser? As follows:

Search for images by name tag (img) and apply the following style:
  • a solid green border of 2 pixels
  • margins (space outside the border) and padding (space inside the border) is set to zero
  • the image is round at the four corners

Now that we have this rule in our style sheet itself, we can see the picture as we wanted - see the example on the right.

To declare a property correctly, we need to know what it does and how to write and you can find more info in many places, although W3C is the authority in this.

For example border-radius requires initially 4 values reading from left to right that represent the roundness of the upper-left, upper-right, lower-right and lower-left corner. If you put a single value is understood that all four will be equal to that.

You should also know that when the value of the border exceeds the dimensions of the box, this border is adapted to form a circle.

How to Apply Style to the Elements of the Same Block

But surely we do not want all the blog images to be round, but only those that we choose, otherwise adding the above style in the head tag will make all of our blog images to take this shape. Before we used an HTML tag (img) and not a selector and that is why the style will affect all images.

To avoid this, we can do one of the things we saw at the beginning and that was to put the image inside a div with the roundedcorners class. In this way, only the images that are in a box with that class will be affected by the rule that will make them round.

<div class="roundedcorners"><img src="image_URL"/></div>

But the rule then should not attack the img tag directly, but the roundedcorners selector. In this case, you should write it like this:

.roundedcorners img {
border: 2px solid #BADA55;
....
}

This means that this style applies only to images that are in a box with roundedcorners class.

Epilogue

To close the subtopic of rounding images, you have to keep in mind that if these are not square, instead of becoming circular, they will look oval.


To fix this we should add the width and height with the same measure (value in pixels), that is to force the image cropping and to make it appear perfectly circular. That was all!

If you enjoy reading this blog, please share and subscribe. For any questions, drop a comment below ;)

0 comments
Labels: , , ,
Subscribe to: Posts (Atom)