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 . . .

 

Own It . . . !!

There are millions of bloggers, using various blogger engines, which means there are millions of templates in use. And your template of choice is going to end up being similar to many thousands of others.

So what's so terrible about that? Absolutely nothing!

The templates have been crafted with love and care and enthusiasm, and have been made available to all blog users - FREE of charge. But you can make it your own - "Own It!" - by changing only a few parameters. The colour combination for one thing; the banner header for another.

Any change you undertake will make your template UNIQUE. The base template will remain the same as the thousands of other, similar templates, but it will have your personal touch stamped all over it. Which will tell your visitors that you care. Not just about the content, but how you wish to serve up the dish!

What you have to say on your Blog, the most important part, is still your own unique footprint on the web. Don't ignore the fact that the container in which you display it is also within your remit for change.

David McMahon posted a series of three pictures of the sunset on his shortest day of the year on his authorblog a few days ago. Apart from the phenomenom that Oz was experiencing their shortest day whilst the rest of us in the northern hemisphere were 'clebrating' the longest day, the pictures were of the usual high quality one expects from the man. I marvelled at the images he had captured and then a blindingly obvious thought struck me. Those pictures, untouched, matched the overall colour scheme of his 'Rounders 3' template. I wondered how one of those might look if it could be used as a banner for his site.

