February 20, 2010

Blogging tip for novice bloggers: Use html without knowing html

If you’re experienced with blogger or web design, skip this post!

As someone who knows no programming language and developed this simple blog through trial and error, I’ve decided to share some tips so that others who are struggling to work out what the heck all the blogger options mean might save a little time and do things a little more easily.

If you’re interested, I’m simply going to explain how I “cheated” and created some of the badges and gadgets on the right hand side-bar of this page.

If you look at the Lonely Planet Badge, you may wonder how I managed to centre it, or even how I managed to get it there in the first place. This is how I did it. LP provided the HTML (internet code stuff—that’s as technical as I get) for the image. I was like, great, just what I need, HTML. Then, I realised that HTML translates into images and text—it determines how the web pages look.

When you post in blogger you have two tabs over the posting window: “Compose” and “HTML”. If you normally upload photos or text into the Compose version, try doing that and then pressing the HTML tab and watch what happens—those images and text all turn into freaky code. But click back on Compose and it transforms into images and nice text again. Scary hey. I suddenly realised that I might be able to format images or text in the posting window so that they will retain that format (centred, bold, etc) when I pasted them to one of the side-bar items. So, I uploaded the things I wanted to format for a side-bar gadget—photos and text—formatted it in the Compose window, and then clicked the HTML tab. There was the HTML—but would it look the same in a gadget on the side?

I tried pasting that HTML into one of the Gadgets at the Blogger Layout page. If you go to Blogger Layout, from the Dashboard, you’ll see “Add a gadget”. Each of those fancy things on the right hand side of this page is one of those gadgets—the LP Badge is a HTML gadget; the Global Voices feed comes from another gadget; the About me text is simply a text gadget. If you click “Add a gadget”, a separate window pops up showing the types of gadgets you can add. One of the first few is called “HTML/text”. Aha! It was one of those moments.

As an experiment, I tried pasting that code that I formatted at the Post window into the HTML gadget. I shifted the gadget to where I wanted it to sit on the layout page. Saved. Guess what? The finished gadget looked just as I’d formatted it in the normal posting window.

If you look at the “download the volunteering guide” link on the right, and how it’s centred and bold in one part, I actually did that as if making a post in the posting window. I then clicked HTML. I then copied the HTML and left the posting window. I went to the Layout Page, clicked on Add a gadget, selected a HTML gadget, and pasted the HTML into the main gadget window. I saved it. And this is how it ended up looking—just as I’d wanted and formatted it by using the posting window and transforming it to HTML there. If anyone knows a simpler way, please let me know!

Another way this helps is if you’re uploading a series of photos in your post, and you realise they’re in the wrong order and you want to drag the one at the top of your post down to the bottom of the post (as I used to do manually), instead, take note of where the picture sits and then have a look at the HTML. Click the HTML tab. If you look carefully, you’ll see the reference to your picture somewhere in the paragraph of code at the top (if the photo you want to shift is at the top). All you need do is copy and paste that paragraph of code wherever you want the photo to appear in your post. If it’s your first go, try pasting it right at the bottom, for arguments sake. Then click the compose window and have a look again. The photo should now appear at the bottom of your post if you copied the code correctly. I worked this out by trial and error, sometimes incorrectly copying, but you work it out after a few goes. It’s a much simpler way of moving images around posts than shifting the whole image in that tiny posting window.

Those are my novice blog tip. Let me know if you have any or if you know a simpler way of doing what I just explained!

Download a free sampler and see inside the Insider's Guide to Ghana before buying.

No comments:

Post a Comment

There was an error in this gadget
Related Posts Plugin for WordPress, Blogger...