Where to place Ad Code

aaronoafc · 06-11-2012, 09:11 PM

my website www.internetwrestlingnews.com is almost finished however on the home page where the title is in the top left...I want this Ad code:

Code:

<script type="text/javascript"><!--
google_ad_client = "ca-pub-1170305256594998";
/* blog title */
google_ad_slot = "5915089522";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

To be just beneath the title + slogan....Where would I place the code?

I put it here like this but I think this might be wrong?

Code:

<b:if cond='data:blog.url == &quot;http://www.internetwrestlingnews.com/p/forum.html&quot;'><script type='text/javascript'><!--
google_ad_client = "ca-pub-1170305256594998";
/* blog title */
google_ad_slot = "5915089522";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'>
</script><script type='text/javascript'>
</script> <style type='text/css'> #content-wrapper { display:none !important; } </style> </b:if>


  </head>

Thanks
Aaron

aaronoafc · 06-12-2012, 01:34 PM

Bump...

Will Bontrager · 06-12-2012, 02:11 PM

Perhaps this will work. The id='header-inner' containing div's CSS definitions need to include a position:relative; definition so the position:absolute; of the div it contains will determine its position from there.

Test positioning with the inline style, then transfer the CSS to your style sheet.

Code:

<div id='header-inner'><!-- #header-inner in the style sheet needs position:relative; definition. -->
<div class='titlewrapper'>
<h1 class='title'>
Internet Wrestling News
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span>#1 Website for Free WWE News, spoilers, rumours and more! No subscription fees!</span></p>
</div>
<div style="position:absolute; top:60px; left:0;"><script type="text/javascript"><!--
google_ad_client = "ca-pub-1170305256594998";
/* blog title */
google_ad_slot = "5915089522";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
</div>

Will

aaronoafc · 06-12-2012, 03:07 PM

Thanks a lot Will, I'm currently the office so will check once I'm home.

do I just need to copy and paste your code into my html and it should work? Or do I need to add something?

Thanks
Aaron

aaronoafc · 06-12-2012, 06:44 PM

I'm still not sure what code to delete and where to add the above code that Will suggested, can anyone help out ?

bundled · 06-12-2012, 10:27 PM

The following code possible to throw the adsense below title.

Code:

<div id='header-wrapper'>
<div class='header section' id='header'><div class='widget Header' id='Header1'>
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
Internet Wrestling News
</h1>
</div>
<div>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-1170305256594998";
/* blog title */
google_ad_slot = "5915089522";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

To make the page better you will want to create a CSS document that links to the page. The CSS should include following code.

Code:

