Stay Connected: Blogger Widget

Hi, Readers. I have a great widget which I came across of late. Its a excellent widget for blogger blogs which lets the visitors of your site to remain connected with you. It allows the traffic to your blog/site to get associated with you through the social networking sites. Its easy to install in the blogger blogs. I have stated the steps to do so in a most lucid way I could have.

Steps:

1.Login to blogger

2.Go to “layout”

3.Select “Add a Gadget” and then select “HML/JavaScript” from the POP-UP window.

4.Copy and paste the below code and give a proper Heading.

Replace “#” with your respective profile links in corresponding sites

Stay connected widget.....

<div style='padding: 6px 0pt;'>
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
<tbody><tr>
<td width='100%'>
<a href='#' target='_blank' title='Add me on Orkut'><img border='0' src='http://farm4.static.flickr.com/3627/3517922519_cfd986c939_o.jpg'/></a>
<a href='#' target='_blank' title='Add me on Facebook'><img border='0' height='16' src='http://farm4.static.flickr.com/3383/3541243317_b319d98116_o.png' width='16'/></a>
<a href='#' target='_blank' title='Checkout my Del.icio.us bookmarks'><img border='0' height='16' src='http://farm4.static.flickr.com/3242/3541243313_121d9a8c99_o.png' width='16'/></a>
<a href='#' target='_blank' title='Add me on Technorati'><img border='0' height='16' src='http://farm4.static.flickr.com/3538/3541246267_40fd356eb0_o.png' width='16'/></a>
<a href='#' target='_blank' title='Follow Me on Twitter'><img border='0' src='http://farm4.static.flickr.com/3409/3541247791_81624992ea_o.png'/></a>
<a href='#' target='_blank' title='View my pics on Flickr'><img border='0' src='http://farm3.static.flickr.com/2374/3541246245_0c2221546c_o.gif'/></a>
<a href='#' target='_blank' title='Join My Community on MyBlogLog'><img border='0' src='http://farm3.static.flickr.com/2204/3541246253_152bbaa61d_o.png'/></a>
<a href='#' target='_blank' title='Add me on FriendFeed'><img border='0' height='16' src='http://farm4.static.flickr.com/3608/3541246247_d943535f4b_o.png' width='16'/></a>
<a href='#' target='_blank' title='My Professional Profile on LinkedIn'><img border='0' height='16' src='http://farm3.static.flickr.com/2222/3538499023_c8abe478b6_o.jpg' width='16'/></a></td>
</tr>
</tbody></table>
</div>

This is all You have to do and your blog is ready with a Great looking widget that let the readers connected with you. I hope It would be helpful to YOU

Technorati Tags: blogger,blogger tips,javascript,widgets

read more

“Twitter Updates” On your Blog

Twitter is one of the most efficient site which is capable of driving lots of visitors to your blogs. I personally use Twitter to pull traffic. The short messages termed as Tweet is quite fascinating which lets the users share their ideas. It is one of the best way of micro-blogging. Tweetmeme is a service which lets you promote your blog by tweets. It guarantees that its a mechanism which lets you get 1000’s of new followers on twitter

I would like to share a simple way to integrate “Twitter Updates” on your blog. Its very simple to execute and quite efficient as it lets your blog reader follow you on twitter and get your latest updates too

Now how to integrate

Follow the steps:

Steps:

Go to:

Layout > Page Elements. Click on Add a Gadget. Select HTML/JavaScript from the list. Copy/paste the code given below and Save.

<div id="twitter_div">
<h2 style="display: none;" class="sidebar-title">Twitter Updates</h2>
<ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display: block; text-align: right;" href="http://twitter.com/anand_chauhan">follow me on Twitter</a>
</div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/anand_chauhan.json?callback=twitterCallback2&amp;count=5" type="text/javascript"></script>

Just replace the red letter line in the snippet by your Twitter username.

Tweet This post if you liked it...

Technorati Tags: Blog Widgets,twitter,javascript

read more

Blogger Tips & Tricks

Adding widgets to blogger plays a Great role in optimizing Blogger Blogs. These are done by hacking the blogger template code snippets. Perhaps, not the experts, but the beginners in blogging must be wondering about "moving any bar", adding "recent comment" widget, adding "recent posts" etc. These modifications can also done by any beginner in blogging world.

I am happy to share a great site I found which have all this hacks/techniques to bring about significant changes assembled together. Now, you don't have to surf crazily to get those widgets installed on your blogger blogs.

Some of the Tips and Tricks are as follows

1. Expandable Posts or Read More Hack

2. Recent Posts Widget

3. Recent Comment Widget

4. Top Commentators Widget

5. Remove Label Post Count

6. Add Page Element to Header and Blog Posts

7. Sticky Posts in Blogger

8. Add Images or Icons to Sidebar Links

9. Remove NavBar in Blogger

