Blogger: non-disturbing 'Edit' Icons.

This may come in handy:

What thing a Blogger templates designer could do most often? Viewing the project in a web-browser. This is a tiny action which can be both essential and fulfill a designer's day ;) - because it is necessary to check out how the project looks like after introducing changes - both code- and/or layout-wise (especially when it comes to graphic design). F5 key becomes Your favorite ;) .

One thing You probably want (or expect) is to be able to view the project completely reliably and authentically - the same way Your Guests see it. Sounds obvious, but... when it comes to Blogger a one single surprise popes up :) .

One of the biggest advantages of Google websites platform I know of - is that You are able to edit/configure various parts of Your site without playing with the template's code - or even entering the dashboard (!). When I think about it I find it amazing to this day: it is absolutely a brilliant idea which (for Me) makes a huge difference in designing, making it much more easier and saving much time.

But there is one little thing to it which can be disturbing. Editing/configuring some parts of Your site is possible thanks to 'Edit Icons' which are attached to corresponding gadgets and are visible as long as You're logged in (into Your Google/Blogger account) - directly on top of Your layout. Although it is in fact quite handy - it could be also an obstacle any time You want to view the layout (maybe I'm a perfectionist here :) ).

I've worked it around by viewing projects using the incognito mode in a web browser - but it's not quite comfortable solution. So another idea crossed My mind - as often, inspired by jQuery: what if I could make all the 'Edit' Icons visible only on demand (when I hover the cursor over particular areas I want to work on)? The idea illuminated Me :) - soon after I have My working snippet of code which worked as a charm :) . Now I could design and view the project without any disturbances.

How it works?

1. CSS hides all the 'Edit' Icons by default.
2. jQuery uncovers them if You hover the cursor over their corresponded areas (most often related gadgets).
3. jQuery hide them again - when You move the cursor out of the area.

Sounds simple. Let's have a closer look on the code (accordingly to the description above):

In CSS:

.quickedit { display: none }

In jQuery:

/* admin buttons */

/* SHOW */

$("#PageList1").on("mouseover", function()
{ $('.quickedit', this).css({"display":"block"}); } );

/* HIDE */

$("#PageList1").on("mouseleave", function()
{ $('.quickedit', this).css({"display":"none"}); } );

The example above refers only to one gadget (the PageList - which You probably use to display the main menu of the site). If You'd like to handle several 'Edit' Icons at once, You can solve it like this (in this case there are various DIVs I needed to cover at the time):

In jQuery:

/* admin buttons */

/* SHOW */

$('#TLUFooter, #PopularPosts1, #TagCloud2, #HTML2, #PageList1, #ContactForm1, #QuotesSet').on("mouseenter", function() {

$('.quickedit', this).css({ "display":"block" });

});

/* HIDE */

$('#TLUFooter, #PopularPosts1, #TagCloud2, #HTML2, #PageList1, #ContactForm1, #QuotesSet').on("mouseleave", function() {

$('.quickedit ', this).css({ "display":"none" });

});

Or You can accomplish the same - but in a more elegant way, using so-called jQuery chaining:

/* admin buttons */

$('#TLUFooter, #PopularPosts1, #TagCloud2, #HTML2, #PageList1, #ContactForm1, #QuotesSet').on('mouseenter', function(){
$('.quickedit', this).css({ "display":"block" });
}).on('mouseleave', function(){
$('.quickedit ', this).css({ "display":"none" });
} )

In addition there is another thing You could do to make Your designing easier... and nicer :) . You can change the look of 'Edit' Icons - making them a little bit more standing out and - on the other hand - no so ordinarily looking :) . To achieve that style the .quickedit and .quickedit img elements (!important directive could be necessary).