Skyscraper Ads Side by Side (Standard Size of 160x600px - 120x600px)

Hello readers, today is April 5 and I want to explain how to put Skyscraper ads side by side on your page. In my experience size of the banner is effective in promoting ad and also included in the recommendations by google.

Before that, be sure the size of column is at least 300px wide because the ad size has width 120px and 160px. However, you can change the size of the banner but the column must be greater than 300px size.

Basically, go to Layout > Add a Gadget > and then put the script inside HTML/JavaScript. 

Here the Script:

<table align="left" cellpadding="0"><tbody>
<tr><td><div style="position: relative; text-align: center;">
<!-- Using Iframe Ad Tag For tvokm.blogspot.com -->
<!-- Size: 160x600 -->
>>Ad Code<<
</div></td>
<td><div style="position: relative; text-align: center;">
<!-- Using Java Script Ad Tag For tvokm.blogspot.com -->
<!-- Size: 120x600 -->
>>Ad Code<<
<!-- Using Java Script Ad Tag For tvokm.blogspot.com -->
</div></td></tr></tbody></table>

Take note, don't forget to remove the blue color with your ad script there.

If you want to change the spacing on both the advertisement so not to be too closely, add this code Margin: 0 10px; ,like this:

<td><div style="position: relative; text-align: center; Margin: 0 10px;">

Remember, put the code on ad size that you want to spacing because it has two scripts.

If you have any idea to be discussed don't forget to comment and echo! :)

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. :)

Make Auto Rotating Banner in Blog or Web

Today 4 April my work is doing update on the rotating banner widget which be an important tool for entrepreneurs who making jobs advertising business or publisher.

How this rotating banner work when you get to a web? You will see a picture that will change by itself in a row when you do page refresh or move to another page in the same web eg http://tvokm.blogspot.com/p/about_11.html >> http://tvokm.blogspot.com/p/contact_4884.html.

First we go to Layout and click Add a Gadget. After that copy and paste the script below into the HTML / JavaScript Add space.

<script type="text/javascript">
var tvokm = [];
tvokm[0] = '<a href="Place url here!" target="_blank" rel="nofollow"><img src="Place your Url Photo!" alt="Place Your Title!" width="300" height="250"></a>'

var x = 0;

function rotate(tvokm) {
while (x < tvokm.length) {
var sort = Math.floor(Math.random() * tvokm.length);
if (tvokm[sort] != 0) {
document.getElementById('adspace').innerHTML = (tvokm[sort]);
tvokm[sort] = 0;
x++;
}
}
}
</script>

<script>
#adspace {

}

#adspace img {

}
</script>

<div id="adspace">
<script type="text/javascript">
rotate(tvokm);
</script>
</div>

I think no need for me to explain what you should do with the four colors text but if you still can not understand go to this link SMART BOX. 

Each time you add a photos, look carefully this script:

tvokm[0] = '<a href="Place url here!" target="_blank" rel="nofollow"><img src="Place your Url Photo!" alt="Place Your Title!" width="300" height="250"></a>'

Copy and paste the script just below it with no space but dont' forget to change the tvokm number eg tvokm[0] >> tvokm[1] >> tvokm[2].

Kudos to you. Well, if you like it don't forget to add some comment. Thanks :)

Smart Author Box Script For Blogger

Today my friends enjoy April fool game but I'm busy with work blogging. However, I have completed updating my "author box" to make it more brief and concise. It looks like the diagram above and if you like, feel free to read the steps future.

As usual, go to the template to edit HTML. In that space, find the code <data:post.body> ,after that search the code at the very bottom because the code has two or three depending on your template. After that, place the script below the code.

In addition you can also put the script just above it <div class='post-footer'> ,this is the method I used to my template.

Here the script:

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='tvokm-author-box'>
<a href='Place link to target the title' target='_blank'><img alt='' class='avatar avatar-60 photo' height='60' src='Place your Url Photo!' width='70'/></a><b><a href='http://tvokm.blogspot.com/p/about_11.html' target='_blank'>Place Your Title!</a></b><br/><br/>
Your Description!!
</div>
</b:if>

The script above shows 3 different colors which is Blue, Purple, Green, and Red. 

• Blue color indicates when you click on your title, you will taken to the link destination eg Blogger >> Facebook. 
• Purple is your url photo eg https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t1.0-1/c25.0.200.200/p200x200/1395265_169504976581214_1306635578_n.png
• Red is your title like "The TVOKM"
• Green color is the size of avatar and it is up to you to change the size.

For the last step, find the code ]]></b:skin>, after that, place the CSS script just above it.

CSS Script:

.tvokm-author-box {
background: #F7F7F7;
margin: 10px 0 10px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
}
.tvokm-author-box p {
margin: 0;
padding: 0;
}
.tvokm-author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 1px solid #E6E6E6;
}

Now you're done. Don't forget to make a comment. Thanks :)