19 Auto Move Image Slider i.e carousel For Blogger

I had provided you earlier with an image slider with two left and right panels which on click take you to other images.But some of my readers at that time wanted it to have auto moves of images in slider.So in this post i will tell you how to auto move the images in slider.If you you don't know what exactly image slider is, then don't worry, just i would like you first to read my previous post on image slider for it and if you like it just follow that tutorial to have it in your blog.After following that tutorial and adding it in your blog,just you have to make small change in that tutorial to make it automove.


Some other widgets you would like to implement for sure like peel add for blogger for attracting your visitors to subscribe your blog or show of your advertiser or show of some other important stuff.Some hacks like these i previously wrote were image hover effect,images reflection in blogger posts and zoom your images in blogger posts,which might also help you a lot.

Now lets carry on with an important tutorial of how to add the auto move image slider to your blog.

Implementation

Just visit my Previous post on image slider and follow the complete instructions there and save your template.If you get work your slider and want to make it auto move,just follow this important step.

Important Step

While adding image slider from here you would have added some script in my special step i have mentioned there.Just what you have to do is replace that whole script with the below one and you will get your slider auto move,that's it.

<script type='text/javascript'>
stepcarousel.setup({
galleryid: &#39;mygallery&#39;, //id of carousel DIV
beltclass: &#39;belt&#39;, //class of inner &quot;belt&quot; DIV containing all the panel DIVs
panelclass: &#39;panel&#39;, //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:6000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: [&#39;http://1.bp.blogspot.com/_v5IxGTiMTD8/SxOlAIA_ZZI/AAAAAAAAAfg/ELVwF1qY8M8/s400/left.jpg&#39;, -48, 0], rightnav: [&#39;http://1.bp.blogspot.com/_v5IxGTiMTD8/SxOlAVn-OvI/AAAAAAAAAfo/kMJcmlXZKCs/s400/right.jpg&#39;, 0, 0]},
statusvars: [&#39;statusA&#39;, &#39;statusB&#39;, &#39;statusC&#39;], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: [&#39;external&#39;] //content setting [&#39;inline&#39;] or [&#39;external&#39;, &#39;path_to_external_file&#39;]
})
</script>

The green lines are the images of side arrows to make it scroll left and right,you can have your images also to make it look different.And in red are number to control speed of slider and no of images to be shown at one auto move in slider,so make it adjust acc. to you.If you increase images to be shown from 3 to any number then you have to increase the size of slider.For this you need to study its css part and make modifications in it.

I hope now you would have no problem in making this mage slider auto move.Enjoy It !!

Read more »

24 How Install Wibiya Toolbar Multi Function Widget

Many of my readers are asking for the fixed widget,which i am having at the bottom of my blog.It is by far best widget with useful features for a blog and is available in different colors to suit your blog.Best part is,its very easy to add and customize,The simple thing you have to do is just go to wibiya.com and sign up your blog there.Then they will get you approve your blog in 3-4 days and you will be ready to get codes for this widget from there site.You can select on the which features you want in your blog from below list and also select color of widget to suit your blog.

Features Of Wibiya Widget

1. Translator

2. Posts Navigator (Recent Article and Random Article)

3. Community via Facebook

4. Twitter Widget

5. RSS Subscribers Bar

6. Sharing Bar

7. Blog Searches

8. Photo Gallery

9. Live Notifications

10. Facebook Fan Page

11. Games (HeyZap)




Now How to get this widget.Just go to Wibiya.com

Then click on the Getit now button.



Now give your details and request an invite.



Then you will get an message from them.



Just wait for getting approved your blog for some days and after approve they will send you the invite to your email,just use that invite to activate your account and get that widget codes.

How to install widget from your account now.

Now When you receive invitation,then click on the invitation link from your mail and login to your wibiya account.

Fill in the details they are asking for.

Then you will go through 4 steps Process.

1.Create A Account 2. Select A Theme 3. Select Your Apps 4. Get It Now.

Just In step 1 Give the desired Information they asked For.

In Second Step Select the theme i.e color for widget which suits your blogger template.As while choosing theme at the right you have an option of Choosing toolbar icon.Use bloggers or any other you like.



In Third Step Select The Applications you want in your widget.As i have written all application at the beggining of the post.

In fourth Step You will get page like below.Just select the paltform and allow the popup to open in your browser as it will directly give you add a widget option in one step.As many readers have problem in getting codes of the widget, so its the easy one.



And after adding widget Just Hit Done.And you are to your dashboard Page with all stats for your widget and also a notifier option is there to set an message for your visitor whenever he comes to your blog.You can set it if you want.



Problem Users Facing To Implement In Blogger

1.In Getting Codes For Blogger

In The Fourth Step When You Select The Platform To Install the widget, There are four options.
1.Wordpress
2.Blogger
3.Typepad
4.Other Sites

Just when we click for blogger a new window opens for one click add a widget to blog.So for this you have to allow pop ups.If you are still not getting codes just select option for typepad or last option then you will get the script and place it in your Html/javascript widget of your blog.

And for wordpress you will get the download link for plugin just download it and install it.

2.Slowing Down Of Blogger

As one of reader didn't used it because of slowing down the loading of blogger.As for this the dror cedor from wibiya.com gave a simple solution to it as you can read his comment here.

What exactly you have to do is that how to start the loading of widget after blog gets loaded.For this here is the simple solution.

The code which you will get to be placed in blogger will be like this.

<script src='http://toolbar.wibiya.com/toolbarLoader.php?toolbarId=XXXX' type='text/javascript'></script>

Now what you have to do is just add &pl=1 in your link after you toolbar id as i have assumed here to be XXXX and make whole code look like below :-

<script src='http://toolbar.wibiya.com/toolbarLoader.php?toolbarId=XXXX&pl=1' type='text/javascript'></script>

What i have done is just added red part in link. By adding this the widget will load only after when the blog gets loaded, which will not effect the loading of blogger.

*Note:-If you are adding the script in widget its ok.But if then you adding in blogger codes it will not accept the script after making changes.So just make it code friendly from this Encode tool.

I checked this and really it had no effect on loading speed of my blog now.

I hope now you will have now no problem in installing the widget.

Read more »

8 Table Of Contents Widget For Blogger

Table Of Contents Widget For Blogger,as every blogger wants to create a table of content page or archive page like in wordpress blogs.And since from time many widgets have been provided by many great bloggers and working great.So i will review all the table of contents widget available till now.The widgets are provide by many great bloggers like amanda from bloggerbuster, abu-farhan from abu-farhan.com, Hans from beautifulbeta , vin from blogdoctor.me and last one is adding the posts manually side by side in post.All these widget are great and any one of will suit your blog needs for sure.




First Table Of Content Widget

So First table of content widget was given by hans from beautifulbeta.blogspot.com.He gave us this widget 2 years ago and he made look this widget look like table.I too was using this widget but with time i switched to new table of contents.If you want to get this widget you can get it from here at beautiful.blogspot.com.

But as there seems some problems in implementing that,so i am also holding an tutorial for it in the way i used it.

Just download this script first.

Simply go to your Blogger dashboard and create a new post. Using the tabs at the top, switch over to the "Edit HTML" section of the post editor (if you do not usually use this function), then paste the following section of code into the content section:-

<div id="toc"></div><span style="font-size:80;"></span><script src="http://Your-Script_url/tableofcontents.js"></script><br /><script src="http://Your-Blog_url/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script><br /><script type="text/javascript">showToc();</script>

Just replace the above codes in red with the script url and your blog url.And Publish Your Post.

Now to make it look great and look like an table just add this css in your blogger html.Just go to blogger layout >> edit/Html and place the below css before the ]]></b:skin> tag.

