Side by Side Banner Ad with Related Articles. Your Choices!

Good evening all my friends, this time already at 6.30pm and the temperature in my room is still hot maybe around 30 degrees. Ok, i do not want to talk long.

Anyway, how far is the importance of Related Articles for you? This thing is very important to enable the reader to sneak further into article and easily find the same label article.

Well, if we combine it with a 300x250 banner ads, your blog/web would indirectly be able to attract the attention of readers. If you interested then continue reading. :)

As usual we go to the Template and Edit HTML. Next, find this code <div class='post-footer'> . After you found, paste the script just above it.

Here the script:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='tvokm-under-wrapper'>
<div id='tvokm-related-articles'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=8&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var maxresults=8;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div>
<div id='tvokm-banner-ads'>
Place Your Banner Script Here With Size of 300x250!
</div>
</div>
</b:if>

The purple color is the number of article that will appear in the related article box and the blue color, i think no need for me to explain.

Before I go to next step, take note with this, if you want to change the banner ad with other widget remove this script:

<div id='tvokm-banner-ads'>
Place Your Banner Script Here With Size of 300x250!
</div>
</div>
</b:if>

The next step is, search this code ]]></b:skin> and paste the CSS Code above it.

CSS Code:

#tvokm-under-wrapper{float:left;width:100%;border-bottom:1px solid #aaa;margin:10px 0;padding:5px 0 15px}
#tvokm-related-articles{float:left;width:295px;border-right:1px solid #ddd;margin:5px 0 0;padding:0 5px 0 0}
#tvokm-related-articles .widget{margin:0;padding:0}
#tvokm-related-articles .widget h2,#related-posts h2{font:bold 10px Arial;color:#000;text-transform:none;margin:0 0 5px;padding:0}
#tvokm-related-articles a{color:#0936F9;font:14px Arial}
#tvokm-related-articles a:hover{color:#EA2828}
#tvokm-related-articles li{background:url(none) no-repeat 0 8px;text-indent:0;line-height:1.2em;margin:0;padding:2px 0 2px 10px}
#tvokm-banner-ads{float:right;width:300px;margin:5px 0}
.comments-area {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxFc4mimsO5iO48tnbWaB__qeHbCkosykpxRYZq6_WxrQSTwAhRgYN9GzvTKEpKJoWGo1pZ2xEQyWGD-Up7WPVoG7GKAp-O4AwC72hhf-RP_08uXyIj_qswpYnHlqbwbnrrbO2vLRkVLw/s1600/comment.png) no-repeat center right;margin:0 0 0 5px;padding:0 15px 0 0;}
.cm_reply{padding-top:5px}
.sidebar ul,#related-articles ul{list-style:none;margin:0;padding:0}
.cm_pagenavi a:hover{text-decoration:underline}

You are almost done. At the same time, paste the javascript below the code ]]></b:skin> :

<script type='text/javascript'>
var relatedpoststitle=&#39;Related Articles:&#39;;
</script>

The red color is just a title and you can change it by your own title like "Recommended For you". Now you're done.

Before you leave, remember to remove this CSS Code when you want to remove the banner ad but if you plan to not remove then just ignore it.

 CSS Code:

 #tvokm-banner-ads{float:right;width:300px;margin:5px 0}
.comments-area {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxFc4mimsO5iO48tnbWaB__qeHbCkosykpxRYZq6_WxrQSTwAhRgYN9GzvTKEpKJoWGo1pZ2xEQyWGD-Up7WPVoG7GKAp-O4AwC72hhf-RP_08uXyIj_qswpYnHlqbwbnrrbO2vLRkVLw/s1600/comment.png) no-repeat center right;margin:0 0 0 5px;padding:0 15px 0 0;}

Feel free to post some comments if you need help or want to say thanks. :)