Well, there are many BlogSpot or Blogger related article widgets out there but they often refer to it as a hack or something like that. I think differently, something with a publicly available API isn't a hack, it's a valid widget or mashup with javascript as a client.
Anyway, let's cut the crap, here's a general purpose related articles or links widget using the Blogger API for labels, tags and categories to fetch articles as automatically or explicitly identified using jQuery(a javascript framework) to serve as client.
1. Setup the style sheet. You may paste the following code within the head tags (<head></head>) or within your external .css file.
From the code on step number #2, find the variable settings for blogger_url, label and limit and set your desired values. Take a look at the snippet below, you should be editing something like this.
4. Test your widget.
Pull-up the page where you put up your related article widget and you would see it load.
5. Advance usage.
With a little experimentation with styles, you may change the default look to match your page.
You can also try to embed Ads together with the widget to improve your click-through-rate.
<style type="text/css">
#blogtips-blogger-related-title{
font-size:18px;
font-style: 'Arial, Sans-serif';
}
#blogtips-blogger-related{
list-style:none;
}
#blogtips-blogger-attribution {
list-style:none;
}
</style>
2. Copy paste the following code to your desired location of the widget.<!--START Related Post Widget (Label)//--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script type='text/javascript'> var blogger_url = "http://ulaptech.blogspot.com/"; //your blog URL, make sure there is a trailing slash var label = ["mongodb","nosql databases","php","zend framework",]; //your post lables var limit = 5; //number of items to list </script> <script src="http://bloggerwares.googlecode.com/files/related-posts-label-widget-1.0.js" type="text/javascript"></script> <div> <h2 id="blogtips-blogger-related-title">Related Links:</h2> <ul id="blogtips-blogger-related"></ul> <ul id="blogtips-blogger-attribution"><li><a style="font-size:11px;font-style:'Arial'" href="http://bloggerjutsu.blogspot.com/2010/07/related-widget-for-blogspot-and-others.html" alternate="Related Links Widget">Related Links Widget for Blogspot</a></li></ul> </div> <!--END Related Post Widget (Label)//-->3. Edit your widget settings.
From the code on step number #2, find the variable settings for blogger_url, label and limit and set your desired values. Take a look at the snippet below, you should be editing something like this.
<script type='text/javascript'> var blogger_url = "http://bloggerjutsu.blogspot.com/"; //your blog URL, make sure there is a trailing slash var label = ["widgets"]; //your post lables var limit = 5; //number of items to list </script>Note: For multiple labels, separate the label values with a comma and enclose them with a double quote (i.e var label = ["widgets","more widgets",... so on];
4. Test your widget.
Pull-up the page where you put up your related article widget and you would see it load.
5. Advance usage.
With a little experimentation with styles, you may change the default look to match your page.
You can also try to embed Ads together with the widget to improve your click-through-rate.
No comments:
Post a Comment