As someone who has a blog and a blog design, I often get complimented for my beautiful blog design, which I made myself. I am that kind of person that really cares about her blog design and it's appearance, it's one of the main reasons why I moved to Blogger. Today, I have 5 simple and easy tweaks for people with Blogger that can help clean up your blog just a bit. I these should be pretty easy but if you have any problems or questions, tweet or email me! I hope you find these useful.

---

1. Transition

This is probably my favorite and in my opinion, most simple way to make a hover better and smoother. So, with a normal hover without the transition tag, you have this:
but with a slowed transition, you get this:
So, to achieve this effect you would insert this code into your CSS for any item that you want and this would be within the tag that doesn't have the :hover. (More on that below)


You can also always change how slow or fast the transition is by changing the "0.7s" to any fraction of a second you want. The higher the number the slower it will take for the item to fully achieve the hover affect.

So for those who don't understand, in order to achieve a hover reaction (ie: background color change, making something smaller) you need two pieces of code in your CSS. One normal (let's say I want to change something in my sidebar, I would use the .sidebar tag in my CSS) and one telling you what the hover reaction is ( that would be .sidebar:hover in my CSS). When using the transition code, you want to make sure you put it in the set of code that does not have the :hover in it.

2. Links

Ah links! As a book blogger, I like tons of things within my posts and a way to make links look better is by changing the effects of their hover. Now with Blogger, a link automatically has an underline to it, which in my opinion is kind of annoying. To get rid of that, you would insert the following code into your CSS:


If you want to add a transition so that the hover of the link is smoother, you would add this into your CSS:


Like I mentioned, the transition will make the hover smoother and you may like getting rid of the underline when you hover over a link...

3. Sidebar and Footer Background and Border

Sidebars and footers can easily get boring. Adding a colored background or border around them will add a bit of color and pizzaz. Let's say I want my sidebar widgets to each have a blue background with a red solid border, I would then add this code into my CSS:


But then the sidebar would be all pressed against the border! So I would then add some padding around the widget and border, just to give it a little breathing space. My code would then look like this:


There are so many other tweaks you can make to your sidebar as well. Changing the text color, font size, and more and more. Now if you want these tweaks to go to your footer, all you do is change the .sidebar tag with .footer. So now your CSS code would look like this:


Okay, so no one really wants a blue background and red border right? We must change the colors! To do that, all you have to do is find the color you want here or here, take the HTML code for that color, and replace it in the code. If you want your border color to be #81DAF5, I would change my "red" to that #81DAF5. If I want my background to be #DF01D7, I would change my "blue" to that #DF01D7.

There is also the matter of border styles because there are many different types of borders. You have your typical solid border but you can also have dotted, double, and dashed.


If you want your border thicker or thinner, change the number in "1px" to whatever your heart desires.

4. Center Navigation

The nav bar! Menu bar! Whatever you want to call it I honestly think it looks better when it is centered. In order to do that, all you need to do is paste this code into your CSS and boom! Centered pages.


Now if you want to get a little complicated...

5. Custom Read More!

For this part, I am going to guide you to Dana's tutorial for a custom read more but I want to share with you the CSS code I used for my new Read More button. You can definitely do whatever you want with your read more but if you want to use mine, feel free to use the code below!

Thank you everyone for reading! Let me know what your thoughts on this post are and whether or not you tried any of these codes. Also, if you want more of these post, let me know that as well.