#toc {
border: 2px solid #C3D9FF;
background: #ffffff;
padding: 5px;
width:500px;
margin:10px 0 20px 0;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #3D81EE;
color: #5d5d54;
padding: 5px 5px 5px 5px;
width: 300px;
}
.toc-header-col1 {
width:300px;
}
.toc-header-col2 {
width:75px;
}
.toc-header-col3 {
width:125px;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
font-size:90%;
color: #404040;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:90%;
text-decoration:underline;
}

.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size:90%;
}

.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a {
text-decoration: none;
}

Second Table Of Content Widget

Second Way the users adopted to display the table of content widget was to make seperate post with title table of contents and keep on adding and editing the post with title of posts and linking them to post urls manually.This is as simple process as everybody can do it himself.Demo of it can be checked on these two posts Post1 And Post2.

Third Table Of Content Widget

This widget is given by amanda.He has created the widget using google feed control.In this widget you can display 100 posts from any specified label or category you want in a single post and is also very easy to add.

Just how to add this widget.First go and Generate a Google AJAX API key for your site, and copy this long string to your clipboard (or your favourite text editor) for later use.

Simply go to your Blogger dashboard and create a new post. Using the tabs at the top, switch over to the "Edit HTML" section of the post editor (if you do not usually use this function), then paste the following section of code into the content section:-

<style type="text/css">
/**
* Suppress everything except for title
*/
#feedControl .gf-snippet,
#feedControl .gf-author,
#feedControl .gf-spacer,
#feedControl .gf-relativePublishedDate {
display : none;
}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR_API_KEY"></script>
<script type="text/javascript">
/*
* How to use the Feed Control to grab, parse and display feeds.
*/

google.load("feeds", "1");

function OnLoad() {
// Create a feed control
var feedControl = new google.feeds.FeedControl();

// Add blogger label feeds.
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");

feedControl.setNumEntries(-1);

// Draw it.
feedControl.draw(document.getElementById("content"));
}

google.setOnLoadCallback(OnLoad);
</script>
<div id="content">
Loading, please wait...</div>

Just Edit the Red code with the api key which you copied to notepad after signing up here.

Now edit the blue codes with the lable feed url and green links with title of categories.
If you dont know about how to get label feeds you can read it here.

Above codes consist of 8 labels to add more keep on repeating this line of code in above script.

feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");

If still you have any problem in this widget you can read on complete tutorial here by amanda.As she has explained all Troubleshoting and many things like on how to show more than 100 posts in one label if you had more than 100 posts in onelabel.

Fourth Table Of Content Widget

Now this is also the best widget given by abufarhan.Just what you have to do,to place this widget is just create a new post and post two line of codes and publish it.
So simple.Just first download this script.

And below are the codes you have to place in new post and publish it.

<script style="text/javascript" src="http://Your-Upload-Script-Url/blogtoc-min.js"></script>
<script src="http://Your-Blog-url/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

Just change the codes in red with your blog url and the script url you uploaded to your server.

As the loading of table of widgets is fast but it will keep on increasing with increase of posts in labels.

Fifth Table Of Content Widget

This method uses the AJAX Dynamic Feed Control from Google to show any number of posts from any number of your blogs in one place and cycles through each post title to show a preview at the top.This widget is given by blogdoctor.

Just download this script and upload to your server.

First login at Blogger.com and click Settings link on Dashboard. Then click Site Feed subtab. Click drop down arrow for Allow Blog Feeds and choose the Short option. Save Settings.

Next click Layout tab and on the Page Elements subtab click the Add Page Elements link. Choose Html/Javascript option in popup window. In Contents paste the following code :

<!-- ++Begin Dynamic Feed Wizard Generated Code++ -->
<!--
// Created with a Google AJAX Search and Feed Wizard
// http://code.google.com/apis/ajaxsearch/wizards.html
-->

<!--
// The Following div element will end up holding the actual feed control.
// You can place this anywhere on your page.
-->
<div id="feed-control">
<span style="margin:10px;padding:4px;">Loading...</span>
</div>

<!-- Google Ajax Api
-->
<script src="http://www.google.com/jsapi?key=<<INSERT KEY>>"
type="text/javascript"></script>

<!-- Dynamic Feed Control and Stylesheet -->
<script src="http://Your-Script-Url/gfdynamicfeedcontrol.js"
type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");
</style>

<script type="text/javascript">
function LoadDynamicFeedControl() {
var feeds = [
{title: 'Table of Contents',
url: 'http://MYBLOG.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'
}];
var options = {
stacked : true,
horizontal : false,
title : "BLOG_TITLE."
}

new GFdynamicFeedControl(feeds, 'feed-control', options);
}
// Load the feeds API and set the onload callback.
google.load('feeds', '1');
google.setOnLoadCallback(LoadDynamicFeedControl);
</script>

<!-- ++End Dynamic Feed Control Wizard Generated Code++ -->

Just change above the codes in red with the the Api key , Blog Title and Your Blog url and the script url you uploaded to your server.
Just get api key by signing up here signing up here.

Now Just what you have to do is just select the widget which satisfy your needs and use it in your blog for showing all your posts.Best Of Luck !!!!!

