Adding a stylish information block to your Blogger theme can enhance the visual look of your blog. With just a few simple steps, you can create an info block that grabs your readers' attention. In this article, we will guide you on adding a stylish info block to your Blogger theme, making it easy for you to implement and customize.
Before we start let's take a look at its Demo.
Click me to Check Demo ↓
Actor:
Vicky Kaushal, Sara Ali Khan, Inaamulhaq, Sushmita Mukherjee, Neeraj Sood, Rakesh Bedi, Sharib Hashmi, Akash Khurana, Kanupriya Pandit, Anubha Fatehpuria, Himanshu Kohli, Srishti Rindani, Vivan Shah, Atul Tiwari, Siddhant Mishra, Sagar Shende, Himanshu Malik, Tripathi Pawni
Director: Laxman Utekar
Release: 02 June 2023
Country: India
Views: 7.8k
Movie: Zara Hatke Zara Bachke
Rate: 8/10 IMDb
Language: Hindi
Budget: ₹ 50 Crores INR
Revenue: ₹ 61.02 Crores INR (7 Days)
How to Add Stylish Info. Block
Creating a Info. Block for your Blogger Website will not require much knowledge about HTML, CSS or JS because I have already designed it for you. What you need to do is to implement the codes at right place in your Blogger Theme XML.
Important! Before we start adding codes in XML, I highly recommend taking a backup of your current theme. By chance if any issues occurs, you can restore it later.
Step 1: First of all Login to your Blogger Dashboard.
Step 2: From Blogger Dashboard, select the blog you wish to customize and click on the "Theme" option.
Step 3: This will take you to the Blogger Theme Editor, Click the arrow down icon next to 'customize' button.
Step 4: In the Theme Editor, Click Edit HTML, you will be redirected to editing page.
Don't worry if you're not familiar with HTML; the changes we'll make are simple and easy to understand.
Step 5: Once you're in the HTML editor, Now search the code ]]></b:skin> and paste the following CSS just above to it.
You can use the search function (Ctrl + F or Command + F) to make it easier to find the code place.
.infomovie{background:#ecdce5;margin:1rem 0;position:relative;display:block;padding:1.88rem;border-radius:.19rem}
.infomovie:before{content:Information;background:#c30000;color:#FFFFFF;position:absolute;top:-2.38rem;padding:.38rem 1.88rem;left:0;display:block;font-size:1.25em;margin:0;font-weight:600;border-radius:.19rem .19rem 0 0}
.drK .infomovie{background:#131322}
Feel free to modify the info block CSS inside the .infomovie tags to suit your needs. You can also style the dark mode if you want to customize the color specifically for dark mode, you can modify the code according to your preferences. Each template may have a unique class for dark mode, so please adjust it accordingly. Replace the marked class with the dark mode class specific to your template.
Step 6: After adding the CSS code, Save the changes by clicking on this icon
Step 7: Then go to Post Menu.
Step 8: Create a post by clicking on Add Post and choose HTML View, paste the following HTML Codes where you want to add it.
<p class="infomovie"><b>Actor:</b> Bob Newhart, Gabrielle Anwar, Jane Curtin, Noah Wyle, Olympia Dukakis<br /> <b>Director:</b> Jonathan Frakes<br /> <b>Release:</b> 09 October 2022<br /> <b>Country:</b> United States of America<br /> <b>Views:</b> 2354<br /> <b>Tagline:</b> The epic conclusion of the Jurassic era.<br /> <b>Rate:</b> PG-13<br /> <b>Language:</b> English, Français, Malti<br /> <b>Budget:</b> $ 123.456.789,00<br /> <b>Revenue:</b> $ 123.456.789,00 </p>
Step 9: After adding the HTML code, click on the "Preview" button to see how the info block view on your blog. If you're satisfied with the result, click on the "Publish/Update" button.
Conclusion:
This is all about adding the Info. Block to Blogger Website. With a little creativity and customization, your Blogger theme will stand out with its stylish info block. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box. Thank you!
© Copyright: www.altq.org