code

3 Steps, Extra Traffic! : StumbleUpon

With 3 simple steps, add a StumbleUpon badge to your site so your visitors can easily submit your content to StumbleUpon and you can start enjoying additional traffic from StumbleUpon users who want to see content like yours! Simply copy and paste the code into your site and start receiving free exposure on StumbleUpon.

As you all probably know, StumbleUpon doesn’t crawl the web pages automatically. It only adds those pages which are added by its users. And then it rotates or displays these user submitted/voted quality content to its other users (who share similar interests). Providing quality content to its users and good traffic to the source. So everybody is happy.

Over years we have seen so many products claiming to generate huge traffic to our websites through Stumbleupon, but the trick is simple. Produce quality content (suitable for StumbleUpon community) and make it easy for StumbleUpon members to find and submit, vote for the story.

Having quality content is mandatory. Next thing is making it more accessible.

All these days we use to have a simple banner or a link to submit the article to stumbleupon, but now we can show a badge and encourage or remind our readers to submit and vote for the story, if they find it interesting.

Get your content discovered with SU Badges
With 3 simple steps, add a StumbleUpon badge to your site so your visitors can easily submit your content to StumbleUpon and you can start enjoying additional traffic from StumbleUpon users who want to see content like yours! Simply copy and paste the code into your site and start receiving free exposure on StumbleUpon.

These new badges reflect a real-time count of how many times your page has been viewed by members of StumbleUpon’s community of over 10 million users. Show off your big numbers!

Users clicking these badges will be prompted to submit a page to StumbleUpon’s index (if not already in the index) so other users can enjoy your content or to view the ratings and reviews of your page from other StumbleUpon users. Your site will not be framed when users click any of these badges.

Reason for this post: I had seen these badges some time back, but had never used them. Out of curiosity, I took some time to put them on the blog and to my surprise – traffic from Stumbleupon has significantly raised. I still thought it’s a coincidence. But after watching for some more days, I thought I would recommend using this badge for all my fellow bloggers/webmasters to generate good traffic from Stumbleupon or atleast try this out and share the results with us, in the comment section.

The badges are somewhat similar to that of the TweetMeme/Re-Tweet Buttons. But what I feel is, the color is too dim to notice.

You can check badges in these posts, to see them in action:
7 Ways To Get Traffic – Before You Need It!
10 Ways To Make Your Blog Load Faster and Save Bandwidth

You can get the code for implementing the badge at: SU Badge.

The numbers really encourage visitors to take action and hit that stumble button. Try it and share your experience with us.
“Simple Steps, extra Traffic!”

Bonus Tip:
You can even use the StumbleUpon URL shortener, it provides some easy, lazy way to hit the thumbs up button.

Alignment of Ads, Two Horizontal And Rest Vertical – BuySellAds

BuySellAds [BSA] is an advertising marketplace for small to medium sized website owners/publishers. Publisher like the flexibility in charging the advertisers and the easiness with which one can implement the ad codes into their website.
And advertisers like the quality publisher websites, ad rotation feature for equal exposure, stats features and the recently added A/B split testing between multiple ad banners etc.

But A Problem..
If you are using 125 x 125 ad format of BuySellAds and you have many advertisers, then you might have come across the problem of aligning them.

Example:
If you want to have 6 ad spots, as shown in below image.

[ 2 x 3 – Two Horizontal and rest Vertical ad spots ]

There is no built-in user friendly option to get this to work. One simple solution for this is, you can generate 2 separate javascript ad codes and paste it inbetween 2 separate div or p tags to somehow align it.

But the Problem
1. Using more ad codes means increase in the load time of the website as a whole.
2. All the ads does not get equal exposure. As we can only rotate the ads present in a single block of code and can not rotate between two separate code blocks.
3. Some time we may forget to change the price of advertising on one block, which will some time become unfair for advertisers.

Better Solution
Generate a single ad code with 6(or whatever you prefer) ad spots and add “float:left;” to the A element of the styles array in the ad code.

Before


BannerStyles1240548 = new Array(
    "a{display:block;font-size:11px;color:#888;font-
family:verdana,sans-serif;margin:0 4px 10px 0;text-align:center;text-
decoration:none;overflow:hidden;}",

After


BannerStyles1240548 = new Array(
    "a{float:left;display:block;font-size:11px;color:#888;font-
family:verdana,sans-serif;margin:0 4px 10px 0;text-
align:center;text-decoration:none;overflow:hidden;}",