Read more »

9 Random Posts Widget For Blogger

Random Posts Widget For Blogger i.e each time the page of your blog refreshes the posts on the blog showed by this widget changes, means this widgets always shows unique posts from your blog with unique combinations at random,i.e the widget selects the posts randomly from all your blog posts and never knows which post might it pick from your blog to show.Really this is the gem of the widget you really should show on your blog for sure.

As before this i had blogged about a one more random posts widget in which a link was made and clicking on it would show random post in blog.



Now how to add this widget in the blog.

1. Log into Blogger >> Layout >> Html/Javascript .
2.Then paste this code in it.

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

Change the the text no in red above in codes to select how many random posts you want to display.

And Save the Widget.Now you will be shown up the the title of the posts in widget like you see in recent posts, recent comments or popular posts widget and all the posts will be picked randomly.

Now How to show random posts title with post summary.

Just open this script or download this Random Post Script.

If it gets downloaded then just upload it to your file host and if it opens just copy it to notepad and save it as .js file and upload to your server.

You can get Free File Host Here.

1. Log into Blogger >> Layout >> Html/Javascript .
2.Then paste this code in it.

<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=5;var wordnumber=5;</script>
<script style="text/javascript" src="http://www.your-file-url/random-posts-summary.js">
</script>
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

Just change the green url with your script url which you uploaded to your server.

Alter the codes in red in above codes to adjust the count of posts and and how much word summary you want up to show up in the widget.Thats it so Simple.If you have any problems leave your comments below.
Credits for widget to Divya Sai And Hackers Blog.

Read more »

4 !!Latest Widget !!How To Add News To Your Blog!!

Some Blog Publisher & Webmasters wants to put some widget on their sides or blog that shows some fresh news on their blog or sides to attract the people.If till now you not having this type of widget then now this is for you.

you can Click Here

Or go to http://www.feedzilla.com

Freezilla is a frre widget for every one and you can chose the source,type of news you want to taget the visitor.

And also you can chose the method for installation like Flash, HTML, Javascript, Wordpress,myscpae,blogger and lots of more.


Why add Feedzilla news widgets to your site?

* Attract targeted visitors to your website by providing them with the latest news in over 1,700 categories of your choice.
* Increase your visitor's repeat traffic by providing fresh and relevant news.
* Add credibility to your site by providing news from top news providers.
* Improve your ranking on the search engines (SEO), by adding free, updating and customizable news to your site.

Read more »

28 Images Slider i.e carousels For Blogger

Carousels For Blogger what it is,it ia an type of images slider horizontally or vertically for your images with an link to desired post or website you want to link.In some carousels you can add title and description of posts also with an link to post.These image sliders are nowadays highly used by our blogger platforms to attract visitors to there content or show of there latest or best content.Every body use it of at different places in blog with different purposes.So why not you try and use it your blog.

You would have seen my last post peel add for blogger for attracting your visitors to subscribe your blog or show of your advertiser or show of some other important stuff.Some hacks like these i previously wrote were image hover effect,images reflection in blogger posts and zoom your images in blogger posts,which might also help you a lot.

Now lets carry on with an important tutorial of how to add the image slider to your blog.

Just see it at footer section of demo blog.

Download this Zip file and get two javascript files from it.

Now after getting these two scripts upload them to your own server,if you dont know where to upload check my this post on where to upload .js files.

Now Just login to your blogger account Then Go To > Layout > Edit/Html > Press Ctrl+ F

Now search for </head> and place the below javascript codes before this tag.

<script src='http://www.your_server_url/slider.js' type='text/javascript'/>
<script src='http://www.your_server_url/jquery-1.2.6.min.js' type='text/javascript'/>

In the above codes you will see red coloured lines just replace them with the link of your file which you downloaded and uploaded to your server.

Now Search for this code ]]></b:skin> and add the below css above it.

#myslides{

background:#000 url(http://1.bp.blogspot.com/_xfdD6S9fOk4/Sd1SjSaUrXI/AAAAAAAAA20/ndvDf0nTslY/s1600/mslid.jpg) repeat-x;
width: 650px;
height:165px;
margin-bottom:5px;
}

.stepcarousel{
position: relative; /*leave this value alone*/
overflow: scroll; /*leave this value alone*/
width: 554px; /*Width of Carousel Viewer itself*/
height: 160px; /*Height should enough to fit largest content's height*/
margin: 0px 48px 5px 48px;

}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 20px 10px ; /*margin around each panel*/
width:170px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
background:#0e1829;
height:120px;
border:1px solid #1d2c44;

}
.stepcarousel .panel p{
text-align: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px ; /*margin around each panel*/

}

.stepcarousel .panel h2{
text-align: left; /*leave this value alone*/
height:20px;
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 2px 5px ; /*margin around each panel*/
font-size:16px;
font-weight:bold;
text-align:center;
font-family:Georgia,century gothic,Arial,verdana, sans-serif;
}

.stepcarousel .panel img{
float: left; /*leave this value alone*/
background:#0E1829; /*clip content that go outside dimensions of holding panel DIV*/
margin: 5px 5px 5px 5px; /*margin around each panel*/
padding:0px 0px;
}

Above in code is red line with url of background image of slider,you can also change it to adjust your blog.

Special Step

Just Find for /head tag and place the below script above it.

<style type='text/css'>
#mygallery{overflow: hidden;}
</style>

