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

    Free Mod 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:	3045
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:	631
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!
    Buy me a coffeePayPal QR Code
    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!
      Buy me a coffeePayPal QR Code
      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!
          Buy me a coffeePayPal QR Code
          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


            • glennrocksvb
              glennrocksvb commented
              Editing a comment
              Thanks for confirming this mod still works in 5.3.1.

            #7
            Hey 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!
              Buy me a coffeePayPal QR Code
              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


                    • glennrocksvb
                      glennrocksvb commented
                      Editing a comment
                      Glad you fixed it by yourself.

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

                          Users Viewing This Page

                          Collapse

                          There is 1 user viewing this forum topic.

                          • Guest Guest

                          Latest Posts

                          Collapse

                          Working...
                          X
                          Searching...Please wait.
                          An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                          Please push the back button and reload the previous window.'
                          An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                          Please push the back button and reload the previous window.'
                          An internal error has occurred and the module cannot be displayed.
                          There are no results that meet this criteria.
                          Search Result for "|||"