Free CSS Blogger Tricks for your Blog

Does your template look ugly? Or you want to make it better than ever before? If yes, then you have landed on the right page. In this article I am going to share some free CSS Blogger tricks with you guys by which you can make your blog design look more awesome.

What you will learn?

• How to design your widget’s title?
• How to use custom font styles for your blog?
• How to make your blog images attractive?
• How to make a drop down menu?
• How to redesign your read more button?

How to design your widget’s title?

This is a simple trick that can give your blog a professional look — and the best thing is that you do not need to mess with any code to redesign your widget’s title.

Just copy the following CSS stylesheet, and paste it before “]]></b:skin>” tag as shown in the upcoming image:

[css]

.sidebar .title {
background: #FCD66B;
padding: 4px;
border-radius: 8px 0px 40px 0px;
-webkit-border-radius: 8px 0px 40px 0px;

}

[/css]

After installing the code correctly — your sidebar widgets’ headings should look like this.

How to use custom font styles for your blog?

By using different font styles you can make your blog look more promising. This is a simple Blogger trick, to install custom font styles go to Google Fonts — and choose a font style which looks adequate for your blog by clicking on “Add to collection” button — then click on “Use” button which appears on the bottom of your screen as shown below.

After clicking on “Use” button, a new page will appear on your browser from where you can select different font sizes for your chosen font — I personally recommend to not mess with any of these options — instead scroll down your page and search for this heading “Add this code to your website”

As you can see in the image that underneath this heading you will see a code which links to the font style that you have chosen — copy it and paste it just above </head> tag of your template.

Once the code is installed, you can use it for any section of your template. Let’s just say for your content area or sidebar headings.

To use it for any section of your template — let’s say article section — you should use CSS code again — like this:

[css]
article {
font-family: your-font, sans-serif;
}
[/css]

Replace your-font with your chosen font name, sans-serif is a default font style which we have used as an alternate for rare circumstances such as browser failing to reach our custom font link. So if it happens — the user’s browser will use sans-serif in place of our custom font.

To integrate your font into your CSS, go to the fourth heading and copy the CSS code which Google has provided and paste it into your style sheet.

How to make your blog images attractive?

Do you know what makes a blog more attractive? Images!. More images mean more attraction and more uniqueness — but what if you can also make your blog images more charming? It could be great.

So here is a CSS blogger trick for you that will make your images more attractive.

Also Read: Premium Quality Templates for free

Grow

This is a free CSS effect that will make your images look more cool — this effect works when a user hovers his mouse on an image, causing the image to zoom in.

To install this effect on your blog, first go to your Blogger->Dashboard->Template->Edit HTML and search for “]]></b:skin>” tag — now copy the following code and paste it before “]]></b:skin>” tag:

[css]
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
img {
border: 10px solid #fff;
float: left;
height: 300px;
width: 300px;
margin: 20px;
overflow: hidden;

-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
}
[/css]

Now copy the below given code and paste it after the code that we have just added:

[css]
.grow img {
height: 300px;
width: 300px;

-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.grow img:hover {
width: 400px;
height: 400px;
}
[/css]

Remember, this CSS effect will only work on those images who have a class name “grow”. So make sure that you add a class “grow” in every single section where you want this effect to work.

For instance, If you want this effect functional for all your images that appear inside the article area — then give your <article> section a class name “grow” as shown below:

Get more CSS image effects from here.

How to make a drop down menu?

I believe that every reasonable site has a menu, it can be considered as one of the core areas of a blog or website, a menu is necessary.

But what if your site does not have a decent menu? It will give your user an unwanted and unpleasant experience, according to a research poorly designed websites are tend to get lesser user belief than a professionally designed website.

I am sure you are not one of those who don’t put any attention to their web design, this is why you are here.

So to make your menu cool — you should make sure that it has good colours that matches your blog design and of-course it should have drop-down functionality to give it a more superior look.

For that, go to Blogger->Dashboard->Template->Edit HTML and search for your blog’s menu. Once you have find it, add as many sub-menus as you want.

For instance, if you have a menu like this:

[html]

<nav>
<ul>
<li>Home</li>
<li>Contact Us</li>
<li>About</li>
</ul>
</nav>

[/html]

And you want to add three sub menus in “About” element — then add <ul><li>Tab 1</li><li>Tab 2</li><li>Tab 3</li></ul> before </li> tag which is after “About” button. For instance:

[html]

<nav>
<ul>
<li>Home</li>
<li>Contact Us</li>
<li>About
<ul>
<li>Tab 1</li>
</ul>
</li>
</ul>
</nav>

[/html]

Now search for “]]></b:skin>” tag again, and paste this CSS code before it.

[css]

nav ul ul {
display: none;
position: absolute;
background: gray;
width: 100px;
}

nav ul li:hover > ul {
display: block;
}

nav ul li ul li {
widt

[/css]

You can see the demo here.

Also read how to make a responsive menu for Blogger?

How to redesign your read more button?

Your read more button should look as much good as it could. Because this is the button which is pressed by any blog’s users the most.

So to give it a more professional look, use this CSS code:

[css]

.jump-link {

background: #F1F1F1;
padding: 6px;
border-radius: 17px 0px;
border: 1px solid #C7C5C5;
text-align: center;

}

.jump-link a {
color: #343331;
text-decoration: none;

}

[/css]

You can keep playing with the background color or change the hyperlink text colour. To get more read more buttons’ design, visit this page.

P.S: Subscribe our Newsletter for more Blogger tricks and CSS designs.