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:
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 😀 , 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:
:)
– 🙂:D
– 😀;-)
– 😉:(
– 😦:o
– 😮:|
– 😐8O
– 😯:x
– 😡:P
– 😛:?
– 😕:evil:
– 👿:mrgreen:
–:arrow:
– ➡:idea:
– 💡
Be careful as smilies 😉 can really clutter 😦 up your blog post very fast. And 😮 not all WordPress Themes 👿 are designed to easily 💡 accommodate smilies in 😡 blog posts 😛 .
You can learn more about Smilies in WordPress from the WordPress Codex Using Smilies and Which Smilies Can I Use on WordPress.com articles.
There will be more WordPress.com Blog Bling coming at your tomorrow. Stay tuned!
Related Articles
- 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
14 Comments
Hi Lorelle,
Splashcast has released their multimedia web widget that supports integration with WordPress.com blogs.
More info here: Getting Started with Splashcast on WordPress.com
And if you dont like this yellow Smilies, you can go to my Blog and can Download around 600 green Smilies not only for WordPress. 😉
Its a german Blog, so I link directly to the Download-Page:
http://www.greensmilies.com/downloads/
Mike Cherim of Green-Beast.com wrote a great article about how to make and implement our own custom smilies for use in your hosted WordPress theme.
Following Mike’s lead, I was able to easily add custom smilies to my own blog, too.
i have a question how did u make ur blog like this there’s no deighn like dis i no u used the sandbox but how did u get it to be like this?
@ jonasbrothersgurl:
If I understand you, you are asking how did I design my WordPress Theme on this blog. I designed it using the Sandbox Theme with the CSS Extra option. Yes, it is one of a kind and hopefully will stay that way, even when I redesign it. 😀
If you are looking for specifics in how to design a WordPress Theme and use CSS, I recommend that you check out tutorials on web design found all over the web. Good luck designing your own.
Um how do you do this??? This was completely unhelpful.
How do you do what? When asking questions on sites like this, you have to be more specific. Are you having trouble understanding the instructions?
I’m using the twenty-twenty theme with WordPress but the horizontal line html code doesn’t seem to give the promised results – no lines appear on the page. I’m not exactly sure what the problem is but I’m guessing it’s the theme…any way around this? Thanks in advance for any tips!
Probably because it isn’t styled. Time to add some styles to the stylesheet for the horizontal line. 😀
Hi, thanks for the quick response! I’m a beginner at all this and was wondering if you could point me in the direction of some specific styles that can perform this task. Thanks!
W3 Schools has great resources to help you with the basics of all of CSS and HTML styles. What you do with it from there is up to your creativity.
hallo Lorelle, can i use “hr” horizontal line with custom line size on header.php? thanks
Gina
You can put a border or include a horizontal line in the header.php file, but not on WordPress.com as there is no access to WordPress Themes for such control, though you can add borders through the premium Custom CSS option. For self-hosted WordPress blogs and their Themes, you can do anything you want, though I would not use <hr /> as I would use CSS to put a border in. Much more scalable and less code.
I was getting frustrated trying to add a separator line within my post – had no idea it was so easy – it works, thank you!
15 Trackbacks/Pingbacks
[…] written about how to add smilies to your blog and there are two great how to articles in the WordPress Codex, the online manual for WordPress […]
[…] WordPress.com Blog Bling: Lines and Smilies […]
[…] WordPress.com Blog Bling: Lines and Smilies […]
[…] WordPress.com Blog Bling: Lines and Smilies […]
[…] WordPress.com Blog Bling: Lines and Smilies […]
[…] WordPress.com Blog Bling: Lines and Smilies […]
[…] WordPress.com Blog Bling: Lines and Smilies […]
[…] WordPress.com Blog Bling: Lines and Smilies […]
[…] a lot, haven’t we? I’ve shown you how to add graphics and photographs and video, lines and smilies, fonts, blockquotes, social bookmark links, blogroll bling and sidebar widgets, and…have I […]
[…] covered adding blog bling to your WordPress.com blog in the form of graphics and photographs, lines and smilies, fonts, blockquotes, social bookmark links. Now it’s time to add some blog bling to your […]
[…] far, the WordPress.com Blog Bling series has covered adding graphic images, lines and smilies, social bookmarking links, and font bling. The techniques covered in this section on blockquotes […]
[…] covered how to using images, logos, and badges to decorate your WordPress.com blog, how to add horizontal and vertical lines and smilies, and Social Bookmarking Submit Links on WordPress Blogs, including WordPress.com blogs. In this […]
[…] WordPress.com Blog Bling: Lines and Smilies […]
[…] WordPress.com Blog Bling: Lines and Smilies […]
[…] week covering how to blog bling your WordPress.com blog in the form of graphics and photographs, lines and smilies, fonts, blockquotes, social bookmark links, blogroll bling and sidebar widgets, podcasts, audio, […]