<script type='text/javascript'>
stepcarousel.setup({
galleryid: &#39;mygallery&#39;, //id of carousel DIV
beltclass: &#39;belt&#39;, //class of inner &quot;belt&quot; DIV containing all the panel DIVs
panelclass: &#39;panel&#39;, //class of panel DIVs each holding content
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 3, leftnav: [&#39;http://1.bp.blogspot.com/_v5IxGTiMTD8/SxOlAIA_ZZI/AAAAAAAAAfg/ELVwF1qY8M8/s400/left.jpg&#39;, -48, 0], rightnav: [&#39;http://1.bp.blogspot.com/_v5IxGTiMTD8/SxOlAVn-OvI/AAAAAAAAAfo/kMJcmlXZKCs/s400/right.jpg&#39;, 0, 0]},
statusvars: [&#39;statusA&#39;, &#39;statusB&#39;, &#39;statusC&#39;], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: [&#39;external&#39;] //content setting [&#39;inline&#39;] or [&#39;external&#39;, &#39;path_to_external_file&#39;]
})


</script>

The green lines are the images of side arrows to make it scroll left and right you can make and add your also to make it look different.And in pink are number to control speed of slider and no of images to be shown at once in slider,so make it adjust acc. to you.If you increase images to be shown from 3 to any number then you have to increase the size of it also in slider css which is written below.

Now Save Your Template.All the coding part is finished,now just how to add images to slider.

Just go to Layout > Page Elements > Add A Gadget > Html/Javascript

And add the below links of images and posts in it,in the format i am writing below.

<div id="myslides">
<div id="mygallery" class="stepcarousel">
<div class="belt">

<!-- 1st Template -->
<div class="panel">
<a href="http://anshuldudeja.blogspot.com/2008/10/new-two-column-denim-template.html" target="blank" title="Two Column Denim Template"> <img width="160" alt="Two Column Denim Template" src="http://4.bp.blogspot.com/_v5IxGTiMTD8/SQTQLthrdvI/AAAAAAAAAHk/JY-ySDnZ8Xw/s400/newtwocolumndenimtemplate.jpg" height="110"/> </a>
</div>
<!-- end code of 1st -->

<!-- 2nd Template -->
<div class="panel">
<a href="http://anshuldudeja.blogspot.com/2009/02/simple-blog-writing-template.html" target="blank" title="Simple Blog Writing Template"> <img width="160" alt="Simple Blog Writing Template" src="http://4.bp.blogspot.com/_v5IxGTiMTD8/SZpu68uI7xI/AAAAAAAAAM8/4qHvgwss23o/s400/simple+Blog+Template.png" height="110"/> </a>
</div>
<!-- end code of 2nd -->

<!-- 3rd Template -->
<div class="panel">
<a href="http://anshuldudeja.blogspot.com/2009/05/woork-style-blogger-template-design.html" target="blank" title="Woork Style Blogger Template"> <img width="160" alt="Woork Style Blogger Template" src="http://img2.pict.com/91/27/d5/ad3dbaa7835b554ec0d06a4e0c/XG7ZL/800/woork2520257c2520web2520design25.png" height="110"/> </a>
</div>
<!-- end code of 3rd -->

<!-- 4th Template -->
<div class="panel">
<a href="http://anshuldudeja.blogspot.com/2009/05/blogger-buster-style-blogger-template.html" target="blank" title="Blogger Buster Style"> <img src="http://img23.imageshack.us/img23/8537/bloggertemplate.jpg"/> </a>
</div>
<!-- end code of 4th -->

<!-- 5th Template -->
<div class="panel">
<a href="http://anshuldudeja.blogspot.com/2009/05/free-lenomag-blogger-template.html" target="blank" title="Lenomag Blogger Template"> <img width="160" alt="Lenomag Blogger Template" src="http://2.bp.blogspot.com/_nX0wvumD9VU/ShkEH2GD1nI/AAAAAAAAAOY/xeVepHCMH2M/s400/Preview.jpg" height="110"/> </a>
</div>
<!-- end code of 5th -->

<!-- 6th Template -->
<div class="panel">
<a href="http://anshuldudeja.blogspot.com/2009/06/money-blogger-blogger-template.html" target="blank" title="Money Blogger Template"> <img width="160" alt="Money Blogger Template" src="http://1.bp.blogspot.com/_nX0wvumD9VU/SiuAxR7uKDI/AAAAAAAAAPE/BYtw4ToMfr4/s320/money2520blogger.png" height="110"/> </a>
</div>
<!-- end code of 6th -->

<!-- 7th Template -->
<div class="panel">
<a href="http://anshuldudeja.blogspot.com/2009/06/digital-statement-blogger-template.html" target="blank" title="Digital Statement Blogger Template"> <img width="160" alt="Digital Statement Blogger Template" src="http://img2.pict.com/fd/ad/16/9de4e09426b4090113f40930f2/bnaeY/800/digital2520statement.png" height="110"/> </a>
</div>
<!-- end code of 7th -->

<!-- 8th Template -->
<div class="panel">
<a href="http://anshuldudeja.blogspot.com/2009/06/orkut-theme-blogger-template.html" target="blank" title="Orkut Theme Blogger Template"> <img width="160" alt="Orkut Theme Blogger Template" src="http://img2.pict.com/f3/ec/dd/06efff55a05477591153094b2f/rDVvV/800/orkut2520theme2520blogger2520tem.png" height="110"/> </a>
</div>
<!-- end code of 8th -->


</div></div></div>

Just change the links and images url with yours and also there titles.Just keep on adding links to in this format to any number you want as you can add hundreds of images and posts in this format no limit to it.

Read more »

4 Beautiful Rank Widgets For Blogger

Rank Widgets are actually used to display your rank of blog of various types to be displayed on your blog in form of widget,like traffic rank on alexa,page rank on google,incoming links on yahoo,or technorati rank.And i have seen many blogs using these widgets,to display of there traffic rank or page rank.

Now how to get these widgets as for them you have to visit these respective sites and grab your widget like,

Alexa Traffic rank Widget:-Just go to this site and build any widget you like and get codes and paste in your blog html.
Google Page Rank Widget:-Just read on this post to get this widget.
Technorati Widgets:-Just visit this page and get a lot widgets from here.
Yahoo Links To Page:-Shows of your all incoming links from yahoo.

You will like all these widgets for sure.Now as you will visit these sites you will get limited styles widgets for your blog.SO i have an website for you providing all these widgets at one place and in new designs like below.

So just visit rankwidget.com and click on the widget you want,then will ask for your blog and give you of the codes of all new style widgets.
I loved for sure watching these widgets and gonna use them for sure in my new blog design that soon i will be switching to.

Read more »

15 Recent Posts Widget With Thumbnails Preview Blogger

Recent Posts Widget With Thumbnails Preview for blogspot blog is another hack made avaialble to use by blogosphere,which has made a blogging look really beautiful and proffesional.With the help of these we make blogging look proffessional.Now something about hack as you would be using recent post widget for sure showing post titles but now this widget will be showing images with or without title from your posts or you defined manually.

I have before posted on Recent Posts and recent comments widget also,you can check them too if you want them.

Now let see how to install this hack and thanx to marianne to make this hack look very simple and show it in many ways to adjust the blogger template.

Now how to install it.

Just not waste time,first download these file from here which contains scripts to make your widget work.

Goto Blogger Layout > Page Elements > Add A gadget > Html/Javascript

And add the below codes:-

<script language="JavaScript">
imgr = new Array();


imgr[0] = "http://YOURIMAGEURL.jpg";
imgr[1] = "http://YOURIMAGEURL1.jpg";
imgr[2] = "http://YOURIMAGEURL2.jpg";
imgr[3] = "http://YOURIMAGEURL3.jpg";
imgr[4] = "http://YOURIMAGEURL4.jpg";

showRandomImg = true;


tablewidth = 248;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#ffffff";

imgwidth = 118;
imgheight = 100;

fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 50;
summaryFontsize = 11;
summaryColor = "#666";
icon2 = " ";

numposts = 5;

home_page = "http://YOUR_BLOG_NAME.blogspot.com/";

</script>
<script src="http://YOUR_UPLOADED_SCRIPT_URL/recentposts_thumb.js" type="text/javascript"></script>

You have to change the bold links above in codes to make it work.

Now i will explain all the parameters in the script what it does.

- Lines
imgr [0] = "http://YOURIMAGEURL.jpg";

contains link to the default image, you can replace this link with your photos, you can also add many others by creating additional lines imgr [5 ]=..., imgr [6] = ..... Try to select the image size small to have such severe widget.If you will not use image here the widget will automatically extract first image from your post and show up the thumbnail and if it doesn't contain any image it will not show up any image so you can define your image url in this line.

- The showRandomImg = true; that is enabled does the random image default image if you want existing order, please change true to false.

- 4 lines

tablewidth = 248;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#ffffff";


in turn is the width of the widget (pixels) between cells, border color of widget and widget's background color.

- 2 lines

imgwidth = 118;
imgheight = 100;


is the width and height of the image thumbnail.

- 4 lines

fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";


turn is: Font Size of title, title color, turn the bowl bold title (if you want the shortcut to the true false), the icon before the title (if you do not want the icon for the empty value).

- Line

text = "comments";

text of the report you want to comment now (for example: text = "reviews"). If you do not want the number of comments for each post, set text value = "no".

- Line

showPostDate = false;

say that the current date was off. Please replace false with true if you want the date.

- 4 lines

summaryPost = 50;
summaryFontsize = 11;
summaryColor = "#666";
icon2 = " ";

in turn is the number of characters like the description for each post (if you want to disable, set the value is 0), Size of the Font described, description and color icon of the previous description.

- Line

numposts = 5;

ask you to report the number of items will appear on the widget, for example above is 5.

- Line

home_page = "http://www.anshuldudeja.com/";

ask you to report address blog currently use.Do not forget it is important to seal against your url with (/) at the end of the url.

Now this was all customization part if you not happy with looks of it and can do it yourself.

Now the thing just important is the script to use in codes as i have made that place red color bold in codes so as to tell where to add the script.

As i have told you at the beggining to download the scripts,if you haven't downloaded,download it from here.

After downloading you will get zip file,extract it and you will be given nine .js files or 9 scripts.
All nine script does different work.What type of work they will do i am writing below and how to know which script you have to use for which purpose,you just need to read the name of the file,you will come to know for which purpose it is after reading the below functions of nine scripts.

1)Recent posts in horizontal Position showing only Thumbnails.
2)Recent posts in Vertical Position showing only Thumbnails.
3)Recent posts in Vertical Position showing Thumbnails With Tilte And Description With Comments.
4)Recent posts in Horizontal Position showing Thumbnails With Tilte And Description With Comments.
5)Recent posts in Vertical Position showing Thumbnails With Tilte And Description without Comments.
6)Recent posts in Horizontal Position showing Thumbnails With Tilte And Description without comments.
7)Recent posts in Vertical Position showing Thumbnails With Tilte And Description from any Particular Label.
8)Recent posts in Horizontal Position showing Thumbnails With Tilte And Description from any Particular Label.
9)Recent posts in Horizontal Position showing Thumbnails With Tilte And Description in between Thumbnails instead of below thumbnail.

