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