How Do I Make A 125x125 Banner Hyperlinked With Wordpress

13 replies
I've got some 125X125 ads on my wordpress blog I made using
a widget that I need to make hyperlinked to the offer how do
I do it.

Here's the code that's in the widget

<a href="#"><img src="http://www.mywebsite.com/wp-content/themes/NewsPublish/images/jcpenney-coupons.gif" alt="" title="" /></a>
#banner #hyperlinked #make #wordpress
  • Profile picture of the author GoogleWarrior
    Go into the HTML section of Wordpress and try...
    {{ DiscussionBoard.errors[4077871].message }}
  • Profile picture of the author AmandaT
    Changing that # to the url you want to link to should work.
    {{ DiscussionBoard.errors[4077872].message }}
  • Profile picture of the author stingrays06
    For most of my widgets I make a new post that I'm not going to publish so I can just copy and paste directly from the text editor.

    In this case, create a new post, click on add/edit image. Enter in the url. (or paste directly into html format). Then, click on your image and click on insert link. Enter the URL. Then go to the html editor and copy and paste the entire thing.
    {{ DiscussionBoard.errors[4077884].message }}
  • Profile picture of the author Kecia
    Yes, replacing the # sign with your affiliate link will make the banner link to your offer.
    Signature
    KeciaHambrick.com - Blogger. Content Creator. Social Media Enthusiast.
    {{ DiscussionBoard.errors[4077919].message }}
  • Profile picture of the author 0oo0
    <a href="website">
    <img src="image-location" alt="description" width="125" height="125" />
    </a>
    {{ DiscussionBoard.errors[4077931].message }}
  • Profile picture of the author 0oo0
    check out w3schools.com
    {{ DiscussionBoard.errors[4077936].message }}
  • Profile picture of the author highbids
    Great thank guys for all the help.
    {{ DiscussionBoard.errors[4077939].message }}
  • Profile picture of the author SDStudio
    If you want to have four 125Ã--125 ad banners(as shown in below image),
    In order to save some of your time check out the steps below.



    Its easy to show image ads(direct advertisers ad banner) in the side bar. But if you 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:

    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

    Code:
     
    
    .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)

    Code:
    <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.


    Cheers,
    ~Albert
    {{ DiscussionBoard.errors[4077977].message }}
    • Profile picture of the author highbids
      I'm using a 125x125 banner widget on the left side & I'm thinking
      of using another one on the right side it's simpler I'll save the code
      for future reference thanks.

      Originally Posted by SDStudio View Post

      If you want to have four 125Ã--125 ad banners(as shown in below image),
      In order to save some of your time check out the steps below.





      Its easy to show image ads(direct advertisers ad banner) in the side bar. But if you 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:

      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

      Code:
       
       
      .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)

      Code:
       
      <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.


      Cheers,
      ~Albert
      {{ DiscussionBoard.errors[4078014].message }}

Trending Topics