These are the only nine ways you can use this script.Just download the scripts and with the name of file you will come to know about its function and can use that script.

Just upload the script you want to use to your server and replace the url in bold red in above codes with your url and dont forget to change your blog name also which is also on bold back in above codes.If you dont know where to upload this script just read on the list from here.

As above i have told you about the label script also,i.e script to extract thumbnails from your any particular category you want.If you using widget for any category of yours.Just use the below codes in place of above i provided.

<script language="JavaScript">
imgr = new Array();


imgr[0] = "http://YOURIMAGEURL.jpg";
imgr[1] = "http://YOURIMAGEURL1.jpg";
imgr[2] = "http://YOURIMAGEURL2.jpg";
imgr[3] = "http://YOURIMAGEURL3.jpg";
imgr[4] = "http://YOURIMAGEURL4.jpg";

showRandomImg = true;


tablewidth = 248;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#ffffff";

imgwidth = 118;
imgheight = 100;

fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";

text = "comments";

showPostDate = false;

summaryPost = 50;
summaryFontsize = 11;
summaryColor = "#666";
icon2 = " ";

numposts = 5;

home_page = "http://YOUR_BLOG_NAME.blogspot.com/";
label = "tagname";
</script>
<script src="http://YOUR_UPLOADED_SCRIPT_URL/recentposts_thumb.js" type="text/javascript"></script>

The difference in both code is just of red code as i have added that is label line,just change the tagname with your category name,then it will work for your category and please don't forget to change the blog url and script url in these codes.You can't use only thumbnails for your category as post tile and description will also be shown.

I hope you will love this widget.Have A nice Day !

Read more »

1 Recent Comments Widget For Blogger

How to show more than 5 or 10 Recent Comments in your sidebar to show up.Its just very simple to show up your latest comments as we use to show up our recent posts,but the only difference is the difference of feeds url for both.As we have different feed url for posts and different for comments but the method to use the widget is same.

We have two ways to add recent posts widget in your blog and i have explained both the ways before but for the recent comments widget you can add up in following way.

Now i will tell you both ways to make it run for blogger comments.

First One,Just download this script and save to your desktop.Now upload it to your server and get its url.If you dont know where to upload this script get on list of sites from here.

Now go to blogger Layout > Add a Gadget > Html/Javascript and add the below codes.

<script src="http://www.Your_url.com/files/16743_ebb4d/comments.js"></script>

<script>

var numposts = 12;

var showpostdate = false;

