Blogger Custom Label Widget Using Individual Category Feeds

Blogger Custom Label Widget Using Individual Category Feeds

I tried looking for a way where we could showcase articles from different categories or labels in our Blogger blogs. Using default popular post widget or recent post widget doesn't fully fill the purpose as they show generalized content. What if you wish to add a widget that would only show articles from specific tags? Any way around?

So today, we would be first making up individual feeds for the blog categories of our choice and then would incorporate it into the widget to showcase it in a beautiful manner. Stick around and you would love it for sure.

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(http://3.bp.blogspot.com/-oxTuqVj1ziA/T6P6wtxqsgI/AAAAAAAACBE/wWR0bb2gfuE/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.

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!