So today, we would be first making up individual feeds for our blog categories of our choice and then would incorporate into the widget to showcase it in a beautiful manner. Stick around and you would love it for sure.
Before moving on, you may like to read:
- Add Feed Burners Related Post Widget Below Every Blogger Post
- Thesis Feedburner Email Subscription Widget
- 'The Next Web' Featured Post Widget With Shadow Effect
Step #1 Make a custom Feed for individual categories.
Its more simple than you would have thought. Just replace the text "Your-category-name" with the label feed you want to make (or the post that you would want to show up from specific tags).
http://YOUR-BLOG-LINK/feeds/posts/default/-/Your-category-name
Replace both the text with your blog link and category name respectively. Say i wish to make a widget for our lable "make money online". So the feed link would be like:
http://www.bloggingehow.com/feeds/posts/default/-/Making Money Online
So once done, go ahead with the next step to add the widget its self for a particular label feed that you have choose above.
Step #2 Add the label widget
Go to your Blogger dashboard >> Layout >> Add a Gadget >> HTML/JavaScript and paste the following code with in it.
<div class="eggTray">
<script src="http://helplogger.googlecode.com/svn/trunk/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list",
"pipe_params":{"URL":" YOUR-FEED-LINK-FROM-STEP 1"},
"hideHeader":"false","height":"","count": 5 }</script>
<div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"><a href="http://www.bloggingehow.com" target="_blank">bloggingehow</a> </div>
<noscript>Your browser does not support JavaScript!</noscript></div>
<style type=text/css>
.eggTray {margin:10px 0px;padding:0px;}
.ybr li {border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;}
.pipesTitle {padding-top:0px;}
.pipesDescription {display:true;}
.ycdr {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkDYh4ubLn5KzfG1PwaFTgH5DgKa1QVTXKANWf6JV35slMiAe9Ha_LLp-aO4MtXowTUPEKzJfYiHDAwRmMhE8D-vzz8FaLGyGxGfuKyYwC6K2XtJm4FZKMb-_I60cNTsMSmeT_XrPLFUQ/s1600/logo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 4px 0px 0px 0px;line-height:14px;}
.ycdr, .ycdr a {color:#999999;}
.widget .popular-posts ul {padding-left:0;}
</style>
Once done, simply hit save and you're ready to go.
You may now like to read:
- Product Rating Widget: Custom Rating Icons With Price-Link Control
- Advanced CSS Drop Down Navigation Menu With Link Logos
Credits:
The actual widget was designed by helplogger. We turned their recent post widget into a custom one for each label/ category. Kindly regard the rights of the authors.
Hope you guys liked the widget. Leave out your comments and let us know what you thought about the widget. I would be customizing the look of the widget soon guys. So keep an eye over that too. Till then, stay safe!