Thursday, June 7, 2012

Blogging 101 (Part Four)

Holy Cow! Who thought an artist who has trouble thinking logically would write FOUR Blogging 101 posts??!? Not this girl, let me tell ya. If you missed Part One, Part Two and Part Three, just click and go read them in order. It helps to build on the knowledge of the previous posts. You can also click my Blogging 101 button in the sidebar and all 101 posts will magically appear (which would be GRRREAT in your own sidebar, hint, hint. LOL).

Since Blogger has changed a bunch of things in the "back room" of everyone's blog, I've decided to do a post on "how to use Blogger's buttons and gadgets". It seems some of you DO need a little help, I'm not mentioning any names but I've noticed some alignment issues etc. on some blogs around town, lol. I decided that what I'd do is cover "Everything Blog" for this 101, including removing formatting mistakes in one swoop, using labels to their best advantage, getting pictures to left or right align with text beside it, making pictures the size you WANT them to be and how to correct some Blogger Bugs. 

Here are the buttons (above and side) we're gonna go over, then we'll see if we have time for a few other settings... Now, if you'll notice, the actual buttons etc are generally where you'd find them when opening a new blog post window, the Post Settings options is just usually a little more to the right. The header is filled with function buttons to help format your post and the right side has all of the buttons to help tell blogger about your post. Lets go over the header buttons first.
Let me add labels to all the options in the header bar then I'll explain their individual uses more specifically.

okie dokie, it looks like a mess!! But it'll be easier to learn this way. Let me explain what each letter points to and what function they have and the easiest way of using this function.

A - This is your blog post title, keep it short and you're posts will look better. Going over one line for the title, to me, means you're adding too much info in the title, that's what the BODY of the post is for!! You DON'T have to say everything in the title, just a tease. Many professional blogger/writers talk about the teaser headline, think of your title like that, you want to entice your reader to stay and read more of your post. Get them interested with an interesting but short title.

B - The ULTIMATE button, only click publish when you want to go live! Ok, that's not strictly true, if you've used the right side Post Settings "schedule" option then when you push publish blogger will put your post in the queue for roll out at the appointed time. (If you inadvertently publish a blog post too early, like before it's done, there is a method to getting it back off your page. I'll tell you how later on in this post!)

C - The save button is your friend!! Blogger saves your posts as you write them every minute or so but that doesn't mean that you should rely on Blogger to do all the work! If you've just done something complicated on your blog or written something brilliant, click SAVE, you just might thank your lucky stars you did, it's happened to the best of us once or twice!!

D - This little preview button will help you immensely with the LOOK of all your blog posts. I use this button dozens of times as I write each post. I check my formatting, my alignment and how large the pictures actually are as opposed to how large they look in the compose area of blogger. I'll also check the length of the entire post, depending on what font and size font you use will determine how far down the writing goes. For instance, I religiously change the font on my posts to Verdana, it's the largest looking font on the page when using "normal" sized font (as opposed to smallest, small, large, largest)

E - Obviously this closes your blog post, remember to hit save before you do!

