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

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

Posted By Dennelton Mandiau on Thursday, April 3, 2014 | 20:47

Best blogger widget. recommended for you
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(http://3.bp.blogspot.com/-yzvjspEVcWU/Tma1oYTAjhI/AAAAAAAABqM/w5U_HyG3m0Y/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(http://3.bp.blogspot.com/-yzvjspEVcWU/Tma1oYTAjhI/AAAAAAAABqM/w5U_HyG3m0Y/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. :)
Share this article :
The Editor

I'm Dennelton from Sabah, editor of www.tvokm.com. I was a blogger since 2008, I have a great interest about blogging and seeking additional income through the internet. Follow me with like our official Facebook Page HERE

+ comments + 1 comments

November 12, 2014 at 5:06 AM

Here you can sell and buy both new and used products.
This website is perfect for selling just about anything at all.
link

Post a Comment

Hello there, we are welcome all kinds of thoughts-supportive, opposed, critical or otherwise but before you add comment please use English, Indonesian and Malay language. Thank You!
 
Support : Policies | Contact | About
DMCA.com Copyright © 2013-2017. TVOKM - All Rights Reserved
Designed by Maskolis | Modified by
Proudly powered by Blogger