- Login to your site as an admin with Sitebuilder permissions.
- Go to a thread or topic page.
- Turn on Sitebuilder.
- Click on Edit Page.
- Edit Conversation Detail Module and choose Add First Post Content Ad.
- Enter Ad title.
- Paste the Ad code provided by Google Adsense.
- Append the following script inside the Ad code. Make sure the script is inside the <script> </script> tags. Code:
document.querySelector('.conversation-content-widget .conversation-list li:first-child').className += ' ad-after-first-post-active';
- Click on Active checkbox.
- Configure Display Options as needed.
- Click on Attach button.
- Click on Save button.
- Click on Save Page button.
- Click on OK button.
- The ad will display inside the first post as expected.
- Now with the power of CSS, we will move the ad in between the first post and second post by adding these CSS in css_additional.css template or in Sitebuilder > Style > CSS Editor. Code:
[COLOR=#D3D3D3].ad-after-first-post-active .axd_first-post { position: absolute; bottom: -100px; /* ad height + 10 (adjust as needed) */ left: 50%; text-align: center; margin-left: -444px; /* (ad width/2) + (postbit width/2) */ /* postbit width is 160px by default */ } .conversation-content-widget .conversation-list .ad-after-first-post-active { margin-bottom: 90px; /* ad height (at least; adjust as needed) */ }[/COLOR]
UPDATED (to work with Google Adsense Responsive ad units)
Code:.ad-after-first-post-active .axd_first-post { border: 1px solid #ccc; position: absolute; bottom: -110px; left: 50%; text-align: center; margin-left: -160px; width: 320px; height: 100px; } .conversation-content-widget .conversation-list .ad-after-first-post-active { margin-bottom: 110px; } .ad-after-first-post-active .b-post__body { position: static; } @media(min-width: 500px) { .ad-after-first-post-active .axd_first-post { width: 468px; height: 60px; } .conversation-content-widget .conversation-list .ad-after-first-post-active { margin-bottom: 70px; } .ad-after-first-post-active .axd_first-post { margin-left: -234px; bottom: -70px; } } @media(min-width: 800px) { .ad-after-first-post-active .axd_first-post { width: 728px; height: 90px; } .conversation-content-widget .conversation-list .ad-after-first-post-active { margin-bottom: 100px; } .ad-after-first-post-active .axd_first-post { margin-left: -364px; bottom: -100px; } }
- After the custom CSS is applied, the ad would look like this.
How to put ads after first post in thread on vB5 without using plugins
Collapse
X
-
How to put ads after first post in thread on vB5 without using plugins
Last edited by glennrocksvb; Tue 29 Mar '16, 7:18am. Reason: Updated code to work with Adsense Responsive Ad Units -
This is very good, thanks. I've done it half way but as yet I haven't put the css in. I just wanted to ask what's the worst thing that could go wrong by adding css into css_additional.css?
is it possible that a wrong css code could stuff up my whole forum?
Why is it after I copy & paste something the text I write after that is like this? -
You could always revert your changes to the css_additional.css template if the changes mess up the layout.
That's how rich text editors (or even full-blown word processors) usually work. If you paste a formatted text, the format stays when you manually type.Comment
-
Glad it worked for you and had you feel good in the process.Comment
-
This is a great tutorial. Thank you Glenn."Do not go where the path may lead, instead go where there is no path and leave a trail." - Ralph Waldo EmersonComment
-
Comment
-
It could be you added the custom CSS to a style/theme and you are viewing the page in a different style/theme? You need to add the custom CSS to the rest of the styles/themes (if you are using them).👍 1Comment
-
Try this (replace the original code):
Code:.ad-after-first-post-active .axd_first-post { position: absolute; bottom: -100px; left: 50%; text-align: center; margin-left: -50%; max-width: 1160px; width: 100%; height: 90px; } .conversation-content-widget .conversation-list .ad-after-first-post-active { margin-bottom: 100px; } .ad-after-first-post-active .ad_first-post_inner { height: 100%; } .ad-after-first-post-active .b-post__body { position: static; }
Btw, keegmen, the Google analytics script in your forum is not configured correctly. You should not include the <script> </script> tag when you put the analytics code in AdminCP > Options > Google Analytics. There is a note there not to include the tag. Otherwise, the analytics script will not work.Last edited by glennrocksvb; Fri 17 Apr '15, 7:02pm.Comment
-
Try this (replace the original code):
Code:.ad-after-first-post-active .axd_first-post { position: absolute; bottom: -100px; left: 50%; text-align: center; margin-left: -50%; max-width: 1160px; width: 100%; height: 90px; } .conversation-content-widget .conversation-list .ad-after-first-post-active { margin-bottom: 100px; } .ad-after-first-post-active .ad_first-post_inner { height: 100%; } .ad-after-first-post-active .b-post__body { position: static; }
Btw, keegmen, the Google analytics script in your forum is not configured correctly. You should not include the <script> </script> tag when you put the analytics code in AdminCP > Options > Google Analytics. There is a note there not to include the tag. Otherwise, the analytics script will not work."Do not go where the path may lead, instead go where there is no path and leave a trail." - Ralph Waldo EmersonComment
-
Try this (replace the original code):
Code:.ad-after-first-post-active .axd_first-post { position: absolute; bottom: -100px; left: 50%; text-align: center; margin-left: -50%; max-width: 1160px; width: 100%; height: 90px; } .conversation-content-widget .conversation-list .ad-after-first-post-active { margin-bottom: 100px; } .ad-after-first-post-active .ad_first-post_inner { height: 100%; } .ad-after-first-post-active .b-post__body { position: static; }
Btw, keegmen, the Google analytics script in your forum is not configured correctly. You should not include the <script> </script> tag when you put the analytics code in AdminCP > Options > Google Analytics. There is a note there not to include the tag. Otherwise, the analytics script will not work.
How do I set an ad up to be on every thread on my website. I know I can synchronize the ads to change but how do I set an ad to be placed on multiple threads at the same time?
For instance, one ad on an entire forum or the entire website. And lastly, if I set this up how can I block the ads from going to certain forums such as "announcements".
I value your reply. Please get back to me."Do not go where the path may lead, instead go where there is no path and leave a trail." - Ralph Waldo EmersonComment
-
If I understood you correctly, making a single instance of an ad on different places in the entire forum should be done on the ad provider's side not vBulletin's. vBulletin has no control on what ad content to display.
Btw, did the new code work, keegmen and Brad Padgett?Comment
-
If I understood you correctly, making a single instance of an ad on different places in the entire forum should be done on the ad provider's side not vBulletin's. vBulletin has no control on what ad content to display.
Btw, did the new code work, keegmen and Brad Padgett?
It also was in every post of the forum once I placed it in one area. You did a good job with this.
p.s. I did not use the new form of the code though. The original worked just fine."Do not go where the path may lead, instead go where there is no path and leave a trail." - Ralph Waldo EmersonComment
Related Topics
Collapse
-
by glennrocksvbI'm sure there is a JIRA for the photo slideshow/lightbox being too small. It's essentially "unusable" as the images are too small to see.
I suggest a temporary solution for end-users...-
Channel: vBulletin 5 Tutorials
Fri 2 Aug '13, 4:06pm -
-
by josueinakiI want to move the post ad to the final of message users, on top of "Etiquetas:ninguno"
...-
Channel: Support Issues & Questions
Mon 7 Dec '15, 7:02am -
-
by LetzrideHi there,
I am trying to implement Google Adsense into my conversation content like I see on so many forums - I would like my ad to be randomly injected into one of the posts for non registered...-
Channel: vB Cloud Support & Troubleshooting.
Mon 19 Feb '18, 11:27am -
-
by ZeefjeI'm slowly starting to make a new style based on vb 6 instead of 5 and am in the fase of making tweaks in the additional css via the site builder. after a while the lower css lines are red and don't parse,...
-
Channel: vB Cloud Support & Troubleshooting.
Wed 8 Nov '23, 7:28am -
-
by koko10arHi,
in VB5 is impossible put ads into the post align to left. This is very bad because this zone have more CTR.-
Channel: vBulletin 5 Connect Feedback
Wed 3 Jun '15, 10:41am -
Comment