In part one of the WordPress.com Blog Bling series, we covered how to add graphic images to your WordPress.com blog. In this section, we’re going to cover how to add more visual images with lines and smilies.
Exploring Horizontal and Vertical Lines
One of the strongest visual elements in design is the line. In WordPress and web page design, creating horizontal lines are very simple. In the HTML editor, type
<hr /> and you will have a horizontal line on your blog post.
I will often use a horizontal line tag to highlight sections of programming code on my blog such as:
<?php the_content(__('(more...)')); ?>
Others may use horizontal lines to break up sections of text or highlight specific sections. When you see the line, you know there’s a change in topic coming.
Not all horizontal lines are designed equally in WordPress Themes. Some Themes on WordPress.com don’t even have a style for horizontal lines so you might not see any results. Test your WordPress Theme to see what your horizontal line looks like, or design your own.
Horizontal lines are best placed between two paragraphs with a space before and after them. They are used to divide content sections.
To design your own, you can add the Custom CSS feature to your WordPress.com blog, or use a graphic image to create your horizontal or vertical lines.
As a rule, HTML horizontal line tags in web pages go across the width of the container they are in. Most WordPress Themes feature space above and below a horizontal line, though the space is flexible by CSS design.
If you create and use your own horizontal line graphic, make sure the width doesn’t exceed the narrowest width of your post content column on your WordPress Theme. A line longer than the width will push your sidebar or other elements around. Typically, you may not want the horizontal line graphic to exceed 400-500 pixels in width.
A vertical line that would work in WordPress.com is not possible with an HTML tag, though, vertical lines can be created graphically.
Vertical lines tend to group content next to them. Or divide them. Within your WordPress post content area, vertical lines are typically found next to your words, like a frame.
Not all vertical lines are “lines”, but visual lines created with graphics. For example, the photograph along the side of the quote below creates a strong vertical line to highlight the words:
That which fills
my heart and soul –
Must be expressed in
drawings and pictures –
I am in a rage of work.
Vincent Van Gogh
You can create your own horizontal or vertical line in most graphics editing programs, or choose from the many found on free art and clip art sites. For more information and tips on uploading images to your WordPress.com blog, see Adding Images to Your WordPress.com Blog.
Smiling With Smilies
Smilies are the yellow circle faces with grins :D , tongues out, and all types of expressions.
In WordPress, they are created by using the keyboard equivalent and then converted into those yellow faces. On WordPress.com blogs, these work within the post and comment areas, adding little spots of color.
Smilies came about in the early days of the Internet as people realized that their printed words often didn’t reflect their true intent. One of the most common smilies is the “wink” ;-) which implies satire and silliness even though the words might not, such as “I would never say anything like that. ;-) ”
Adding smilies, also known as emoticons to your WordPress.com blog comes in two flavors. You can allow WordPress to automatically convert your emoticon text into those yellow circle faces or turn that feature off and use only text emoticons.
To turn smilies on and off in your WordPress.com blog, go to Options > Writing > Formatting and check the box to enable or disable automatically converting emoticons to smiley graphics.
Here are the most common smilies:
Be careful as smilies ;-) can really clutter :( up your blog post :mrgreen: very fast. And :o not all WordPress Themes :evil: are designed to easily :idea: accommodate smilies in :x blog posts :P .
There will be more WordPress.com Blog Bling coming at your tomorrow. Stay tuned!
- What Do I Do With My New WordPress.com Blog
- Free Photos for Your Blog
- Designing a Rainbow – Sexy Hot Colors
- WordPress Design Details
- WOW! Image Browsing and Uploading Feature on wordpress.com
- The Battle Between Image Width and Column Width
- One Year Anniversary Review: Web Design
Site Search Tags: blog bling, wordpressdotcom, wordpress.com, wordpress.com tips, wordpresscom, decorate your blog, blog design, blog design elements, wordpress blogs, wordpress themes, wordpress theme design, post design, post design elements, writing posts, blog writing, writing tips, post graphics, free photos, graphics, images, blog graphics, blog images, blog design, design elements, writing blogs, pretty blogs
Copyright Lorelle VanFossen, member of the 9Rules Network