i-Blog Tools

How To Add Random Posts Widget On Blogger?

Random posts widget is another great widget and very important in a blog also if you want to show your readers other stuffs you have in your blog. This widget I have here display some of your posts randomly. Same as the related posts widget but different because this only shows your other posts either related or not. Below is an image of this widget.

1. Go to your Dashboard > Design.
2. Then click on Add a Gadget and select HTML/JavaScript.
3. Copy the code below and paste on the HTML/JavaScript gadget.

<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=6;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

4. Preview your blog.
5. If you can see the gadget running perfectly then SAVE it.

Configuration:

numofpost=6 - the number of posts to be shown in the widget. You can change the numerical value as you want.

Just follow the steps and you will have it in your blog in no time. Leave a comment you have something to say. ^^

How To Add A 3D Spherical Animated Tag Cloud For Blogger?

Tag Cloud, Categories, Labels or whatever they call call it. These widgets are very important in a blog. This helps a user to navigate further your blog easily. The usual widget shows the list of the labels you have in your post which is kinda normal to a blog. Some bloggers are experimental in nature and want some new stuff running in their blogs and this widget fit them most.

This widget is a 3D Spherical Animated Tag Cloud Widget. As the name implies, this animated so the labels or categories that it shows are moving. Or not really, if a visitor hover his mouse to the widget then the labels will start rotating in a spherical pattern. Nice huh! Below is an image of the widget I have in my blog.

Add 3D Spherical Animated Tag Cloud On Blogger:

1. Go to your Dashboard > Design > Edit HTML.
2. Find the code below:

<b:section class='sidebar' id='sidebar' preferred='yes'>

3. Copy the code below and paste it direct under the code in step 2:

<b:widget id='Label99' locked='false' title='Tag Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus</div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;160&quot;, &quot;200&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x800060&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

4. Preview your blog.
5. If you see the widget running perfectly then SAVE it.

Configuration:

Find the numbers below and change it as you needed.

Text color: 800060 (purple in as default in the code above)
Height: 200 px
Width: 160 px
Font size: 12

Hope you have the widget running perfectly in your blog. Leave a comment if there's something wrong. ^^

How To Add Tag Cloud Widget On Blogger?

This widget is nice for blogspot bloggers who wants to have a tag cloud for categories or labels. This is a simple tag cloud widget if you want to change your old categories/labels list in your blog. This is easy to implement on the sidebar of your blog and will blend to your template directly.

Adding Tag Cloud Widget On Blogger:

1. Back up your template first by downloading it.

2. Make sure you have Labels Widget installed in your blog.

3. Go to your Dashboard > Design > Edit HTML.

4. Don't click on Expand Widget Template.

5. Find the code below:

<b:widget id='Label1' locked='false' title='Tags' type='Label'/>

- Just Ctrl+F then type in the box below the browser type='Label'.

6. Change the whole line of the code with type='Label' with the code below.

/*
Distributed by Jai Cuizon at iBlogTools.blogspot.com
*/ <b:widget id='Label1' locked='false' title='Tags' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content' style='text-align: justify;'>
<script type='text/javascript'>
/*
Simple Blogger Tag Cloud Widget
by Raymond May Jr.
http://www.compender.com
Released to the Public Domain
*/

//Settings / Variables
var max = 150; //max css size (in percent)
var min = 70; //min css size (in percent)
var showCount = false;  // show counts? true for yes,
 false for no
var minCount = 1;  // what is the minimum count for a tag 
 to be shown? 1 for all


//Begin code:
var range = max - min;

//Build label Array
var labels = new Array();
<b:loop values='data:labels' var='label'>
labels.push(&quot;<data:label.name/>&quot;);
</b:loop>

//URLs
var urls = new Array();
<b:loop values='data:labels' var='label'>
urls.push(&quot;<data:label.url/>&quot;);
</b:loop>

//Counts
var counts = new Array();
<b:loop values='data:labels' var='label'>
counts.push(&quot;<data:label.count/>&quot;);
</b:loop>

//Number sort funtion (high to low)
function sortNumber(a, b)
{
return b - a;
}

//Make an independant copy of counts for sorting
var sorted = counts.slice();

//Find the largest tag count
var most = sorted.sort(sortNumber)[0];

//Begin HTML output
for (x in labels)
{
if(x != &quot;peek&quot; &amp;&amp; x != &quot;forEach&quot;
 &amp;&amp; counts[x] >= minCount)
{
//Calculate textSize
var textSize = min + Math.floor((counts[x]/most) * range);
//Show counts?
if(showCount)
{
var count = &quot;(&quot; + counts[x] + &quot;)&quot;;
}else{
var count = &quot;&quot;;
}
//Output
document.write(&quot;<span style='font-size:&quot; + textSize
 + &quot;%'><a href='&quot; + urls[x] + &quot;'
 style='text-decoration:none;'>&quot; + labels[x] + count + &quot;</a></span>
&quot; );
}
}
</script>
<br/>
<span style="font-size:80%;float:right;">Powered by
<a href="http://www.iBlogTools.blogspot.com">Blogger Widgets</a>
</span>
</div>
</b:includable>
</b:widget>