Caution
Do not copy and paste the above code, as the quotation marks appearing on a webpage will not work properly in the source code. So just manually add float:left; to the A element of the styles array, as shown above.

Finally
1. You have nice looking source code! with less clutter.
2. Less number of javascript code, so faster loading of your webpage.
3. All the ads rotate and thus equal exposure to advertisers.
4. Single change in the settings of your ad code will be applied to all the ads.

Code To Show 125X125 Ad Banner On WordPress Sidebar

During the early days of this blog, we had some problem in showing adsense ads of 125×125 format on our sidebar. We wanted to have four 125×125 ad banners(as shown in below image), but we were unable to align it properly. After some research and getting help from online friends we could overcome this problem. Now we are sharing this, in order to save some of your time, who may also be facing the same problem.

Its easy to show image ads(direct advertisers ad banner) in the side bar. But if we want to show ads using some adnetwork(Ex:- Adsense, Adbrite, Bidvertiser, BuySellAds etc), its bit difficult to properly align the ads(as shown in above image).

First the simple one. If you want to show some ad banners(which does not use JavaScript or any other scripts). You can use the following code:


<h2>Sponsors</h2>
<!-- insert ad blocks instead of fake images -->
<a rel="nofollow" href="destination-url">
<img style="margin: 0 15px" height="125" width="125" 
src="image-url"
 border="0" title="insert title" alt="insert title" />
</a>

<a rel="nofollow" href="destination-url">
<img height="125" width="125" 
src="image-url" 
border="0" title="insert title" alt="insert title" />
</a>
<a rel="nofollow" href="destination-url">
<img style="margin: 0 15px" height="125" width="125" 
src="image-url"
 border="0" title="insert title" alt="insert title" />
</a>
<a rel="nofollow" href="destination-url">
<img height="125" width="125" 
src="image-url" 
border="0" title="insert title" alt="insert title" />
</a>

But the same can’t be applied when you want to show some JavaScript enabled ads(Ex:- Adsense, Adbrite, Bidvertiser, BuySellAds etc) in above mentioned style.
To do that, add below code to your style.css


.bigblock {
  width: auto;
  height: auto;
  padding: 15px;
       
}

.left-top {
  width: 125px;
  height: 125px;
  background: url(images/125x125.jpg) no-repeat;
  margin-bottom: 10px;
       
}

.left-bottom {
  width: 125px;
  height: 125px;
  background: url(images/125x125.jpg) no-repeat;
  }

.right-top {
  float: right;
  width: 125px;
  height: 125px;
  background: url(images/125x125.jpg) no-repeat;

}

.right-bottom {
  float: right;
  width: 125px;
  height: 125px;
    background: url(images/125x125.jpg) no-repeat;

}

.clearblock {
  width: 100%;
  clear: both;
}

Now insert below code wherever you want to show the ads(Ex:- sidebar)


<div class="bigblock">
<div class="right-top">Ad code</div>
<div class="left-top">Ad code</div>
<div class="clearblock"></div>
<div class="right-top">Ad code</div>
<div class="left-bottom">Ad code</div>
</div>

That’s it, you are done. You can play with above coding to customize it further to blend with your blog design.
Hope it helps, atleast for some of you.

Code to redirect basic html page

We have seen many plugins and 301 redirection … bla bla bla in wordpress and many other blogging platforms, to redirect the users automatically from a webpage to another webpage or from one domain to another.

Ex:- You have shifted an article to different page and now you want your visitors to automatically get redirected to the new page, instead of showing the link “click here to Enter” etc and expecting your visitors to click that link and read the article.

But many people using basic html face problem using the redirection. They need to manually create a link to navigate to different pages..this can be avoided by using these simple codes

<meta http-equiv=”refresh” content=”0; URL=http://www.google.com/”>

This code should be placed between head tag. And replace http://www.google.com/ to whatever URL you want your visitors to be redirected.

Another method is to use this code…

<script language=”javascript” type=”text/javascript”>window.location=”http://www.google.com/”;</script>

Here also replace http://www.google.com/ to whatever URL you want your visitors to be redirected.

Using such redirection may not be SEO friendly, but use it when its very much needed.

But people using WordPress, blogger etc, please do not use this type of redirection. There are many SEO friendly redirection methods that you can incorporate and save your Search engine juice.