Blogspot: Put Ads Or Other Stuff Alongside Post

You can customize your blogspot template to shows ads or other stuff on alongside each post. To achieve this, please follow instructions below:


-Back up your template before edit it!

-Encode your javascript/HTML code. You can utilize online tools to accomplish this. Also blogspot will encode your code into its xHTML standar. Opening tag < will be changed into &lt;  closing tag > will be changed into &gt; and " changed to &quot;
-Open your blogspot dashboard, go to Design > Edit HTML, check Expand Widget

-Find this line, you use Ctrl+F button combination on Firefox:
<div class='post-header-line-1'/>
</div> //section of title of post

put this line:
<b:if cond='data:blog.pageType == &quot;item&quot;'> //only show the ads on single post
<div style='float: left; padding-right: 3px;'> //make the ads float to the left side of body post with padding 3px. Change it to float:right if you want the ads float to right side of your post.

//your code  here. It may be your ads code or other stuff you would like to appear alongside your post.

</div> //closing for floating div section
</b:if> //closing for if condition

Your finish HTML template will look like code below:
<div class='post-header-line-1'/>
</div>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float: left; padding-right: 3px;'>
[your javascript code or url to imag or url to html or an iframe]
</div>
</b:if>

Example insert JavaScript code

Another example, using <table> for position simplicity than using <div>, it contain ads code from BidVertiser:
Code below put between title header section and footer section

<div class='post-header-line-1'/></div> //title header section
<!-- post body section start -->
<table><tr>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<td valign='top'>
&lt;!-- Begin BidVertiser code --&gt;
&lt;SCRIPT LANGUAGE=&quot;JavaScript1.1&quot; SRC=&quot;http://bdv.bidvertiser.com/BidVertiser.dbm?pid=383202&amp;bid=949783&quot; type=&quot;text/javascript&quot;&gt;&lt;/SCRIPT&gt;
&lt;noscript&gt;&lt;a href=&quot;http://www.bidvertiser.com&quot;&gt;pay per click&lt;/a&gt;&lt;/noscript&gt;
&lt;!-- End BidVertiser code --&gt;
</td>
</b:if>
<td valign='top'>
    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>
</td></tr></table>
<!-- post body section end -->

<div class='post-footer'> //footer section

Example at www.galuhpakuan.org

View working example at www.galuhpakuan.org. Note: Google AdSense prohibits this method (change ads code) according to this term of use. You may put another interesting stuff here, for example related post widget, most recent post etc. Explore it, your imagination is your limit :).