Quickly Alter Your Blog Design
Huge post from me today, hopefully it makes sense. If not, I will split it up into smaller posts and explain things a little more but for now this is kind of an overview. If you have any questions leave them below. You can do so much in HTML & CSS that its hard to include everything but here is the main things you can do to alter your blog design.
Altering your Blog Titles can really change the look of your blog. Changing small little things such as borders, colours and sizing will create a new theme and style. Open Template > Edit Html and depending on what you want to alter, find one of the following
Blog Post/Page Title = h3.post-title
SideBar Title = h2 (*)
Date Header = h2.date-header (*)
Blog Post Title/ Link Colour = a:link
Hover Link Colour = a:hover
Visited Link Colour = a:visited
Comment Heading = .comments h4
Comment Link = .post-comment-link
(*) Notice that these are both h2, meaning changes to one will slightly alter the other. To separate them you have to alter the name in HTML so they are no longer connected.
Whats in Blue is the code, Alter whats in Red. The OR's mean you have to pick one option.
Change Background
background-color: #Hex Color ;
background: url("Direct URL for Image");
Change Font
font-size: Number px OR Number em) ;
font-family: font name ;
text-transform: lowercase OR uppercase OR capitalize ;
Align Title
text-align: left OR center OR right ;
Decoration
text-decoration: underline OR overline OR line-through OR blink ;
Borders
border: Width Size px solid OR dashed OR dotted OR double OR groove OR ridge OR inset OR outset #Hex Color ;
Or if you only want a border on one side you can use the following
border-left:
border-right:
border-top:
border-bottom:
If you want your border to have circular edges, then use the following
border-radius: Size px;
Similarly to above, you can alter your headings. I use h4 & h5 to create the blue & orange heading you see to break up this post into categories. You can also customise your .post blockquote using the CSS coding above.
Have a look at padding and margins to create space between different elements and make your blog look less cluttered.
One thing that can really improve your blog is a good navigation. Here are some tutorials to help
Clean up this area, make sure it's easy to read and is clutter free. Use Titles to categorise areas and link to important areas. Change the background or titles like shown above. Take note of the size of your sidebar and make sure images fit nicely. Have a little bit about yourself, with an image. Learn how to enlarge Bloggers Profile image here & experiment with rounded corners for images.
To change the design find either .main-inner .column-right-outer or .main-inner .column-left-outer and again edit using the above coding.
I wrote this post about some easy steps to better SEO. This will bring more traffic to your blog and keep Google happy.
Please download a backup of your template before editing anything!
Main Post Area
Post Title, Sidebar Title & Date Header
Altering your Blog Titles can really change the look of your blog. Changing small little things such as borders, colours and sizing will create a new theme and style. Open Template > Edit Html and depending on what you want to alter, find one of the following
Blog Post/Page Title = h3.post-title
SideBar Title = h2 (*)
Date Header = h2.date-header (*)
Blog Post Title/ Link Colour = a:link
Hover Link Colour = a:hover
Visited Link Colour = a:visited
Comment Heading = .comments h4
Comment Link = .post-comment-link
(*) Notice that these are both h2, meaning changes to one will slightly alter the other. To separate them you have to alter the name in HTML so they are no longer connected.
Whats in Blue is the code, Alter whats in Red. The OR's mean you have to pick one option.
Change Background
background-color: #Hex Color ;
background: url("Direct URL for Image");
Change Font
font-size: Number px OR Number em) ;
font-family: font name ;
text-transform: lowercase OR uppercase OR capitalize ;
Align Title
text-align: left OR center OR right ;
Decoration
text-decoration: underline OR overline OR line-through OR blink ;
Borders
border: Width Size px solid OR dashed OR dotted OR double OR groove OR ridge OR inset OR outset #Hex Color ;
Or if you only want a border on one side you can use the following
border-left:
border-right:
border-top:
border-bottom:
If you want your border to have circular edges, then use the following
border-radius: Size px;
Custom Headings & BlockQuotes
Similarly to above, you can alter your headings. I use h4 & h5 to create the blue & orange heading you see to break up this post into categories. You can also customise your .post blockquote using the CSS coding above.
Example of an altered Heading
Example of an altered Block Quote
Spaces
Have a look at padding and margins to create space between different elements and make your blog look less cluttered.
Entire Blog
Add Navigation, Buttons, Links
One thing that can really improve your blog is a good navigation. Here are some tutorials to help
- Social media links beneath your post
- Center Page Tabs
- Horizontal Navigation with Images
- Social Media Buttons
- Drop Down Navigation Menu
Sidebar Area
Clean up this area, make sure it's easy to read and is clutter free. Use Titles to categorise areas and link to important areas. Change the background or titles like shown above. Take note of the size of your sidebar and make sure images fit nicely. Have a little bit about yourself, with an image. Learn how to enlarge Bloggers Profile image here & experiment with rounded corners for images.
To change the design find either .main-inner .column-right-outer or .main-inner .column-left-outer and again edit using the above coding.
Increase SEO, Increase Traffic
I wrote this post about some easy steps to better SEO. This will bring more traffic to your blog and keep Google happy.
Don't forget, I'm always happy to help with any HTML questions. I do get a lot so please be patient, I do try and get back to you right away but sometimes it takes me a little bit. I also take blog design orders if anyone wants a blog re-design, I take care of everything I've mentioned in this post and loads more so you can get details about that here.
