Awesome Featured Posts Gadget with Sharing Buttons for Blogger

Updated on June 28, 2016 - Post a Comment

Author: Muntasir Minhaz
A stylish featured posts gadget for Blogger which shows the with posts with title, image, description and social media buttons for sharing.

A blog must have a featured posts widget or gadget for many obvious reasons. It gives a chance present the very best and hot of your blog to the visitors. On the home page of you blog, a gadget showing off you latest posts on various topics is a must.

For those of us who have Blogger hosted blogs, there are no easy solutions out there. Most times you have to add separate “featured” label with posts you want, and requires to add several JavaScripts which do not works in most blogs, then you need to add jQuery to run them. These solutions do not allows you to change them to you need.
All those can be avoided by this Blogger featured posts widget solution in this blog post. Here are the features of the widget;

On one line of JavaScript which will work on any Blogger blog. No need of jQuery.
You can choose the labels/category you want to use for featured posts.
Automatically shows the latest post of the lot first.
Awesome CSS design.
Supports responsive or mobile design of your blog.
Comes with social media sharing buttons.
Work even in no-script mode.

So lets start. Follow the instructions Given below;
I. Adding the Featured Posts Gadget/Widget

Go to Blogger Dashboard of your blog > Layout.
Choose a gadget section where you want to add the featured posts widget. It should be just below the navigation menu and above the rest of the widgets in the page.If you are having difficulty to locate and place it then you have to create a new gadget section. In default Blogger templates, you might face problems with styling and it can be sloved only be creating a new gadget section.
Click on “Add a gadget”.
Look for “Blog List” widget. Click on the “+” add button.
Do not make any changes on the widget settings and click “Save”.
After that go to Blogger Dashboard of your blog > Template. Back up your template before making any changes.
Click “Edit HTML”.
Click “Jump to Widget”.
From the drop down menu select and click “Bloglist1”.
It will take you to the start of the gadget code in the template. The code for the widget will look like this;
```
<b:widget id='BlogList1' locked='false' title='My Blog List' type='BlogList'>
</b:widget>
```

Delete and replace it all with the following code,

<b:widget id='BlogList1' locked='true' title='Featured Posts Gadget by TechInfoKnow.com' type='BlogList'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div expr:id='data:widget.instanceId + &quot;_container&quot;'>
<!-- Featured post gadget for Blogger by TechInfoKnow.com -->
<div id='techinfoknow-ftpost'><ul class='ftul'><b:loop values='data:items' var='item'><li class='ftli'>
<a expr:href='data:item.itemUrl'>
<div class='ftimg'><img border='0' expr:alt='data:item.itemTitle' expr:src='data:item.itemThumbnail.url' expr:title='data:item.itemTitle'/></div>
<div class='ftol'/><div class='fttitle'><div class='ftopic'><data:item.blogTitle/></div><h2><data:item.itemTitle/></h2><div class='ftdes'><p><data:item.itemSnippet/></p>
<div class='ftsb'><a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:item.itemUrl + &quot;&amp;t=&quot; + data:item.itemTitle' rel='nofollow' target='_blank' title='Share on Facebook'><img src='http://simplesharingbuttons.com/images/flat_web_icon_set/color/Facebook.png'/></a><a expr:href='&quot;http://twitter.com/share?text=&quot; + data:item.itemTitle + &quot;...&amp;url=&quot; + data:item.itemUrl' rel='nofollow' target='_blank' title='Tweet'><img src='http://simplesharingbuttons.com/images/flat_web_icon_set/color/Twitter.png'/></a><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:item.itemUrl' rel='nofollow' target='_blank' title='Share on Google+'><img src='http://simplesharingbuttons.com/images/flat_web_icon_set/color/Google+.png'/></a></div>
</div></div><div class='ftcv'/>
</a>
</li></b:loop></ul></div></div>
<script async='async' type='text/javascript'>function changeThumbSize(id,size){var blogGadget = document.getElementById(id);var replacement = blogGadget.innerHTML;blogGadget.innerHTML = replacement.replace(/s72-c/g,&quot;w&quot;+size);var thumbnails = blogGadget.getElementsByTagName(&quot;img&quot;);for(var i=0;i&lt;thumbnails.length;i++){thumbnails[i].width = size;thumbnails[i].height = size;}}
changeThumbSize(&quot;BlogList1&quot;,400);</script>
</b:if>
</b:includable>
</b:widget>

