Blogger is now become a major platform of blogging since few past years. As blogger become popular the developers also start creating its templates and widgets to make blogger blog responsive and beautiful and easier to use. Today we are going to share with you a very useful new blogger widget. This widget is to display featured posts.
Features of this blogger widget
- This widget is 100% responsive as its media queries for different screen sizes are created. So you no need to customise it for other screen sizes.
- It has beautiful Flat elegant style with beautiful mouse hover effect.
- It also show labels below every post.
- You can manually change it's label or post name
Demo of this blogger widget
Recommended Posts:Note: This Blogger widget is best for Footer or Header.
How to Install
- Goto Blogger dashboard
- Goto layout tab>>Add gadget>>HTML/Javascript
- Paste the following code in it and save
<style>
#featured-posts{width:100%;height:200px;background:#34495e;margin-top:-1px}#featured-posts h3{color:#fff;font-size:20px;margin:0;font-weight:300;text-align:center;padding:15px}#featured-posts ul{margin:0;padding:20px}#featured-posts ul li{list-style-type:none;padding-left:10px;float:left;margin-right:20px;width: 249.5px;height:100px;border-left:3px solid rgba(255,255,255,0.5)}#featured-posts ul li span{color:rgba(255,255,255,0.5);display:block}#featured-posts ul li span i{padding-right:8px}#featured-posts ul li a{color:#fff;text-decoration:none;font-size:15px;line-height:25px}#featured-posts ul li:hover{border-color:#3498db;margin-top:-10px;-webkit-transition:all .3s ease 0;-moz-transition:all .3s ease 0;-ms-transition:all .3s ease 0;-o-transition:all .3s ease 0;transition:all .3s ease 0}#featured-posts ul li:hover span{color:#3498db}
#featured-posts ul li:last-child { margin-right:0;}
@media screen and (max-width : 1200px) {
#featured-posts ul li {width: 224.5px;}
}
@media screen and (max-width : 1100px) {
#featured-posts ul li {width: 199.5px;}
}
@media screen and (max-width : 1000px) {
#featured-posts .item4 {display:none}
#featured-posts ul li {width: 243.6px;}
#featured-posts .item3 {margin-right:0;}
}
@media screen and (max-width : 900px) {
#featured-posts ul li {width: 210.3px;}
}
@media screen and (max-width : 800px) {
#featured-posts .item3 {display:none;}
#featured-posts ul li {width: 282px;}
#featured-posts .item2 {margin-right:0;}
}
@media screen and (max-width: 700px) {
#featured-posts ul li {width: 232px;}
}
@media screen and (max-width: 600px){
#featured-posts ul li {width: 182px;}
#featured-posts {height:220px;}
}
@media screen and (max-width : 500px){
#featured-posts{display:none!important;}
}
</style>
<div id='featured-posts'>
<div class='container'>
<h3>Featured Posts</h3>
<ul>
<li class='item1'><a href='Your post URL here'>Your post name here</a><span><i class='fa fa-tags'/>your label here</span></li>
<li class='item2'><a href='Your post URL here'>Your post name here</a><span><i class='fa fa-tags'/>your label here</span></li>
<li class='item3'><a href='Your post URL here'>Your post name here</a><span><i class='fa fa-tags'/>your label here</span></li>
<li class='item4'><a href='Your post URL here'>Your post name here</a><span><i class='fa fa-tags'/>your label here</span></li>
</ul>
</div>
</div>
Customization
To display posts in the featured post widget just replace the following :
- Your post URL here with your post address which you want to display in the widget.
- Your post name here With you post name which you want to display.
- your label here with your label name which you want to display in the widget
To increase number of posts
To increase number of posts rather than 4 just add the following below code above </ul>
<li class='item4'><a href='Your post URL here'>Your post name here</a><span><i class='fa fa-tags'/>SEO</span></li>
To reduce number of posts
To reduce post numbers in widget just remove one time the following below code
<li class='item4'><a href='Your post URL here'>Your post name here</a><span><i class='fa fa-tags'/>SEO</span></li>
No comments:
Post a Comment