TIP - WLW Exposed

I have spent some time exploring the many attributes of 'Windows Live Writer' and it continues to surprise me with its versatility.

Your needs will probably NOT be as demanding as mine (I'm a 'geek' who likes to push the envelope), but even for the simplest of tasks, like putting up a new post, this little gem is going to make your life so EASY that when you start to use it you'll wonder how you managed without the darn thing!

This is truly a WYSIWYG editor of unparalleled excellence, because you actually type into the space allocated to you by your blog template. So, what you see in the window is exactly what you get when the post is published. You can format your paragraphs with the alignment of your choice, 'left', 'right', 'centred' or 'justified' (as this post is). It spell-checks as you type, underlining your spelling mistakes just like a word processor does, so there is no longer any excuse for those hilarious 'typos'. You can even select to  'bold', 'italicise', 'underline', 'strikeout' or 'change the colour of the font' on the fly.

What's not to like about that?

And none of this requires you to get your hands dirty with HTML and CSS. The programme does it all for you, although, in its typical Microsoft way the code produced isn't necessarily 'standards compliant'. But I don't suppose you care about that little nicety if you are an 'average' blogger. You should, but I won't hold it against you!

If you haven't already tried it out you're probably wondering what all the hype is about. So I suppose a couple of graphics are in order. I haven't planned any of this, so I shall post and edit, look at how things are being displayed, change formatting to 'present' the post as I'd like it to be presented, then click on the button that says 'Publish', and it is done …

 

I use 'SnagIt' almost exclusively for my screen captures and this programme comes with a plug-in that allows me to use SnagIt directly from this window. That's a 'wooo-hooo' for me!

 

Of course, the graphics 'sizing', 'placement' and 'effects' are far superior to anything I've seen in any other WYSIWYG editor. And the three little tabs at the bottom of the window, 'Edit', 'Preview' and 'Source' do exactly what they are intended to. 'Edit' is the pane I've shown in the screen captures above. 'Preview' is a preview of your post as it would appear on your site, including banners and sidebars. 'Source' shows you the HTML source code, something I am very grateful for as it gives me a chance to insert the little 'extras' that aren't included. I still have to investigate whether little bits of JavaScript and other HTML formatting can be added to the programme, but if it can't I am not going to get bent out of shape about it.

 

The graphic above is there to emphasise the 'power' of the various features of the programme. When you set up the 'Options' tell the programme to not allow you to publish until it reminds you to add a label or two. You still have the choice of publishing a post without a label, so it will only remind you, not refuse to publish. You can also defer publication date, just like you would do in Blogger, but the option is there for you if you wish to use it.

When I discover more, I'll let you know.

Enjoy, really enjoy, your blogging …

 

 

TIP - Follow me Follow

I was trawling the 'blogosphere' wondering what I could stumble across that would interest the visitors to this site when I came across this little beauty!

There is a simple instuction in HTML that advises search engines NOT to follow certain links from your site, for example the Admin page, or other pages that are critical to the security of your site, and it is simply the 'nofollow' attribute. By default Blogger sets the 'nofollow' attribute for ALL links, and that includes user generated content like 'comments', 'linkbacks' and 'trackbacks'. Removing this tag will provide 'link juice' for your visitors although there is a small danger that you might find an increase in SPAM. This last should not trouble you too much if you take the precaution of setting up your 'Comments' section to use the built-in CAPTCHA capability.

As always, when you are fiddling with the HTML of your template, please take the precaution of backing up the existing template in case things go awry.

BACKUP! BACKUP! BACKUP!

• Go to >> Layout >> Edit HTML
• Check the Expand Widget Templates
• Search and find 'nofollow' in the edit window.
• Delete rel='nofollow' in to-to!
• Repeat the last two steps. There are at least two of these entries, sometimes 3.
• Save your template. You won't see any obvious changes; the advantage gained is in your search engine ranking and the ability you've just given your visitors and commenters to link to your Blog and to a specific post!
• You're done!

 

Instructions for removing the 'nofollow' tag..

 

Enjoy your increased exposure ...

 

TIP - Tools Of The Trade

I have touched on the subject of the tools you should try to use in a previous post, but I wanted to introduce another 'clever' little script and decided that it was worth resurrecting the advice so that I could '... kill two birds ...', in a manner of speaking!

 

A screenshot of EditPad Pro in use.

The thumbnail on the right is a screenshot of my favourite text editor. If you mouseover the image you will see the effect I am introducing you to in this post. Like 'Thickbox' and 'Lightbox', this is JavaSript, and it provides one way of displaying your graphics without costing you much in the way of overhead. The actual image is a large(ish) 912px by 710px display, and I have set the parameters for this display to show the image at its full scale, because I have textual matter in the image that I want my visitor to read. In practise, especially if you only want a photograph to be displayed at a larger size than the thumbnail, the larger image can be set to any reasonable size that can be accommodated within an average viewers browser window; probably 800px by 600px would be sufficient to showcase any image you post. The script also has a hidden function that allows the viewer to go to the full-sized raw image when clicked. This is good for Blogger, where clicking on an image usually takes the viewer to the raw image in another window.

 

EditPad Pro displaying 'syntax coloring'
for an HTML document.

Similar screenshot, but this time with the HTML document tab selected. Here you can clearly see the colour coding or 'syntax coloring' of the HTML document (stop squinting at the back - mouseover the image!) which makes it a breeze to check all the different lines of code. It also helps if you activate the line numbering feature. Most of these features are available in the 'Lite' version which is FREE for personal use. You really should visit the EditPad Lite homepage (it will open in a new window!) to check out the many features.

I was an avid user of EditPad Lite for years, then one day I realised I used it so frequently that perhaps the Pro version was something I ought to be investigating. Not one to part with my money easily, I checked (and double-checked) the features page and realised that there were some Pro features that would make my life a whole lot easier. So, out came the credit card. And being an impulsive sort of guy, I also bought AceText at the same time. I will introduce you to the author, Jan Goyvaerts, in my next post. Suffice it to say that he writes small utilities that do exactly what they say they will do, and you get lifetime updates and support. What's not to like about that?

BTW, I composed this whole post in EditPad, copied it and pasted it into the 'Edit HTML' window, NOT the 'Compose' (or WYSIWYG) window of the post. I previewed it, tweaked anything that didn't appear to display as it should, and then hit 'PUBLISH POST'. Done!

So much for the 'clever' thingy I promised to introduce you to. Now you have an idea how it works. The 'mouseover' effect enlarges a thumbnail without the visitor having to leave the page. And, if they really want to see the raw image, all they have to do is click the enlarged image to be taken to it.

Cool, huh? But you'll have to wait for the next post to read the full 'skinny' on the 'how to' ...

 

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 - Polls (apart) ...

From: David McMahon
To: Terry Fletcher
Subject: Polls in a Post ...

El Tel

Off the top of your head, can you remember the icon that produces a poll in New Blogger? Having done so many all those months ago, I'm scratching my head because I want to embed one in a post!!

Cheers.

David

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

Another hot potato!

Why? Because, although I know about the 'Poll' feature introduced by Blogger, I'd only ever tried it out in the side panel where it is automatically lodged if you elect to run a Poll on your page.

How does one add a Poll to a Post? "Piece of cake," was my first thought on the matter. I figured I'd add an <iframe> and insert the code for the Poll into the <iframe>, and that would be that! Yeah, sure! You can try that approach and see how far it gets you.

So, it was off to "Google-Blogger-Land" to see what solutions were on offer. I stumbled across one or two articles about Polls, hundreds commenting they couldn't even find the feature on their site and others, who were able to find it, asking for the feature to be rolled out to include the ability to insert a Poll in a Post. Of course, you've probably guessed by now, most of these discussions were based on NEW-Blogger Beta, at the time that Polls were added as a 'Nice-to-have' feature. Sometimes I despair.

The current state of affairs is that the Poll feature has been rolled out as a 'widget' that can be accessed via the 'Page Elements' of your customization menu. It is a simple "click and accept" feature and, as far as it goes, it works fairly well. There are a few limitations, but it appears that nothing is going to be done to enhance the feature further.

What about a "Poll in a Post"? Tough! This feature is not available, and there isn't any clue as to whether it ever will be. Does that mean it can't be done?

Absolutely NOT!

But it currently calls for a bit of HTML and Template fiddling, and most casual Bloggers will probably not be interested in implementing something that isn't a 'click-and-go' feature.

For those that think it is a 'cool' idea to occasionally add a Poll to a Post, I shall roll out a 'tute' with screencaps in my next offering.

Watch this space ...

 

TIP - Alternative Displays

This is an alternative display, using "Thickbox", for a series of small thumbnails that, when clicked, will take the viewer to a 'Gallery' display without actually leaving the page.

If the "Thickbox" script works as it should, you will be served up a larger image, superimposed on this page, and you will see 'navigation' links from one picture to another. What more can you ask for?

The following series of pictures are of some very attractive young ladies that 'T3 Magazine' uses to advertise their electronic goods. You have to look closely to actually see the electronic items in question (for instance, the fashionable pelmet that girl #8 is wearing detracts somewhat!), but that's OK, because I'm not really advertising for them.

So, here goes!

  

  

  

I have to strongly emphasise that the series of pics above are not 'sexist' in any way; they were used because they were a convenient 'series' available on my hard drive. Oh, okay, and for a bit of entertainment for the lecherous old men that might visit this page. (see the comment by Anonymous)

That's the end of the demo. You should now have a clearer idea about what you can accomplish on your Blog. Whether it is an 'iBlogger', 'Wordpress' (Wordpress has it built in as a plugin!), or any other.

In line with David McMahon's philosophy of trying to help as many interested bloggers as possible, I am more than willing to help, either here or one-on-one, anybody that asks. If I find that several 'peeps' ask the same question I may resort to using this medium to provide a full explanation so that bloggers can drop by and pick the ideas they wish to use.

Happy Blogging!

Ahem ... !

I blithely motored on describing how to implement the new banner headers that you are all impatient to try out, and managed to gloss over a hint or two about the images you are preparing to replace your current banner header.

This isn't a show-stopper, more in the way of a 'tip'. If you have a template that uses rounded corners then you should attempt to imitate the same display so that the new banner header integrates seamlessly. I have to assume that you are perfectly adept with your imaging software and that it can handle 'layers' - or this tip won't work.

You can slave over your imaging software and build your rounded corners laboriously. Or you can cheat!

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

1. Navigate your way to the HTML code of your template (I shouldn't have to explain how!) and find Blog Header, and you should see a couple of URLs that are clearly pointing to graphics lodged on the Blogger servers:

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

2. Typing in those URLs will get you a page with the graphic, but I will make it easy for you if you are using the Rounders-3 template: just click on the following URLs to take you there - in a new window! Each template uses different backgrounds and it is important that you 'lift' the graphics for the specific template you are using.

http://www.blogblog.com/rounders3/corners_cap_top.gif
http://www.blogblog.com/rounders3/corners_cap_bot.gif

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

Both sets of corner images are GIFs on a transparent background. You need to copy them (right-click, 'save image as') and then all you need to do is to 'import' them to the banner image you are constructing, align them top and bottom overlaying the original image, and you now have an image with neatly rounded corners!

Easy, huh?

 

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!