Click “Save Template”.

To modify the image size and orientation, change the 400 in the line-15. If you are using more than one “Blog List” gadget then change the BlogList1 in line-15 to something like BlogList2 or Bloglist3 so that the template editor do not shows error.

II. Adding posts to the Gadget/Widget
After adding the gadget, to show the posts you will need to add the feed URLs of posts in the gadget. Follow the instructions below;

Go to Blogger Dashboard of your blog > Layout.
Find the featured post gadget you just added.
Click “Edit” on gadget box. A new window will open up titled “Configure Blog List”.
Click “Add to List” on the bottom of the window. “Add to your blog list” box will open up.
Select Add by URL under “Add to your blog list”.
Here you will need put RSS or atom feed URLs of the various labels of your blog.For example; to show a post with “Blogger” tag, you will need to the add this URL
```
http://techinfoknow.blogspot.com/feeds/posts/default/-/blogger?redirect-false&orderby=published&start-index=1
```
Replace http://techinfoknow.blogspot.com with your blog’s URL and replace blogger at the end of the URL with the label you want.
Remember the label is case sensitive. You can add customized feed URLs too and to know how read get label wise feeds for Blogger.
After putting the URL click “Add” button.
The added URL will be highlighted in yellow in the list with a auto received title. This will be shown in the gadget with post title. Click “Rename” to change it.
On the opened box give a new name and click “Save”. Rename it to something related. I suggest you to rename it to the label.
Repeat the process from step 4 to step 9 as many times as you need until you fill the gadget post requirement. (See the different style)
For “Sort” keep the setting to “Most recent updated”, and for “show” keep the setting to “All blogs”
Once you added required number of feed URLs, click “Save”.

III. Adding CSS styles for the Featured Posts Gadget/Widget
For adding CSS codes go to,

Go to Blogger Dashboard of your blog > Template.
click “Edit HTML” after you backed up your blog’s template.
Now search for ]]></b:skin>. Just before it paste the CSS code for the gadget. Different CSS codes are given later in this post. Or you can paste it in a existing style tag or create separate style tag for it.
Click “Save Template”.

CSS Codes for the Featured Posts Gadget

In below 5 different CSS styles are given. Use one which match you taste for the gadget.
Style-1: Suitable for 7 posts

