Blog Sidebars: Easy Ways to Add Whatever You Want

Are Your Blogging Goals Slipping? Hel... Six Word Memoirs

Blog Sidebars: Easy Ways to Add Whatever You Want

BlogTamingMonthCommuniCATE2 If you are having issues getting images to show as the right size on blog side bars, or if you want to add colours to links or other fancy stuff to your blog, this post shows you how. It uses a “what you see is what you get” online app, which will let you do all that without having to turn into a geek or learn web code.

I will also tell you where to get more information and how to get the code into your blog. It is all free and very simple. If you are looking at this post saying, “I CANNOT and DO NOT want to write in html,” I don’t blame you, but don’t quit until I show you this service. You don’t have to learn any html.

A screenshot of the editor.

Basic Coding for Internet Links, Text etc.

1. Go to the site. There is no sign-up, mailing lists or catches. http://html-color-codes.info/html-editor/

2. Type in what you want in the same way you would use a Word Processor or in the way you enter text and web addresses into your blog posts. When done, you can print the code and preview what it will look like. If you’re happy, then hit the html button to get the code, which you paste into the widget/gadget box on your blog. (Instructions on that are below.) Just type it in.

2014-01-09_15-48-48 3. If you want to keep a copy of your code on your computer, paste it into Text.exe on Windows or TextEdit.app on your Mac. If you paste it into some word processors, if can take the coding out of your view making future copy and paste impossible. You know it has done this if your program just shows you the final product with no codes in brackets.

4. If you already have widget or gadget code from another source that you wish to place on your sidebar: if you use Blogger and have pre-existing Javascript code you can paste in, you are fine. WordPress.com blogs will NOT EVER take any Javascript code. Their system just deletes it. That means you can’t monetize these free blogs and you can’t use a lot of great tools.

Image Coding

Html editing apps like Color Code’s Editor are also handy for getting image sizes in sidebars correct. I open up a new file in Dreamweaver to do my sidebars, as guessing at sidebar width in relation to the actual image width drives me nuts! Dreamweaver also allows me to colour text and size it as a headline. The web editor will allow you to do all that too.

1. To add an image to the web editing software, simply click on the tree photo icon in the menu bar, enter in the web address of the image (if you have uploaded it to your blog or Picasa, it will have a web address you can find if you locate the image in your Media files.) In WordPress, go to Media and upload any new image, then click on the image name in the Media Library and it will give you the link.

seamonkey-with-font2-web_r 2. Once you place this in the web editor, you can then resize it, give it a border, align it etc. as you would in a blog post. It may be wise to ignore the advanced options.

If you want your own web editing software for your computer, use SeaMonkey: http://www.seamonkey-project.org It is also “what you see is what you get” and won’t scare you. It works like a Word Processor and is made by the Mozilla people, so it is free and handy if you are wary of your Internet usage.

One small caveat, I am not recommending coding your blog posts for WordPress.com sites. It will delete a lot of code outside a narrow allowance of what it will let you do.

How to Enter Your Code into Your Blog

Both the WordPress Widget and the Blogger Gadget are really simple. They are just boxes where you paste the code in. You don’t need to fret that they will have a dozen settings which you have to understand. Just paste the code in, hit save. You are done.

What bloggers html gadget looks like with my code in it for my books.

WordPress’ Html Widget looks like the image below. There are no additional settings. You can use WordPress’ Image widget, but this is just as easy and the image one is much more complex.

2014-01-09_15-05-21