Announcement

Collapse
No announcement yet.

How to put ads after first post in thread on vB5 without using plugins

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • How to put ads after first post in thread on vB5 without using plugins

    1. Login to your site as an admin with Sitebuilder permissions.
    2. Go to a thread or topic page.
    3. Turn on Sitebuilder.
    4. Click on Edit Page.
    5. Edit Conversation Detail Module and choose Add First Post Content Ad.
    6. Enter Ad title.
    7. Paste the Ad code provided by Google Adsense.
    8. 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';
    9. Click on Active checkbox.
    10. Configure Display Options as needed.
    11. Click on Attach button.
    12. Click on Save button.
    13. Click on Save Page button.
    14. Click on OK button.
    15. The ad will display inside the first post as expected. Click image for larger version

Name:	First_Post_Ad.jpg
Views:	3
Size:	234.0 KB
ID:	4131241
    16. 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:
            
      	.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) */
      	}

      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; }
      	}
    17. After the custom CSS is applied, the ad would look like this. Click image for larger version

Name:	After_First_Post_Ad.jpg
Views:	1
Size:	476.3 KB
ID:	4131242
    Hope you find this useful.
    Attached Files
    Last edited by Glenn Vergara; Tue 29th Mar '16, 7:18am. Reason: Updated code to work with Adsense Responsive Ad Units

    AutoLinker-vB5+vBCloud | NavMenu Dropdown-vB5+vBCloud | TimedSticky | Video Attachments Player | Blur Replies for Guests | Drag/Drop Upload | Topic Starter Ribbon | Topic AJAX Auto-Update

  • #2
    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?

    Comment


    • #3
      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.

      AutoLinker-vB5+vBCloud | NavMenu Dropdown-vB5+vBCloud | TimedSticky | Video Attachments Player | Blur Replies for Guests | Drag/Drop Upload | Topic Starter Ribbon | Topic AJAX Auto-Update

      Comment


      • #4
        ok I did it, works beautifully

        It's quite amazing that css thing, I felt like a techno guru for a moment.

        Comment


        • #5
          Glad it worked for you and had you feel good in the process.

          AutoLinker-vB5+vBCloud | NavMenu Dropdown-vB5+vBCloud | TimedSticky | Video Attachments Player | Blur Replies for Guests | Drag/Drop Upload | Topic Starter Ribbon | Topic AJAX Auto-Update

          Comment


          • #6
            This is a great tutorial. Thank you Glenn.

            Comment


            • #7
              Originally posted by Glenn Vergara View Post
              Glad it worked for you and had you feel good in the process.

              My AD get included on message, and i added the css code on CSS editor, i saved the changes but the AD still stay inside the user message.

              Comment


              • #8
                Originally posted by Carles Purroy View Post


                My AD get included on message, and i added the css code on CSS editor, i saved the changes but the AD still stay inside the user message.
                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).

                AutoLinker-vB5+vBCloud | NavMenu Dropdown-vB5+vBCloud | TimedSticky | Video Attachments Player | Blur Replies for Guests | Drag/Drop Upload | Topic Starter Ribbon | Topic AJAX Auto-Update

                Comment


                • #9
                  I have the following problem friend, I followed your steps and this is the result

                  Comment


                  • #10
                    And putting the code so I space is blank after the first post.

                    Comment


                    • #11
                      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;
                      }
                      Let me know if this works so I can update the code in the first post.


                      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 Glenn Vergara; Fri 17th Apr '15, 7:02pm.

                      AutoLinker-vB5+vBCloud | NavMenu Dropdown-vB5+vBCloud | TimedSticky | Video Attachments Player | Blur Replies for Guests | Drag/Drop Upload | Topic Starter Ribbon | Topic AJAX Auto-Update

                      Comment


                      • #12
                        Originally posted by Glenn Vergara View Post
                        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;
                        }
                        Let me know if this works so I can update the code in the first post.


                        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.
                        Thanks for all the info Glen, I'm about to try this now. I'll let you know if I encounter an issue.

                        Comment


                        • #13
                          Originally posted by Glenn Vergara View Post
                          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;
                          }
                          Let me know if this works so I can update the code in the first post.


                          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.
                          Okay here is my question Glenn Vergara

                          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.

                          Comment


                          • #14
                            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 TheXboxCloud?

                            AutoLinker-vB5+vBCloud | NavMenu Dropdown-vB5+vBCloud | TimedSticky | Video Attachments Player | Blur Replies for Guests | Drag/Drop Upload | Topic Starter Ribbon | Topic AJAX Auto-Update

                            Comment


                            • #15
                              Originally posted by Glenn Vergara View Post
                              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 TheXboxCloud?
                              Yes, the code worked. Thank you.

                              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.

                              Comment

                              Working...
                              X