Announcement

Collapse
No announcement yet.

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

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Official - Free How to put ads after first post in a 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 (Edit Site ON).
    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-ad1.jpg
Views:	966
Size:	234.0 KB
ID:	93
    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 {
      	  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:	first-post-ad2.jpg
Views:	383
Size:	84.5 KB
ID:	94

    NOTE: It is a known issue that first post ads never display when paginating on a thread because it is using AJAX pagination. If you want this to be fixed, you can install the Display First Post on All Pages in a Multi-page Thread mod.


    Hope you find this useful.
    Helpful? Donate. Thanks!
    Fast VPS Host for vBulletin: A2 Hosting & IONOS

    #2
    Hi Glenn,

    i tried your code but vbulletin always says to me "edit_conflict"

    Comment


      #3
      I encountered that error long time ago in a different scenario. I didn't know it's still happening today. What version of vB are you using?
      Helpful? Donate. Thanks!
      Fast VPS Host for vBulletin: A2 Hosting & IONOS

      Comment


        #4
        I'm on vb 5.3.1
        This problem happens after the upgrade from vb4.

        Comment


          #5
          No idea how to solve it without looking at your set up.
          Helpful? Donate. Thanks!
          Fast VPS Host for vBulletin: A2 Hosting & IONOS

          Comment


            #6
            Originally posted by harding View Post
            I'm on vb 5.3.1
            This problem happens after the upgrade from vb4.

            Im on vb 5.3.1 after upgrade from vb 4.2.5 and work fine!

            thanks for this glennrocksvb

            Comment


            #7
            Hey
            glennrocksvb
            Founder/Coder
            glennrocksvb, will this place ads in existing threads, or only newly created threads, after the code is implemented?

            Comment


              #8
              In all threads, old and new.
              Helpful? Donate. Thanks!
              Fast VPS Host for vBulletin: A2 Hosting & IONOS

              Comment


                #9
                It worked perfect thank you very much
                A cordial greeting

                Comment


                  #10
                  In my vbulletin 5.4 i have added my script+ the code in First Post Content Ad
                  Code:
                  <script>MY CODE +
                   document.querySelector('.conversation-content-widget .conversation-list li:first-child').className += ' ad-after-first-post-active'; </script>
                  and the banner appear in first post

                  but if i add the code specified in the step 16 in css_additional.css template the banner always appears in the first post but above the text and not between the first and second post

                  SOLUTIONS?

                  Click image for larger version  Name:	bannererrato.png Views:	1 Size:	95.7 KB ID:	10068

                  Comment


                    #11
                    Originally posted by myto2018 View Post
                    In my vbulletin 5.4 i have added my script+ the code in First Post Content Ad
                    Code:
                    <script>MY CODE +
                    document.querySelector('.conversation-content-widget .conversation-list li:first-child').className += ' ad-after-first-post-active'; </script>
                    and the banner appear in first post

                    but if i add the code specified in the step 16 in css_additional.css template the banner always appears in the first post but above the text and not between the first and second post

                    SOLUTIONS?

                    Click image for larger version Name:	bannererrato.png Views:	1 Size:	95.7 KB ID:	10068
                    Problem solved! In my css i have add:
                    Code:
                    \\Start code
                    and this generated the error
                    Now works in vb 5.4

                    Comment


                    #12
                    Hey Glenn, thanks a lot for your work!
                    What do I have to change if my banner has a size of 640x380 px ?

                    Comment


                      #13
                      glennrocksvb
                      Founder/Coder
                      glennrocksvb Hello Glenn, These codes do not work in VB Version 5.5.5.

                      Comment


                        #14
                        Hi, sorry for posting on an old thread but I wanted to keep everything contained here as its about this mod I have some questions:

                        I have implemented all the code above, and everything works almost perfectly.

                        Could anyone help me with the following please?

                        I have uploaded an image to display as a clickable ad after my first post. The image dimensions are 728px x 90px. This displays ok for a laptop/desktop monitor, but when going down device to a tablet or phone I have a few issues.


                        Click image for larger version  Name:	desktop1.PNG Views:	0 Size:	137.4 KB ID:	21894

                        Tablet displays as 468px x 57px

                        Click image for larger version  Name:	tablet1.PNG Views:	0 Size:	61.8 KB ID:	21895

                        Phone displays as 320px x 40px

                        Click image for larger version  Name:	phone1.PNG Views:	0 Size:	32.0 KB ID:	21896

                        Does anyone know if there is a way where I could have 3 separately sized images, that are still wrapped around <a> tags (and therefore added in via Edit Page rather than css)?

                        Or is it a case of just having a single image and accepting the sizings?

                        Thanks in advance.

                        Edit:

                        I've also tried the following CSS from another post I found, but with little difference to the end result:

                        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; }

                        Comment


                          #15
                          The only way I can think around this is to take the phone dimensions (320px x 100px) and then scale that up to 728px wide, and its resulting width?

                          That seems to work...I think

                          Comment

                          Working...
                          X