Add stylish related posts widget In Your blogspot Blog | Blogtrovert

Add stylish related posts widget In Your blogspot Blog

Last Updated On: August 23, 2019

<

div dir=”ltr” style=”text-align: left”>

Related posts widget for blogger

Related post widgets are important and they engage your readers more! Yeas we know that already and there are lots of related post widget for blogger blogs online but everyone can’t settle for one kind of design or look. Which is why, I struggled and succeeded in creating a classic and chic looking related post widget out of a simple widget.

This related post widget is responsive and I’m sure it’s just perfect for your blog.

What’s to love about this Widget?

Below are some amazing features of this widget.

  1. Classic and chic looking. This type of related post widget is often used on premium blogger templates.
  2. Doesn’t take the whole day to load, if you know what I mean!
  3. Shows three Related posts under every post in your blog.
  4. Mobile responsive. Horizontal layout design on desktop and Vertical layout design mobile.
  5. Elegant enough for your blog!

What Blog is This Widget Suitable for?

I would be honest with you, this widget is most suitable for fashion, personal, lifestyle, recipe and travel blogs but it doesn’t matter! Your blog needs this beauty notwithstanding what it’s about.

Want a demo? Check out my related post widget. Or Demo blog

Adding It To your Blog

To implement this widget, as usual, backup your blog theme to avoid losing it in case of mistakes.

To back up your theme, navigate to themes in your blogger dashboard and click on “backup and restore” then “Backup theme” when the box pops up.

Close pop up and click on “Edit HTML” use “CTRL F to search for codes”

Search for </b:skin> and paste the CSS code just above it.

# related-posts { 
 position: static;
    float:left;
    width:100%; 
    height: auto;
}
 #related-posts h2 { 
    margin-top: 10px;
    background:none;padding:3px; 
}
# related-posts .related_img { 
    margin:5px;
    width:150px;
    height:100px;
    tran sition:all 300ms ease-in-out;
    -webkit-transition:all 300ms ease-in-out;
    -moz-transition:all 300ms ease-in-out;
    -o-transition:all 300ms ease-in-out;
    -ms-transition:all 300ms ease-in-out; 
}
#related-title {
    color: #222;
    line-height: 16px;
    padding: 0 10px;
    text-align: center;
    text-shadow: 0 2px 2px #fff;
    width: 100px;
}
#related-posts .related_img:hover{ 
    opacity:.7;
    filter:alpha(opacity=70);
    -moz-opaci ty:.7;
    -khtml-opacity:.7
}
#related-title:hover { 
    text-decoration: underline; 
}
.related-header-title{ 
  padding-bottom: 3px;
  display: inline-block;
  margin-top: 0;
  font-size: 24px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
  color: #222;
  margin-bottom: 20px;
 }
@media screen and (max-width : 699px) {
# related-posts { 
 position: relative;
 float:center;
    display: block;
    width:100% !important; 
    height: 200px !important.;
}
#related-posts .related_img { 
    margi n:5px;
    width:100% !important;
     height:200px !important;
     }
#related-title {
    color: #333;
    line-height: 16px;
    padding: 0 10px;
    text-align: center;
    text-shadow: 0 2px 2px #fff;
    width: 100% !important;
}
}

Now search for </head> and paste the co the below just above it

//")!=-1){s[i]=s[i].substringundefineds[i].indexOfundefined">")+1,s[i].length)}}s=s.joinundefined"");s=s.substringundefined0,chop-1);return s}
  function showrecentposts1undefinedjson){j=undefinedshowRandomImg)?Math.floorundefinedundefinedimgr.length+1)*Math.randomundefined)):0;img=new Arrayundefined);ifundefinednumposts2imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOfundefined"'+pcm+' comments';var trtd='';document.writeundefinedtrtd);j++}}var relatedTitles=new Arrayundefined);var relatedTitlesNum=0;var relatedUrls=new Arrayundefined);var thumburl=new Arrayundefined);function related_results_labels_thumbsundefinedjson){forundefinedvar i=0;i0)document.writeundefined'');document.writeundefined'
');whileundefinediAdd stylish related posts widget In Your blogspot Blog 2
');ifundefinedr');relatedUrls.spliceundefined0,relatedUrls.length);thumburl.spliceundefined0,thumburl.length);relatedTitles.spliceundefined0,relatedTitles.length)} //]]>

For Responsive Templates

If you are using a responsive blogger template, Search for

Did you enjoy this article?

Don't miss out on our new content. Sign Up!

Prev Post

People Whom I think Should Start A Blog

June 6, 2017

Next Post

Truth about Successful Bloggers New and Struggling Bloggers Fail to Realize

June 20, 2017

Comments (6)

  • Joseph ngorka

    September 16, 2019 at 2:32 am

    Nice article thanks

  • daayur

    July 25, 2019 at 11:34 pm

    thanks but seems not working for ma new site

    1. Onome

      July 26, 2019 at 8:31 am

      You are probably missing a code.

  • OJO ABIODUN

    May 7, 2019 at 1:27 pm

    thanks for this

  • MIMRAN

    February 21, 2019 at 12:10 pm

    can’t be able to copy the code

    1. Onome

      February 24, 2019 at 9:21 am

      Long click, you should be able to copy the code.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get my FREE eBook on starting a Lifestyle Blog

Get my FREE eBook on starting a Lifestyle Blog

+earn an income doing something you love - Great Value for FREE in this eBook.

You have Successfully Subscribed!