body {
background:none repeat scroll 0 0 #161617;
color:#333333;
font:small arial,helvetica;
margin:-20px 0 0;
text-align:center;
}
a:link {
color:#2350AD;
text-decoration:none;
}
a:visited {
color:#3366CC;
text-decoration:none;
}
a:hover {
color:#333333;
text-decoration:underline;
}
a img {
border-width:0;
}
#header-wrapper {
background:url("http://1.bp.blogspot.com/_8GxSJXcDIwk/S36f9xqZr0I/AAAAAAAAAHs/ddF7skWvEi4/s1600/header-bg.gif") repeat-x scroll 0 0 transparent;
height:140px;
margin-bottom:0;
margin-left:auto;
margin-right:auto;
width:960px;
}
#header-inner {
background-position:center center;
margin-left:auto;
margin-right:auto;
}
#header {
color:#FFFFFF;
text-align:left;
}
#header h1 {
font:bold 32px helvetica,arial;
letter-spacing:-2px;
margin:0;
padding:26px 20px 1px;
text-shadow:0 1px 0 #000000;
text-transform:none;
}
#header a {
color:#FFFFFF;
text-decoration:none;
}
#header a:hover {
color:#FFFFFF;
}
#header .description {
color:#EEEEEE;
font:14px 'arial',Trebuchet,Arial,Verdana,Sans-serif;
letter-spacing:0;
margin:0;
max-width:700px;
padding:0 20px 15px;
text-shadow:0 1px 0 #000000;
text-transform:none;
}
#header img {
margin-left:auto;
margin-right:auto;
}
#outer-wrapper {
font:100% arial,helvetica;
margin:50px auto 0;
text-align:left;
width:960px;
}
#main-wrapper {
float:left;
margin-left:20px;
overflow:hidden;
width:543px;
word-wrap:break-word;
}
#sidebar-wrapper {
float:right;
margin-right:9px;
margin-top:8px;
overflow:hidden;
width:180px;
word-wrap:break-word;
}
#sidebar-wrapper2 {
float:left;
margin-left:9px;
margin-top:8px;
overflow:hidden;
width:180px;
word-wrap:break-word;
}
h2 {
background:none repeat scroll 0 0 #295ECA;
color:#FFFFFF;
font-family:arial;
font-size:14px;
letter-spacing:-1px;
margin:0;
padding:5px 10px 4px;
text-shadow:0 0 1px #000000;
text-transform:none;
}
h2.date-header {
background:none repeat scroll 0 0 transparent;
border:medium none;
color:#666666;
font-family:arial;
font-size:12px;
font-style:normal;
font-weight:normal;
letter-spacing:0;
margin:15px 0 0.5em;
padding:0;
text-align:left;
text-shadow:none;
text-transform:none;
}
.post {
margin:2px 0 45px;
}
.post h3 {
color:#CC6600;
font-size:22px;
font-weight:normal;
line-height:1.4em;
margin:0;
padding:0 0 4px;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
color:#000000;
display:block;
font-weight:bold;
text-decoration:none;
}
.post h3 strong, .post h3 a:hover {
color:#333333;
}
.post-body {
font-size:13px;
line-height:1.6em;
margin:0 0 0.75em;
}
.post-body blockquote {
line-height:1.3em;
}
.post-footer {
background:none repeat scroll 0 0 #EEEEEE;
border-bottom:1px solid #CCCCCC;
border-top:1px solid #CCCCCC;
color:#666666;
font-family:georgia;
font-size:12px;
font-style:italic;
letter-spacing:0;
margin:0.75em 0;
padding:5px 10px;
text-transform:none;
}
.comment-link {
margin-left:0.6em;
}
.post img, table.tr-caption-container {
background:none repeat scroll 0 0 #DDDDDD;
padding:2px;
}
.tr-caption-container img {
border:medium none;
padding:0;
}
.post blockquote {
font-family:georgia;
font-style:italic;
margin:1em 20px;
}
.post blockquote p {
margin:0.75em 0;
}
#comments h4 {
color:#666666;
font-size:14px;
font-weight:bold;
letter-spacing:0;
line-height:1.4em;
margin:1em 0;
text-transform:none;
}
#comments-block {
line-height:1.6em;
margin:1em 0 1.5em;
}
#comments-block .comment-author {
-moz-background-inline-policy:continuous;
background:none repeat scroll 0 0 #E8DEC4;
border:1px solid #E8DEC4;
font-size:15px;
font-weight:normal;
margin-right:20px;
padding:5px;
}
#comments .blogger-comment-icon, .blogger-comment-icon {
-moz-background-inline-policy:continuous;
background:none repeat scroll 0 0 #E8DEC4;
border-color:#E8DEC4;
border-style:solid;
border-width:2px 1px 1px;
line-height:16px;
padding:5px;
}
#comments-block .comment-body {
border-left:1px solid #E8DEC4;
border-right:1px solid #E8DEC4;
margin-left:0;
margin-right:20px;
padding:7px;
}
#comments-block .comment-footer {
border-bottom:1px solid #E8DEC4;
border-left:1px solid #E8DEC4;
border-right:1px solid #E8DEC4;
font-size:11px;
line-height:1.4em;
margin:-0.25em 20px 2em 0;
padding:5px;
text-transform:none;
}
#comments-block .comment-body p {
margin:0 0 0.75em;
}
.deleted-comment {
color:gray;
font-style:italic;
}
#blog-pager-newer-link {
background:none repeat scroll 0 0 #EEEEEE;
border:2px solid #CCCCCC;
float:left;
padding:5px;
}
#blog-pager-older-link {
background:none repeat scroll 0 0 #EEEEEE;
border:2px solid #CCCCCC;
float:right;
padding:5px;
}
#blog-pager {
text-align:center;
}
.feed-links {
clear:both;
line-height:2.5em;
}
.sidebar {
color:#000000;
font-size:12px;
line-height:1.5em;
}
.sidebar ul {
list-style:none outside none;
margin:0;
padding:0;
}
.sidebar li {
border-bottom:1px solid #EEEEEE;
line-height:1.5em;
margin:0;
padding:3px 0;
}
.sidebar .widget, .main .widget {
margin:0 0 1.5em;
}
.main .Blog {
border-bottom-width:0;
}
.profile-img {
border:1px solid #CCCCCC;
float:left;
margin:0 5px 5px 0;
padding:4px;
}
.profile-data {
color:#999999;
font:bold 78%/1.6em 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif;
letter-spacing:0.1em;
margin:0;
text-transform:uppercase;
}
.profile-datablock {
margin:0.5em 0;
}
.profile-textblock {
line-height:1.6em;
margin:0.5em 0;
}
.profile-link {
font:78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif;
letter-spacing:0.1em;
text-transform:uppercase;
}
#wrapper-bg {
}
#content-wrapper {
background:url("http://1.bp.blogspot.com/_8GxSJXcDIwk/S4-p3q25Y9I/AAAAAAAAAW8/TfyNrfnmOKA/s1600/content-bg.gif") repeat-y scroll 0 0 transparent;
}
.topright {
margin:32px 0 0;
text-align:right;
}
.topright a {
color:#4B6B09;
font-family:Arial,Helvetica,sans-serif;
font-size:11px;
font-weight:bold;
text-decoration:none;
text-shadow:0 1px 0 #CEF67A;
text-transform:uppercase;
vertical-align:top;
}
.navcontainer {
background:url("http://1.bp.blogspot.com/_8GxSJXcDIwk/S4-w_JALq9I/AAAAAAAAAXM/f44oJ2VXZhw/s1600/navscreen.png") repeat-x scroll left bottom #DDDDDD;
height:34px;
margin-top:-30px;
padding:0 0 0 10px;
}
#nav {
height:34px;
}
#nav, #nav ul {
line-height:1;
list-style:none outside none;
margin:0;
padding:0;
}
#nav {
margin-bottom:1px;
}
#nav ul {
float:left;
list-style:none outside none;
margin:0;
padding:0;
}
#nav li {
float:left;
list-style:none outside none;
margin:0;
padding:0;
}
#nav ul li {
list-style:none outside none;
margin:0;
padding:0;
}
#nav li a, #nav li a:link {
color:#223200;
display:block;
font-size:12px;
font-weight:bold;
margin:0 6px 0 0;
padding:11px 14px;
text-decoration:none;
text-shadow:0 1px 0 #FFFFFF;
text-transform:uppercase;
}
#nav li a:hover, #nav li a:active {
background:none repeat scroll 0 0 #DDDDDD;
color:#223200;
display:block;
text-decoration:none;
text-shadow:0 1px 0 #FFFFFF;
}
#nav li.current-cat a {
color:#223200;
text-shadow:0 1px 0 #FFFFFF;
}
#nav li:hover, #nav li.sfhover {
position:static;
}
.widget-content {
background:none repeat scroll 0 0 #FFFFFF;
border:1px solid #295ECA;
padding:5px 10px 10px;
}
#footer {
background:none repeat scroll 0 0 #000000;
color:#FFFFFF;
font-size:12px;
height:32px;
margin-bottom:15px;
padding:9px;
text-align:center;
}
#footer a {
color:#FFFFFF;
}
#footer a:hover {
text-decoration:none;
}
#footer2 {
color:#809752;
font-size:11px;
padding:10px;
text-align:center;
}
#footer2 a {
color:#809752;
text-decoration:none;
}
#topsearch {
background:url("http://3.bp.blogspot.com/_8GxSJXcDIwk/S4-wl7xmekI/AAAAAAAAAXE/kA-9tcPEdsg/s1600/searchbg.gif") no-repeat scroll right top transparent;
float:right;
height:24px;
margin:-30px 12px 0 0;
padding:0;
width:180px;
}
#searchform {
float:right;
margin:0;
padding:0;
width:180px;
}
#searchform #searchfield {
background:none repeat scroll 0 0 transparent;
border:0 none;
color:#AAAAAA;
float:left;
height:22px;
margin:0;
padding:4px 0 0 5px;
width:146px;
}
#searchform #submitbutton {
background:none repeat scroll 0 0 transparent;
border:0 none;
float:right;
font-size:8pt;
height:24px;
margin:0;
text-align:center;
text-indent:-10000em;
width:26px;
}
.fleft {
float:left;
line-height:16px;
margin-left:10px;
text-align:left;
}
.fright {
float:right;
line-height:16px;
margin-right:10px;
text-align:right;
}
/*Start Sticky Bar Css http://www.spiceupyourblog.com*/
#share-buttons {
background: none repeat scroll 0 0 #fff;
border: 1px solid #CCCCCC;
left: -80px;
padding: 8px;
position: absolute;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-goog-ms-border-radius: 6px;
border-radius: 6px;
}
#share-buttons .scount{
clear: both;
display: block;
margin: 2px auto;
text-align: center;
width: 55px;z-index:-1;
}

-->

You could make the <div> related to the Ad below the title. While adding into the CSS document below code ...

Code:

#ad li a, #ad li a:link {
color:#223200;
display:block;
font-size:12px;
font-weight:bold;
margin:0 6px 0 0;
padding:11px 14px;
text-decoration:none;
text-shadow:0 1px 0 #FFFFFF;
text-transform:uppercase;
}

You can change positions, colors, designs all in the CSS coding. Which will than be able to position the ad, color exactly where you want.

So you have several options. Change the CSS coding. Or change the HTML coding directly. Best option is the CSS coding.

Will Bontrager · 06-13-2012, 12:19 PM

Quote:

Originally Posted by aaronoafc

Thanks a lot Will, I'm currently the office so will check once I'm home.

do I just need to copy and paste your code into my html and it should work? Or do I need to add something?

Thanks
Aaron

First, go to your style sheet and add position:relative; to the #header-inner definition. Then, copy the div that begins and ends with the orange text and insert it into your source code at the place indicated. (I copied the surrounding code from your existing page.)

Adjust the div's top and left style until you're satisfied with the ad's position.

Will