Divi Ads V - Three Side Ad Cards on our Blog page

Today we want to complete definitely our Divi Ads Series. We have already seen in our last two posts how to create in our single post pages a nice Ad system showing the Ads accordingly with the tag of the post. Now we will see how to implement a three side Ad cards below our vertical menu on the Blog page.

So, let’s get started!

PRELIMINARY ADJUSTMENTS

First of all, if you followed our steps in the previous two Series posts just make sure to place the jQuery code in which we wrapped our Bloom optins in Ad href with our affiliate link not at the bottom of the posts but in the ‘<head>’ of your website.

We will use, in fact, this code also for our Blog page. Then we have to add some css (very similar to that one used for our Posts Ads) concerning the specific page in which we want to implement the Ad system, in our case in the Blog page.

So, just right-click on the page and inspect it. You will find in the ‘<body>’ tag a class like ‘page-id-xxxx’ with the id number of that specific page. Just copy and apply it in the css below in place of our ‘page-id-1277’.

.page-id-1277 .et_bloom_flyin_left { 
padding-right: 0 !important; 
left: 0 !important; 
bottom: 0 !important; 
transform: scale(.8); // scale the banner if you need 
} 
.page-id-1277 .et_bloom_form_container { 
-webkit-transform: perspective(500px) rotateX(45deg); 
-moz-transform: perspective(500px) rotateX(45deg); 
-ms-transform: perspective(500px) rotateX(45deg); 
-o-transform: perspective(500px) rotateX(45deg); 
transform: perspective(500px) rotateX(45deg); 
box-shadow: 0 29px 72px -21px #27005e !important; 
max-width: 200px !important; 
display: none; 
max-height: 200px !important; 
border: solid 7px transparent !important; 
transition: all 1s; 
}

As last preliminary step you have to make sure to enable your Bloom optins also for the specific page in which you would them to appear; you just have to go in the Optin Forms settings -> Display Settings, scroll down to the bottom and select the page you want.

NOW THE jQUERY

Now we need just some jQuery code in order to show only three Ad banners at a time and in a random way from loading to loading the page. So go to the Divi Theme Options -> Integration -> <head> and add the following script:

NOTE: There are many and different way using Javascript/jQuery in order to achieve the result but googling for a bit we found this script and we thought it is the best and easier working solution for us.


jQuery(document).ready(function(){

    var optins = jQuery(".page-id-1277 .et_bloom_form_container").get().slice(0).sort(function()
 {
 return Math.round(Math.random())-0.5;
 }).slice(0,3);
 jQuery(optins).show();
});

The code perfectly works, however we will see just a single Ad banner cause all the Ads have the same css ‘bottom’ property. We can modify a little the script in a way that a bottom space would be added to the second and to the third banner we ‘sliced’:


jQuery(document).ready(function(){
    var optins = jQuery(".page-id-1277 .et_bloom_form_container").get().slice(0).sort(function()
 {
 return Math.round(Math.random())-0.5;
 }).slice(0,3);

    jQuery(optins).slice(1).css("bottom", "24vh");
jQuery(optins).slice(2).css("bottom", "48vh");

 jQuery(optins).show();
});

FINAL THOUGHTS

All done. Our Ads will be shown three at a time randomly each time you reload the Blog page, as like as for the Ads in our single posts you can hover them and click on them being redirected to the affiliate link.

See you next post.

Cheers!