Automatic Banner Image Rotation In Every Page Reloaded On Blogger Blog

Automatic  Banner Image Rotation In Every  Page Reloaded On Blogger Blog 1
Follow me

Mathias Amodu

Founder at Zealmat Limited
Mathias Amodu, a passionate blogger with full interest in making the world a better place for upcoming webmasters in the society at large
Automatic  Banner Image Rotation In Every  Page Reloaded On Blogger Blog 1
Follow me
The auto rotation of an advert image has a lots to do in every blog that sells advert spot to it visitors, just like our advert space it is been programmed with some code which enables it renew after every reload. Remember this plugin is mostly used in forums like nairaland and many others,
when doing this on your blog you need to be careful to avoid some mistake or you can even copy the code to your note pad and then get all you requirement the arrange them.

To perform this you just need to follow the steps below

Step 1
Login to your blogger account using your username and password then select your preferred blog.

Step 2
Now scroll your mouse down to the layout tab and click on it.

Step 3
Now click on the add gadget link then select html/javascript from the list of different gadgets.

Step 4
Copy this code and paste it inside your html/javascript box.

<div align=”center”>
<table bgcolor=”#ffffff” border=”0″ cellpadding=”0″ cellspacing=”0″ style=”width: 250px;”>
<tbody>
<tr>
<td><center>

<!–  BANNER#1  –>
<script language=”JavaScript”>
images = new Array(2);
images[0] = “<a href = ‘zealmat.com‘ target=’_blank’ rel=’nofollow’ ><img src=’https://3.bp.blogspot.com/-OwCoYPYsA3g/VtyXOTJHZaI/AAAAAAAADaE/6ZeCfnSPuKU/s1600/aviary_1457293362078.jpg‘ border=’0′ height=’250′ width=’250′ alt=’banner exchange partner’></a>”;
images[1] = “<a href = ‘zealmat.com‘ target=’_blank’ rel=’nofollow’ ><img src=https://3.bp.blogspot.com/-OwCoYPYsA3g/VtyXOTJHZaI/AAAAAAAADaE/6ZeCfnSPuKU/s1600/aviary_1457293362078.jpg‘ border=’0′ height=’250′ width=’250′ alt=’banner exchange partner’></a>”;
images[2] = “<a href = ‘zealmat.com‘ target=’_blank’ rel=’nofollow’ ><img src=’https://3.bp.blogspot.com/-OwCoYPYsA3g/VtyXOTJHZaI/AAAAAAAADaE/6ZeCfnSPuKU/s1600/aviary_1457293362078.jpg‘ border=’0′ height=’250′ width=’250′ alt=’banner exchange partner’></a>”;
images[3] = “<a href = ‘zealmat.com‘ target=’_blank’ rel=’nofollow’ ><img src=’https://3.bp.blogspot.com/-OwCoYPYsA3g/VtyXOTJHZaI/AAAAAAAADaE/6ZeCfnSPuKU/s1600/aviary_1457293362078.jpg‘ border=’0′ height=’250′ width=’250′ alt=’Image Tag’></a>”;
index = Math.floor(Math.random() * images.length);
document.write(images[index] );
</script>
</center>
</td>
<td><center>

Also read  How to Change Address Bar Color of Mobile Browser in Blogger

</center>
</td>
</tr>
</tbody></table>
</div>

Arrangement
change https://3.bp.blogspot.com/-OwCoYPYsA3g/VtyXOTJHZaI/AAAAAAAADaE/6ZeCfnSPuKU/s1600/aviary_1457293362078.jpg  to you own banner image link which is 4 different banner

change zealmat.com to your own link related to that image.

Step 5
finnally click on the save button and thats all.

Hope this tutorial will really help you, don’t forget to drop your comment below thanks.

About Mathias Amodu 918 Articles
Mathias Amodu, a passionate blogger with full interest in making the world a better place for upcoming webmasters in the society at large

Leave a Reply

Your email address will not be published.


*