For Blogger adding Featured Posts widget is really important
for you and your visitors, basically featured posts widgets show some of the
most important posts you want to show to your visitors. Featured Posts Widget
will be floating on your blog screen and it will show the visitor the posts
each time visitor go down or stays. Featured Posts widget create some kind of curiosity
in the mind of your visitors that they are going to see something very awesome.
With Featured Posts widget you will have more page views and more chances of
showing best posts to the peoples
How to Add Featured Posts Widget to Your New Blog
So featured posts widget can display your selected posts on
the top of you blogger or blog screen. The widget has hover effect too so you
can add up to 4 featured posts in it. So each time any of your visitor will
view your blog he will see the featured posts widget and he may going to click on
the posts as well.
Here is a little tutorial for you to know how to implement
this widget on your new blog or blogger. This tutorial has been divided into
two parts to make it easy for you to understand.
You may also like: 15000+ backlinks for your blog
1. Adding CSS To Template Of Your Blog
- Goto template then Edit HTML, now Search for ]]></b:skin> (By Pressing Ctrl + F)
- Now add the code shown below 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/AVvXsEibJ6zVRsxoFPJEQWcaNAGNpxradUz4wKamUcA2un4j5VsfsKZ7ks73G75Z-8OfIQ4ix5jE1AXPbqwtANDhJJgneERJcpuDBPk0XOn8lmXeo4XUA9hhif7yUIPXFmQexAFwzOq9cs_VaGM/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}
2. Add Widget to your blog
- Now Just Goto Layout => Add Widget => HTML/JavaScript. So Add the below code and click 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>
Things Keep in Mind
- Replace post url, image url and Post Title with your desired URL/Link/Image
- Save the Template
- So you done it.
Congrats!
0 comments