Learn the latest website design tips and tricks! Explore our newest articles now.
Posts

Pop Up Subscribe Button For Blogger

How To Make Pop Up Subscribe/ Join Notification For Your Channel
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
Hello! Welcome to Tecky AaryaN. 

You are looking for Pop Up Subscribe Button For Blogger then this post is just for you.

Pop Up Subscribe Notification For Your Channel

You can see the demo here⤵

Step 1:  Go to your Blogger Dashboard

Step 2 : Go to Themes and then go to Edit HTML 

Step 3: Now search for ]]></b:skin> and paste thfollowing CSS just to above it.

Many themes do not support CSS directly in ]]></b:skin> tags. To add CSS styling in such themes, you can place your CSS code above the </head> tag. Wrap your CSS code between <style> tags
@keyframes show_popup{0%{transform:translateX(100%)}40%{transform:translateX(-10%)}80%{transform:translateX(0)}100%{opacity:1;pointer-events:auto;transform:translateX(-10px)}}@keyframes hide_popup{0%{transform:translateX(-10px)}40%{transform:translateX(0)}80%{transform:translateX(-10%)}100%{transform:translateX(calc(100% + 100px))}}.popup-wrapper{position:fixed;z-index:9999999;right:50px;bottom:20px;animation:show_popup 0.8s ease forwards;box-shadow:0 5px 12px rgba(0,0,0,0.2);border-radius:10px;background:#fff;padding:10px;border-left:5px solid #f09800;width:300px;align-items:center;justify-content:space-between;display:none}.popup-wrapper.hide{animation:hide_popup 0.8s ease forwards}.popup-content{display:flex;align-items:center}.popup-icon .logo{max-width:60px;border-radius:100%;transition:all 0.3s ease}.popup-details{margin-left:15px;text-decoration:none;outline:none}.popup-details span{font-family:'Noto Sans',sans-serif;font-size:18px;font-weight:600;color:#000;position:relative;top:10px}.popup-details p{color:#878787;font-size:12px}.close-icon svg{position:absolute;fill:#878787;font-size:20px;cursor:pointer;height:28px;width:28px;text-align:center;right:13px;top:8px;border-radius:50%;background:#f2f2f2;transition:all 0.3s ease}.close-icon:hover svg{fill:#444}@media screen and (max-width:480px){.popup-wrapper{right:25px}}.drK .popup-wrapper,.drK .close-icon svg{background:#2d2d30}.drK .popup-wrapper{border-color:#444}.drK .popup-details span,.drK .popup-details p{color:#e2e2e2}

Don't forget to change .drK with your website theme dark mode class, if your theme did not have a dark mode feature then keep default!


Step 4: Now search for </body>or <!--</body>--></body> and paste the following Generated HTML & JS Code just above it

Code Generator

Enter your details below to generate the HTML And JS code.

Generated Code


    

Step : 5 Now click on save Button.

Conclusion

 I hope you have successfully added Pop Up Subscribe Button. If you are facing any problem in any section or you have any question then ask us in the comment Box

Copyright:
Tecky AaryaN

Telegram

About the Author

Student | Developer | Blogger

Post a Comment

Please don't share any sensitive or personal details here.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.