Beautify Display Widget Title (H2) Sidebar Blog

My Blogs Ideas on

Tuesday, October 20, 2015

Beautify Display Widget Title (H2) Sidebar Blog

How to modify or enhance your blog sidebar widget H2 title.

EVERY time there was "nothing new" in appearance (design), almost always there is a question: how do I make it? Share dong! Including when to change the title display in the sidebar and footer of this blog.

Blog Design modifications include changing the appearance of certain elements on the blog, basically that is the way to add or edit code of Cascading Style Sheets (CSS). We can learn the application of CSS code in CSS Tutorial.

Title sidebar of the blog is to be treated special, because he is part of the navigation menus and internal links, to allow visitors to open the content of our blog.

Typically, the blog sidebar widget "mandatory" al Recent Posts and Popular Posts. Related Posts widget usually in the bottom of the post.

Beautify Display Widget Title (H2) Sidebar Blog

Immediately, this is the title of the blog sidebar CSS code is used:

#sidebar-wrapper h2 {overflow: hidden;position: relative;font-family: 'Oswald';font-size: 15px;font-weight: 500;color: #666;padding: 10px 0;text-transform: uppercase;display: block;letter-spacing: 1px;}
#sidebar-wrapper h2:after {content: '';display: inline-block;position: absolute;height: 14px;top: 0;margin: 13px 0 12px 10px;width: 100%;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvGu7yXeFtgiGKChP-lDOkMLaGNbUKxVnkhpiq3PdrZdbsmhhn_nubYno8mjjGv7Q1KMfWnDvGpDpifu7vZlHTSWszXztqRbQFk5by_FbwpegiGW7ApIEGjnMz5emyNOIbjtQiknCBnBIj/s1600/repeat-bg.png)repeat;}

This title Footer Widget CSS code is used:

#footer-wrapper h2 {overflow: hidden;position: relative;font-family: 'Oswald';font-size: 15px;font-weight: 500;color: #fff;padding: 10px 0;text-transform: uppercase;display: block;letter-spacing: 1px;}
#footer-wrapper h2:after {content: '';display: inline-block;position: absolute;height: 14px;top: 0;margin: 13px 0 12px 10px;width: 100%;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvGu7yXeFtgiGKChP-lDOkMLaGNbUKxVnkhpiq3PdrZdbsmhhn_nubYno8mjjGv7Q1KMfWnDvGpDpifu7vZlHTSWszXztqRbQFk5by_FbwpegiGW7ApIEGjnMz5emyNOIbjtQiknCBnBIj/s1600/repeat-bg.png)repeat;}
#footer-wrapper ul,#footer-wrapper ol {list-style-type:none;margin:0 0 0 0;padding:0 0 0 0;}

How to Change the Background Color and Font Title Sidebar Blog

If you just want to change the background color (background) and letters doang, for example a black background and white text, this code:

.sidebar h2 {background:#000; padding:4px 2px 2px;color:#fff}

If you do not find the sidebar code h2, h2 may sidebar .widget or any similar one. Peek wrote the code by:

1. Move the cursor to the title of your blog's sidebar

2. Right-click> select "inspect element"

Well, the code that must be changed. For business color, please use HTML color codes to enhance the appearance of your blog sidebar title. Good Luck!

Labels: Blog Design, Featured

Thanks for reading Beautify Display Widget Title (H2) Sidebar Blog. Please share...!