Amazing New Widgets Using HTML And CSS

Featured post widget

How to add this widget ?

• Go to blogger dashboard
• Go to layout
• Add HTML/JavaScript Gadget
• Now place this code
• Change the things in red colour 
• Now save it 

Change the the things that are in Red colour .

Demo of featured post widget

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677<style>
div.gallery {
    border: 1px solid #ccc;
    border-radius: 5px;
}
div.gallery:hover {
    border: 1px solid #777;
    border-radius: 5px;
}
div.gallery img {
    width: 100%;
    height: auto;
}
div.desc {
    padding: 15px;
    text-align: center;
    border-radius: 5px;
}
* {
    box-sizing: border-box;
}
.responsive {
    padding: 10px;
    float: left;
    width: 24.99999%;
    border-radius: 5px;
}
@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
        border-radius: 5px;
    }
}
@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
        border-radius: 5px;
    }
}
.clearfix:after {
    content: "";
    display: table;
    clear: both;
    border-radius: 5px;
}
.btnmystylenew{
padding: 6px;
padding-left:5px;
padding-right:5px;
border-radius: 5px;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
color:#c4302b;
}
.btnmystylenew:hover
{
source:none;
color:#c4302b;
border-radius: 0px;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
</style>

<div class="responsive">
  <div class="gallery">
    <a target="_blank" href="http://www.techmobs.in/2017/06/earn-money-blogging.html">
 <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT4gWafJmFazH1p02rbvIJlSfgOibqYRkcVLW1YyGX2MC_xy3dAeI8MbYfitGpzohkuUL8HCTWBVBGCcwFy2EOqWqFvyi5CjTfHmt39l4LWFBFDT25ZIB64QNPIsFPtT4D7b1Ah-aiwOT0/s640/earn-money-blogging.jpg"
 alt="Best Ever Ways To Earn Money Blogging" width="600" height="400" />
    </a>
    <div class="desc"><a target="_blank" href="http://www.techmobs.in/2017/06/earn-money-blogging.html"><button class="btnmystylenew">
<b><span style="color: red;">Earn Money Blogging</span></b></button></a></div>
  </div>
</div>

More Widgets :

• Subscription Box
• Super 3D Download Button
• Embed Youtube Responsively
• Snowfall On Your Blogger