Metro UI Featured Post Widget For Blogger

Today I'm going to give you a new widget is Metro UI Featured Post Widget For Blogger blog. If you are skilled in coding then you can add this widget on another website or blog platform like WordPress etc. Here I given for Blogger Blog.

This Widget will pick out most viewed or featured article from you blog. Most of the blogger aim's to make their own blog attractive for visitors, for that we should add this type of widget in blog.

Live Demo

• 

  How To Create Simple CSS3 DropDown Menu
• 

  Attractive Blogger Popular Post Widget With Different Style
• 

  Latest Web Design Trends For 2013
• 

  15+ Awesome Happy New Year Wallpaper For 2013

1. Go to Blogger Dashboard > Layout > Add Gadget > HTML/JavaScript.
2. Add Following HTML code in it. I recommend that you should add this widget on the above of your blog post.

<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>

* Change whatever I indicated in different color in the above HTML code with you own post url, image url, and post title.

CSS

1. Go to Blogger Dashboard > Design > Edit HTML.
2. Find  ]]></b:skin>  (by Ctrl + F ) and add following css code before it.

#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/AVvXsEi-hIEDYkpcxnWnyFSLPxe8XCJia_i0S-EDH9lr9MkG38sU381mdXRfcYs0iUHWsodeYFdO6lXUaaLhQkPi2hqZ38uzN-e4cCp5q4w90j2TC9Pjw7LKQWjqqtQuFNPgzmm3Dl8CtD_wi-4/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}

If you got any problem in this widget you comment it below...

SHARE

Tweet