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

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • glennrocksvb
    Former vBulletin Developer
    • Mar 2011
    • 4005
    • 5.7.X

    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:	965
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:
            
      	[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; }
      	}
    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:	791
Size:	476.3 KB
ID:	4131242
    Hope you find this useful.
    Attached Files
    Last edited by glennrocksvb; Tue 29 Mar '16, 7:18am. Reason: Updated code to work with Adsense Responsive Ad Units

    Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!
  • yv3013
    Senior Member
    • Jan 2013
    • 102
    • 5.0.0

    #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

    • glennrocksvb
      Former vBulletin Developer
      • Mar 2011
      • 4005
      • 5.7.X

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

      Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

      Comment

      • yv3013
        Senior Member
        • Jan 2013
        • 102
        • 5.0.0

        #4
        ok I did it, works beautifully

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

        Comment

        • glennrocksvb
          Former vBulletin Developer
          • Mar 2011
          • 4005
          • 5.7.X

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

          Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

          Comment

          • Brad Padgett
            Senior Member
            • Jul 2014
            • 420
            • 5.1.x

            #6
            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 Emerson

            Comment

            • Carles Purroy
              New Member
              • Nov 2014
              • 7
              • 5.1.x

              #7
              Originally posted by Glenn Vergara
              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

              • glennrocksvb
                Former vBulletin Developer
                • Mar 2011
                • 4005
                • 5.7.X

                #8
                Originally posted by Carles Purroy


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

                Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

                Comment

                • keegmen
                  Senior Member
                  • Nov 2014
                  • 184
                  • 5.1.x

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

                  Comment

                  • keegmen
                    Senior Member
                    • Nov 2014
                    • 184
                    • 5.1.x

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

                    Comment

                    • glennrocksvb
                      Former vBulletin Developer
                      • Mar 2011
                      • 4005
                      • 5.7.X

                      #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 glennrocksvb; Fri 17 Apr '15, 7:02pm.

                      Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

                      Comment

                      • Brad Padgett
                        Senior Member
                        • Jul 2014
                        • 420
                        • 5.1.x

                        #12
                        Originally posted by Glenn Vergara
                        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.
                        "Do not go where the path may lead, instead go where there is no path and leave a trail." - Ralph Waldo Emerson

                        Comment

                        • Brad Padgett
                          Senior Member
                          • Jul 2014
                          • 420
                          • 5.1.x

                          #13
                          Originally posted by Glenn Vergara
                          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.
                          "Do not go where the path may lead, instead go where there is no path and leave a trail." - Ralph Waldo Emerson

                          Comment

                          • glennrocksvb
                            Former vBulletin Developer
                            • Mar 2011
                            • 4005
                            • 5.7.X

                            #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 Brad Padgett?

                            Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

                            Comment

                            • Brad Padgett
                              Senior Member
                              • Jul 2014
                              • 420
                              • 5.1.x

                              #15
                              Originally posted by Glenn Vergara
                              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?
                              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.
                              "Do not go where the path may lead, instead go where there is no path and leave a trail." - Ralph Waldo Emerson

                              Comment

                              Related Topics

                              Collapse

                              Working...