var showpostsummary = false;

var numchars = 100;

</script>

<h2>RECENT POSTS</h2>

<script src="http://yourblogname.blogspot.com/feeds/comments/default?orderby=published&alt=json-in-script&callback=rp"></script>
<noscript><a href="http://anshuldudeja.blogspot.com" target="_blank">Blogger Hacks</a></noscript>

As now just replace red codes in above codes with your script url and and the number 12 is the no of posts to be displayed and and last red is your blog url.If you want to show recent posts you can have that too,just need to change the feed from

http://yourblogname.blogspot.com/feeds/comments/default

To

http://yourblogname.blogspot.com/feeds/posts/default

If you want recent pots from feedburner account follow this post on How Show more than 5 feeds from feedburner account.

Now use of this above recent comment script doesn't show up the date of comment and name of author who commented and to which post he commented.If you want that kind of script i have got it for you.

Just visit corpseofatic Blog and fill on the fields to get your recent comments widget displaying post date,author name,post url and comment as well.As it gives all necessary details.

I hope you will love this widget.

Read more »

5 Show Page Rank of Your Blogger-Page Rank Widget

You would have seen many blogs showing there page rank in there blogger,as you would be thinking how its possible.Yes friends its simple widget with small piece of codes which we just need to add to our blogger and it will start showing you the pagerank of your blog in your blogger.i hope everybody will be knowing how to add this,and will be thinking why i am posting about it.

If you have read my previous post on how to increase your visitors from search engines,you will get the answer.As i use to see a lot visitors coming to by blog via search engines finding for page rank widget,then thought of holding a simple tutorial on it so that atleast i can convert my that visitors into my readers.

Ok lets move on to our topic on how to add page rank widget to my blog.

1)Visit this prchecker site.
2)Write your blog adress there.
3)Fill the captcha Value there.
4)Hit the generate Button Now.

Now it will show three widgets design with there codes like the picture below:-

Just copy the codes of widget you like.

Now Login To Blogger Then Go to Layout > Page Elements > Add a Gadget > Html/Javascript

and add the codes and save it.Now view your blog it will show up that widget in your blog where you added the codes.

Or if you want more designs just visit toolser.com and select the widget you like,take the codes from front of it and simply add i told above.

Read more »

7 Greet Box Plugin-Welcome Your Blogger Visitors With Greeting Messages

Wordpress Greet Box Plugin for Blogger,ya this is name by what this widget is known for wordpress.It welcome all your visitors coming to your blog with different greeting messages on your blog with the reference to the site from which they came from to your blog.This Blogger Widget Display a different greeting message to your visitor depending on which site they are coming from.Actually it is wordpress plugin which shows the visitor on your blog that from where he came and for what he searched,but we have made possible to welcome reader telling from which site he came to you and asking him to subscribe for to our blog for latest updates.

Ya this can really increase your subscribers.As i get hundreds of visitors daily from google search engine and with the use this widget,it will welcome all my google visitors saying Welcome Googler! If you find this page useful,you might want to Subscribe to RSS Feed to have updates.


Dont you think it will help your blog.So let me share with you the codes for this widget and start using its fast to see the increase in our readers.

But i think first of all you would like to see the working demo too.So now i will send you to one of my blog with two different links and you will see the change in the message after visting one blog from two different sites.

1)Visit top blog in google search result from here.
2)Now Visit Top blog in yahoo search result from here.

After visiting from both links you will see change in message as it will welcome from google and other from yahoo,it attracts you visitor a lot and increase chances of getting one more subscriber to your blog.

Now lets start its installtion but before i would like to thanx kaushik who made this possible to work this wordpress plugin into our bloggers.This widget is known as wordpress Greet Box Plugin.

First of save these two scripts to your desktop.
TextToBeDisplayedDiv.js
HideShowDiv.js

Now just upload these script to your server.If you dont know where to upload get a list of sites from here.

Now just what you have to do Login to blogger > Go to Layout > Page Elements > Add a Gadget > HTML/Javascript

and add the below codes:-

<script src="http://Your_Server_Name/TextToBeDisplayedDiv.js" type="text/javascript">
</script>
<div id="mainDisplayDiv" style="background:#F8F8FF;border:1px solid #B6AFA9;display:none">
<div id="dynamicContentDisplayed">
</div>
<script type="text/javascript">
// Give your feed url here
var feedURL = "http://anshuldudeja.blogspot.com/feeds/posts/default";
var dynamicHTMLText = displayRequiredText(feedURL);
document.getElementById("dynamicContentDisplayed").innerHTML
= dynamicHTMLText;
</script>
</div>
<script src="http://Your_Server_Name/HideShowDiv.js" type="text/javascript">
</script>
<script type="text/javascript">
//List your domains where you dont want to show up. Suppose
//when people navigate within your site and you dont want to
// show up. This is , seperated
var myRestrictedDomainList = "anshuldudeja.blogspot";
showHideDiv(myRestrictedDomainList);
</script>

Now in above codes you will see i have colored 4 lines.Two are for .js files replace that links with yours files link which you uploaded to your server.

One line is the feed url,change it with yours and last line i have my domain name chnage it with yours.Just edits all color code lines with yours.

I have also made some codes above in blue color that is to change the background color of widget and thickness of border and and its color so that you can make this widget look adjusting to your blog colors.New Version Released.

I hope you will like this fro sure.For any problems you can contact me or kaushik related to this widget.

Read more »

4 Floating (Fixed) Adds Widget For Blogger

Floating (Fixed) Adds Widget For Blogger,as you have seen in many blog the fixed size button or any image in the blog page that remains at the same place in the blog i.e at the fixed place on the blog.The place of that object doesn' have any effect even of on the page down effect.It is fixed and is known as floating add widget for blogger.

For demo you can check see the twitter image at left of my this blog or can see fixed side menu--demo here or else see the top of page blogger button--here.

I hope it would have been clear.Now lets see how to add it as is very simple widget to add to blogger.

Login to your Blogger go to

Dashboard > Layout > Page elements > Add a Page Element > Html/Javascript

<a style="display:scroll;position:fixed;top:5px;right:5px;" href="Link_To_An_Image" title="Image Name"><img src="http://Image_Url" /></a>

Now modifications to be made in above code.

Change the red codes with your image url and link url you want to open up.

And now the yellow codes in bold are top and right.If you want to use this widget at centre use centre in place of top and if to bottom use bottom in place of top.

