Blogger Custom Label Widget Using Individual Category Feeds

Blogger Custom Label Widget
I was try looking for a way where by we could showcase articles from different categories or labels in our Blogger blogs. Using default popular post widget or recent post widget doesn't full fills 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 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.smile

Before moving on, you may like to read:


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.

You may now like to read:


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

COMMENTS

.
Name

AdSense affiliate marketing Announcement AskHassam Blogger Blogging Tips Blogosphere News Bluehost Building Traffic BuySellAds Contest Customizations Disqus Tutorials Domain Hosting Drop Down Menus eBook Email Marketing Facebook Tutorials Feedburner Freelancing Giveaway Google Google Analytics Google Gmail Google Plus Tricks Guest Post HowTo Interview Making Money Online Monetization Motivation PayPal Pinterest Plugins review SEO Slideshare Social Media Top Lists Twitter Wordpress YouTube
false
ltr
item
BloggingeHow | Making Blogging Simpler: Blogger Custom Label Widget Using Individual Category Feeds
Blogger Custom Label Widget Using Individual Category Feeds
http://3.bp.blogspot.com/-mAv2RhH-G68/UFbehZdreQI/AAAAAAAAGZ8/y3em9SbmxWA/s320/custom+labels+feed+widgets+blogger.png
http://3.bp.blogspot.com/-mAv2RhH-G68/UFbehZdreQI/AAAAAAAAGZ8/y3em9SbmxWA/s72-c/custom+labels+feed+widgets+blogger.png
BloggingeHow | Making Blogging Simpler
http://www.bloggingehow.com/2012/09/blogger-custom-label-widget-using.html
http://www.bloggingehow.com/
http://www.bloggingehow.com/
http://www.bloggingehow.com/2012/09/blogger-custom-label-widget-using.html
true
5839591175544873606
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy
Resources

Tools of the Trade