Sunday, 29 December 2013

how to add/Create 125px * 125px hover Ads widget to blogger. Adsense Tips

Sunday, 29 December 2013 - by Tania Jamil 0


Beautiful objects of site or web log always attract visitors to stay and crawl the whole site , So in other words they increase web traffic  plus revenue. So today we will learn " how to add hover effect ads widgets to blog". It's very easy and even a non professional person can add it.so let's have a try and give our sites a different look.

Here are the step by step tutorial :

INSTRUCTIONS:

1-Login to Blogger account
2-Go to layout
3- Click on Add Gadget
4-Select  "HTML/JavaScript" Gadget
5-Write Title like "Advertise With Us"
6-Copy the code given below,paste it inside and save , You'r done.

HOVER AD'S CODE:

<style> 
#techportion img { margin: -6px -8px -8px -6px; padding: 1px; text-align: left; border: 3px solid #c0c0c0; -webkit-     border-radius:70px; -moz-border-radius:70px; -o-border-radius:70px; border-radius:70px; -webkit-transition: all 0.45s ease- out; -moz-transition: all 0.45s ease-out; -o-transition: all 0.45s ease-out; transition: all 0.45s ease-out; } #techportion      img:hover { margin: 0px 2px 4px 0px; padding: 2px; text-align: center; border: 3px solid #3399FF; -webkit-border-radius:0px;      -moz-border-radius:0px; -o-border-radius:0px; border-radius:0px; } 
</style>
<div id="
techportion" align="left"> <table border="0"  cellpadding="2" cellspacing="2" width="265" bgcolor="#fff"><tbody>      <tr> <td> <center>
<a href="Advertiser URL" rel="nofollow"> <img border="0" alt="AD DESCRIPTION" width="125"      src="Image URL"      height="125"/></a> </center> </td> <td> <center>
<a href="Advertiser URL 2" rel="nofollow"> <img border="0" alt="AD DESCRIPTION" width="125"     src="http://2.bp.blogspot.com/-Wu4KCsLqfc0/UTj3qOgIaSI/AAAAAAAAFUM/DFspPSl4tpU/s1600/ad-here.png"     height="125"/></a> </center> </td> </tr> <tr> <td> <center>
<a href="ADVERTISER URL 3" rel="nofollow"><img border="0" alt="AD DESCRIPTION" width="125"     src="http://2.bp.blogspot.com/-Wu4KCsLqfc0/UTj3qOgIaSI/AAAAAAAAFUM/DFspPSl4tpU/s1600/ad-here.png"     height="125"/></a> </center> </td> <td> <center>

<a href="ADVERTISER URL 4" rel="nofollow"> <img border="0" alt="AD DESCRIPTION" width="125"     src="http://2.bp.blogspot.com/-rZqBXY8CDdQ/UfScwREm7BI/AAAAAAAAANw/hv8p02J0SsQ/s1600/blue.gif"     height="125"/></a> </center> </td> </tr> </tbody> </table> </div>

1- Advertiser URL
2-AD Description
3-Image URL ( after src) 

Replace Advertiser URL by web link given by Advertiser.
Write Description of AD provided by Advertiser
& and put image url at Image URL place.
 
If you want to play with CSS and HTML code you can try here.
I hope this will be helpful, for more interesting and informative articles , stay tuned.

About the Author

Write admin description here..

0 comments:

© 2013 Tech Portion. WP Theme-junkie converted by BloggerTheme9