Making Titles Fully Visible in the Sidebar
(feat. Google Blogger "Dynamic Views")
Today's Contents
• Showing Full Titles on Mouseover in the Sidebar
• Changing background Color of Selected Title on Mouseover
Hello, radiant guys! How are you all? Today I'd like to talk about the left collapsible sidebar in Google Blogger that it's made with a theme called "Dynamic Views". The sidebar shows all titles of user's posts. But as the width of the sidebar is too short compared to the length of the post title, the end of the title gets cut off and I can't see it fully: Only in cases where the title is relatively long. It's annoying.
So, I'm going to introduce a tip that shows the full title of a post once you hover over the title in the sidebar. Let's get to the point!
| Showing Full Titles on Mouseover
· The end of the long title gets cut off and displayed as three dots instead, as in Image1.
· Let's solve the issues, adding the following CSS code to Theme (on the dashboard) > COSTIMISE > Advanced > Add CSS. If there are previously added codes in the Add CSS Code box, you can add new CSS codes by changing one line.
CSS
#sidebar .item .title:hover {overflow: visible; transition: 0.7s;
}
· Tap the SAVE icon at the bottom right to activate your changes.
· Image3 shows before and after applying CSS code.
 |
| [Image3. Before and after applying CSS code tailored] |
🎯 TIP
· A Regular Class vs A Pseudo-Class (virtual class)
A 'regular class' applies styles by manually attaching a class name to an element. As shown in the boxes below, the box class applies styles directly to the element.
***HTML
<div class="box"></div>CSS
.box {background-color: red;
}
On the other side, a 'pseudo-class (virtual class)' is a feature that automatically applies styles to an element based on a user's behavior or condition (like hover, focus, active, etc.). This is a special class that does not need to be directly given a class name.
· CSS hover
The CSS hover pseudo-class automatically triggers only when a user hovers the mouse pointer over an element on a webpage. To put it simply, the style applies only when the user hovers over the button with a mouse. Therefore, it creates a more intuitive and user-friendly web environment. An example in the box below.
CSS
.button: hover {background-color: pink; }
· CSS overflow
The overflow property in CSS determines how content that exceeds the size of its container (width or height) is displayed on webpages. The overflow Property Values and Their Meanings are like the below :
- visible: The overflowing content is fully visible outside the container.
- hidden: The overflowing content is clipped and not visible.
- scroll: A scrollbar is always displayed, even if the content does not overflow.
- auto: A scrollbar appears only when the content overflows.
| Changing Background Color of Selected Title on Mouseover in the Sidebar
· Add the CSS code below to Theme (on the dashboard) > COSTIMISE > Advanced > Add CSS.
CSS
#sidebar .item .title a:hover {background-color: #DDDDDD; border-style: none; padding: 6px;
}
· After applying the CSS code above, when you hover your mouse over the title in the sidebar, a background color will appear to improve readability for users. See Image4 below.
 |
| [Image4. Before and after applying CSS code] |
· But there was an unexpected problem. As you can see in Image5 below, as intended, when I hover over the title in the sidebar, the long title expands and overlaps the text on the right, making it difficult to read clearly. What should we do in this case?
 |
| [Image5. The long title expands and overlaps the text on the right] |
'I will work out this issue in the Next Post'
Congratulations!
Today we talked about the titles that appear in the sidebar of Google Blogger with the Dynamic Views theme installed. First, we learned how to make the entire title appear when hovering over it, and second, we learned how to make the title background color appear when hovering over it to make it easier for users to read.
Did you enjoy today's post? I truly hope my post helped someone who wants to run the Google Blogger prettier. See you very soon, Radiant Guys!
