How to Add Sticky Footer Ads on WordPress and Blog Without any Plugin 2023

How to Add Sticky Footer Ads on WordPress and Blog Without any Plugin – इस लेख में, मैं आपको बताऊंगा कि बिना प्लगइन के ब्लॉग और वर्डप्रेस में फुटर स्टिकी विज्ञापन कैसे लगाते है? बॉटम स्टिकी विज्ञापन का लाभ, आप जिस भी पेज पर जाएंगे, वह नीचे उपलब्ध होगा। एक मौका है कि आपकी ऐडसेंस कमाई और सीटीआर निश्चित रूप से बढ़ जाएगी।

इस बिज्ञापन से अधिक संभावना है कि आपको फ़ुटर स्टिकी विज्ञापनों पर अधिक क्लिक प्राप्त होंगे क्योंकि जब भी कोई विज़िटर आपकी वेबसाइट पर आएगा तो वे ब्यक्ति को विज्ञापन तब तक स्थायी रूप से नीचे दिखाई देगा जब तक उपयोगकर्ता इसे मैन्युअल रूप से बंद नहीं कर देता।

लेकिन आपको अब इसके बारे में चिंता करने की आवश्यकता नहीं है क्योंकि इस लेख में पूरा जानकारी साझा की गई ट्रिक इन सभी आवश्यकताओं को पूरा करती है, और इससे AdSense के लिए कोई समस्या नहीं हो सकती है। और आपको नहीं समझ में आता तो आप इस वीडियो को भी देख सकते है !

Benefits of Sticky Footer Adsense Ad

यह मेरा व्यक्तिगत अनुभव हैं कि Adsense द्वारा Link ads को हटाने के बाद बहुत से लोगों को कमाई ड्रॉप डाउन की समस्या का सामना करना पड़ा। लेकिन, जब मैंने वर्डप्रेस में स्टिकी फूटर विज्ञापनों को लागू किया, तो मुझे कुछ अधिक कमाई होने लगें।

आइए एक नजर डालते हैं स्टिकी फूटर एडसेंस के फायदे पर।

• Close Button
• Increase viewability of Google ads
• More Ad earnings
• No Plugin Required
• Boost AdSense CTR & CPM
• It is possible to personalize it to allow users to dismiss or close advertisements and Keep reading articles.

Sticky CSS Ad Code

Note:- आप अपने वेबसाइट का पहले बैकअप ले ले ताकि अगर आपके वेबसाइट में कोई दिकत आये तो आप फिर बैकअप इनस्टॉल कर सके !

Step 1: Log in to your WordPress Dashboard > Take a Backup
Step 2: Navigate to Appearance > Customize > Additional CSS > Paste Below code > Publish

.NR-Ads { position: fixed; bottom: 0px; left: 0; width: 100%; min-height: 70px; max-height: 90px; padding: 5px 5px; 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; } 
 
.NR-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); } 
 
.NR-Ads .NR-Ads-close svg { width: 22px; height: 22px; fill: #000; } 
 
.NR-Ads .NR-Ads-content { overflow: hidden; display: block; position: relative; height: 70px; width: 100%; margin-right: 10px; margin-left: 10px; }

Sticky Footer HTML Code + Adsense Ad Code

Step 3: Log in to AdSense > Ads > Create a Fixed Display Ad Unit (width:- 728 height:- 90) > Copy Ad Code
Step 4: Navigate to Appearance > Theme Editor > Footer.php > Paste below code by replacing with Ad Code before </body> or </html>Tag> Update File

<div class='NR-Ads jhfdiuh0' id='NR-Ads'>
<div class='NR-Ads-close' onclick='document.getElementById(&quot;NR-Ads&quot;).style.display=&quot;none&quot;'><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='NR-Ads-content'>
<center>
Your Ads Code Here....
</center>
</div>
</div>

Footer Sticky Ads in WordPress Bolg Website – Sticky Ads kaise lagaye – Ranjan Kushwaha

How to Add Sticky Footer Ads on WordPress and Blog Without any Plugin

To add a sticky footer ad on a WordPress site without using a plugin, you can use a combination of HTML, CSS, and JavaScript.

1. Create the HTML code for the ad and place it in the footer.php file of your WordPress theme.
2. Use CSS to style the ad and set its position to fixed at the bottom of the screen.
3. Use JavaScript to make the ad “sticky” by adding an event listener that triggers when the user scrolls and changes the CSS position property of the ad.

Here is an example code snippet that you can use to add a sticky footer ad to your website:

HTML:

Copy code<div id="footer-ad">
   <a href="#">Ad Link</a>
</div>

CSS:

Copy code#footer-ad {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   background: #000;
   color: #fff;
   padding: 10px;
   text-align: center;
}

