TIP - Screw that Spanner

I may be in a majority of ONE, but I've always disliked the "Screwdriver & Spanner" icons that appear below every widget in the sidebar. I KNOW my visitors cannot see these distractions, and that they only appear on the page of the blog owner, but I don't like the S&S, so there!

It irritates me because I know that I can access the widgets through my control panel, BUT your take might be different. Especially if you've added a lot of widgets and when you look at them in "Add and Arrange Page Elements", you don't have a clue which one is which. If you are in this category, then skip this 'tute'!

And then there is that "Pencil" icon below every post! Do you need it? For my part the answer is an emphatic 'YES', because I've lost count of the number of times I've re-read a post and found a typo that needs a quick correction. At least the "Pencil" takes me directly to the edit window of the post without having to click through several different steps to reach the same area.

 

 

---

 

Want to remove one, or the other, or both? You've come to the right place!

---

 

1. THE PENCIL

Go to Settings | Basic and where it asks you the question, "Show Quick Editing on your Blog?", simply answer "No"

Done.

---

 

2. THE SPANNER & SCREWDRIVER

Only a bit more complicated. That is, if you consider editing HTML as complicated! You only have to insert a bit of CSS code into the CSS already in your template.

Go to Template | Edit HTML, scroll down until you find the CSS properties and insert the following code anywhere on a new line immediately after a closing brace [ } ]:

.quickedit {
display:none;
}

It is a good idea to put a 'commented-out' description of what you've just inserted, so that you can find it again quickly if you wish to reverse your editing.

 

 

---

 

Here is another 'screencap' of the same area I captured in the first pic, showing that the 'spanner has been screwed', but if you start to get withdrawal symptons without them there, retrace your steps and undo what you've just done!

 

 

Happy Blogging!

 

TIP - Mouseover Fun

A comment left on David McMahon's Blog by the blogger david of David's "Images of Nature" Photography Gallery fame, asked how the 'Mouse-over' effect was done on the "Invitation" graphic used on David McMahon's page.

It is a simple Javascript function that anybody can use, so here are some quick instructions on how to achieve it. And since david asked, I trolled across to his site and stole one of his graphics to best illustrate what I am about to do!

 

---

 

1. It isn't necessary to backup your template as you aren't going to touch that side of things!

 

---

 

2. Choose the image you want to display as the permanent image. Do all the image editing you need to display it at its best. One good idea is to give the image a border, one that you will use again in the second image (see below), so that the mouseover transition appears seamless. Try and make it a reasonable size for the display space of your page, but in any event Blogger will give you the best fit when you upload the image.

2a. Now select the image you want to use as the alternative (or mouseover image) and make sure you crop it to exactly the same size as the previous one. If you used a 'frame' of any description make sure that that frame is also used for the second image.

Here are the two images I intend to use, cropped, edited and framed:

 

 

---

 

3. I have decided that the picture of the Purple tulips is the one that will appear as the 'static' image and that the Pink tulip will appear as the alternative, or 'rollover', image.

Open a NEW post. You will not be publishing this one, and will eventually delete it after first saving it as a draft. It is only to help you upload your images and get the code that is returned.

 

 

 

 

---

 

4. Here is the code for the two images you uploaded. Make a note of the bits I have highlighted. That is what you will eventally copy to your actual post, totally ignoring the rest of the Blogger code. You don't want the displayed image to be 'clickable', and for it to open up in a new window. That would sure spoil the effect you are trying to achieve!

 

 

 

---

 

5. All that remains to do is to add the Javascript to 'envelope' the two images, or add the pic URL's to the Javascript, depends on how you see it. And here it is:

 

<table align="center"><tr><td align="center"> <img onmouseover="Javascript: this.firstsrc= this.getAttribute('src'); this.secondsrc= 'http://bp0.blogger.com/_fV9I2C_dAUY/R2Wrh1GGLRI/ AAAAAAAAASM/pn8sq1dh8vc/s400/tulip_pink_round_blu. gif'; this.setAttribute('src',this. secondsrc);" onmouseout="Javascript: this.setAttribute ('src',this.firstsrc);" alt="" src='http://bp2.blogger .com/_fV9I2C_dAUY/R2WrhVGGLQI/AAAAAAAAASE/ gPIt_Eq88zw/s400/tulip_purple_round_blu.gif' /> </td></tr></table>

 

