Spice Up Your Blog Posts: Simple CSS Tricks

Writing great blog posts not only requires decent writing skills, but also need some extra spice to make the posts attractive in appearance. A plain text post seems dull, and a large number of readers will take a look and will navigate away from the page. If you add that pinch to your post making them stand apart from the rest, the bounce rate of your blog will go down significantly. With some simple CSS tricks you can easily liven up your blog post and attract more readers. I have compiled some easy to use methods which can make your post attractive and eye-catching. The techniques discussed here can be easily implemented even if you have no knowledge of HTML,XML or CSS.

Before you attempt to implement these techniques make sure you have backed up your template. In case something goes wrong, you can easily restore your original template.

All CSS code that is discussed in this post should be placed just before the following code in your template...

]]></b:skin>

Info Boxes

For displaying some important information, you can use these light green, thin bordered boxes in your posts. There are two versions, one without exclamation icon and one with the icon.

Paste the following CSS code in your template...

.alert-plain {
border:solid 1px #98BE10;
background:#F6FEDA;
color:#222222;
padding:4px;
text-align:left;
}

And here is the iconized version...

.alert-with-icon {
border:solid 1px #98BE10;
background:#F6FEDA url(images/exclamation.png) 6px 4px no-repeat;
color:#222222;
padding:4px;
text-align:right;
}

The HTML code for making the actual boxes is...

<div class="alert-plain">This is an alert box, which can be used to highlight the content. The highlighted text is more catchy to eyes and makes the post more attractive.</div>

<div class="alert-with-icon">This is an alert box, which can be used to highlight the content. The highlighted text is more catchy to eyes and makes the post more attractive.</div>

And here is the end result...

This is an alert box, which can be used to highlight the content. The highlighted text is more catchy to eyes and makes the post more attractive.

Alert Boxes

Normally, pastel color boxes are used for highlighting the important content in web pages. There are two versions, one without exclamation icon and one with the icon.

Paste the following CSS code in your template...

.alert-plain-pastel {
border:solid 1px #98BE10;
background:#FCF9CE;
color:#222222;
padding:4px;
text-align:left;
}

And here is the iconized version...

.alert-with-icon-pastel {
border:solid 1px #98BE10;
background:#FCF9CE url(images/exclamation.png) 6px 4px no-repeat;
color:#222222;
padding:4px;
text-align:right;
}

The HTML code for making the actual boxes is...

<div class="alert-plain-pastel">This is an alert box, which can be used to highlight the content. The highlighted text is more catchy to eyes and makes the post more attractive.</div>

<div class="alert-with-icon-pastel">This is an alert box, which can be used to highlight the content. The highlighted text is more catchy to eyes and makes the post more attractive.</div>

And here is the end result...

This is an alert box, which can be used to highlight the content. The highlighted text is more catchy to eyes and makes the post more attractive.

Solid Info Boxes

Sometimes we want to intensly highlight the large postion of blog text in different background. Solid boxes with bold letters are most appropriate for this situation.

Paste the following CSS code in your template...

.solid-green{
background:#008000;
color:#FFFFFF;
font-weight:bold;
padding:4px;
text-align:center;
}

.solid-red{
background:#CC0000;
color:#FFFFFF;
font-weight:bold;
padding:4px;
text-align:center;
}

.solid-black{
background:#000000;
color:#FFFFFF;
font-weight:bold;
padding:4px;
text-align:center;
}

The HTML code for making the actual solid boxes is...

<div class="solid-green">This is an alert box, which can be used to highlight the content. The highlighted text is more catchy to eyes and makes the post more attractive.</div>

<div class="solid-red">This is an alert box, which can be used to highlight the content. The highlighted text is more catchy to eyes and makes the post more attractive.</div>

<div class="solid-black">This is an alert box, which can be used to highlight the content. The highlighted text is more catchy to eyes and makes the post more attractive.</div>

And here is the end result...

This is an alert box, which can be used to highlight the content. The highlighted text is more catchy to eyes and makes the post more attractive.

Gray Code Highlighters

For highlighting HTML or any other language code, generally light gray code boxes are used. There are two versions, one is with centered text and other one is with left aligned text.

Paste the following CSS code in your template...

.clean-gray{
border:solid 1px #DEDEDE;
background:#EFEFEF;
color:#222222;
padding:4px;
text-align:left;
font-weight:bold;
}

And here is the centered version...

.clean-gray-center{
border:solid 1px #DEDEDE;
background:#EFEFEF;
color:#222222;
padding:4px;
text-align:center;
font-weight:bold;
}

The HTML code for making the actual code highlighters is...

<div class="clean-gray-center">for(int i=0;i < MAX_REQUESTS;i++);</div>

<div class="clean-gray">/* 468x60, created 2/4/08 */
google_ad_slot = "xxxxxxxxx";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script src='http://pagead2...../pagead/show_ads.js'
type='text/javascript'>
</script></div>

And here is the end result...

for(int i=0;i < MAX_REQUESTS;i++);

/* 468x60, created 2/4/08 */
google_ad_slot = "xxxxxxxxx";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script src='http://pagead2...../pagead/show_ads.js'
type='text/javascript'>
</script>

Credit Url's

Often we use licensed images in our posts and give the credit to respective owner by placing the name or link of the owner beneath the image. The following method let's you place small italicized credit URL's, so that they do not distract the user from reading the actual content of the post. There are three versions available, left aligned, center aligned and right aligned.

Paste the following CSS code in your template...

.credit-url-left{
background:#FFFFFF;
color:#000000;
text-align:left;
font-weight:normal;
font-style:italic;
font-size:10px;
}

.credit-url-right{
background:#FFFFFF;
color:#000000;
text-align:right;
font-weight:normal;
font-style:italic;
font-size:10px;
}

.credit-url-center{
background:#FFFFFF;
color:#000000;
text-align:center;
font-weight:normal;
font-style:italic;
font-size:10px;
}

The HTML code for making the actual credit URL's is...

<div class="credit-url-left">Image Credit: <a href="http://adsense-primer.blogspot.com/">Adsense Primer<&/a></div>

<div class="credit-url-center">Image Credit: <a href="http://tinyurl.com/5htuq5">MintBlogger Archives</a></div>

<div class="credit-url-right">Image Credit: <a href="http://www.mintblogger.com/2008/01/contact-me.html">Contact MintBlogger</a></div>

And here is the end result...

Image Credit: Adsense Primer

Image Credit: MintBlogger Archives

Image Credit: Contact MintBlogger

Use these simple techniques and see the difference in your posts. I hope these tips will be useful in making your blogger posts more attractive and readable.

Exclamation Image Download

Digg this Add to del.icio.us Stumble It! Mixx It! Sphinn It!