JavaScript:

Copy codewindow.addEventListener('scroll', function() {
   var footerAd = document.getElementById("footer-ad");
   var y = window.pageYOffset;
   if (y >= 700) {
     footerAd.style.display = "block";
   } else {
     footerAd.style.display = "none";
   }
});

Please keep in mind this is a basic example, you’ll probably need to customize it to fit your specific needs and theme.

इस आर्टिकल को यही पे समाप्त करते है अगर आपको समझ में नहीं आया हो तो आप वीडियो को देख सकते हैं

Read More:-

• Astra Pro WordPress Theme Free Download
• Best WordPress GPL Themes Plugins Site
• How to Remove/Hide Product Count in WooCommerce Shop
• All in One WP Migration Increase Upload Size
• How to negotiate Salary in Interview

How to Add Responsive Sticky Footer Ads on WordPress ?

To add a responsive sticky footer ad on a WordPress website, you can use a plugin such as “Sticky Footer Ads” or “Q2W3 Fixed Widget (Sticky Widget)” to create a sticky widget in the footer area of your site.

1. Install and activate the plugin on your WordPress site.
2. Go to Appearance > Widgets and drag the sticky widget to the footer area of your site.
3. Configure the settings for the sticky widget, such as the width and height of the ad, and the timing for how long the ad should be displayed.
4. Create the ad and upload it, or paste in the code for the ad from your ad network.
5. Save the changes and preview the site to ensure that the ad is working correctly and is responsive.

Note: It is always recommended to backup your site before making any changes.

How do I turn on sticky headers?

To turn on sticky headers, you will need to use CSS and JavaScript (or a library that provides this functionality) on your webpage.

In CSS, you can use the position: sticky property to position an element as sticky. For example, you can add the following CSS to your header element:

Copy codeheader {
    position: sticky;
    top: 0;
}

This will make the header element stick to the top of the viewport when the user scrolls down the page.

In JavaScript, you can listen to the scroll event on the window and check the scroll position to determine when to apply the sticky class to the header.

Copy codewindow.addEventListener('scroll', function() {
    if (window.scrollY > 50) {
        header.classList.add('sticky');
    } else {
        header.classList.remove('sticky');
    }
});

You can also use libraries like sticky-js, headroom.js or stickybits which are built on top of javascript to implement sticky headers.

Also, there are pre-built libraries available for different frameworks like react-sticky, vue-sticky for React and Vue respectively to implement sticky headers.

How do I make footer stick to bottom Elementor?

In order to make a footer stick to the bottom in Elementor, you can use the “sticky footer” option in the theme settings, or you can use the “sticky” option in the column or section settings. Additionally, you can use custom CSS to position the footer at the bottom of the page.

How do I make my header and footer sticky?

You can make a header and footer sticky by using CSS position:sticky property. You can apply this property to the header and footer elements in your HTML, and set the “top” or “bottom” value to 0, depending on which element you want to make sticky. For example, to make a header sticky:

Copy codeheader {
  position: sticky;
  top: 0;
}

And for the footer:

Copy codefooter {
  position: sticky;
  bottom: 0;
}

You can also use javascript/jquery to make them sticky when user scrolls down.

How do I turn on sticky headers in WordPress?

To turn on sticky headers in WordPress, you can use a plugin or add custom CSS code to your theme. Here are the steps for both methods:

Using a plugin:

1. Install and activate a plugin that allows you to add sticky headers to your website, such as “Sticky Menu (or Anything!) on Scroll”
2. Go to the plugin settings and configure the options for the sticky header, such as when it should appear and what elements of the header should be sticky.

