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 |
<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 :
Post A Comment:
0 comments: