Featured Post Widget for Blogger (CSS3, Thumbnails)

Posted on October 02, 2014 by 
Featured Post Widget for Blogger (CSS3, Thumbnails)
Got something special article and want those to highlight for visitor’s max attention, featured post widget can do that job for you. Here you can find an awesome, lightweight and hot featured post widget what made up with HTML, CSS and CSS3 effects and keyframe animation and Google font. it’s easy to configure and add to your Blogger blog. Looks good with every template and every type of site no matter they are Blogsite or portfolio sites. Contains 4 featured post slot and with little code knowledge you can increase and decrease slot number as you want. Let’s see how it looks like, how to add in Blogger blogs and how to configure

Featured Post Widget for Blogger (CSS3, Thumbnails)


Preview-

Featured Post Widget for Blogger (CSS3, Thumbnails)

Live demo- (Here you go)

Codes for copy-


<link href='http://fonts.googleapis.com/css?family=Play' rel='stylesheet' type='text/css'/>
<style>
.ks-featured { height:305px; width:305px; margin:auto; padding:1px 1px;}
.ks-featured h4  { border:#151515 solid 1px; font-family: 'Play', sans-serif; font-size:19px; font-weight:600; text-align:center;  padding-top:10px; padding-bottom:10px; margin-bottom:10px;
-moz-box-shadow:1px 1px 10px #CCC; -webkit-box-shadow:1px 1px 10px #CCC; box-shadow:1px 1px 10px #CCC;webkit-transition: all 0.5s
ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition:
all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}

.ks-featured h4:hover {border:#151515 solid 1px;color:#F03;-moz-box-shadow:1px 1px 10px #CCC; -webkit-box-shadow:1px 1px 10px #CCC; box-shadow:1px 1px 10px #CCC;
webkit-transition: all 0.5s
ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition:
all 0.5s ease-in-out; transition: all 0.5s ease-in-out;}

.ks-places { border:solid 1px #000;width:150px; height:150px; overflow: hidden;
-moz-box-shadow:1px 1px 10px 1px rgba(1, 1, 1, 1); -webkit-box-shadow:1px 1px 10px 1px rgba(1, 1, 1, 1); box-shadow:1px 1px 10px 1px rgba(1, 1, 1, 1);
float:left;
webkit-transition: all 0.5s
ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition:
all 0.5s ease-in-out; transition: all 0.5s ease-in-out; cursor:pointer; display:block;}
.ks-places:hover { border:solid 1px #0CF;webkit-transition: all 0.5s
ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition:
all 0.5s ease-in-out; transition: all 0.5s ease-in-out; opacity:.6;
-moz-box-shadow:1px 1px 10px 1px rgba(1, 150, 255, 1); -webkit-box-shadow:1px 1px 10px 1px rgba(1, 150, 255, 1); box-shadow:1px 1px 10px 1px rgba(1, 150, 255, 1);}


.ks-glow{

    -webkit-animation: glow 800ms ease-out infinite alternate;
    -moz-animation: glow 800ms ease-out infinite alternate;
    -o-animation: glow 800ms ease-out infinite alternate;
    -ms-animation: glow 800ms ease-out infinite alternate;
    animation: glow 800ms ease-out infinite alternate;
    background: #fff;
    background: -webkit-linear-gradient(#f5f5f5, #fff);
    background: -moz-linear-gradient(#f5f5f5, #fff);
    background: -o-linear-gradient(#f5f5f5, #fff);
    background: -ms-linear-gradient(#f5f5f5, #fff));
    background: linear-gradient(#f5f5f5, #fff);
    border-color: #F33;
    box-shadow: 0 0 5px #F33, inset 0 0 5px #F33, 0 0px 0 #000;
    color: #151515;
    outline: none;
}


@-webkit-keyframes glow {
    0% {
        border-color: #F33;
        box-shadow: 0 0 5px #F33, inset 0 0 5px #F33, 0 0px 0 #000;
    } 
    100% {
        border-color: #F63;
        box-shadow: 0 0 20px #F33, inset 0 0 10px #F33, 0 0px 0 #000;
    }
}

@-moz-keyframes glow {
    0% {
        border-color: #F33;
        box-shadow: 0 0 5px #F33, inset 0 0 5px#F33, 0 0px 0 #000;
    } 
    100% {
        border-color: #F63;
        box-shadow: 0 0 20px #F33, inset 0 0 10px #F33, 0 0px 0 #000;
    }
}

@-o-keyframes glow {
    0% {
        border-color: #F33;
        box-shadow: 0 0 5px #F33, inset 0 0 5px #F33, 0 0px 0 #000;
    } 
    100% {
        border-color: #F63;
        box-shadow: 0 0 20px #F33, inset 0 0 10px #F33, 0 0px 0 #000;
    }
}

@-ms-keyframes glow {
    0% {
        border-color: #F33;
        box-shadow: 0 0 5px #F33, inset 0 0 5px #F33, 0 0px 0 #000;
    } 
    100% {
        border-color: #F63;
        box-shadow: 0 0 20px #F33, inset 0 0 10px #F33, 0 0px 0 #000;
    }
}

@keyframes glow {
    0% {
        border-color: #F33;
        box-shadow: 0 0 5px #F33, inset 0 0 5px #F33, 0 0px 0 #000;
    } 
    100% {
        border-color: #F63;
        box-shadow: 0 0 20px #F33, inset 0 0 10px #F33, 0 0px 0 #000;
    }
}


</style>
<!--crawlist.net featured post starts-->
<div class="ks-featured"><h4 class="ks-glow">Recommand for you !</h4>
<div class="ks-places">
<a href='content link' target='_blank'><img alt='alt tag' src='image link' title='name of post' width="150" height="150"/></a>
</div>
<div class="ks-places">
<a href='content link' target='_blank'><img alt='alt tag' src='image link' title='name of post' width="150" height="150"/></a>
</div>
<div class="ks-places">
<a href='content link' target='_blank'><img alt='alt tag' src='image link' title='name of post' width="150" height="150"/></a>
</div>
<div class="ks-places">
<a href='content link' target='_blank'><img alt='alt tag' src='image link' title='name of post' width="150" height="150"/></a>
</div></div>
<!--crawlist.net featured post ends-->


How to add this widget in Blogger
  • First log in to your Blogger, select your Blog, 
  • Go to 'Layout' tab then click 'add a gadget' 
  • Select 'html/javascript' from pop up menu. 
  • Copy following codes and configure

How to configure-
To configuring this widget you will need your featured content links, Images links. All Image must be height of 150px and width of 150px otherwise if your image size is bigger that this size you image will not be cropped will scaled.
  • In blue colored ‘content link’ option place your content links. 
  • Preview your images, click right side of mouse from menu select ‘Image location’ and copy the Image link place those links in red colored 'image link'. 
  • Additionally add 'alt tag' (for SEO) orange colored
  • Title 'name of post' pink colored Title will be shown on mouse hover as tooltip. 
  • Save your gadget, hit save template. 
And see your recommended post widget in live action.

Compatibility
  • All effects works fine on latest updated web browser. 
  • Compatible with all templates

So don’t forget to mention what you think about this widget. New widget will be release soon stay subscribed. Goodluck.....