TIP: Embedding Adsense inside your content

Discussion in 'Placement / Reviews / Examples' started by Carlito, May 23, 2006.

  1. #1
    Lots of people float an Adsense ad at the upper corner of their content, but how do you put Adsense IN your content without changing the HTML of the article itself?

    CSS can do that too! Here is an example of how to float ads down inside a long article. You can use it to embed on the left or right (or both!).

    A wide banner or horizontal link unit an inch or two down works well for me.

    Now stop reading this and go cure your visitors' ad blindness! :D


    <html>
    <head>
    <title></title>
    <style type="text/css">
    	#vertspacer1, #adsense1
    	{
    		float:left;
    		clear:left;
    		padding:0px;
    		margin: 0px;
    	}	
    	
    	#vertspacer1
    	{
    		width: 1px; /* Must be at least 1 pixel */
    		height: 114px; /* How far down to embed the add */
    	}
    </style>
    </head>
    <body>
    
    <div style="width=600px;"> <!-- Containing div of the article -->
    
    <div id="vertspacer1"></div> <!-- Float a vertical spacer along the side -->
    <div id="adsense1">
    <!-- Place Adsense code here -->
    </div>
    <!-- Long article text here -->
    </div>
    </body>
    </html>
    
    HTML:
     
    Carlito, May 23, 2006 IP
    LaCabra likes this.
  2. ghacks

    ghacks Active Member

    Messages:
    394
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    60
    #2
    Wordpress users might want to try this one, open single.php

    find

    <div class="storycontent">

    add below

    <div style="float:left;margin-top:0px;margin-right:6px;">
    <p>
    ADS (for example google adsense code)
    </p>
    </div>

    Your google ads float in the top left corner of the article.
     
    ghacks, May 23, 2006 IP
  3. JamesColin

    JamesColin Prominent Member

    Messages:
    7,874
    Likes Received:
    164
    Best Answers:
    1
    Trophy Points:
    395
    Digital Goods:
    1
    #3
    Thank you Carlito or this clever css trick!
    How can you do this same thing for the bottom of the article, if you don't know its length?
     
    JamesColin, May 23, 2006 IP
  4. ahkip

    ahkip Prominent Member

    Messages:
    9,205
    Likes Received:
    647
    Best Answers:
    0
    Trophy Points:
    310
    #4
    Any one know how to do embedded Ads unit within the post?
     
    ahkip, May 23, 2006 IP
  5. sketch

    sketch Well-Known Member

    Messages:
    898
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    148
    #5
    I haven't tried it but I believe that's exactly what Carlito's code will do.

    James, are you talking about having your post wrap around the ad if the ad is at the end? I don't there's a solid way of doing it. Sure you could write some code to "guesstimate" based on font-size, word count, etc., but you can't factor in things like if the user has increased the text size in his browser or if the browser doesn't allow for odd-numbered or decimal sizes (like IE).
     
    sketch, May 23, 2006 IP
  6. JamesColin

    JamesColin Prominent Member

    Messages:
    7,874
    Likes Received:
    164
    Best Answers:
    1
    Trophy Points:
    395
    Digital Goods:
    1
    #6
    Yes, sketch I'm talking about that, look I've applied Carlito's script to the top adsense (randomly located at float left or right, press refresh) :
    http://www.senserely.com/james-adsense_notifier_sponsorship.php
    but at the bottom I have another adsense but can't have the text wrapping around it. I guess it is not possible at the moment, I've tried to look for tutorials on float and all examples are always about the top of the content.
     
    JamesColin, May 23, 2006 IP
  7. Carlito

    Carlito Peon

    Messages:
    679
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Senserely, you can add on another spacer and put another ad unit further down, but there is no way to float from the bottom up with CSS which is what I think you're asking for.
     
    Carlito, May 23, 2006 IP
  8. sketch

    sketch Well-Known Member

    Messages:
    898
    Likes Received:
    26
    Best Answers:
    0
    Trophy Points:
    148
    #8
    Senserely, my 2 cents, floating banner ads inside content isn't a good idea, as you can see on your own page, it's pushing your text into this tiny column that has 2 or 3 words at the most per line. People always use square-format ads inside content, it looks much nicer.
     
    sketch, May 24, 2006 IP
  9. JamesColin

    JamesColin Prominent Member

    Messages:
    7,874
    Likes Received:
    164
    Best Answers:
    1
    Trophy Points:
    395
    Digital Goods:
    1
    #9
    Sketch I know it isn't perfect and often it is bad, I use a random script to display different sizes of the ad and also left or right, try to refresh you'll see it's never the same set, especially with the one at the bottom, also random. I like to use the computer to have randomness not like printed paper, it's my mistake for a long time, before it was about using ugly random colors, i don't seem to learn or very slowly.
     
    JamesColin, May 24, 2006 IP
  10. antithesis_98

    antithesis_98 Peon

    Messages:
    359
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #10
    I tried it today, but it'is a blog with very low traffic so I'll see how the sprinkling of readers react to the new look.
     
    antithesis_98, May 24, 2006 IP
  11. alephito

    alephito Peon

    Messages:
    197
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    0
    #11
    I tried it but I have a couple of unexpected effects.

    1) If the article includes graphic elements probably the DIV will be set over one of the images.

    2) Sometimes, the article content does not wrap properly and part of the last line of text before the ad ends behind the DIV.

    Do you know if there is any fix?
     
    alephito, Jun 2, 2006 IP
  12. Vlatko Šurlan

    Vlatko Šurlan Peon

    Messages:
    49
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Here is the way I managed to conjure http://www.docplanet.org/typo3-cms/adsense-ads-within-content-elements/
     
    Vlatko Šurlan, Jun 21, 2010 IP