Metro Style Featured Posts Widget with Images for Blogger
If you would like to target a unique post to all your audience, this widget can be helpful for you. This widget also comes with an hover effect. You can add 4 featured posts by making use of this widget. 3 may have images although one may have just the post title. So lets start adding it to your blog.
Step 1 : Adding CSS to Template
Head up to Blog Title → Template → Edit HTML. Search for the tag ]]></b:skin> by pressing Ctrl + F. Add the below given code just above ]]></b:skin>
#featured-post a{color:#fff}
#featured-post ul{list-style:none;padding:0}
#featured-post ul li{padding:2px 0 0 2px;float:left;clear:none;width:183px}
#featured-post .item-content{background:transparent}
#featured-post .item-thumbnail{background:transparent}
#featured-post .item-content img{width:183px;height:183px}
#featured-post .item-title{line-height:1.3em;font-size:90%;min-height:50px;max-height:50px;;opacity:0.75;background:#000;margin:-63px 0 1px;padding:5px;color:#fff;overflow:hidden}
#featured-post ul li:first-child{height:250px!important;width:250px!important;padding:2px 0 0!important}
#featured-post ul li:first-child img{height:250px!important;width:250px!important}
#featured-post ul li:first-child + li + li + li{width:368px!important;height:64px!important;overflow:hidden}
#featured-post ul li:first-child + li + li + li img{width:368px!important;height:368px!important}
#featured-post ul li:first-child + li + li + li div.item-title{margin:-373px 0 5px;padding-right:60px;min-height:56px;max-height:56px;opacity:0.90;background: #000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmM0aA6gFCCIVrRv-saxz-ejWusHMiioGrQeqoOpXxhvBTIKSNlMQDOaHKUk1-XwCDsclLyV0G3zDgfOdsNLAXjfKUXus6729MFX6NJzyGtme9bBGNWoL73lMklRixLGE6tgglPt1E1tE/s48/Arrow%2520Right.png') 305px 7px no-repeat!important}
#featured-post ul li:first-child + li + li + li div.item-title a{font-size:16px;line-height:1.2em}
Save the template.
Step 2 : Add Widget to your blog
Go to Blog Title → Layout → Add Widget → HTML/JavaScript. Add the below code in it and click on Save.
<div id="featured-post"> <ul> <!--Featured Post 1> <li> <div class="item-content"> <div class="item-thumbnail"> <a href="post url"><img src="image url" /> </a></div> <div class="item-title"> <a href="post url">Post Title</a></div></div></li><!Featured Post 1 end--> <!--Featured Post 2> <li> <div class="item-content"> <div class="item-thumbnail"> <a href="post url"><img src="image url" /> </a></div> <div class="item-title"> <a href="post url">Post Title</a></div></div></li><!Featured Post 2 end--> <!--Featured Post 3> <li> <div class="item-content"> <div class="item-thumbnail"> <a href="post url"><img src="image url" /> </a></div> <div class="item-title"> <a href="post url">Post Title</a></div></div></li><!Featured Post 3 end--> <!--Featured Post 4> <li> <div class="item-content"> <div class="item-thumbnail"> <a href="post url"><img src="image url" /> </a></div> <div class="item-title"> <a href="post url">Post Title</a></div></div></li><!Featured Post 4 end--> </ul>
Replace post url, image url, and post title with your desired URL/Link/Name. Save the Template. You are done. Don't forget to add the widget on the right place. Share your views in comments till then Peace, Blessings and Happy Featuring.
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment