While there are many ways you can style your blog template to make it look more appealing to your readers, many bloggers pay little interest to styling their blog posts.
Long monotonous blocks of text can appear boring, but there are many different techniques you can use to make your posts more stylish, interesting and ultimately more compelling to your readers.
Here are fifteen different techniques including some which you may not have considered using before!
Textual Effects
Styling areas of your text in an unusual way helps draw attention to important sections of your posts.
Here are a few examples of how you can add stylish textual effects to your posts:
Bold, Italic and Colored Text
These are the simplest of all textual effects, though such effects should never be underestimated!
Bold text, for example, reinforces important words or sentences in your article and adds a sense of authority.
You can easily make text bold, italic or in a different color by highlighting and choosing the relevant option in your post editing dashboard.
Use a different font style for your introduction
This is a style most prominently used in magazines, but that doesn't mean you can't also use it for your blog posts!
I first saw this in action online in Lisa Sabin-Wilson's blog, Just a Girl in the World:
Here Lisa uses a larger italic font for the first phrase or so of her posts which really makes them stand out!
To use a different font for the introductory phrase of your own blog posts, you can edit the HTML code of your posts by wrapping styled span tags around the phrase, like this:
<span style="font-size: 200%; font-style: italic;">Introduction here<span> and the rest of your post here...Magazine Style Drop Caps
This is another typographic style which is typically found in magazines.
This can be achieved using inline CSS by wrapping the first letter of each post in styled <span> tags, like this:
<span style="font-size: 200%; float: left; padding: 0 5px 5px 0;">F</span>irst letter...
Here are links to articles which explain how CSS can be used to create drop caps in your blog posts:
- Magazine Style Drop Caps (Beautiful Beta)
- Easy CSS Drop Caps (Mandarin Design)
- Magazine Style First Letter with CSS (DesignGala)
Structural Effects
The overall structure of your blog posts can be stylishly presented. Here are some methods to make the structure of your articles more appealing to your blog's readership:
Blockquotes
Blockquotes are generally used for long quotations and are usually separated from the main body of text by indentation, italics or a different style of font.
Using CSS you can change the appearance of your post blockquotes as I wrote about in this previous article.
Here are some other useful references with regard to styling blockquotes in your blog posts:
- Blockquotes with image quotes (Mandarin Design)
- Simple Double Quotes (Web Designer Wall)
Pullquotes
Pullquotes highlight a particular sentence or phrase of importance within an article; they are similar to blockquotes, but are generally aligned to the left or right of the main text.
A simple way to create pullquotes using inline CSS would be to wrap the text in span tags like this:
<span style="width: 200px; float: right; text-align: center; border-top: 3px solid #000; border-bottom: 3px solid #000; padding: 10px; margin: 5px 0 5px 5px;">Write the text for your pullquotes here.<span>Here are some other useful resources which explain how to use pullquotes in your blog posts:
- Simple CSS Pullquotes (Blogsolid)
- Snazzy Pullquotes for your Blog (Pearsonified)
- Automatic Pullquotes with JavaScript and CSS (456 Berea St.)
Use Headings
This feature is particularly useful when writing longer articles and is a technique I use frequently now in Blogger Buster.
Headings break up long sections of text into more manageable chunks, and help readers understand at a glance exactly what to expect from the consecutive section of text. Upper heading levels (eg: H1 and H2) should be used for titles, and are usually in a larger or bolder font. Lower levels (from H3 to H6) may be used as section headings.
Most bloggers use only headings from H1-H4 which are best used in the following sections of your blog and posts:
- H1 for the blog title
- H2 for your post titles (and possibly sidebar headings)
- H3 for sub-headings in your posts
- H4 for smaller sections within each sub-section of your posts
Headings are supported by all web browsers, and will appear in different font sizes even if you haven't added relevant styling code in the style section of your blog.
To make text appear as headings in your blog posts, you should wrap these in heading tags, like this:
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
These headings would appear something like this in your blog posts (depending on how you may have styled these headings in the style section of your template):
This is Heading 2
This is Heading 3
This is Heading 4
Hobo-Web has a great article about the use of headings in blog posts which makes for an interesting read!
Shaped sections of text
This is a rather unusual method of styling your blog posts, but it is certainly one which can attract attention! The method I'm using here is generated by CSS Text Wrapper, which you can use to shape areas of text into any shape you like! On the examples page, you can see circles, zig-zags and even a wine glass shaped block of text!
CSS Text Wrapper generates DIV's to shape your text according to the style you provide, and can even be used to trace the shape of an image! There are different options for adding this style to your blog posts, including inline CSS (the method I have used here) and JavaScript.
Check it out and let me know what you think about this unusual method of styling your posts.
Using Images to style your posts
Using images is one of the easiest and most effective ways of adding style and interest to your blog posts. Here are some different methods you could use with particular regard to imagery and styling images in your blog.
Use themed images throughout all of your blog posts
One of the most effective ways I've seen other bloggers add style to their posts is by using a consistent theme for images throughout all of their blog posts.
Probably the most striking example of themed images I've seen is featured in Kathy Sierra's blog, Creating Passionate Users. Here Kathy illustrates her concepts using black and white photographs of people which are highlighted with speech bubbles and colorful text.
You may also want to check out Woork and Skelliewag to see other examples of consistent image themes throughout their blog posts.
Frame Your Images With CSS
I've always thought that photographs presented in frames look much better than those simply stuck to the wall with sticky tape, and the same can apply to images in your blog posts too!
Recently I've begin adding "frames" around the images in my posts by adding inline style to the images, like this:
<img src="http://url-of-host.com/image.jpg" alt="Alt text" style="border: 3px solid #ccc; padding: 5px; background: #fff;" />If you use Blogger's image upload feature to add images to your posts, you can simply add these style references to the style already present in your image code, like this:
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand; border: 3px solid #ccc; padding: 5px; background: #fff;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNbjlHEmo0pqT5omdhGX2bYh_2po09tFVM6LbQzywb2xNMt8WNKO30o0oSv25reJYrVYL2L4ndgE1eB3Bs3IFRRWM9S_H0ZCPKyHCcU7EJsqlwJ_VG8in4TPBLo8TMxa3kLA5xsd3Wc6w/s400/typography.jpg" alt=""id="BLOGGER_PHOTO_ID_123456789012345678" />You can change the border and background colors to suit your own template design which will create a style of image framing that is all your own.
Add Captions to your Images
An example of a caption
Using Drop Shadows to Highlight Your Images
A really interesting way to style your images is to use drop shadows, like this:
The easiest tutorial I have found for this so far is at 1976 Design, where you can download the full source code and example images to add drop shadows to images in your own blog posts.
This technique works by adding a background image to the DIV section which holds your image, and adding style to the image (negative margin values) which draw the image up and away from the DIV edges.
Use different backgrounds for each post
It's actually quite easy to use a different background color or image for each blog post. Simply edit your posts in Edit HTML mode, and add div tags around your content which contain style tags for the background properties. To add a colored background, you could use code like this:
<div style="background: #fdd2f3;">
The content of your post goes here
</div>If you would prefer to use an image background, you could style your DIV tags like this instead:
<div style="background: url(http://the-url-of-your-image.com/image.jpg);">
The content of your post goes here
</div>Vin of Dummies Guide to Google Blogger wrote a more in depth article about this which offers more specific advice for Blogger users.
Yet more Stylish Techniques for your Posts!
These last few ideas were a little more difficult to categorize, though they are undoubtedly fun and useful additions for your blog posts!
Automatically add icons beside your links
This is another technique which intrigues me (and one which I'm considering adding to Blogger Buster in the near future).
This technique uses CSS with HTML selectors to add icons automatically beside your text links which are relevant to the file or page you are linking too.
The best tutorial and download files I have found for this was written by Alexander Kaiser of Poolie Studios and I would really recommend anyone interested in adding this functionality to their blog to check out his project page!
In the near future, I'll probably write a tutorial explaining how to add this functionality to your Blogger powered blogs too.
Add Relevant Information about Internet Companies with StartFound Widgets
StartFound is a really useful service which allows you to embed a widget in your posts with relevant information about internet-based companies you may discuss in your articles.
It's free to use and you doesn't include obtrusive branding which other such widgets may contain. What's more, it's incredibly easy to use: simply click on the plus symbol in the top left-hand corner of the company you wish to add, then copy/paste the code presented on the next page.
Zemanta (Content Suggestion Engine)
I wrote about Zemanta a short time ago and am so far impressed by how well this engine works. Zemanta offers a few different methods to spice up your blog posts, including image thumbnails, articles, links and tags for your posts.
Zemanta works as a Firefox extension and automatically adds suggestions to the right of your post editing page when you are creating a new post.
You can read more about Zemanta and download your Firefox plugin on the Zemanta website.
Final Thoughts
I hope you've enjoyed reading through this list of techniques to add pizazz to your regular blog postings! If you have any other ideas, please share these by adding your comments below.
If you've enjoyed this article, please consider subscribing to Blogger Buster and be updated of new articles when they are posted.
No comments:
Post a Comment