You are here:Home » News » How to Make Static Featured Post Widget with Thumbnails for Blogger

How to Make Static Featured Post Widget with Thumbnails for Blogger

This post is related to simple HTML and CSS coding. This is simple static featured post widget for a blogger that today I am going to share with you.

This will be horizontal featured post widget where you can share your special specific posts and that will help you to drive huge traffic to some certain posts and your blog too.

This featured post can be used in your websites means on your customizable website that is hosted or you can also use this widget on your personal blogs.

You can share some special posts or categories with images those which need to very special attention. In this featured post, you will get thumbnails which mean you can share your posts with images and article titles.

Simple Static Featured Post Widget with Thumbnails for Blogger
Demo Simple Static Post Widget
This loads faster because this doesn't have JavaScript codes it is very simple, and let me tell you it is static where it doesn't change posts every time. 

CSS CODE




<style type="text/css">
div.fimg {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 285px;
height:auto;

}

div.fimg:hover {
    border: 1px solid #777;
}

div.fimg img {
    width: 100%;
    height: 200px;
}

div.pdesc {
    text-align: center;
top:5px;
}
 </style>

HTML CODE,


<div class="fimg">
  <a target="_blank" href="#URL">
    <img src="#IMGURL" alt="#IMGALTTAG"/>
  </a>
  <div class="pdesc">#ARTICLETITLE</div>
</div>

<div class="fimg">
  <a target="_blank" href="#URL">
    <img src="#IMGURL" alt="#IMGALTTAG"/>
  </a>
  <div class="pdesc">#ARTICLETITLE</div>
</div>

<div class="fimg">
  <a target="_blank" href="#URL">
    <img src="#IMGURL" alt="#IMGALTTAG"/>
  </a>
  <div class="pdesc">#ARTICLETITLE</div>
</div>

<div class="fimg">
  <a target="_blank" href="#URL">
    <img src="#IMGURL" alt="#IMGALTTAG"/>
  </a>
  <div class="pdesc">#ARTICLETITLE</div>
</div>

<div class="fimg">
  <a target="_blank" href="#URL">
    <img src="#IMGURL" alt="#IMGALTTAG"/>
  </a>
  <div class="pdesc">#ARTICLETITLE</div>
</div>

<div class="fimg">
  <a target="_blank" href="#URL">
    <img src="#IMGURL" alt="#IMGALTTAG"/>
  </a>
  <div class="pdesc">#ARTICLETITLE</div>
</div>

How to Add Featured Post Widget to Blogger

This is very simple to add this featured post widget to blogger, there you just have to add widget and copy both CSS and HTML code and paste it. 
If still facing problem then learn how to add third party widget on blogger.

Important Tips

Before going to save the widget you need to change some things HTML section. Search below terms and change as per the requirement. 
  • #URL-Main Page that you are linking. 
  • #IMGURL - Image URL that you are going to display. 
  • #IMGALTTAG - Optimize your images for better SEO. 
  • #ARTICLETITLE - To display your article title. 
Thanks and stay tuned with us... 

0 comments:

Post a Comment