Home » Wordpress

Left or Right Align your image, adsense code or other advertisement in wordpress

21 November 2008 1,423 views Popularity: 3% Share/Bookmark

email

Suppose you want to show your google adsense in the top-left side of your post. If you simply put your adsense code in the single post page (single.php) of wordpress then the text of your post will appear below the adsense.

To solve this problem, I used stylesheet property called ‘margin’. The example below is from single.php file of my wordpress theme. The adsense code is kept in between the paragraph tag.
It is kept after

<em><div class="entry-content"></em>

and before

<em><?php the_content(); ?></em>

<div class="entry-content">

<p class="alignleft" style="text-align: left; margin: 8px; float: left;">

<script type="text/javascript"><!--
google_ad_client = "pub-8802303964745491";
/* 336x280, created 5/16/08 */
google_ad_slot = "7152897181";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

</p>

<?php the_content(''.__('Read More <span class="meta-nav">&raquo;</span>', 'sandbox').''); ?>

Similarly, I created an about me page. I wanted to show my pic in the top-left position and to show the text by the side of the pic. For this I added style to my uploaded image while editing the page. I went to the HTML (not View) section in the edit/add page.

The style I added goes like this:

style="margin: 8px; float: left;"

More HTML source from my about page:


<p style="text-align: left;">
<img class="alignleft" alt="Mukesh Image" src="http://blog.chapagain.com.np/wp-content/uploads/close-up-small.jpg" style="margin: 8px; float: left;"/>
</p>
<p> </p>
<p class="MsoNormal" style="text-align: justify;">
Hi, I am Mukesh Chapagain. My rest of the introduction goes here...
</p>

Related posts:

  1. How to setup Google AdSense for your website
  2. WordPress Plugin: Quick Adsense 1.0
  3. Solution: Google Adsense not showing on my website blog
  4. Blogspot: How to add google adsense to your blogger website?
  5. How to get(view) html source code of a website
  6. jQuery: Grey out background and preview image as popup
  7. Google is retiring AdSense Referrals
  8. WordPress: Optimizing 404 Page Not Found page
  9. jQuery: Animate and Transfer effect with Image
  10. How to show child page (sub page) list in parent page in wordpress?
  • http://getitcleanednow.com Chris Felts

    the align code worked perfect for my adsense thanks

  • http://www.cheapgps-systems.com Cheap GPS Systems

    Really great info man, thanks a bunch!

  • http://shrewdgeek.com pradeep

    thanks for the tutorial i managed to setup adsense ad at my blog