TIP - Polls in a Post

Time to get 'down and dirty' with an attempt to include a "Poll in a Post".

If it works, at least David is going to be a happy turkey!

Here goes ...

---------------------------------------------------------------------------------

1. Backup your old template!

--------------------------------------------------------------------------------

2. The object of this exercise is to let the Blogger engine do all the work and for us to simply copy and paste the result into the space (the Post) that we want to use it in. With that in mind, it is time to generate a Poll that Blogger will happily build for us and stick in the R/H panel wherever we choose to put it.

 

--------------------------------------------------------------------------------

3. Here is the Poll, displayed in all its glory in the sidebar of the page. It is necessary to actually 'publish' the Poll to have the code generated, but it won't remain here for long, so where you place it is quite irrelevant:

 

--------------------------------------------------------------------------------

4. Now comes the cunning part. Right-click anywhere on your page and select 'View Source'. The resulting HTML code will be shown to you in your text editor, probably Notepad, because you've not taken my advice previously and downloaded EditPad Lite. "Leading a horse to water ..." is the phrase that springs to mind but hey, each to his or her own!

 

--------------------------------------------------------------------------------

5. Do a search for Poll1 (if you already have Polls on your page, then this might be different, i.e. Poll2, or Poll3, or Poll4) in the text editor (much easier if you're using EditPad Lite!) and when the required 'word' has been found, you will see almost exactly the same code as I've displayed in the screencap below. I've highlighted a couple of areas in green and yellow as they become important a little later, but for the moment just remember that this is the Poll ID that Blogger has built for you.

Copy the code from the first "<div" to the last "</div>" of the area I've highlighted in the screencap (no, no, NO ... not the screencap ... your text editor!) and paste it into a new page (much easier in EditPad Lite because of the tabbed display!):

 

 

The next image is for INFORMATION only. It shows how the same code looks in a Blogger template and if you have an interest in this stuff, compare it with the HTML above to see how 'Blogger-speak' works:

 

--------------------------------------------------------------------------------

6. Here comes the 'fiddly' stuff!

• Go to the piece of code you saved in the last step.
• Add this line of text at the top (copy/paste if you wish)
  <div align='center'>
  
• Change the height to '160'. This depends on the length of your question and answers, so check the display and increase it if necessary, or you will end up with a vertical scrollbar.
• Add a final </div> at the bottom.

 

--------------------------------------------------------------------------------

7. Pay attention at the back! We're nearly there.

I will assume that the majority of readers of this article compose their 'Posts' using the 'Compose' or WYSIWYG editor. Unfortunately, this is where you have to dip your toes into the muddy waters of HTML. If you are using the 'Compose' method, stop wherever you wish to insert the Poll and switch to 'Edit Html'. You will be able to see where you stopped typing, so all you need to do is insert a couple of new lines, copy the text from your text editor (the stuff you've been hacking in the previous steps), and paste it into the editing window. It's as easy as that!

 

--------------------------------------------------------------------------------

8. When you're satisfied with the 'Preview' you can hit 'SAVE' (you're saving it as a 'draft'), because you aren't finished - yet!

BTW, the 'Preview' almost always shows you a distorted view of your Post, or rather, it displays differently on your page than it does in the 'Preview'. You have been warned!

--------------------------------------------------------------------------------

9. Finally! Go to Template | Page Elements, select 'Edit' for the Poll you created earlier, then select 'REMOVE PAGE ELEMENT' in the 'Create a poll' window that opens up. You're done with this one, and if you don't remove it, the one in your Post won't appear!

--------------------------------------------------------------------------------

10. Time to take a look at how the Poll displays when it is posted:

 

Q. Test Question

 

--------------------------------------------------------------------------------

Ahhh, satisfaction! The colours aren't exactly what I want, and if this was a 'real' Poll for my site I would tweak things a bit further, but I am sure you are able to do this for yourselves.

Now, sit back and wait for the feedback to your Poll ...

 

TIP - Post Formatting

You compose your 'post'. That's the hard part. You post your 'post'. That's the easy part. You sit back and wait for somebody to visit, read and comment. That's the satisfactory part.

In between you get on with your life. As we all do. But isn't it amazing that when the Blogging-bug has struck that we all appear to schedule our everyday tasks around our (sacrosanct) blogging time?

So, why not make it easy on yourself? Why not pre-plan how you compose and publish your blog posts so that when you hit the "PUBLISH POST" button you can be assured that they will appear exactly how you envisaged they would?

1. Select 'Dashboard' or 'Customise' (depending where you are on your Blog) and you will be taken to your 'Template' page. Select 'Settings', then 'Formatting' and you will be faced with the page you can see in the pic below. Take note of the two areas I mention. These are the main changes you may need to make, but check the rest of the boxes in case you've overlooked something. Don't forget to "Save Settings" after you've made your changes. These changes aren't critical, unlike changes you make to the template; they can always get changed back if you aren't satisfied with what you've done!

 

 

2. In the pic below you will see that I have already inserted a few 'justified' paragraph 'starts' and 'ends', because that is how I compose my posts. Your mileage will vary. I also have the whole code for the 'Up Arrow' that I use at the end of each post. This makes life easy for me as I don't have to remember the exact code, and since it appears in exactly the same place in each post (repetitive coding) I decided to insert it into the formatting template for all future posts.

 

 

I also have a series of 'hyphens' (dashes) included as a standard divider between 'sections' of a post. It was something I started in my earlier posts and something I decided I would continue to do for subsequent ones. I could find a post with a dashed line and copy/paste it into the new post, but this way is so much easier, don't you think?

You may wish to use a horizontal rule instead and you can achieve that by using the 'Compose' feature and selecting it from the menu, or if you are using the HTML feature just type the following ...

<hr width="50%" align="center">

... to give you a horizontal rule that is 50% of the width of the display area, and which is centred in the middle of the page.

More tips to come ... !

 

Change Your Header - NEW Blogger

NEW Blogger instructions, probably for the majority of users, and probably the one that will interest most of the visitors to this site looking for simple instructions on how to change a 'Header' or 'Banner'.

Have you got your image ready? Is the image width set to the width of your current template? Please remember I am dealing specifically with 'Rounders-3' and 'Rounders-4', and in those the width of the image is the same as the width of the template - 740 pixels. The height of the image is what you choose to make it, but I suggest 150 pixels for a balanced display.

--------------------------------------------------------------------------------

1. Backup your old template. Either by using the built-in backup feature in Blogger, or by copy/pasting it to a text editor of your choice, and saving it in a location you can find easily and with a name that makes sense to you!

--------------------------------------------------------------------------------

2. Clicking on 'Customise' on your main page, or 'Layout' on your Dashboard will bring you to the "Add and Arrange Page Elements" of the 'Template' tab. This is the new feature of NEW-Blogger in which you can literally 'drag-and-drop' modules wherever you wish. The one we are interested in is the 'Header' panel at the top:

--------------------------------------------------------------------------------

3. When you click on 'Edit' (see pic on top) it takes you to a new window in which you are asked to make a few choices. I have annotated the choices you should make so I won't reiterate them here:

--------------------------------------------------------------------------------

4. Nearly done - but not quite! Those pesky codes in the /* Blog Header still need to be changed so that the image will sit exactly where you want it, centred at the top of the page. It is exactly the same criteria that was edited in OLD-Blogger, so take a look at the graphic below and do the editing . . .

--------------------------------------------------------------------------------

That's it. You wanted more?

The examples for this sort of editing are all around you. The banner header on this site was inserted using exactly the same editing techniques. The banner header on David McMahon's blog (using the Rounders-3 template), and the banner header on Cecilia Mercado's blog, Dance with the Sun (using the Rounders-4 template), were also edited using the same instructions I've posted above.

If things don't work out first time, just restore the site to the way it was by using the saved template you copied before you started. Then e-mail me directly and I will visit your site and see what I can do for you. Don't forget to add as much information about what went wrong.

Over to you . . .

 

Leap of Faith, too . . . Implementing Thickbox

I am about to use one of David McMahon's original high-res photographs that he sent me some time ago, but which he hasn't actually posted on his blog one that he published on authorblog titled Jose, Can You See . . .. This should demonstrate how a 'medium-sized' picture on a Blogger page (as displayed on David's blog and reproduced in a similar size here) can be viewed at its best by using the 'Thickbox' technique. I like the effect very much; you have to decide whether it is something you'd like to use, too!

OK, let us make a start!

---------------------------------------------------------------------------------

1. Choose to make a new post (I don't think I need to add screencaps for the obvious steps - but correct me if I am wrong).

---------------------------------------------------------------------------------

2. Choose your method, 'Compose' or 'Edit HTML'. I prefer the latter because I have more control, but your mileage will vary. Be warned, you will HAVE to use 'Edit HTML' at a later stage.

I also compose my posts in a text editor outside the post window, and when I am satisfied that everything is as I want it, I copy/paste into the editing window and save it (but, of course, Blogger has introduced an 'Auto-save' feature which is an excellent idea!). You can see from the 'screencap' that I have already started to format my paragaraphs and, where required, to italicise or bold the text.

---------------------------------------------------------------------------------

3. Before I upload the image I need to take a look at its size in 'high-res' format. This one happens to be 3008-pixels-wide and 2000-pixels-high (size: 827,906 Bytes).

• Far too large to display as a standalone image in a new window; the viewer would be forced to use scroll bars to view the whole image.
• Far too large to save many images of this size to your (limited) Blogger disk space allocation.
• Far too large for a user with a dial-up connection (DUN) who would have to wait an interminable age for the picture to download and appear on his or her screen.

'Thickbox' will automatically adjust it to a viewable size that will display centred in the available space in the viewing window, whatever the screen resolution the viewer is using, but the other two factors mentioned above are still important, because Thickbox will NOT resize your raw picture for you.

I will now upload the image after having reduced it to 800px by 532px (size: 22,382 Bytes). I simply used Irfanview (discussed elsewhere) to reduce the width to 800 pixels and it did the rest for me:

The first thing to notice is how Blogger 'codes' the HTML for the image. In the 'screencap' I have deliberately NOT posted any text so that you get an idea of what sort of thing you need to look for when you start to fiddle with the HTML. In any event Blogger ALWAYS places the uploaded image at the beginning of your post, regardless of where you last placed your cursor. This is an annoying quirk but, we can use it to our advantage if we know that the last image uploaded will always be the first bit of text you come across when you're editing in HTML.

I have highlighted and arrowed the characters "-h" that appear immediately after "s1600". REMOVE THEM. Do it the first time you see your code so that you don't forget later when you're adding other bits as explained in step 4 below!

---------------------------------------------------------------------------------

4. Here is the same code again, but note the highlighted additions (errmmm... the deletion is obvious by no longer appearing there!).

1. Added the code for centering the paragraph and 'closed' the tag.
2. Added the 'class' telling the script to call up Thickbox.
3. Added the 'title' text.
4. Added the 'alt' text.

---------------------------------------------------------------------------------

Whew! That was a toughie - FOR ME. I began to get confused as to whether I was adding screen captures or the actual picture. Had to delete and re-upload a couple of times. But, if you've come this far, then here is the original David McMahon photograph (slaps head! - must remember to add the copyright):

 

Photograph: © David McMahon

 

That's ALL, folks