Using custom CSS code:

1. Add the following CSS code to your theme’s stylesheet or a custom CSS plugin:

Copy codeheader {
    position: sticky;
    top: 0;
    z-index: 1;
}

2. Replace “header” with the specific CSS class or ID of the element that you want to make sticky.
3. You can also adjust the value of “top” to change how far down the page the sticky header should appear.

Sticky Footer WordPress Plugin

There are several WordPress plugins that can help you create a sticky footer on your website. Some popular options include:

1. Sticky Footer: This plugin allows you to create a sticky footer that stays at the bottom of the page, even if the content is not long enough to fill the entire screen.
2. Sticky Menu (or Anything!) on Scroll: This plugin allows you to make any element on your website “sticky” as the user scrolls down the page, including the footer.
3. WP Sticky Footer: This plugin allows you to create a sticky footer that stays at the bottom of the page, even if the content is not long enough to fill the entire screen.
4. Easy Sticky Footer: This plugin allows you to create a sticky footer that stays at the bottom of the page, even if the content is not long enough to fill the entire screen.

It is suggested to read the reviews and the description of the plugin before installing it, also to check if the plugin is compatible with the current version of wordpress and if it is actively maintained.

How do I make my blog post sticky?

To make a blog post “sticky” or more likely to be shared and attract repeat visitors, you can try several strategies:

1. Use a catchy, attention-grabbing headline.
2. Use images and videos to break up text and make the post more visually appealing.
3. Include relevant, useful information that will be valuable to your readers.
4. Optimize your post for search engines by including keywords and meta tags.
5. Encourage readers to share your post on social media by including social sharing buttons.
6. Use internal links to other related posts on your blog to keep readers engaged and on your site longer.
7. Make it easy for readers to leave comments and respond to them to create a sense of community.
8. Keep your post current and timely, and update it regularly to keep it fresh.

Remember, the most important thing is to create content that is interesting and valuable to your readers. If they find your post interesting and informative, they will be more likely to share it and come back to read more.

How do I make a sticky footer?

There are a few ways to create a sticky footer, but one common method is to use CSS flexbox. Here is an example of how to create a sticky footer using flexbox:

1. Create a container element (e.g., a div) for the entire page, and give it a class name of “page-container”.
2. Inside the container element, create a second element (e.g., another div) for the main content, and give it a class name of “main-content”.
3. Create a third element for the footer, and give it a class name of “footer”.
4. In your CSS, apply the following styles to the “page-container” class:

.page-container {
display: flex;
flex-direction: column;
min-height: 100vh; /* make the container element take up at least the full height of the viewport */
}

• Apply the following styles to the “main-content” class:

.main-content {
flex: 1; /* this will make the main content element take up all remaining space in the container */
}

• And the last step, Apply this style to the footer:

.footer {
position: absolute;
bottom: 0;
}

This should make the footer stay at the bottom of the page, regardless of the amount of content in the main content area.

Does AdSense allow sticky ads?

AdSense, Google’s advertising platform, does not specifically have a feature for “sticky” ads, which are ads that remain visible on the screen as the user scrolls. However, AdSense does support various ad formats such as display ads, text ads, and link units that can be placed in different positions on a webpage, including at the bottom.

It’s important to note that AdSense has strict policies against misleading or distracting ad implementations, it’s against the policies to place ads in a way that causes confusion or causes the user to accidentally click on an ad. So, it’s recommended to consult with the AdSense policies before implementing sticky ads.

Additionally, you should be aware that AdSense does have a mechanism to detect and penalize publishers who are found to be violating their policies, so it’s important to make sure that your implementation is in compliance with AdSense’s policies.

How do I make my WordPress footer sticky?

To make the footer of your WordPress site sticky, you can use a plugin or add custom CSS to your theme.

1. Using a plugin:

• There are several plugins available in the WordPress repository that can make your footer sticky, such as “Sticky Footer” and “Sticky Menu or Anything on Scroll”. You can search for these plugins in the WordPress plugin repository and install them on your site. Once installed, you will need to configure the plugin settings to make the footer sticky.

