How to Add Floating Slide in Promotional Banner for Blogger
Hi to all, in this article I am going to tell you all about how to add floating slide in promotional banner for your blogger website easily in just few few minutes by using HTML and CSS.
A quick and easy way to do this is to inset a floating bar on your website that always sits at the top of your site all the time.
And also, you can restrict the code to show only in pages, posts and homepage respectively by just adding a if condition.
So, read the below given steps carefully and completely to get clear understanding about adding promotional banner in your blogger website without any issue or error.
Steps to Add Promotional Banner in Blogger
Step-1: Login to Blogger
First of all you need to visit official blogger website.
Now you need to login to you blogger website dashboard by using your login credentials.
Step-2: Backup Blogger Theme Code
Basically, if any error or issue occurs in the theme code, then it is very difficult top find the error and solving the error. to avoid this you should take a backup file of your blogger theme code, before adding the below code.
If any errors occur then you can restore your backup file again and can run your website as usual, so don't forget to backup your website theme code.
To backup blogger theme code, you can follow the below path
Blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on backup -> Click on download -> Verify captcha -> Save the file in safe place for future use.
Step-3: Open Blogger Theme Editor
After backup of your blogger theme code, you need to open the your blogger website theme editor to add few codes in it.
To open blogger theme editor, you can follow the below path
Blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on Edit HTML -> Blogger theme editor section.
Now after opening blogger theme editor, you need to add two code in it, which are given below.
Step-4: Copy below HTML Code
Now you need to copy below provided HTML code.
And Paste the copied HTML code below open boy tag or <body> tag.
<div class="at-banner" id='at86676'>
<div class="at-banner__container">
<div class="at-banner__text">EOSS | Men’s casualwear | Up to <b>70% Off</b></div>
<a class="at-banner__button" href="/">Buy Now</a>
</div>
<div class='AT-banner-close' onclick='document.getElementById("at86676").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>
Step-5: Copy below CSS code
Now you need to copy below provided CSS code.
And Paste the copied CSS code above closing head tag or </head> tag.
<style>
.at-banner { z-index: 999999; position: fixed; top: 0; right: 0; left: 0; background:#ff4f70; width: 100%; border-bottom: 1px solid;border-color: #c1f0db; box-sizing: border-box; transform: translateY(-150%); color: #fff; font-family: "Open Sans", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; animation: at-banner-slide-in 0.8s ease forwards; }
.at-banner__container { display: flex; align-items: center; flex-direction: row; justify-content: center; width: 90%; margin: 0 auto; padding: 10px 40px; box-sizing: border-box; } .at-banner__title { font-size: 18px; } .at-banner__text { margin: 0 20px 0 0; } .at-banner__button { display: inline-block; background: #fff; height: 30px; border: 0; border-radius: 2px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); padding: 0 20px; color: #974df3; font-size: 12px; font-weight: 700; line-height: 30px; text-decoration: none; white-space: nowrap; } .AT-banner-close { position: absolute; top: 50%; right: 20px; width: 20px; height: 20px; transform: translateY(-50%); cursor: pointer; } .AT-banner-close:before, .AT-banner-close:after { content: ""; position: absolute; top: 50%; left: 50%; display: block; background: #fff; width: 100%; height: 3px; border-radius: 2px; transform-origin: center; } .AT-banner-close:before { transform: translate(-50%, -50%) rotate(-45deg); } .AT-banner-close:after { transform: translate(-50%, -50%) rotate(45deg); } @keyframes at-banner-slide-in { 0% { transform: translateY(-150%); } 100% { transform: translateY(0%); } }
</style>
Step-6: Save the Theme Code
After adding the two codes inside blogger theme editor, you need to click on save icon to save the complete theme.
After clicking on save button, it will take few seconds to process your complete theme and after successful processing of your theme, you will get a message i.e. Updated Successfully.
Note:
If you get any error while saving the code, then you need to restore your backup code again and need to repeat the same process as mentioned in above steps carefully.
If you want to change the style and colors of the banner then you need to make changes in CSS code.
For background colors, border colors and button colors, you need to replace the color codes and for color codes you can use google color picker or other third party color picker websites.
After adding the two codes, don't forget to add your banner description and redirection link.
Conclusion
I hope that you have understood about adding floating slide in promotional banner for blogger website easily in just few minutes by using simple HTML and CSS code.
