Brainstorms and Raves

Notes on Web Design, Development, Standards, Typography, Music, and More

Mon

20

AUG

2001

Fun and Handy Blogger Add-ons

When adding resources to the new Links section I came across quite a few Blogger add-ons and features. And if you’re a Blogger user or otherwise visit Blogger’s main page, you may have seen that there are more new ways to tap into blogging your blog, even using your cell phone!

For those not familiar with Blogger, it’s a handy, convenient content management system with optional archiving capabilities and much more—and you can use it even if you don’t know HTML. I initially tried it with clients in mind so they could easily make content changes to their sites themselves (and without messing up the HTML and page layout).

Edit content directly from your site with remote editing.

The latest add-on feature that I’ve implemented here at Brainstorms & Raves is a remote editing capability. What does that mean besides sounding like Dick Tracy? I can go to any of the entries right at the site, click on a (hidden) remote editing link for each entry and edit that post directly within a Blogger pop-up window, without having to go to the Blogger site. It’s really handy for editing!

I’ll show you how.

As I read Blogger’s instructions to implement remote editing, including the discussion at Blogger, I learned what others have done to get this feature to work, so I’ll pass this along to try yourself. So far, I’ve tested this in Internet Explorer 5.5, Opera 5.12, and Netscape 4.72 (all for PC), and it works in each one. Since it’s only for those authorized to edit your blog, you just need to make sure it works for whatever browser is used for editing.

Don’t worry if you’re not a programmer. It’s really just a matter of doing some careful copy/paste of the code. I’m not a programmer either - my expertise is design and development.

Let’s add remote editing to your Blogger.

  1. First, make a backup copy of your template. That way you can go back to that or start over if you wish.
  2. Within your Blogger template, add the <$BlogScript$> tag between your head tags:

    <html>
    <head>
    <title>Blog Name</title>
    <$BlogScript$>
    </head>


  3. The next step is to add Blogger’s remote editing tags within your Blogger body tags. Add the <BlogItemEdit> </BlogItemEdit> tags inside the <$BlogItemBody$>   </$BlogItemBody$> tags something like this:

    <$BlogItemBody$>
    <BlogItemEdit>


    </BlogItemEdit>
    </$BlogItemBody$>


    The area between the <BlogItemEdit> tags will be available for remote editing.
  4. The next step is to add the remote editing link that you’ll be able to click on at your site.

    Add the following JavaScript somewhere within your <Blogger> </Blogger> tags. Feel free to copy/paste the code below into your own template.

    TIP: Make sure there aren’t any carriage returns or spaces within the JavaScript. JavaScript can be picky that way, preventing the code from working.

    <a href="javascript:void(window.open
    ('http://www.blogger.com/
    blog_form_pop-upE.pyra?
    itemID=<$BlogItemNumber$>
    &b=Your_BlogID_Here',
    'editpost','scrollbars=yes,
    width=475,height=300,left=75,
    top=175'));">edit</a>

    [Thanks to Matthias Dittgen for this JavaScript link code via the Blogger discussion.]

    • Find Your_BlogID_Here within the JavaScript code. Replace Your_BlogID_Here with your Blogger ID number.
    • The code above uses the word 'edit' to reveal where the link will appear on your page. You can change that to whatever word you wish, or change it in some way with a font color perhaps to make it more obscure or hidden.
    • Ready to upload your template and try it out? All the code has been added and you can go ahead and upload it. Give it a whirl.
    • Still logged in with Blogger, go to the main page of your web site, locate and click on the remote editing link. A separate popup window should appear. (See the screenshot to see what it looks like.) You can then edit your blog.

Problems?

If you get an error message or have some other problem:

  • carefully check your work and make sure you’ve inserted the tags correctly,
  • make sure there aren’t any carriage returns or spaces within the JavaScript, and
  • make sure you’re still logged in to Blogger.

If all that checks out OK and it still doesn’t work, check the remote editing discussion at Blogger, as they may have the answers there or can assist further.

TIP: I have a separate testing blog that I use for experimenting, so you might consider setting up a separate 'experimenting' blog if you don’t want to experiment on your main blog.

Remote Editing Link

Can visitors see the remote editing link or access your blog account with the remote editing link? Your blog account is only accessible with the password. So even if the link is visible, your visitors can’t access editing capabilities just by clicking on the link.

Regarding link visibility, if you use Blogger’s JavaScript rather than what I’ve shown you in the tutorial above, Blogger states in its discussion area that the editing link is ONLY revealed when you’re already signed in to Blogger, that visitors won’t see it at all. Since there were problems getting that to work, though, I opted for this other script. There are at least 2 or 3 scripts in the discussion archives to try, so keep that in mind.

I’d love some feedback on this too if the original Blogger script is fixed or replaced! So for now I’m making the font color match the background to be more obscured in case visitors actually CAN see it.

To make the link invisible:

I found that if I totally removed text for the link that I couldn’t find the link in Internet Explorer 5.5 (PC version), although it worked fine in Opera 5.12 without any text for the link. So for mine I’ve used a small text character with a font color that matches the background. Someone may find it hovering the mouse around the page for awhile, but it’s not accessible without the user ID and password anyway.

04:52 am, pdt20 August, 2001 Comments, Trackbacks ·

Categories: Weblogs

top


Visit iStockPhoto - Royalty-free stock images. Click Upload Earn, Click Download Create 

I Wrote a Book

Deliver First Class Web Sites: 101 Essential Checklists  Via amazon.com: Deliver First Class Web Sites: 101 Essential Checklists, by Shirley Kaiser. SitePoint Books (July 2006). 

Available now via: SitePoint Books, Amazon.com, Amazon.ca (Canada), Amazon.co.uk (UK), Amazon.fr (France), Amazon.de (Germany), Amazon.co.jp (Japan), Tower Books U.S. and elsewhere! You'll also help support this site and its owner if you purchase via any of these links.

Learn more at SKDesigns - Deliver First Class Web Sites and via SitePoint Books.

Recommended Books

 More Eric Meyer on CSS, by Eric Meyer. Published by New Riders, 2004. 

Build Your Own Web Site the Right Way Using HTML & CSS, by Ian Lloyd. SitePoint (May 2, 2006) 

Hand-picked best book recommendations for Web site design, CSS, graphics, Photoshop, color, accessibility, more

In association with
 In Association with Amazon.com 
http://brainstormsandraves.com/archives/2001/08/20/fun_and_handy_blogger_addons/
Page last modified 14 July, 2007 - 10:24pm PDT Page load time: 0.009415 seconds.