2. Using Custom CSS:

• If you’re comfortable with CSS, you can add custom CSS to your theme to make the footer sticky. First, you’ll need to identify the CSS class or ID of the footer element in your theme. You can use the browser’s developer tools to inspect the element and find the class or ID. Once you have the class or ID, you can use the following CSS to make the footer sticky.

Copy code.footer-class {
  position: fixed;
  bottom: 0;
  width: 100%;
}

• You can add this CSS to your theme’s stylesheet or you can use a plugin like “Simple Custom CSS” to add it to your site.

It’s important to note that if you’re using a custom theme, the implementation of the footer might be different from the above examples, so you might need to adjust the CSS accordingly.

sticky footer with scrolling content

A sticky footer is a website design pattern where the footer of a web page sticks to the bottom of the page, regardless of the amount of content on the page. When the content of the page is longer than the viewable area, the footer will scroll along with the content, remaining at the bottom of the viewable area. To create a sticky footer with scrolling content, you can use CSS and HTML to set the position of the footer to fixed and the overflow property of the content area to scroll.

How to Use Ad Inserter Plugin in WordPress?

Ad Inserter is a popular WordPress plugin that allows you to easily insert ads or other code snippets into various positions on your website. To use Ad Inserter, you first need to install and activate the plugin on your WordPress site.

Here are the basic steps to use Ad Inserter:

1. Once activated, you will find a new menu item called “Ad Inserter” in your WordPress admin sidebar.
2. Click on the “Ad Inserter” menu to access the plugin’s settings page.
3. On the settings page, you can create new ad blocks by clicking on the “New Block” button. Each block can contain a different ad or code snippet.
4. Once you have created your ad block, you can configure where and when the ad should be displayed on your website. You can choose to display the ad before or after specific content, or in various widget areas.
5. You can also use the plugin’s “Automatic Insertion” feature to insert ads into specific areas of your website, such as the header, footer, or between posts.
6. Once you have configured your ad blocks, you can preview them on your website to ensure they are displayed correctly.
7. Once you are happy with how the ads are displayed, you can save your settings and the ads will be live on your website.

Note: Always make sure you have the permission to use the ads or the code snippet.

sticky footer vs fixed footer

A sticky footer is a footer that stays at the bottom of the page, regardless of the amount of content on the page. It will “stick” to the bottom of the browser window if the content is shorter than the viewport, and will scroll with the page if the content is longer than the viewport. A fixed footer, on the other hand, is a footer that is fixed to a specific position on the page and remains there as the user scrolls. It will always stay in the same place, regardless of the amount of content on the page.

How To Add Responsive Footer Sticky Ads In Blogger ?

To add a responsive sticky footer ad in Blogger, you will need to follow these steps:

1. Go to your Blogger dashboard and click on the “Template” option.
2. Click on the “Edit HTML” button to access the template code.
3. Use the “Ctrl + F” shortcut to find the “</body>” tag in the code.
4. Copy and paste the following code just above the “</body>” tag:

Copy code<div id="sticky-footer-ad">
  <!-- Add your ad code here -->
</div>

<style>
#sticky-footer-ad {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 99999;
}

@media only screen and (max-width: 600px) {
  #sticky-footer-ad {
    display: none;
  }
}
</style>

5. Replace the comment with your ad code.
6. Save the template changes.
7. Your responsive sticky footer ad should now be live on your blog.

Note: You can adjust the width and display property of the ad as per your need.

How to Add Sticky Footer Ads on WordPress and Blog Without any Plugin

How to Add Sticky Footer Ads on WordPress and Blog Without any Plugin, How to Add Sticky Footer Ads on WordPress and Blog Without any Plugin, How to Add Sticky Footer Ads on WordPress and Blog Without any Plugin, How to Add Sticky Footer Ads on WordPress Website,

how to create a sticky floating footer bar in wordpress, sticky footer wordpress, simple sticky footer, wp sticky footer plugin, sticky footer adsense, sticky ads wordpress plugin, sticky form wordpress plugin, sticky banner wordpress,