- Login to your site as an admin with Sitebuilder permissions.
- Go to a thread or topic page.
- Turn on Sitebuilder (Edit Site ON).
- 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:.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.
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.
Comment