// Featured post for Blogger Blogs by TechInfoKnow Get it here
#BlogList1 {margin: 0;width: 100%;padding: 0}
.BlogList ul {padding: 0;list-style-type: none;background-color: #eee;}
.BlogList li{list-style-type: none}
#techinfoknow-ftpost{padding: 0px;position: relative;font-family: cambria}
.ftul {width: 100%;}
.ftul img {min-height: 100%;min-width: 100%;height: auto;width: auto;position: absolute;left: -100%;right: -100%;top: -100%;bottom: -100%;margin: auto}
.ftul .ftimg {width: 100%;overflow: hidden}
.ftli {float: left;position: relative;overflow: hidden;height: 225px}
.ftli li {padding: 0 0 1px 1px;}
.ftli li {padding: 0 0 1px 1px;}
.ftli a:hover {text-decoration: none}
.ftli:hover .ftol,.ftli:hover .ftdes {opacity: 1;transition:all ease-in;}
.ftli:hover .ftcv{opacity: 1;}
.ftli:hover .fttitle {bottom: auto;margin-top:15%;}
.ftul li:nth-of-type(1) {height: 290px;width: 46%}
.ftul li:nth-of-type(2) {height: 290px;width: 27%}
.ftul li:nth-of-type(3) {height: 290px;width: 27%}
.ftul li {height: 250px;width: 25%}
.ftol {opacity:.1;background: rgba(0,0,0,0.5);position: absolute;height: 100%;width: 100%;z-index: 999;top: 0;left: 0;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out}
.featured_title_under h2 a, .fttitle h2 a {color: #FFF}
.ftopic{color: #FFFFFF;font-size: 12px;text-shadow: rgba(0,0,0,.6) 0 0 5px;text-transform: uppercase}
.fttitle {position: absolute;bottom: 0;left: 0;margin: 0px 5px 10px 10px;z-index: 1001;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out}
.fttitle h2 {font-size: 23px;line-height: 1.2em;color: #FFF;text-shadow: rgba(0, 0, 0, 0.88) 0 0 5px;z-index: 1001;position: relative;margin: 0;font-family: cambria, serif}
.ftul li:nth-of-type(1) .fttitle h2 {font-size:30px}
.ftul li:nth-of-type(2) .fttitle h2 {font-size:24px}
.ftul li:nth-of-type(3) .fttitle h2 {font-size:24px}
.ftul li .fttitle h2 {font-size:24px}
.ftdes {opacity: 0;padding: 5px 5px 0px 0px;padding-top: 5px;padding-right: 5px;padding-bottom: 0px;padding-left: 0px;position: absolute;-webkit-transition: opacity .2s;-moz-transition: opacity .2s;transition: opacity .2s;-o-transition: opacity .2s}
.ftul li:nth-of-type(1) .ftdes p {display: block;visibility: visible}
.ftul li:nth-of-type(2) .ftdes p {display: block;visibility: visible}
.ftul li:nth-of-type(3) .ftdes p {display: block;visibility: visible}
.ftul li .ftdes p{display: none;visibility: hidden}
.ftdes p {font-size: 13.6px;line-height: 1.5em;color: #EEE;margin: 0px 5px 1px 0px;font-family: cambria , sans-serif}
.ftcv {margin-left: 1px;position: absolute;display: block;height: 100%;width: 100%;background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, transparent), color-stop(100%, rgba(0, 0, 0, 0.75)));background: -webkit-linear-gradient(transparent,rgba(0, 0, 0, 0.75));background: -moz-linear-gradient(transparent,#000000);background: -o-linear-gradient(transparent,#000000);background: linear-gradient(transparent,rgba(0, 0, 0, 0.75));bottom: 0}
.ftsb {display: block;margin-top: 10px}
.ftsb > a:link > img {position: relative;height: 26px;width: 26px;min-height: 16px;min-width: 16px;left: 0;right: 0;top: 0;bottom: 0;margin-right: 5px}
.ftsb > a:link > img:hover {opacity: .8}
@media screen and (max-width: 800px){
.ftul li:nth-of-type(1) {height: 400px;width: 50%}
.ftul li:nth-of-type(2), .ftul li:nth-of-type(3) , .ftul li {height: 200px;width: 50%}
.ftul li:nth-of-type(2) .ftdes p, .ftul li:nth-of-type(3) .ftdes p, .ftul li .ftdes p{display: none;visibility: hidden}
.ftul li .fttitle h2 {font-size:22px}}
@media screen and (max-width: 500px){
.ftul li:nth-of-type(1) , .ftul li:nth-of-type(2), .ftul li:nth-of-type(3) , .ftul li {height: 200px;width: 100%}
.ftul li:nth-of-type(1) .ftdes p, .ftul li:nth-of-type(2) .ftdes p, .ftul li:nth-of-type(3) .ftdes p, .ftul li .ftdes p{display: none;visibility: hidden}
.ftul li:nth-of-type(1) .fttitle h2 , .ftul li:nth-of-type(2) .fttitle h2, .ftul li:nth-of-type(3) .fttitle h2, .ftul li .fttitle h2 {font-size:25px}}

Style-2: Suitable for 5 posts

// Featured post for Blogger Blogs by TechInfoKnow Get it here
#BlogList1 {margin: 0;width: 100%;padding: 0}
.BlogList ul {padding: 0;list-style-type: none;background-color: #eee;}
.BlogList li{list-style-type: none}
#techinfoknow-ftpost{padding: 0px;position: relative;font-family: cambria}
.ftul {width: 100%;}
.ftul img {min-height: 100%;min-width: 100%;height: auto;width: auto;position: absolute;left: -100%;right: -100%;top: -100%;bottom: -100%;margin: auto}
.ftul .ftimg {width: 100%;overflow: hidden}
.ftli {float: left;position: relative;overflow: hidden;height: 225px}
.ftli li {padding: 0 0 1px 1px;}
.ftli li {padding: 0 0 1px 1px;}
.ftli a:hover {text-decoration: none}
.ftli:hover .ftol,.ftli:hover .ftdes {opacity: 1;transition:all ease-in;}
.ftli:hover .ftcv{opacity: 1;}
.ftli:hover .fttitle {bottom: auto;margin-top:15%;}
.ftul li:nth-of-type(1) {height: 460px;width: 40%}
.ftul li {height: 230px;width: 30%}
.ftol {opacity:.1;background: rgba(0,0,0,0.5);position: absolute;height: 100%;width: 100%;z-index: 999;top: 0;left: 0;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out}
.featured_title_under h2 a, .fttitle h2 a {color: #FFF}
.ftopic{color: #FFFFFF;font-size: 12px;text-shadow: rgba(0,0,0,.6) 0 0 5px;text-transform: uppercase}
.fttitle {position: absolute;bottom: 0;left: 0;margin: 0px 5px 10px 10px;z-index: 1001;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out}.fttitle h2 {font-size: 23px;line-height: 1.2em;color: #FFF;text-shadow: rgba(0, 0, 0, 0.88) 0 0 5px;z-index: 1001;position: relative;margin: 0;font-family: cambria, serif}
.ftul li:nth-of-type(1) .fttitle h2 {font-size:30px}
.ftul li .fttitle h2 {font-size:24px}
.ftdes {opacity: 0;padding: 5px 5px 0px 0px;padding-top: 5px;padding-right: 5px;padding-bottom: 0px;padding-left: 0px;position: absolute;-webkit-transition: opacity .2s;-moz-transition: opacity .2s;transition: opacity .2s;-o-transition: opacity .2s}
.ftul li:nth-of-type(1) .ftdes p {display: block;visibility: visible}
.ftul li .ftdes p{display: none;visibility: hidden}
.ftdes p {font-size: 13.6px;line-height: 1.5em;color: #EEE;margin: 0px 5px 1px 0px;font-family: cambria , sans-serif}
.ftcv {margin-left: 1px;position: absolute;display: block;height: 100%;width: 100%;background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, transparent), color-stop(100%, rgba(0, 0, 0, 0.75)));background: -webkit-linear-gradient(transparent,rgba(0, 0, 0, 0.75));background: -moz-linear-gradient(transparent,#000000);background: -o-linear-gradient(transparent,#000000);background: linear-gradient(transparent,rgba(0, 0, 0, 0.75));bottom: 0}
.ftsb {display: block;margin-top: 10px}
.ftsb > a:link > img {position: relative;height: 26px;width: 26px;min-height: 16px;min-width: 16px;left: 0;right: 0;top: 0;bottom: 0;margin-right: 5px}
.ftsb > a:link > img:hover {opacity: .8}
@media screen and (max-width: 800px){
.ftul li:nth-of-type(1) {height: 400px;width: 50%}
.ftul li {height: 200px;width: 50%}
.ftul li .ftdes p{display: none;visibility: hidden}
.ftul li .fttitle h2 {font-size:22px} 
}
@media screen and (max-width: 500px){
.ftul li:nth-of-type(1) , .ftul li {height: 200px;width: 100%}
.ftul li:nth-of-type(1) .ftdes p, .ftul li:nth-of-type(3) .ftdes p, .ftul li .ftdes p{display: none;visibility: hidden}
.ftul li:nth-of-type(1) .fttitle h2 , .ftul li .fttitle h2 {font-size:25px}
}

Style-3: Suitable for 4 or 8 posts

// Featured post 3 for Blogger Blogs by TechInfoKnow 
#BlogList1 {margin: 0;width: 100%;padding: 0}
.BlogList ul {padding: 0;list-style-type: none;background-color: #eee;}
.BlogList li{list-style-type: none}
#techinfoknow-ftpost{padding: 0px;position: relative;font-family: cambria}
.ftul {width: 100%;}
.ftul img {min-height: 100%;min-width: 100%;height: auto;width: auto;position: absolute;left: -100%;right: -100%;top: -100%;bottom: -100%;margin: auto}
.ftul .ftimg {width: 100%;overflow: hidden}
.ftli {float: left;position: relative;overflow: hidden;height: 225px}
.ftli li {padding: 0 0 1px 1px;}
.ftli li {padding: 0 0 1px 1px;}
.ftli a:hover {text-decoration: none}
.ftli:hover .ftol,.ftli:hover .ftdes {opacity: 1;transition:all ease-in;}
.ftli:hover .ftcv{opacity: 1;}
.ftli:hover .fttitle {bottom: auto;margin-top:15%;}
.ftul li:nth-of-type(1) {height: 400px;width: 45%}
.ftul li:nth-of-type(2) {height: 400px;width: 30%}
.ftul li {height: 200px;width: 25%}
.ftol {opacity:.1;background: rgba(0,0,0,0.5);position: absolute;height: 100%;width: 100%;z-index: 999;top: 0;left: 0;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out}
.featured_title_under h2 a, .fttitle h2 a {color: #FFF}
.ftopic{color: #FFFFFF;font-size: 12px;text-shadow: rgba(0,0,0,.6) 0 0 5px;text-transform: uppercase}
.fttitle {position: absolute;bottom: 0;left: 0;margin: 0px 5px 10px 10px;z-index: 1001;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out}
.fttitle h2 {font-size: 23px;line-height: 1.2em;color: #FFF;text-shadow: rgba(0, 0, 0, 0.88) 0 0 5px;z-index: 1001;position: relative;margin: 0;font-family: cambria, serif}
.ftul li:nth-of-type(1) .fttitle h2 {font-size:30px}
.ftul li:nth-of-type(2) .fttitle h2 {font-size:25px}
.ftul li .fttitle h2 {font-size:22px}
.ftdes {opacity: 0;padding: 5px 5px 0px 0px;padding-top: 5px;padding-right: 5px;padding-bottom: 0px;padding-left: 0px;position: absolute;-webkit-transition: opacity .2s;-moz-transition: opacity .2s;transition: opacity .2s;-o-transition: opacity .2s}
.ftul li:nth-of-type(1) .ftdes p {display: block;visibility: visible}
.ftul li:nth-of-type(2) .ftdes p {display: block;visibility: visible}
.ftul li .ftdes p{display: none;visibility: hidden}
.ftdes p {font-size: 13.6px;line-height: 1.5em;color: #EEE;margin: 0px 5px 1px 0px;font-family: cambria , sans-serif}
.ftcv {margin-left: 1px;position: absolute;display: block;height: 100%;width: 100%;background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, transparent), color-stop(100%, rgba(0, 0, 0, 0.75)));background: -webkit-linear-gradient(transparent,rgba(0, 0, 0, 0.75));background: -moz-linear-gradient(transparent,#000000);background: -o-linear-gradient(transparent,#000000);background: linear-gradient(transparent,rgba(0, 0, 0, 0.75));bottom: 0}
.ftsb {display: block;margin-top: 10px}
.ftsb > a:link > img {position: relative;height: 26px;width: 26px;min-height: 16px;min-width: 16px;left: 0;right: 0;top: 0;bottom: 0;margin-right: 5px}
.ftsb > a:link > img:hover {opacity: .8}
@media screen and (max-width: 800px){
.ftul li:nth-of-type(1), .ftul li:nth-of-type(2) {height:250px;width: 50%}
.ftul li {height: 210px;width: 50%}
.ftul li:nth-of-type(1) .ftdes p, .ftul li:nth-of-type(2) .ftdes p, .ftul li:nth-of-type(3) .ftdes p, .ftul li .ftdes p{display: none;visibility: hidden}
.ftul li:nth-of-type(1) .fttitle h2 , .ftul li:nth-of-type(2) .fttitle h2, .ftul li:nth-of-type(3) .fttitle h2, .ftul li .fttitle h2 {font-size:20px}}
@media screen and (max-width: 500px){
.ftul li:nth-of-type(1) , .ftul li:nth-of-type(2), .ftul li:nth-of-type(3) , .ftul li {height: 200px;width: 100%}
.ftul li:nth-of-type(1) .ftdes p, .ftul li:nth-of-type(2) .ftdes p, .ftul li:nth-of-type(3) .ftdes p, .ftul li .ftdes p{display: none;visibility: hidden}}

Style-4: Suitable for 9 posts

#BlogList1 {margin: 0;width: 100%;padding: 0}
.BlogList ul {padding: 0;list-style-type: none;background-color: #eee;}
.BlogList li{list-style-type: none}
#techinfoknow-ftpost{padding: 0px;position: relative;font-family: cambria}
.ftul {width: 100%;}
.ftul img {min-height: 100%;min-width: 100%;height: auto;width: auto;position: absolute;left: -100%;right: -100%;top: -100%;bottom: -100%;margin: auto}
.ftul .ftimg {width: 100%;overflow: hidden}
.ftli {float: left;position: relative;overflow: hidden;height: 225px}
.ftli li {padding: 0 0 1px 1px;}
.ftli li {padding: 0 0 1px 1px;}
.ftli a:hover {text-decoration: none}
.ftli:hover .ftol,.ftli:hover .ftdes {opacity: 1;transition:all ease-in;}
.ftli:hover .ftcv{opacity: 1;}
.ftli:hover .fttitle {bottom: auto;margin-top:15%;}
.ftul li:nth-of-type(1) {height: 400px;width: 40%}
.ftul li {height: 200px;width: 30%}
.ftul li:nth-of-type(6), .ftul li:nth-of-type(7), .ftul li:nth-of-type(8), .ftul li:nth-of-type(9) {height: 210px;width:25%}
.ftol {opacity:.1;background: rgba(0,0,0,0.5);position: absolute;height: 100%;width: 100%;z-index: 999;top: 0;left: 0;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out}
.featured_title_under h2 a, .fttitle h2 a {color: #FFF}
.ftopic{color: #FFFFFF;font-size: 12px;text-shadow: rgba(0,0,0,.6) 0 0 5px;text-transform: uppercase}
.fttitle {position: absolute;bottom: 0;left: 0;margin: 0px 5px 10px 10px;z-index: 1001;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out}
.fttitle h2 {font-size: 23px;line-height: 1.2em;color: #FFF;text-shadow: rgba(0, 0, 0, 0.88) 0 0 5px;z-index: 1001;position: relative;margin: 0;font-family: cambria, serif}
.ftul li:nth-of-type(1) .fttitle h2 {font-size:30px}
.ftul li .fttitle h2 {font-size:24px}
.ftul li:nth-of-type(6) .fttitle h2, .ftul li:nth-of-type(7) .fttitle h2, .ftul li:nth-of-type(8) .fttitle h2, .ftul li:nth-of-type(9) .fttitle h2, .ftul li {font-size:20px}
.ftdes {opacity: 0;padding: 5px 5px 0px 0px;padding-top: 5px;padding-right: 5px;padding-bottom: 0px;padding-left: 0px;position: absolute;-webkit-transition: opacity .2s;-moz-transition: opacity .2s;transition: opacity .2s;-o-transition: opacity .2s}
.ftul li:nth-of-type(1) .ftdes p {display: block;visibility: visible}
.ftul li .ftdes p{display: none;visibility: hidden}
.ftdes p {font-size: 13.6px;line-height: 1.5em;color: #EEE;margin: 0px 5px 1px 0px;font-family: cambria , sans-serif}
.ftcv {margin-left: 1px;position: absolute;display: block;height: 100%;width: 100%;background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, transparent), color-stop(100%, rgba(0, 0, 0, 0.75)));background: -webkit-linear-gradient(transparent,rgba(0, 0, 0, 0.75));background: -moz-linear-gradient(transparent,#000000);background: -o-linear-gradient(transparent,#000000);background: linear-gradient(transparent,rgba(0, 0, 0, 0.75));bottom: 0}
.ftsb {display: block;margin-top: 10px}
.ftsb > a:link > img {position: relative;height: 26px;width: 26px;min-height: 16px;min-width: 16px;left: 0;right: 0;top: 0;bottom: 0;margin-right: 5px}
.ftsb > a:link > img:hover {opacity: .8}
@media screen and (max-width: 800px){
.ftul li:nth-of-type(1) {height: 400px;width: 50%}
.ftul li:nth-of-type(6), .ftul li:nth-of-type(7), .ftul li:nth-of-type(8), .ftul li:nth-of-type(9), .ftul li {height: 200px;width: 50% !important}
.ftul li .ftdes p{display: none;visibility: hidden}
.ftul li .fttitle h2 {font-size:22px} 
}
@media screen and (max-width: 500px){
.ftul li:nth-of-type(1) {height:250px;width:100% !important}
.ftul li:nth-of-type(6), .ftul li:nth-of-type(7), .ftul li:nth-of-type(8), .ftul li:nth-of-type(9), .ftul li {height: 200px;width: 50% !important}
.ftul li:nth-of-type(1) .ftdes p, .ftul li:nth-of-type(3) .ftdes p, .ftul li .ftdes p{display: none;visibility: hidden}
.ftul li:nth-of-type(1) .fttitle h2 {font-size:25px}
.ftul li .fttitle h2 {font-size:20px}
}

Editing Tips
You should know few things about this gadget.

The latest post for each label will automatically be shown,
Posts are show ascendingly sorted based on post published time. So the latest post will be show at first among all the post and so on.
The gadget is mobile friendly and will work in all screen sizes.

This gadget will make your blog’s home page come alive. If you need any help implementing the gadget, please do put them forward in the comments section.