F - The compose button, when clicked  takes you back to normal readable text if you were in HTML mode. This is the usual mode of writing you post in. It allows you to generally see what your post will look like when published. (I said generally, you should ALWAYS check using Preview to see how your lay out will really look.

G - The HTML button is kind of like the skeleton of the compose button. Click this button if you want to tweak the code that makes your blog post look and behave the way it does. You want to make sure you know what you're doing when you go fiddling with code though. If you want to learn to fiddle successfully and you're not sure what will happen if you try, copy all the code in a blog post and paste it in a new blog post so now you can play and you still have your original copy.

H -  These arrows are like the "go back" and "re do" buttons. If, for instance, you change the color of a font but don't like it, before you do anything else you can hit the "undo" button and it returns the text to the original color. This is better than continuing to change the color using the color changing button because sometimes the code can get wonky.

I - Fonts. Choose your pleasure. 

J - Font size. Remember to check using the preview button to see if the size you choose is readable or too large for the look you're trying to create.

KThis is for paragraph formatting. I really don't use these but if you use paragraph titles and subtitles this is the way to do it. Depending on which you choose, it bolds the font and increases the font size. Play around and see what I mean, you can always use the "go back" button to undo what you did!

L - Use these three if you want to bold, italicize or underline your font.

M - This goes with the three above, it strikes through whatever font you want. Just highlight the that text and click the button.

N - This is your font color changer. If you don't like the color you chose I suggest using the "go back" button instead of just re-changing the color. Also remember, people have to be able to READ your font, including many who need glasses. Using difficult to read colors or smaller fonts isn't too smart. I suggest using the strange colors sparingly.

O - This highlights the text background with whatever color you pick. Once again, remember to not make it too difficult for people to read you! Check it with the  Preview button.

P - Add a link. Highlight the text you want to make a link then click the LINK button. Add the URL in the window. (looks like this...  NOT Check that you used the correct URL by clicking "test this link". If the blog or whatever you want to link to doesn't show up in a  small window then you have screwed up the URL, try again, lol. If you want your link when clicked to open in a new window instead of going away from your site then check the "open in new window" box.

Q - Add a picture. Usually you'll use either "upload" from your computer or or "from URL". Here's a trick, if you want a picture beside your text, lets say the left side, you click on the left at the end of the first line of text that you want to be beside your pic. Leave your cursor there then click the add picture button and upload your picture however you want to. It will put itself directly above your text. Now, click the picture and it will highlight. Choose "left" and your picture will put itself on the left beside your text, cool huh?

R - Like add a picture but this adds a video from various places like your computer or YouTube.

S - This adds a jump break in your post. If you don't want your whole post to show on your "front" page but instead show your first few paragraphs then ask the reader to click to read more. Clicking brings them to the actual singular post page so they can read the entire post.

T - This is the alignment option. It allows you to align images and text to the left, right, centered or the fourth option squares off the text on both the left and the right sides by adding a few extra spaces between words, it makes text look very neat and clean. Remember, when you add a centered picture, you have to tell blogger you want to go back to left alignment or all your text will center under your pictures.

U - If this is clicked it starts a numbered list or a bulleted list which is really convenient because it automatically adds formatting to your list. It indents slightly and starts one line break after where you clicked the button. You therefore don't need an extra space between your previous paragraph and your numbered/bulleted list. If you add a line space it looks like there's too much space between the previous paragraph and your list.

VThis is the quote button. If you have a quote or some text that you'd like to "showcase", use this button. It indents whatever text is highlighted and slightly increases the font size. A really useful button.

W - This is a VERY useful button, it removes formatting. If you've copied and pasted something into your blog or you've made some colossal mistake and you just CANNOT get your formatting/line spacing etc. to work out, highlight all the offending text etc. and hit that button. It will take out ALL changes you made and gives you "clean" text. It also usually adds a bunch of space between paragraphs but that's easily eliminated with a few deletes. This is a bloggers best tool for when she makes some dumb mistakes and cannot figure out what happened.

X - When clicked, this button checks your spelling throughout your blog.
Let's move on to the right sidebar section... Once again, this is what it looks like.

These are your Post Settings and they tell Blogger about your post.

A - The labels setting allows you to tell blogger how you want to categorize this blog post. For instance, this post is labeled as my Blogging 101 series and I have now also added the words "formatting" and "buttons", and "New Blogger" as a label. These are the words that show up in your word cloud that you can put in your sidebar on your blog. It allows readers to choose a subject, like "blogging 101 series" or "watercolor paintings" or one of my featured artists like "Dion Dior".

B - This button allows you to schedule the time you want your post to go "live". Click the button and choose the date and time you want your post to go live onto your blog then As you can see, when you click on "schedule" it opens to show what you see on the right. Normally it's set to automatic but I'm scheduling this post to go live on June 7th @ 6AM. What I did was click on the date I wanted (it turns orange) then clici where the times are listed, a drop down list appears and I pick my time. The scheduler should know your timezone, if not click location. (read "C" first, lol). After you choose your date/time click "Done" then finish your blog post, save your changes then click the "Publish" button. If you want to change anything in your blog post, go ahead, just remember to click "publish" when you're finished. To de-schedule a post that's scheduled just click "Schedule" again and choose "Automatic" and click Done. This time when you save your blog post DON'T click publish unless you want your post to go live NOW.

C - I must admit I'm kinda stumped with this one. Location settings probably helps the above schedule to get the time zones correct, other than that, I got nuthin'. Oh, one other thing, when you click it you'll get a pop up window asking to use your current location. Just click yes then the Schedule option above it will show your time-zone correctly.

D - This options button allows you to tell Blogger how to handle reader comments for this post. It also has a compose mode where you can toggle between "sho HTML literally" and "Interpret typed HTML". This tells Blogger how to interpret what you're typing and make it into HTML code. (If you want to use the "Jump Break" option then they say you should put this setting on "show HTML literally" but fool around with it until it functions the way you like, that's what I do!). In fact, that's what I just did with the "Line Breaks" option. If you have "use <br> tag" selected, when you hit enter it adds the <br> tag as the line break in your code. I find this acts a bit squirley, adding other strange font options which don't show in the post but can screw up the formatting by adding another line break when you only wanted one. Have you ever noticed that? Sometimes your paragraphs seem inordinately far apart from one another and you can't figure out why. THAT's why, the HTML code is adding extra and useless code that doesn't do anything but put another line break in. I've therefore switched to "press enter for line break", this adds a blank line space in your HTML which also translates to a line space in your published post.

One last thing I want to teach you, it's a REALLY cool thing you can do using the "Labels" section of your Post Settings. If you have a continuing series going on your blog or you have a theme of posts (like challenges once a week or somesuch) that you so wish you could "group" together virtually somehow, then do I have the solution for you!! What you do is create a button or blog badge to represent the posts you want to group together. For instance, as you know I have a Blogging 101 button in my sidebar. The cool thing is that if you go click it, it will bring up all the Blogging 101 series that have so far been published!! Cool, huh? It's easy to code and do, here's how. When you write a themed post that fits with that button, lets say this post, then what I want to do is in the labels section on the right side of the editing page, you want to add THE SAME word in EACH of your themed blog posts. So, for Blogging 101 I add B101 in the labels section of every Blogging 101 post. I do the same with my Artist's Play Room posts, I use APR in the labels section of EVERY Artist's Play Room post. Now, make SURE you pick a word that you WON'T be using in other posts without thinking, like I wouldn't use BLOGGING for my Blogging 101 series because I may use that label with other posts then inadvertently have them "grouped" with my Blogging 101 posts. Oops, lol.

Ok, with that done we have to tweak the button code just a tiny bit. If you don't know how to code your own button then click here and read all about it. What we do is slightly change where our button "points" to. Normally, a button would point to another blog or somewhere like that but we want these buttons to point internally, to specific themed posts within our own blog. So, instead of having the button go to your general blog, have it go to a search term and make that search term the word you use with that theme!! For instance, instead of having my Blogging 101 button just point to my blog (so readers would have to search for my blogging 101 posts manually) I have the button point to a B101 search. So, instead of using , instead the link looks like this...

So, the whole copy/pastable blog code looks like this...

<a href="" title="Click to go to my Blogging 101 series!"><img height="150" width="150" src="" /></a><br />
(Copy/Paste into your sidebar HTML/Javascript Gadget!)
<textarea rows="4" cols="23" name="Link to Site" readonly="readonly"><center><a href="" target="_blank" title="Click to read my continuing series, Blogging 101!"><img src="" border="0" width="150" height="150" alt="Blogging 101 on" /></a></center></textarea></center>

And the above code produces this...

(Copy/Paste into your sidebar
 HTML/Javascript Gadget!)

...and even cooler, when the button is clicked, or copy/pasted then the resultant button is clicked, it tells Blogger to find all the incidences of B101 and display them in order of newest to oldest! Brilliant! If you want to make your button do that then all you have to do is label all the posts you want to come up with the exact same label, then put that label at the end of the http:// like this...

I pick APR for my label so the search link I want to use is:

Just change that last bit to whatever label you choose!

Okie dokie, that's it for now,
I'll see you all later with new art, the wrap up of this week's APR and the new theme for next week.

Until then,
Happy hazelnut coffee to you!

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


  1. Are you being compensated? Great post! I'm sure I need to adjust some things on my blog :)

  2. wow, that was a great tutorial, such a good job you did, where were you a year ago when I needed you, ha ha ha,I was newbie blogger, knew nothing but through patience and perseverance I made it!

  3. Thanks for the tutorial... you have put in a huge amount of work and I am sure lots of people will benefit soooo much...xx

  4. I will have to sit down when I have some time and go through each of your 101's as I am one of the people you mentioned, that seriously need help:)
    I will attempt to get your 101 button and put it on mine (wish me luck).

  5. Well, I WAS one of the people who needed serious help, and then I met a WONDERFUL gal on Vancouver Island who allowed me to appoint her as a Bloggie author and VOILA, all of my errors were put to rest. This Guardian Angel of Bloggers spanked around my blog a bit and made it saaaa-weeeet!! And dang, she did it simply for a bit of love and an occasional Swedish Fish!! OMG ... what a girlfriend!

    Now don't you all go stealing my girlfriend, she's got enough things on her plate. That is, enough on her own plate, and I want her all to myself, selfish wench that I am.

    Seriously, thank you Jenn for all you do for us Blogger Morons.

    Much love,
    Ellen ♥ CardMonkey

  6. Cool page indeed! I really learned a lot from this post.

  7. jenn - i'm just now finding your blog and have enjoyed reading your blogging 101 series. i'm going to add the button either to my blog, or to my pinterest board, where i can find it again. i may get in touch with you about a blog button for my page, i probably need another payday first :). i'm going to spend some time looking around your page - it looks informative and helpful! thank you!


Please leave me a comment, I've sure missed hearing from you!

Related Posts with Thumbnails
blog links
Arts blog
^ Scroll to Top