Here is another important trick for everyone that is featured post widget.Featured Posts is a widget through which you can display your own selected posts on your Blogger blog.The setup is really easy and requires just a work of 5 minutes.If you want to target a specific post to all your readers, this widget may be helpful for you.This widget also comes with an hover effect.You can add 4 featured posts with the help of this widget.3 will have images whereas one will have just the title.You all you have to do is to follow the steps.
- Login to your account and click on design.
- Now go to template and click on Edit HTML.
- Now press (CTRL+F) and search for ]]></b:skin>
- Now add the script given below just above the ]]></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/AVvXsEgFsvcE3c9vVWdI4Wf3atFoxn3Hd5OP18clFGHaCBrgnm2teM_kSYe_4fje7jtgZuMmYybeivi4wkLucFHNuf2IvRbwiItWS1IjBynG0KXa7RyT_DFSuCAFWmdjFbvj9nzqNZhd_NBjKsI/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}
Now click on save template.
Add Widget:
- Now go to layout and click on (Add a Gadget).
- Now select HTML/Java Script.
- Now add the code given below in it.
<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>
- Now click on save.
- Here please replace the POST URL/POST TITLE and IMAGE URL with your desire URL/LINK/NAME.
- Now place the gadget where you want to show it.
- So is it useful for you tell me in comments ?
Post a Comment