Blogging 101 (Part One)

This series should actually be called How to Tweak Your Blog, An Artist's Perspective" but that title is just too long. Besides, Blogging 101 is easier to remember and I have a memory Like a seive, seriously, lol.

When I started blogging a couple of years ago I knew nothing about HTML. My previous foray into business and a web presence was through my cousin who's a computer genius. He created a website for my wedding cake business and every time I wanted to add another cake example I had to beg and cajole him to give me some of his valuable time. I was understandably nervous about starting a blog. I mean if it was as complicated as my website was (which was a big black box to me that I guessed was run by hamsters running on wheels) I'd be in trouble. But I knew if I wanted to support my art I had to have a presence on the internet. So up went the blog.

I didn't even know how to center a picture on my sidebar (actually, couldn't GET a picture up on my sidebar!) I went to other blogs and drooled at their purty sidebars and centered content. So, I got to Googling. That's how I learned how to do EVERYTHING you see around you while you read this blog post. 

I learned the simple things like centering, underlining and bolding a font. Then I graduated to adding picture links, sizing pictures and even adding a third party widget or two. After all that reading of geeky blog posts about HTML I started to understand some of the code, enough so I could tweak things I wanted to tweak and actually make my own copy/pastable blog button. The even more complicated stuff started to be possible like make a marquee for my sidebar or learn to line up pictures in a blog post and even have a caption centered under each. Now I was an empowered blogger! I was creating blog buttons for all my friends and helping them make their blogs look better. 

Woohoo! I was on a role, not afraid of HTML code anymore. Now it was just a tool to help me tweak my blog. One of my friends requested help with her blog last week. She loved my blog buttons and wanted a couple of her own. She needed some help and I was happy to do that. I mean, now that I was a happy blogger I want all of YOU to be happy bloggers too! After I gave her some of the easier tweaks and made her blog buttons she effusively praised my skill and asked why the heck didn't I at least write a tutorial for those who needed the help. I thought about it and now here we are. Thank you Dianne, I love the idea of writing a "Blogging tips 101" course from the perspective of an artist, not a geek (not that there's anything wrong with being a computer geek, what would we DO without you??!).

Here we go...

How to Center a Picture in your Sidebar: 
If you want all your pictures centered, (in fact, any sidebar do-hicky) all you have to do is put  all your code between:
<center> and </center>

Think of it this way... first you tell Blogger that you want to start centering something, then tell Blogger what you want centered, then tell Blogger to stop centering. So, a picture would look like this:
<center>Picture Code Here</center>

so if I wanted to center the "I ♥ Blogging" picture above it would look like this...
<center><img src="http://img.skitch.com/20120301-pkxh8xaydp3i1u3fh18kin5fq8.jpg" /></center>

The "img src=" is just telling Blogger that you're working with an image URL, then you put the URL between quotes and end the img with /> (Don't Forget the space AFTER the last quote sign then the /> , lol, don't ask me why it's important cause I don't know.)
(a URL is the thing in your address bar, your www. thing but with http:// before it)

You can upload any picture you want and this site will give you a direct link to use in posts/layouts (along with other ways of using the link which would take too long to explain) Just click on this link to use the site.
TinyPics

Making Words Bold or Underlined or Italicized in the Sidebar:
You use the same <> but inside them you put either b, u or i. Like this...
<b>Your Text Will Be Bold</b>
<u>Your Text Will Be Underlined</u>
<i>Your Text Will Be Italicized</i>

Making Picture Links and Sizing Your Pictures:
Ok, as I said above the tag "img" and "src=" tell Blogger we're working with an image here! So any image can be made into code by putting that code around it. 
<img src="Put Your Picture URL Here" />

Do you see how it works? Now, since you understand that, it's really easy to make the picture larger or smaller (or even change the shape from square to rectangular or vice versa). To do this you add height and width tags after the "img" but before the "src=". So if I wanted my own blog button to be 100 x 100 pixels square this is how it would look:
<img height="100" width="100" src="http://img.skitch.com/20100319-nnir1e1hgn6idwrfrty9wjhkqy.jpg" />

DON'T FORGET the quotation marks around the number ie. width="100", it won't work without them, and again, don't forget the space then the /> to close your img tag. One last cool tweak then we'll leave the tutorial at that until the next time...

How To Make A Picture Clickable:
(so it goes to another URL that you can specify!)
Now that you can easily code a picture, lets make it go to a place, like if someone has your blog badge on their site you want anyone clicking on it to be directed to YOUR site, right? Many times pictures in the sidebar when clicked just go to where the image is stored, it's URL. That's because that's what Blogger does with pictures, it makes them click to their own page so to speak. You want them to click back to wherever YOU specify, here's how:

To tell Blogger that we are working with a destination URL we start with this:
<href="Your Destination URL Here">

So the first part, the destination part (going to my blog in this example) looks like this:
<href="http://www.justaddwatersilly.com/">

Then to put it all together and tell Blogger that it's one piece you use "a" as an opening and closing tag... like this (with both destination URL AND image URL)
<a href="http://www.justaddwatersilly.com/"><img height="100" width="100" src="http://img.skitch.com/20100319-nnir1e1hgn6idwrfrty9wjhkqy.jpg" /></a>

So, we're done for today, just REMEMBER all the quotes around stuff have to be there as does the space before />, and also, all opening tags in <> have to have a closing tag with the / between the <> no matter what is between the greater than and less than signs (it could be "center & /center" or "b & /b" or "i & /i" or "u & /u"...).

Well done my bloggy friends, now go hit the showers, it's been a sweaty ride!
Until next time, this is your host... I'm out!

I'm reading: Blogging 101 (Part One)Tweet this Post