Then the right in yellow bold means to show it up to right of page and use left in place of it to show to the left of the page.

I know you will install it easily if still problem leave your feedback in comments.

Read more »

6 Top Posts Widget For Blogger By Post rank

Top Post Widget For Blogger,this widget shows the top post of you blogger.Now question comes on which criteria it shows the top post.You would have seen many widgets like these,some show up on basis of comments and some on popularity of post.But the top post widget by post rank is great.

If you searching for popular post widget based on post with maximum comments visit this link and get it.

Now the top post widget by postrank.How there widget works i.e how they give points to our posts.

PostRank scoring is based on analysis of the "5 Cs" of engagement: creating, critiquing, chatting, collecting, and clicking. By collecting interaction metrics in these categories the overall engagement score is calculated and the PostRank value is determined.

How to install it:-

Just visit Post rank Publishers Page.Take your mouse over Get Widget Button,then select the platform you are using wordpress,blogger or typepad.

Then will be redirected to new page and asked for your website address.Give your website address,then choose the theme for your widget and number of post you want to show up.

Then take the codes from there or add it directly with add to blogger button.

If you take codes just go to Blogger Layout > Page Elements > Add Page Element > Html/Javascript and window will open add the codes there.

I Am sure you will love this widget as its very beautiful too.

Read more »

11 Show Blogger Post Date As In Calender Form Widget

How to Show Blogger Post Date as in the calender form.As its an option by google to show the date of your blogger post at the bottom of the post or below the title of the post,just you have to select that you want to show up the date or not.As i am not in the habbit of showing the date of my blogger post.But with this calender widget you will love to show up the date of blogger post.

Lets watch an demo picture below first.



As you can see the date in calender form before the post title,that is what i am talking about.If you liked it continue reading this tutorial.

First, go to Settings > Formatting, and change the date header format to YYYY-MM-DD like this:
This enables the script we will be using to correctly parse the date header format.

Now login to blogger > go to Blogger Layout > Edit/Html > Check mark expand Widgets >
Press Ctrl + F > And now search for below code

<data:post.dateHeader/>

This above line you found will be wrapped in heading tags of <h2> or <h3> like below

<h2><data:post.dateHeader/></h2>

Just what you have to do is make it wrap like this instead of using heading tags.

<div class="date-header"><data:post.dateHeader/></div>

If you already find your codes wrapped like this then leave it its ok.Continue to next step.

Now search for </head> tag and place the below codes immediately before it.

<!-- calendar widget -->
<script src='http://bloggerbuster.com/scripts/fastinit.js'/>
<script src='http://bloggerbuster.com/scripts/prototype-1.5.0.js'/>
<script src='http://bloggerbuster.com/calendar.js'/>
<link href='http://bloggerbuster.com/calendar.css' rel='stylesheet' type='text/css'/>
<!-- end calendar widget -->

As if you want to adjust size of calender widget or chnage its image just open the red url in above codes.Save it-make changes to it-and upload it to your server and then change the url too in above codes.I hope you will love this widget.I have taken this tutorial and all codes and scripts from amanda blog,as all this widget credits go to her.

Important:-If you do more than one post a day,as today you did 3 posts,this widget will show up calender widget on top post only,this is its drawback.I hope you can understand it.

Read more »

5 How Add Email This Post Button Below Blogger Posts

Many of you would have seen email this post button below blogger posts and print button too,but do you know how to add this email this post button below each post of blogger.If yes then its great and if not ,then you are at right place to learn about it.As you can add this in many ways below blogger posts and i will let you know about all of them.

First one and the simple one.

Just got to Blogger Layout > Page elements > Click there edit button of Blog posts as in image below.

A pop up window will open and just select there there show email posts links option and save it.Now you will be able to see email this post small button below each blogger posts.

Second way is many of us use social bookmarking widget showing many bookmarking sites in one button. You can also use it to make it place after each blogger post as it also have email this post button option in there widget.Some sites for using this widgets are addthis,addtoany and sharethis.

Now the Third and the most important way is to add this button using your feedburner account.

Just login to your feedburner account.

Then select the feed Title for which you wanna use this button and open that feed,you will get to show many feeds only if you have burned many feeds,for different blogs.

After opening there you will find optimize option click it.Then in left sidebar you will find feedflare option select it.Then check mark the email this option for feed and site and press the activate button below.

After getting activate you will get drop down button at that page only at right of activate button to get codes for your blog.Just select the the blogger option and pop up window will open follow the instructions there to add codes and you will be able to add email this button succesfully below each blogger posts.

And that the end of this tutorial.I Hope you will like any of the methods for sure to add email this button to blogger posts.For any queries leave your comments below.

Read more »

1 Related Posts Widget With Thumbnail Preview For Blogger

Related Posts Widget With Thumbnail Preview For Blogger,as we all use related posts hack to show of the related posts in particular category below our posts as this helps our readers to move through our pages easily.The basic difference is that this widget adds thumbnail from that particular posts as of previous related posts widget just show of the link to post.

You can see how the thumbmnails will look in the widget in below picture.




Image and Post Source:-Techknowl

How to install this widget in blogger.

Just visit Linkwithin.

Give your Email adress,blog address and select suitable blog platform and grab the widget code.

Now You will get install widget button click it,if you are logged in to blogger it will intsall widget directly or login in new window else you just get the codes and add codes manually in your sidebar in html/javascript page element.

Read more »

1 Language Translator Widget For Blogger

With Google translation widget you can translate english to many other languages like Arabic , Bulgarian , Chinese ( simplified and traditional) , Croatian , Czech , danish , Dutch , Finnish , French , German , Greek , Hindi , Italian , Japanese , Korean ,Norwegian , Polish , Portuguese ,Romanian , Russian , Spanish and Swedish. I hope no one might have seen such a huge list anywhere. This Widget is powered by Google. This Google translation Widget helps your readers to read the article in their own regional language.

So you would be waiting for the widget,as you have seen there have been lot of translators from years provided in different styles by many bloggers but i liked this one as it covers many languages and you can add it in every post too as you do for share/bookmark button.so if you want this widget just visit this site conveythis.com and get the code for the button.

If you want translate widget by google visit here google transalte widget.

Read more »

0 Syntax Highliter For Displaying Codes Scripts In Blogger Posts

