Hey there! Wanna make your website cooler? Well, I've got something super awesome for you! It's all about adding a dark mode to your fancy Plus UI popup ads. You know, that cool feature that makes everything look dark and sleek? Yeah, that one!
In this easy-peasy guide, I'm gonna show you how to do it step by step. Don't worry, it's gonna be a piece of cake! You'll be able to make your popup ads look super cool and give your visitors a great experience.
So, get ready to make your website look even more awesome with dark mode. Let's dive right in and have some fun!
What is Dark Mode and Benefits
Before we begin, let's quickly talk about dark mode. You may have come across websites that have a dark background with light text - That's dark mode! It not only looks stylish but also reduces eye strain and saves battery life on devices. Sounds great, right?
How to Customise Your Blogger Template
"We all know that Blogger doesn't have plugins, but we can still edit our template to enable dark mode for popup ads. Don't worry, it's simpler than it sounds. Just follow these steps:"
Important!Before we start adding XML codes, it is highly recommended that you create a backup of your current theme. This will ensure that if any problems occur, you can easily restore your theme to its previous state.
- Log in to your Blogger Account and go to the "Theme" section.
- Click the arrow down icon next to the 'Customize' button.
- Choose Edit HTML, you will be redirected to the editing page.
Adding Dark Mode to Popup Ads
Adding Dark Mode to Popup Ads in your Plus UI doesn't require advanced coding skills or extensive knowledge of HTML, CSS, or JavaScript. I have already designed it for you, and in this guide, we will provide clear instructions to help you through each step. So, let's begin without any delay and learn how to add an dark mode to popup ads in Plus UI Blogger Theme XML.
- Next search the
]]></b:skin>code and paste the CSS code just above the]]></b:skin>code or]]></style>.
<style> /* Dark mode styles for popup ads */
.drK .fcBt, .drK .fcCn, .drK .fcBt span::before{background:#2d2d30;}
.drK .fcBt svg{fill:#989b9f;}
.drK .fcBt span{background:#2d2d30; color:#fffdfc;}
</style>
Customizing Popup Ads in Dark Mode
Now that the dark mode CSS code is added, you can customize the appearance of your popup ads. Find the code class or ID name and replace it. You can modify the background color, text color, and any other styling properties to suit your preferences. i.e .drK .fcBt{background:#1e1e1e;} for button background.
| Name | Class | Code |
|---|---|---|
| Button | .drK .fcBt | background:#2d2d30; |
| Button Text | .drK .fcCn span | color:#fffdfc; |
| Button Text Background | .drK .fcBt span | background:#2d2d30; |
| Button Svg | .drK .fcBt svg | fill:#989b9f; |
| Button Top Nip | .drK .fcBt span::before | background:#2d2d30; |
| Ad Background | .drK .fcCn | background:#2d2d30; |
Save and Preview Your Dark Mode Popup Ads
After customizing your dark mode styles, save the changes to your template. Then, go to the "Preview" option in the Blogger theme editor to see how your dark mode popup ads look. Make sure to check both desktop and mobile previews to ensure they appear as intended.
Publish Your Dark Mode Popup Ads
Once you're satisfied with the appearance of your dark mode popup ads, it's time to publish your changes. Click on the "Save" button in the template editor to update your website with the new dark mode styles. Your visitors will now see the stylish and eye-friendly popup ads on your Blogger website!
Conclusion
Adding dark mode to your popup ads on Blogger doesn't require plugins. By customizing your template's CSS code, you can achieve a cool dark mode effect. Remember, dark mode reduces eye strain, saves battery life, and makes your website look awesome! So go ahead, follow the steps, and give your popup ads a stylish makeover!