7. Preview it, see if you can see your new tag cloud widget.
8. Then, SAVE it.

Just make sure you follow the steps above to implement the tag cloud widget completely without any problems. Drop a comment if you have difficulties implementing the tag cloud widget. ^^

How To Add Recent Post Widget With Thumbnails On Blogger?

Recent post widget is a very import plugin in a blog. It is for the visitors of your blog to further navigate the content of the blog that's what they see in the Recent Post Widget. There has been a lot of version of this widget. Some with there unique feature.

This widget that I am sharing is a Recent Post Widget with thumbnails. This one is a good version and it looks good. Below is an image of the widget:

Adding Recent Post Widget With Thumbnails

Go to your Dashboard > Design >Edit HTML.

Find this code:

<b:section class='sidebar1' id='sidebar1' preferred='yes'>

Copy the code below and change the part in RED with yours, then change the above code with your configured code.

<b:widget id='HTML8' locked='false' title='Recent Post' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>

<script language='JavaScript'>
imgr = new Array();
imgr[0] = "http://i44.tinypic.com/2r72hjd.jpg";
imgr[1] = "http://i44.tinypic.com/2r72hjd.jpg";
imgr[2] = "http://i44.tinypic.com/2r72hjd.jpg";
imgr[3] = "http://i44.tinypic.com/2r72hjd.jpg";
imgr[4] = "http://i44.tinypic.com/2r72hjd.jpg";
showRandomImg = true;
boxwidth = 200;
cellspacing = 2;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 8;
acolor = "#666";
aBold = false;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 6;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://i-blogtools.blogspot.com/"; 
</script>
<script src='http://viemonsta.googlecode.com/files/devrecentpost.js' type='text/javascript'/>

</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

Configuration:

numposts = 5 : Change the numeric value as you desire. It is the number of posts to be seen in your Recent Post Widget.

Most importantly, change the this URL "http://i-blogtools.blogspot.com" with yours. It is where the widget gets its data.

Hope you like the widget. Drop a comment if you have some difficulties implementing the widget. ^^

How To Add Feedjit Live Traffic Feed On Blogger?

Feedjit monitors traffic to your site and ranks it based on popularity and relevance against the traffic received by other Feedjit users in your local area. There is a choice of 4 different widgets: Live Traffic Feed, Live Traffic Map, Recommended Reading, and Page Popularity. Each of these widgets has different functions.

Above image is what a Feedjit Live Traffic Feed Widget would look like.

Feedjit Live Traffic Feed gives you the following details when a visitors comes to your blog:

The city and country your visitors are in
The website they arrived from, if any
The page they visited on your website
Which external link they clicked to leave your site, if any

Adding Feedjit Live Traffic Feed On Blogger

Visit Feedjit
Select Live Traffic Feed.
Click on the Customize It link under Live Traffic Feed. This will allow you to enter colors to match the theme of your blog. If you are in doubt I have found that the easiest method to get the custom colors of a site is to go to the Layout > Page Elements screen in Blogger and click on Add a Gadget and then Adsense. From the configuration screen that pops up you can get the colors of the background, border, title (heading in Feedjit), URL, text. If you use these same colors in your Feedjit widget it will blend in with the rest of your site. You can preview your widget to make sure it looks as you would like it before adding it to your blog.
To automatically add the widget to Blogger select the Click to Add to Blogger Link and follow the instructions. Or to manually add it which I myself prefer right click the code in the box under the heading Live Traffic Feed and select copy.
Navigate to Layout > Page Elements in your blog if that page is not already open
Select Add a Gadget in the Sidebar and then HTML/Javascript
Paste the code by placing the mouse in the box and right clicking and selecting paste
Save the widget and then using the drag and drop feature of Blogger move it to your desired location. Note HTML/Javascript widgets are best placed after your other widgets for faster loading.
Save Template
Click on View Blog to view your newly created Feedjit widget
Click on Options in the Feedjit widget and then Ignore My Browser otherwise the widget will record your visit each time you view your blog. The option on the widget will now change to Stop Ignoring Me which you can reverse by clicking on the link again.If you use more than one browser you will need to tell Feedjit to ignore you for each browser.

This is a tutorial on how get and add Feedjit Traffic Feed Widget to a blogger blog. This live traffic feed will help you see the people who visits your posts and what search phrases they use to get into your blog. This Feedjit Live Traffic Feed widget is easy to get and it only takes less than 5 minutes to install it into your own blog.

Drop a comment guys! ^^

i-Blog Tools

SEO Guide and Tips,Blogging Tutorials,Templates And More

How To Add Random Posts Widget On Blogger?

How To Add A 3D Spherical Animated Tag Cloud For Blogger?

How To Add Tag Cloud Widget On Blogger?

How To Add Recent Post Widget With Thumbnails On Blogger?

How To Add Feedjit Live Traffic Feed On Blogger?

Recent Post

SPONSOR

Tag Cloud

Random Posts

Categories

Archives

Subscribe Via Email

SPONSOR

Followers

Infolinks Ads