10. Add Scrollbars to Blog Widgets

11. Add Favicon to Blogger URL

12. Simple Search Widget

13. Wrap Adsense Ads in Post Body

14. Special Effects for Peekaboo Posts

15. Page Navigation Hack for Blogger.......

More are there with detailed explanations in the site below:

50 Amazing Blogger Tricks & Hacks

Technorati Tags: blogger tips,blogger,widgets,expandable post,recent comment widget,recent post widget,label,sidebar,Adsense,Sticky post

read more

Add “Email Me” link html/javascript for your webpage/blog

Adding email me link to blog/site helps the visitors to contact the author. In this way author gets to know the need and query of the visitor better. This can help the webmaster to generate traffic. The more a author of blog/site become convergent to his visitors more is the probability of traffic to his webpage.

However, just putting the email address on the site like xyz@gmail.com invites the spammers to get your email id. No sooner do they get your ID than your inbox is flooded with unwanted mails.

So, why not think of a way which lets the good readers contact you and not the Spammers. Don't worry I have a way to keep the spammers away as a cow who keeps the flies away from her body using her tail....Sorry, I was just joking.

So here is the way..

Text Link:

Suppose,your email id is xyz@gmail.com ,here is the code you have to add

<a href="mailto:xyz@gmail.com">Email me </a>

Image link:

Suppose,if you want the visitors to email you by clicking on an image like the below one

First you have to upload your picture to some image hosting services.They will give a direct link for the uploaded image.Take a note of it.

<a href="mailto:abc@gmail.com"><img src="http://i592.photobucket.com/albums/tt10/anand_chauhan/email.gif" alt="Email me" width="120" height="57" border="0" /></a>

I have used this link :

http://i592.photobucket.com/albums/tt10/anand_chauhan/email.gif

you may use this link or get another by uploading your picture to image hosting sites like "Photobucket" etc.

Technorati Tags: Email me Link,Email,Javascript,html,photobucket,mail,albums,webpage

read more

Add Tweet Button In Your Post

Twitter is one the most famous social networking site where people meet and share their thoughts. People get to know each other and interact online. It is nowadays one of the most efficient media where one can use its networking power to pull traffic to their respective sites, blogs or splash pages. In twitter.com one is just required to follow people who bear like mindedness and get followed by similar people. Personally I prefer twitter.com more than any social networking sites.

To pull traffic from twitter I have utility to explore. Its called "tweet button". It facilitates the visitors to share a certain post or article on your blog by just a single click. The button comes in two format: compact and full.

visit the site Tweetme for detailed specification.

To add the tweet me button in blogger blogs I have illustrated the process in best way I could have.

Before following the illustration download the full template as precautionary major

Process:

login to your blogger account and follow the following path

Layout>> edit HTML

Mark the "expand widget" box.

Find for the snippet <data:post.body>

paste the below code just above this code

For FULL MODE

<div style='float:right; margin-left:10px;'> <script type='text/javascript'> tweetmeme_url = &#39;<data:post.url/>&#39;; </script> <script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/> </div>

For COMPACT MODE

<div style='float:right; margin-left:10px;'> <script type="text/javascript"> tweetmeme_style = 'compact'; </script> <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script> </div>

Preview the template, if there is no error then save the template and Tweet crazily....

If you are really helped by this post then tweet me please.

Technorati Tags: Blogger code,Blogger tips,Twitter,widget,javascript,retweet button,tweet button

read more

Add Tag Cloud In Blogger Blog

 

TAG CLOUDI wondered a lot about having a tag cloud widget in my blogger blog. I ultimately, after a huge Google organic search got my self a tag cloud in my blog. I would like to share the same with you all.

First of all login to your Blogger account and then follow this path layout>> add widget

Then select the "label" option from the window. click save and view the blog.

Now again follow the path layout>> Edit HTML
Check the "expand widget" box

Search for the line

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

in the template code or find for the word "label" in the template code as the code may vary.

*Replace the code with the following code snippet

<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("<data:label.name/>"); </b:loop> //URLs var urls = new Array(); <b:loop values='data:labels' var='label'> urls.push("<data:label.url/>"); </b:loop> //Counts var counts = new Array(); <b:loop values='data:labels' var='label'> counts.push("<data:label.count/>"); </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 != "peek" && x != "forEach" && counts[x] >= minCount) { //Calculate textSize var textSize = min + Math.floor((counts[x]/most) * range); //Show counts? if(showCount) { var count = "(" + counts[x] + ")"; }else{ var count = ""; } //Output document.write("<span style='font-size:" + textSize + "%'><a href='" + urls[x] + "' style='text-decoration:none;'>" + labels[x] + count + "</a></span> " ); } } </script> </div> </b:includable> </b:widget>

Save the template and you will be having your tag cloud

Technorati Tags: java script,blogger,blogger code,widget,tag

read more