Welcome friends to Eggblog blog, today I will show you how to add responsive static ads in Blogger blog with images.
Why do we need to add responsive static ads below to blog?
Bottom fixed ads means that the ads are displayed on the bottom side of any web page, just like you see my banner image, the ad will be shown on the bottom side of the mobile device and is a fully responsive ad that opens on your laptop, computer or tablets, when Visitors visit any blog posts, pages and homepage, the static banner ad will be opened by default and user can close the ad easily.
In the Blogger platform, there are some options to add ads in the blog, but the sticky bottom option is not available, so in this post I give you the manual option to add the responsive sticky bottom ad option with a close button to your blog. Now we talk about the benefit, for example if you have traffic. Good on the web from different devices, this ad will display perfectly on all devices and will increase impressions, page RPM (page revenue per thousand impressions), page click-through rate (CTR) rate), now let's get started.
These are the following steps:-
Step 1: Firstly go to Blogger blog dashboard and click on Theme option, now we have to click on Customize drop down button and select Edit HTML option.
Step 2: Here we click anywhere in the code and press CTRL+F button and search for the code “]]></b:skin> and leave some space above the code ]]></b:skin> and paste the CSS style code here.
Responsive Bottom Sticky Ads Style code:-
.sticky-ads{ position: fixed; bottom: 0; left: 0; width: 100%; min-height: 70px; max-height: 200px; padding: 5px 0; box-shadow: 0 -6px 18px 0 rgba(9,32,76,.1); -webkit-transition: all .1s ease-in; transition: all .1s ease-in; display: flex; align-items: center; justify-content: center; background-color: #fefefe; z-index: 20; } .sticky-ads-close { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 12px 0 0; position: absolute; right: 0; top: -30px; background-color: #fefefe; box-shadow: 0 -6px 18px 0 rgba(9,32,76,.08); } .sticky-ads .sticky-ads-close svg { width: 22px; height: 22px; fill: #000; } .sticky-ads .sticky-ads-content { overflow: hidden; display: block; position: relative; height: 70px; width: 100%; margin-right: 10px; margin-left: 10px; }
Step 3: Now again press CTRL+F button and find “</body>” tag then we leave some space above </body> tag again and add ad code in code II (I copied my affiliate ad code and pasted it in the space Advertisement for II code, you can check my test blog) Then paste over </body> tag and finally click Save button and open your Blogger blog to check the results of static ads.
Responsive Bottom Sticky Ads code:-
<div class='sticky-ads' id='sticky-ads'><div class='sticky-ads-close' onclick='document.getElementById("sticky-ads").style.display="none"'><svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'><path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z'/></svg></div>
<div class='sticky-ads-content'>
AD CODE HERE
</div></div>
Now the second option, as if you are above the two paragraphs II, I am giving you a responsive bottom static ad with close button, here I am giving you the option of a static ad without a close button, with this option, the user cannot close this ad widget.
Step 4: Now go to Blogger Blog Theme option and click on Customize drop down button and select Edit HTML option, here at first you can easily find “<head>” tag then leave some space below <head> > mark the style code and paste it then Click the "Save" button.
Bottom Sticky Ads style code:-
<style type="text/css"> .fixed-header{ overflow: hidden; position: fixed; z-index: 999999; bottom: 0px; height: <span style="color: red;">90</span>px; background: <span style="color: red;">#EEE</span>; } </style>
Step 5: Here go to the blogger Layout option do a little bit scroll up and you find out the blog footer area, now click the Add a gadget link.
Step 6: Now a new window appears in the middle of your device screen and select the HTML/JavaScript option.
Step 7: Here we paste the second ad code into the content area Before that, we can insert our ad into the Ad Space II area (I use my affiliate ad) and click the Save button.
Bottom Sticky Ads:-
<div class="fixed-header">
AD CODE HERE
</div>
Step 8: Now open your Blogger blog again to check the bottom sticky ads results.
Above I am giving you the link of my demo blog, where I enable the sticky bottom ads widget, if you are thinking about setting up the sticky bottom widget in your blog, first look at the sticky bottom ads widget in my demo blog.
I hope you enjoy this Post. If any problem comment it.
No comments:
Post a Comment