Long story, short. I fiddled around in Photoshop and came up with something I thought might appeal to him. I was still hesitant, but after a bit of encouragement from my 'better-half', Maria, I forwarded the idea to David. In true McMahon fashion (and I won't repeat the Aussie expletives from his email) he was delighted and enthusiastic and said he'd incorporate the idea as soon as he could find the time (Wendy in hospital, Blogger awards, deadlines to meet at work . . . and the rest!).

So I offered to do it, and he accepted. Don't misunderstand. This doesn't happen all the time, and to repeat a quaint Aussie expression that David uses frequently, ". . . neither of us paints the other guy's fence!" It is just something one bloke does for the other without any expectation of a reciprocal act. Mind you, I am ahead of the game, considering the amount of original stuff he pushes my way for publication on my main website Anglo-Indian Portal.

The change to David's banner header seems to have been generally accepted as a good move. And now I have a comment from YesBut encouraging me to "bring it on!"

How can I refuse?

Standby for the next post . . .

 

Leap of Faith . . . Editing your template for Thickbox

This is your 'leap of faith'. This is where you have to make a decision as to whether stepping out into the unknown is worth the end result. I have shown you what you can achieve; you have to decide whether it is worth the effort. I will hazard a guess that most of you decide that it probably is!

So, let us make a start.

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

1. Call up your page in a new window and check that you're 'signed in'. You should now have this tutorial and your homepage open, either as two separate windows or two tabs (IE7 or Firefox or whatever), and you will need to switch between windows to complete the various steps I will outline.

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

2. Click on 'Customize' (I vill zay zis only vunce - all editing is being done on YOUR page!).

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

3. Choose to 'Edit HTML' when you are faced with these choices.

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

4. Save your template (but see below) . . .

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

5. My preference for saving a template is to copy the template from the editing window by positioning the cursor in the window, pressing 'Ctrl+A', then 'Ctrl+C' (this will select all the text in the window and copy it to the clipboard). Now paste the copied text into your text editor (Notepad or one of the editors I've recommended previously), by opening it and pressing 'Ctrl+V'. Then SAVE that as a text file, with a name you can recognise easily, and in a place that, if you need to, you can find it quickly.

Note: do NOT use a word-processing package like 'Word' as this will corrupt the text you've just saved. For the 'geeky', the difference is between UTF-8 and UTF-16, but that's another story for another time!

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

6. Find the last 'close brace' above the '</head>' tag. You could scroll down (see image), but the easiest way is to click the 'Edit ---> Find on this page' link in your browser and type '</head>' (without the quotes) into the box and click 'Next'.

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

7. Insert two or three returns between the curly bracket and the line that reads "]]></b:skin>". If your template doesn't have this line, insert the following code just above the '</head>' tag and it will still work! Copy & paste the code in the box:

/* ----- thickbox settings ----- */ #TB_window { font: 12px Arial, Helvetica, sans-serif; color: #333333; } #TB_secondLine { font: 10px Arial, Helvetica, sans-serif; color:#666666; } #TB_window a:link {color: #666666;} #TB_window a:visited {color: #666666;} #TB_window a:hover {color: #000;} #TB_window a:active {color: #666666;} #TB_window a:focus{color: #666666;} #TB_overlay { position: fixed; z-index:100; top: 0px; left: 0px; background-color:#000; filter:alpha(opacity=75); -moz-opacity: 0.75; opacity: 0.75; height:100%; width:100%; } * html #TB_overlay { /* ie6 hack */ position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); } #TB_window { position: fixed; background: #ffffff; z-index: 102; color:#000000; display:none; border: 4px solid #525252; text-align:left; top:50%; left:50%; } * html #TB_window { /* ie6 hack */ position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px'); } #TB_window img#TB_Image { display:block; margin: 15px 0 0 15px; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; border-top: 1px solid #666; border-left: 1px solid #666; } #TB_caption{ height:25px; padding:7px 30px 10px 25px; float:left; } #TB_closeWindow{ height:25px; padding:11px 25px 10px 0; float:right; } #TB_closeAjaxWindow{ padding:7px 10px 5px 0; margin-bottom:1px; text-align:right; float:right; } #TB_ajaxWindowTitle{ float:left; padding:7px 0 5px 10px; margin-bottom:1px; } #TB_title{ background-color:#e8e8e8; height:27px; } #TB_ajaxContent{ clear:both; padding:2px 15px 15px 15px; overflow:auto; text-align:left; line-height:1.4em; } #TB_ajaxContent.TB_modal{ padding:15px; } #TB_ajaxContent p{ padding:5px 0px 5px 0px; } #TB_load{ position: fixed; display:none; height:13px; width:208px; z-index:103; top: 50%; left: 50%; margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */ } * html #TB_load { /* ie6 hack */ position: absolute; margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px'); } #TB_HideSelect{ z-index:99; position:fixed; top: 0; left: 0; background-color:#fff; border:none; filter:alpha(opacity=0); -moz-opacity: 0; opacity: 0; height:100%; width:100%; } * html #TB_HideSelect { /* ie6 hack */ position: absolute; height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); } #TB_iframeContent{ clear:both; border:none; margin-bottom:-1px; margin-top:1px; _margin-bottom:1px; } /* ----- end of thickbox settings ----- */ /* ----- start of Terry's settings ----- */ .img_left { /* terrys hack */ float: left; margin-right: 20px; margin-bottom: 6px; } .img_right { /* terrys hack */ float: right; margin-left: 20px; margin-bottom: 6px; } .clear { /* terrys hack */ clear: both; } .dropcap { /* terrys hack */ font-family: times; color: #8CA3BB; font-size: 70px; float: left; padding-right: 2px; padding-top: 2px; line-height: 60px } /* ----- end of Terry's settings ----- */

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

8. This is what it should look like after you've pasted in the code. Still with me?

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

9. Find the '</head>' tag again, then copy/paste the following code just above it:

<script src='http://www.tapmal.com/thickbox/jquery.js' type='text/javascript'/>     <script src='http://www.tapmal.com/thickbox/thickbox.js' type='text/javascript'/>

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

10. This is what your template should look like after you've pasted in the relevant code.

A brief explanation: the code is telling the blogger engine where to find the JavaScript sources for the Thickbox to work. I have currently pointed it to my own server, which will always be available with the most up-to-date "js" scripts for this function. You see, I use this path as well, so you can be certain that as long as I am on the web, you don't have to worry about where to get your JavaScript or your animated 'loading' GIF.

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

11. You can click on the 'PREVIEW' link, but you won't notice any change to how your blog displays, and that is because the bits of code we've put in don't actually change how your blog is displayed UNTIL you call the specific function. But more about that in the next post.

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

Now 'SAVE' your template (you already have the original so you don't have to be too concerned) and 'View' your blog. No difference? Bravo! That means all the 'tweaking' you've done was completed successfully!

So far, so good! Now you just have to wait for the second part to see how to 'edit' each of your picture posts to achieve the 'Thickbox' effect.

Come back again, soon!

 

KISS

KISS or Keep It Simple Stupid has always been a favourite adage of mine, student or instructor, man and boy!

I spend hours trawling the web for information and it is only when I am researching something specific that I have the patience to read ALL that an article or post contains. Even then I tend to skip huge chunks when it becomes apparent to me that the author is being self-indulgent about his or her subject by mentioning every trivial detail.

Of course, there is a delicate balance in deciding how one imparts information. Assuming that the reader has absolutely no knowledge of the subject is presumptuous and a bit supercilious, and can often give offence. Yet, assuming, often erroneously, that the reader has a basic understanding of the subject and skipping some parts that might seem too trivial to mention, turns the exercise into a total waste of time for many!

To be honest, I don't have the answer to how to handle the balance. So, anything I write in this Blog is just going to have to be aimed at the 'lowest common denominator', which should meet the requirements of the majority although it might be boring for a few. To the latter I just have this to say; I am sure you can find similar information elsewhere that will appeal to your level of intelligence and understanding. This blog is here to help those who are just about to dip their toes in the water!

If you've read this far I have to assume that you have an interest in wanting to do something with your blog, but have been too hesitant to ask. Well, now is your chance. No question or request will go unacknowledged. You'd be surprised at how many people, myself included, glean information by just reading questions and answers. Sometimes it is pertinent, sometimes it can be ignored. But if nobody asks, nobody gains. And my crystal ball is fairly cloudy at the moment!

A Forum would be a better vehicle to handle questions and answers, but actually handling the queries on a Blog page gives the viewer a visual idea of how things should ultimately turn out. The fact that this is a New Blogger blog somewhat limits the information to users of that resource but, since the initial request(s) have been from bloggers who use this software, this is what it will continue to concentrate on.

I shall post a few general 'hints' and 'tips' to keep the ball rolling, but it is only you that can keep the whole thing 'alive'.

Over to you.