Syntax Highlighter For Displaying any types of Codes and Scripts In Blogger posts.As bloggers like us sometimes need to post different languages codes in our posts basically for programmers and some need to highlight some codes too in blogger posts like me to have on tutorials and display css codes.
Syntax highlighter is the plugin actually designed for wordpress blogs but we can still use it in blogger platform but with some features.

As you would have seen me using my own css for displaying codes.If you want it you can get it from here,how to display css codes in blogger posts.

This is how the syntax highlighter looks below you would have seen in blogger posts.

Now follow on these steps on how to install this syntax highlighter in blogger blog.

Step 1 :

Login to your Blogger account and navigate to Layout section . Then go to Edit Html Tab.

Step:2

Press Ctrl+F and search for </head>

Step 3:

Add The below codes above this </head>

<link href='http://www.sigmirror.com/files/16077_mfmek/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://www.sigmirror.com/files/16075_vovs4/shCore.js'/>
<script language='javascript' src='http://www.sigmirror.com/files/16067_qdw00/shBrushJava.js'/>
<script language='javascript' src='http://www.sigmirror.com/files/16068_sxqrw/shBrushJScript.js'/>
<script language='javascript' src='http://www.sigmirror.com/files/16074_y4x0p/shBrushXml.js'/>
<script language='javascript' src='http://www.sigmirror.com/files/16065_pax2t/shBrushCss.js'/>
<script language='javascript' src='http://www.sigmirror.com/files/16081_8ztl5/shBrushProperties.js'/>
<script language='javascript' src='http://www.sigmirror.com/files/16080_4fwwe/shBrushBash.js'/>

Please download the all above js files and upload to your own server and chnage he above urls with yours as mine may not work because my server bandwidth exceeds very fast.


Now search for </body>

And place the below codes above it.

<script language='javascript'>
dp.SyntaxHighlighter.ClipboardSwf=&#39;http://www.sigmirror.com/files/16078_i3xhu/clipboard.swf&#39;;
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll(&#39;code&#39;);
</script>

Now save your template.

If you find it difficult,add this widget direct from this page.

Now whenever you are posting codes in your blog posts place the codes between these tags in your posts.

<pre name="code" class="java">
<----Your all codes Go here--->
</pre>

Change the class java to any other language if your using that in your codes like css,javascript,c-sharp or any else.And please only you add those languages that you have included in your html that you have added as i told you to add before /head tag.

If you want any other language codes to place and not having it please get it all from here.

I hope you would love this post.If you have any problem let me know i will help you.

Read more »

1 How Add Google Chat Widget In Bloggger

Google Talk Gadget is a web based version of Google Talk and allows you chat with your friends on your web browser like Firefox, Internet Explorer etc. No download required.Your can add Google talk Gadget to your Blogger blog as a page element in very easy one step to your blog sidebar and after signing in you will be able to chat with all your friends.So isn't it great.

If your friends are mostly online on yahoo then you can also add yahoo messenger chat in your blog.

Now read on how to add google chat widget.

Just Go To Dashboard > Layout > Page Elements > Add a element > Html/Javascript

And add the below codes to it and save it.

<iframe width="234" frameborder="0" src="http://talkgadget.google.com/talkgadget/client?fid=gtalk0&relay=http%3A%2F%2Fwww.google.com%2Fig%2Fifpc_relay" height="350"></iframe>

Change width and height in above codes in red to adjust your chat box size.
Enjoy Chatting Now !!

Read more »

2 Add Placement Rotator Script For Bloggers

Add Banner Placement rotator,what many bloggers want today in there blogs,many readers asked me for this script but was not able to provide them with the script because it is only available for php users and we blogspot users are not able to use it as we can use only javascript codes,You would have seen all hosted blogs using this add rotator placement feature.

What exactly it is?
You would have seen in many biggie blogs the rotation of add placements in clockwise or anticlockwise direction moving from top to bottom that changes on each page impression of that blog i.e adds interchange there loacation with each other on each new page impression.It is done so as each advertiser who spend thousand Dollars can get equally add placement in blog and equal exposure at top.

For demo of this widget visit my sidebar adds changing position on each page impression on my this demo blog of Blogger Widgets.

As still this rotator i am going to tell you about is working on php,but i found an open source program that help us to provides and submit our adds to it and will provide php link for your widget embeded within javscript codes which you can use in your blogs.

Stepwise explaination on how to make it:-

I am holding this tutorial keeping in mind the features i have in my demo widget i shown you above for 4 advertisers and each given 100 percent weightage.

Step1.Go to Rotatee.com

Step 2.Then Click On the Link Demo which is rotatee.com/demo.php

Step 3.Now at the bottom of the page you will be given one link to sign in with username and password .Just click the link and enter username and password to sign in.

Below is the sign in page with username and password

Demo URL : http://rotatee.com/demo/
Username : demo
Password : demo

Step 4.Now got to bottom of the page and click on Create New Campaign.You will be asked for your name fill it and press Enter.And your name will be added in the list.

Step 5.Now find your name in the list as it will be the last one then click on your name.You will be directed to a different page and will ask you create an ADD Banner.Click on that link.

You will be shown the pop up window like this below.

Step 6.Now put any Name in the form or i suggest to put the 1st advertiser name.Then the Weight. Put it to 100 as per requirement of my demo widget,It is to tell percentage of times you want to see that add to be shown out of total page impressions,i.e if your blog receives 4 page impressions and you have choosen weight as 25 it will be shown once.

And in codes write the link and image for your add like below.

<a href="http://anshuldudeja.blogspot.com" target="blank"><img src="http://entrecard.s3.amazonaws.com/eimage/84405.jpg"/></a>

Change the link and image with your advertisers.

And Now Save It.

Step 7.Now one of your advertiser has been added.Now again click Add Banner and add your second advertiser.Repeat this process upto 4 times(as i have 4 advertisers in my demo widget) .You can add to any number like 6 or 8 depend upon no of your advertisers.

Step 8.After adding all advertisers Click on Get Code.
You will be shown pop up window like this below.

Note**-Please dont forget to select all option as its shown in image above Show 1 banners at time.Make it to select all in drop down.And then copy codes from window.

Copy codes from there and paste it in your sidebar by clicking on Add a page element and add the codes to HTML/Javascript.

Great Feature in this free campaign you create.
1.You can also view all statistics related to all impressions your adds got ,under your campaign page.
2.You can do this rotation not only add banners but for text links and for any text too.

I hope now you would have no problem in installing this add rotator.Best of Luck !!

Read more »