How they do this. In this tutorial we will create random 125x125 banner space on sidebar which automatically refreshed on each page views.
With this widget you can display as many banners on your blog. This widget contain javascript which use array of images to refresh banners automatically on each page views. So let's start with the tutorial..
How to create random 125x125 random banner widget for blogger.
Step 1. Go to blogger layout to start with this widget.
Step 3. Click on add a Gadget.
Step 4. Paste following code and save the widget.
<div align="center">
<table border="0" cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff">
<tbody><tr>
<td><center>
<!-- ADIMAGE#1 -->
<script language="JavaScript">
images = new Array(2);
images[0] = "<a href = 'http://www.bwidgets4all.com' rel='nofollow' ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE-7qnG0gFlmtTj4WBTu8guv3BY2mLV7v9gQ3e-YHzj5trYp7UlKP7qgaV-jfunrGxsCm1Yiu8Y4ODPeZBQdzoONZuBbwN7igxRtj91wsB38AWHGpu6UhdNvjqFBoQACZC69XkB4mY0k1w/s1600/125x125.gif' border='0' height='125' width='125' alt='ADVERTISE HERE'></a>";
images[1] = "<a href = 'http://www.bwidgets4all.com' rel='nofollow' ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUwy8CSXG39JWnxHhyKeafOja_tz_E4IddzhPmrMo3xBXGFg79cWNhOumtCm6SIncxHRQAKh40HGIQJwDZMpbLMeYxig8p5mJfkWWqXb56ffKIhj34-lkJSsXLMxB61lBCltZzsJrTFSGm/s1600/banner_125x125.gif' border='0' height='125' width='125' alt='ADVERTISE HERE'></a>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>
</center></td>
<td><center>
<!-- ADIMAGE#2 -->
<script language="JavaScript">
images = new Array(2);
images[0] = "<a href = 'http://www.bwidgets4all.com' rel='nofollow' ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE-7qnG0gFlmtTj4WBTu8guv3BY2mLV7v9gQ3e-YHzj5trYp7UlKP7qgaV-jfunrGxsCm1Yiu8Y4ODPeZBQdzoONZuBbwN7igxRtj91wsB38AWHGpu6UhdNvjqFBoQACZC69XkB4mY0k1w/s1600/125x125.gif' border='0' height='125' width='125' alt='ADVERTISE HERE'></a>";
images[1] = "<a href = 'http://www.bwidgets4all.com' rel='nofollow' ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUwy8CSXG39JWnxHhyKeafOja_tz_E4IddzhPmrMo3xBXGFg79cWNhOumtCm6SIncxHRQAKh40HGIQJwDZMpbLMeYxig8p5mJfkWWqXb56ffKIhj34-lkJSsXLMxB61lBCltZzsJrTFSGm/s1600/banner_125x125.gif' border='0' height='125' width='125' alt='ADVERTISE HERE'></a>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>
</center></td>
</tr>
<tr>
<td><center>
<!-- ADIMAGE#3 -->
<script language="JavaScript">
images = new Array(2);
images[0] = "<a href = 'http://www.bwidgets4all.com' rel='nofollow' ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE-7qnG0gFlmtTj4WBTu8guv3BY2mLV7v9gQ3e-YHzj5trYp7UlKP7qgaV-jfunrGxsCm1Yiu8Y4ODPeZBQdzoONZuBbwN7igxRtj91wsB38AWHGpu6UhdNvjqFBoQACZC69XkB4mY0k1w/s1600/125x125.gif' border='0' height='125' width='125' alt='ADVERTISE HERE'></a>";
images[1] = "<a href = 'http://www.bwidgets4all.com' rel='nofollow' ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUwy8CSXG39JWnxHhyKeafOja_tz_E4IddzhPmrMo3xBXGFg79cWNhOumtCm6SIncxHRQAKh40HGIQJwDZMpbLMeYxig8p5mJfkWWqXb56ffKIhj34-lkJSsXLMxB61lBCltZzsJrTFSGm/s1600/banner_125x125.gif' border='0' height='125' width='125' alt='ADVERTISE HERE'></a>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>
</center></td>
<td><center>
<!-- ADIMAGE#4 -->
<script language="JavaScript">
images = new Array(2);
images[0] = "<a href = 'http://www.bwidgets4all.com' rel='nofollow' ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE-7qnG0gFlmtTj4WBTu8guv3BY2mLV7v9gQ3e-YHzj5trYp7UlKP7qgaV-jfunrGxsCm1Yiu8Y4ODPeZBQdzoONZuBbwN7igxRtj91wsB38AWHGpu6UhdNvjqFBoQACZC69XkB4mY0k1w/s1600/125x125.gif' border='0' height='125' width='125' alt='ADVERTISE HERE'></a>";
images[1] = "<a href = 'http://www.bwidgets4all.com' rel='nofollow' ><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUwy8CSXG39JWnxHhyKeafOja_tz_E4IddzhPmrMo3xBXGFg79cWNhOumtCm6SIncxHRQAKh40HGIQJwDZMpbLMeYxig8p5mJfkWWqXb56ffKIhj34-lkJSsXLMxB61lBCltZzsJrTFSGm/s1600/banner_125x125.gif' border='0' height='125' width='125' alt='ADVERTISE HERE'></a>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>
</center></td>
</tr>
</tbody></table>
<table border="0" bordercolor="#0084ce" cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff">
<tbody>
<tr>
<td><center><a href="http://www.bwidgets4all.com" rel="nofollow">125 Ad Widget-Get It.</a></center></td>
</tr>
</tbody></table>
</div>
What changes you can made in this widget..
You can change site name highlighted above and banner images.. I hope you will enjoy the trick. pl consider sharing with friends.
Hi! I am K Ajay, currently live in Chandigarh, India. A young Web Designer, Pro Blogger, Graphic Designer & an addicted Web Developer. I love working on Blogger and WordPress using CSS Tricks,and Web Designing.
0 comments:
Important - Make sure to click the "Subscribe By Email" link below the comment for to be notified of follow up comments and replies.If you use Name/URL don't use keywords as your name (You Know Who You Are).
Post a Comment