Multiple Ad Banner Widget

In most blogs which are selling ad spots you often have seen random Ad banners appearing when the page is refreshed. Ever wondered how to show random Ad Banners in Blogger? In today's tutorial we will learn how to create a Random Banner Widget for blogger which will show random Ad banners when a visitor visits a new page on your blog. Using this widget you can display as many Ad banners on a Sponsor Area as you want!

This widget is exactly similar to our previous125 by 125 AD Banner Widget and in fact it is the most awaited one and have been requested several times by our readers. Just last night I succeeded in creating a simple Java script that uses Array of images and thus displays random images on Page refresh. 

Add Randome AD BannerWidget

Simply follow these steps,

1. Go To Blogger > Design > Page Elements
2. Choose HTML/JavaScript Widget
3. And Paste the following code inside it,

---------------------------------------------------------------

<div align="center"> 
<table border="0"  cellpadding="2" cellspacing="6" width="265"bgcolor="#ffffff"> 
<tbody><tr> 
<td><center> 
<!--  BANNER#1  -->
<script language="JavaScript"> 
images = new Array(2); 
images[0] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-1' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>"; 
images[1] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-2' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>"; 
index = Math.floor(Math.random() * images.length); 
document.write(images[index]); 
</script> 
</center></td> 
<td><center> 
<!--  BANNER#2  -->
<script language="JavaScript"> 
images = new Array(2); 
images[0] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-1' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>"; 
images[1] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-2' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>"; 
index = Math.floor(Math.random() * images.length); 
document.write(images[index]); 
</script> 
</center></td> 
</tr> 
<tr> 
<td><center> 
<!--  BANNER#3  -->
<script language="JavaScript"> 
images = new Array(2); 
images[0] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-1' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>"; 
images[1] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-2' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>"; 
index = Math.floor(Math.random() * images.length); 
document.write(images[index]); 
</script> 
</center></td> 
<td><center> 
<!--  BANNER#4  -->
<script language="JavaScript"> 
images = new Array(2); 
images[0] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-1' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>"; 
images[1] = "<a href = 'URL OF ADVERTISER' rel='nofollow' ><img src='URL OF BANNER’S IMAGE-2' border='0' height='125' width='125' alt='AD DESCRIPTION'></a>"; 
index = Math.floor(Math.random() * images.length); 
document.write(images[index]); 
</script> 
</td></center> 
</tr> 
</tbody></table> 
<table border="0" bordercolor="#0084ce" cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff"> 
<tbody> 
      <tr> 
       <td><center><a href="URL OF ADVERTISER" rel="nofollow"><img width="265" height="37" border="0" alt="Advertise Now!" src="file:///C:/Documents%20and%20Settings/Mohammad/Desktop/ADVERTISE-HERE.gif" /></a></center></td> 
      </tr> 
    </tbody></table> 
</div>

---------------------------------------------------------------

MAKE THE FOLLOWING CHANGES:-
1.  Replace URL OF ADVERTISER with the website link of the advertiser
2.  Replace URL OF BANNER’S IMAGE-1  and URL OF BANNER’S IMAGE-2 with the Image links of the Advertiser’s banners
3.  Replace AD DESCRIPTION with some information related to the Ad. The description appears on mouse hover.
4.  If you want to increase the distance between the ad blocks then edit width="265"
Now after making the necessary customization view your blog to see a beautiful 125 by 125 Banner widget that will change Banners on every different page.

Disable Text Copy From Your Blog

Follow The Step Given Below
·         Login To Blogger
·         Go To Layout In Blogger
·         Add New Gadget (Named – HTML/JAVA Script Box.)
·         Copy And Paste The Code Given Below

<********************************************************>

<script type="text/javascript">

var omitformtags=["input", "textarea", "select"]

omitformtags=omitformtags.join("|")

function disableselect(e){

if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)

return false

}

function reEnable(){

return true

}

if (typeof document.onselectstart!="undefined")

document.onselectstart=new Function ("return false")

else{

document.onmousedown=disableselect

document.onmouseup=reEnable

}

</script>

                                                   

<********************************************************>

Animated Twotter Bird Widget in Website And Blogger

Enjoy

          

Hellow Friends In Many Websites Or Blog You see A small Twitter Bird is Moving Around The Website

When we move up or down.  Today I Giving Some Code For Add This Widgets To Your Websites.

First of All Open Your Blogger Main Templates or Website Main Templates.

I give you a small html Script code copy them inbody tad and save the templates.

Now Can See A Moving Twitter Bird On Your Website

 Copy and Paste These Code in Your Template.

<------------------------------------------------------------------------->

<!-- Twitter fly Bird Widget  -->

    <script src='http://www.educationstuffs.com/files/javascripts/twitterbird.js' type='text/javascript'>

</script>

<script type='text/javascript'>

var twitterAccount = "mutahar1";

var tweetThisText = " <data:blog.pageTitle/> : <data:blog.url/> ";

tripleflapInit();

</script>

<span style='font-size:11px;position:absolute;'><a href='http://www.tricks10blogs.blogpot.in' target='_blank' title='Blogger Widget by Tricks10blogs'>Blogger Widgets</a></span>

<!-- Twitter fly Bird Widget  -->

<------------------------------------------------------------------------->

Note: Replace mutahar1 With Your Twitter User Name

Blogger Search Bar Form

Add a search engine in the sidebar of your blogger blog. This searches all the posts on your blog, and displays them by latest posts first. Inside the search bar you will find the text "Search this Site", this can easily be changed to any text you desire. Such as "Search my Site", "Search", "Type and Hit Enter", etc. Just simply replace the code. You can also change the text "Go" on the button to something like "Search", "Find", etc.

============================================================

<form id="searchThis" action="/search" style="display: inline;" method="get"><input onfocus="if(this.value==this.defaultValue)this.value='';" value="Search this Site" type="text" id="searchBox" onblur="if(this.value=='')this.value=this.defaultValue;" style="width: 150px;color:#636363;" vinput="" name="q"> <input id="searchButton" value="Go" type="submit"></form>

============================================================

Change the Title Tags in Blogger

By default Blogger displays the blog title first, followed by the name of the post. As you might notice this is not good when it comes to SEO. It's important for the name of the post to come before the name of your blog, especially when it comes to google search results. Learn how tomake your post title show up first so that you can reel in more traffic from the search engines.

Why Change the Titles?

It's quite important to have the Post Title + Blog Title arranged accordingly because this is how you would want your blog to be displayed on google's search results. This way more people will click on your link when searching google because the post title is more relevant than your post name.

Example Google Search Results:

You are most likely to click on the bottom image when searching google for the keywords "image reflection generator". The reason being is that your mind reads text from left to right. So it makes sense to have the more important title on the left.

How to Change the Titles:

• Go to Layout>edit HTML in your Blogger dashboard.
• Search for this tag: <title><data:blog.pageTitle/></title>
• Replace this tag with the following code:

===================================================================

<b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.title/></title> <b:else/> <title><data:blog.pageName/> | <data:blog.title/></title> </b:if>

===================================================================

• Save your template and you should see the results in your web browser as depicted in the images below.
• It may take a few days for the changes to show up on the google search results. I guarantee you that you will start receiving more traffic from google once you are re-indexed!