How To Add a Subtitle For Your Blog Title In Blogger

Hello everyone! Welcome back to It Is Unique Blog - Official. In today's tutorial, we'll be guiding you on how to add a subtitle for your blog title in Blogger.

If you've noticed, in the latest iMgaz and Fletro pro templates, there's a small subtitle that appears just beside the blog title. Unfortunately, this feature is not available in other templates like Median UI, but don't worry – we've got you covered. In this article, we'll show you how to add this subtitle to any other Blogger template. The key is to ensure you paste the codes in the correct place, so follow each step carefully.

Now, let's dive into the details and enhance your blog's visual appeal with a captivating subtitle.

How To Add a Subtitle For Your Blog Title In Blogger

Step 1: Go and login to your Blogger Dashboard

Step 2: In Blogger Dashboard, Go to Themes section 

Step 3: Now click on the drop down icon just beside the 'Customize' button.

Step 4: Click on 'Edit HTML', now you'll be redirected to the editing page.

Step 4: Search for ]]></b:skin> and paste the following CSS Just above it.

Ensure that the CSS class name for the header, specifically ".Header," matches the class name used in your theme's header. It's crucial for seamless integration, so double-check and make necessary adjustments to maintain consistency.

.headerSub{margin-left:5px;font-family:var(--font-body);font-weight:400;font-size:11px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:50px;vertical-align:middle;opacity:.6;flex-shrink:0}.Header .headerSub:before{content: attr(data-text)}

Step 6: Now click on 'Jump to Widget' and Choose Header section as shown in below image.

Step 7: Locate the <data:title/> tag in your Header section.

Step 8: Place the following code immediately next to the <data:title/> tag, following the example in the image below.

 <span class='headerSub' data-text='Blog'/> 

Step 9: Save the changes by clicking on this icon .

How to add different Subtitles in Blog posts and pages?

Copy the CSS codes provided below and insert them into your post by switching to HTML view.

<style>
  .Header .headerSub{max-width:none}
  .Header .headerSub:before{content:"About"}
</style> 

Conclusion

In this post, I've crafted a comprehensive tutorial on How To Add a Subtitle For Your Blog Title In Blogger. I trust you found the guide helpful and informative. Please consider sharing this article with your friends and stay connected with our blog for more insightful content.

Should you encounter any challenges with the code or have queries, don't hesitate to reach out in the comments section or join our Telegram Group for discussions.

You may want to read this post :

• How To Make Responsive Image Hover Effect In Blogger
• How To Make Code Box In Blogger
• How to Add Schema Markup on a Blogger Website

It's important to note that all our posts are safeguarded by DMCA. Copying or reproducing our content in any manner is strictly prohibited, and legal actions will be taken if such actions are detected. Thank you for your understanding and respect for our work.

© It Is Unique Official | All Rights Reserved