Some things to draw to your attention:

• You can actually copy/paste the code from the box and save it somewhere, preferably in the [ Settings | Formatting | Post Template ] area of your Admin page (see this previous post).
• The SECOND (rollover, mouseover, whatever) picture link is the first one to appear in the script; the FIRST (static) picture link is included as the second link reference - (hey, it's not me being difficult - it's the way the script works!).
• You must (duhhh, obviously!) change the pic URL links in the script to the ones returned by Blogger when you upload your own pics.
• It is IMPORTANT that you make sure that the quotation marks that surround the URL links are single ( ' ) and not double quotes ( " ), as this has a relevance on how the script is executed.

 

---

 

So, did I manage to successfully tip-toe through david's tulips? Let's have a look:

 

 

---

 

Looks okay to me. I guess it's your turn now ...

 

Season's Greetings

 

 

Now, Here's A Question ...

I may as well get some mileage out of building the "Poll-in-a-Post" tutorial to gauge what my visitors think. And why not?

If you have the time, please choose the answer that is closest to what you think. This particular Poll isn't multi-choice, so you will have to put up with what I anticipate your opinions will be.

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

Q. What is your take on the 'tutorials' on this site?

 

 

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 - Multiple Backlinks

Testing a template to destruction
Forget the third column ...
The Banner ...
Testing Times ...

 

If you haven't already done so, you should read the blog post TIP - BACKLINKS below to get a feel for what you need to edit.

Let us assume that you wish to make a post with several 'links', similar to David McMahon's "Post Of The Week" feature. The links above are 'example' links, used for this demo, to display how it might look.

If this is what you want to achieve, follow these instructions:

 

► Click on the "Links to this post" bit in the footer of each post.

► When a new 'Post' window opens, select the Blog in which the link will appear, if you have more than one Blog.

► If you wish, change the title for the post that is going to be generated on your Blog from the one that appears automatically in the box.

► You will find a 'link' already inserted in the text area of the new post.

► Click on 'SAVE AS DRAFT'.

► Do the same thing for each post on each Blog (if there are several) and for each, click on 'SAVE AS DRAFT'.

► Several new 'Draft' posts will now appear in the 'Posts' section of your blog.

► Open up the first one and edit it, adding text above or below the existing URL, remembering to save it as a draft.

► Open the next 'draft' so that you can copy the URL that was placed in it.

► Reopen the first 'Draft' that you edited and add the newly-copied URL to that post. Save it as a 'Draft', yet again!

► Follow the same steps for each of the URL's you wish to link to.

► Now you can 'PUBLISH POST', and you can delete the other 'drafts' that have served their purpose, but which are no longer necessary and which are cluttering up your 'Post' section.

 

Phew! That's it. The explanation has taken longer than the actual task!

 

TIP - Circles Crop - (a post that links to one on another blog)

 

Circles Crop: This Is Simply A Symbolic Image

This is a link to David's "Wordless Wednesday" picture post. He asked for comments, in the form of guesses, as to what the picture signifies.

Most of his visitors are regulars who are familiar with, and love, his 'phraseology' and the majority have guessed at Cymbals (that's the correct spelling, folks!), based on the clue in his sub-heading.

I will go along with the majority. 'Cymbal' it is!

 

TIP - Backlinks

Warning! This could seriously damage your health! Following these instructions could send you loopy trying to jump from one 'screencap' to the next. I'll try and make things easier by opening each of them in a new window, but your 'method' of working may vary, so I shall leave it up to you how you approach the task. CTRL+N will open a new window (or tab) and that might be a better solution for you!

First, a brief explanation. The 'Backlinks' feature enables you to keep track of other posts on the web that link back to your article. It is also an excellent "link-love" attribute that, in its simplest form, raises your page ranking with Google!

You must first turn ON backlinks by going to your Settings | Comments tab and choosing to turn it on. You can turn OFF backlinks for individual posts by expanding the "Post and Comment Options" when you are composing your post and choosing the option.

Finally, in this intro, to answer one of the questions posed by Lee, you choose to activate a backlink on the post you wish to link to, not on your blog. The backlink feature will build a new post on your blog, but more about that later.

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

1. Backup your old template!

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

2. Edit the "nofollow" instruction that appears as the default in all Blogger templates. If you don't, Google won't bother to follow the link, which slightly defeats the object, huh?

When you've edited the template, SAVE it.

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

3. When you find the post or article that holds your interest, and you decide that it is worth linking to it, click on the "Links to this post" in the comments section of the post.

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

4. The next window that opens is the 'page' that the post occupies on your Blog. You probably already knew that each post has its own page and that the Blog 'front' page is a composite of all the posts, but I thought I'd mention it, just in case! At the bottom of the display you will see the "Create a link" invitation:

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

5. When you click on that you are shown a new window. This is a 'Post' window that will create a brand new post and lodge it on YOUR Blog. It is actually a very clever bit of coding by the developers. You don't have to leave the Blog you are visiting to be able to post something new on your own Blog. Now, how cool is that?

The things you need to change have been highlighted in the image below, so I won't repeat myself here. Follow the cryptic clues I've added to the image:

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

6. The following image shows where I made my own alterations and it is something you should consider before getting to the end of the process:

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

7. This is the confirmation that YOUR blog post has been published. If you have your own Blog open in a new window, hit refresh and you'll see that this confirmation message is not a lie:

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

8. The next image shows that, indeed, the 'Post' has appeared as if by magic on the blog of origin. Remember, you did this on somebody else's site. Way to go!

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

9. My preference is to now call up this post on my own site and add, delete or edit the post so that it has a relevance to the post that it has been linked to on the other site. I've added this screen shot to remind visitors that editing in HTML is a cinch with Blogger, because it won't let you post anything that doesn't meet strict validation standards. Shame the templates don't meet the criteria, but that's another story!

For those that are unfamiliar with HTML, or just curious, the instruction to justify the paragraph alignment is missing a double quotation mark ( " ) after the word 'justify'.

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

10. The next image is the same post that appears in #8. above with a little bit of eye-candy and text added. Something you would automatically do to any post that appears on your site:

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

11. The next image is a shot of the original post that you elected to link to. Darn, doesn't seem to have worked!

Patience, people. The Google search engine that finds, itemises, logs it somewhere and then publishes it, is fast, but not as fast as you!

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

12. Voilã, 2 minutes and 37 seconds later the link has appeared. That was the time it took for this link to appear; yours might take longer - or less time! The job's done.

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

I know the explanation seemed to go on FOREVER, but I wanted it to be simple enough for a novice to follow without getting him or herself into a bit of bother. I hope I succeeded.

Standby for a variation on this theme ...

 

Backlinks ...

From: Lee
To: Terry Fletcher; David McMahon
Subject: Backlinks ...

Hi Terry

I came over here at David's suggestion. He wrote a post asking for responses on our own blogs and also asking for backlinks. I responded but when I read the description of how to do a backlink on New Blogger it made absolutely no sense. I do have them enabled. We were wondering if you could explain how they happen and work.

Things I don't understand are which end to start from and how to make it happen in the post, if that is even possible.

Thanks & Peace!

Lee

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

I've never used the "Backlinks" feature in NEW-Blogger, but I couldn't see what the problem could be. So I decided to find a post and link to it. This has got to be an easy one, yeah?

Hmmmm... Bummer!

Tried it FROM; tried it TO; tried it OLD; tried it NEW (hey, that rhymes!). No way, Jose. All I got was a 'New Post' on my Blog, and that wasn't what I, or Lee, or David, wanted. Time to start hunting for a solution from the Guru's on the web. Much good stuff out there, but it all seemed to fall into the usual 'techy-trap' of assuming that everybody knew the basics. They also seemed to concentrate on the "NEW-Blogger Beta", which I assume is when the feature first surfaced. Nada, nada, nada about the current NEW-Blogger that we are all using.

Other, real-life matters intruded, and since time was obviously of the essence I emailed Lee and David and grudgingly admitted defeat. But I promised to continue investigating. As I said in a previous post, "You win some; you lose some!", but it shouldn't be that way. Help should be easily available and just as easily understood.

There is a happy ending, though. More information in the next post ...

 

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!