Nie przeszkadzające ikonki edycji gadżetów Blogger

Jednym z bardzo poręcznych atutów Bloggera jest możliwość konfiguracji gadżetów, czy nawet edycji poszczególnych bloków kodu bez potrzeby korzystania z panelu administracyjnego. Wystarczy że jest się zalogowanym do przypisanego Bloggerowi konta Google - aby w odpowiednich miejscach na projektowanej stronie były obecne ikonki edycji/konfiguracji.

Moim pierwszym pomysłem a propos tych ikonek było uczynić je bardziej widocznymi - stąd ostylowałem je Sobie w zgrabniutkie, kontrastowe kuleczki (lub inne kształty), których kolor dopasowuję do aktualnego projektu (aby zachować kontrast).

Niemniej jednak, przy większej ilości gadżetów ikonki te mogą bardziej przeszkadzać niż ułatwiać: choć ułatwiają edycję, to jednakowoż zakłócają postrzeganie projektu w taki sposób, w jaki będą oglądali go wszyscy inni (czyli bez ikonek). Wylogowywanie się z Google na potrzeby wiarygodnego podglądu projektu nie jest zbyt wygodne (ciągła potrzeba ponownego zalogowywania się), podobnie trzymanie niezalogowanej sesji w osobnej przeglądarce. Stąd też dziś postanowiłem raz na zawsze rozwiązać ten temat, pisząc prosty mechanizm jQuery, pokazujący i ukrywający ikonki edycji tylko wtedy, gdy najedziemy myszką na dany gadżet (tym samym nadal mamy je zawsze pod ręką, a jednocześnie nie psują postrzegania projektu).

Aby wszystko działało sprawnie, najpierw domyślnie ukryłem ikonki edycji w arkuszu CSS:

.quickedit { display: none; }

Następnie już w samym jQuery napisałem taki oto kod:

/* Ikonki edycji admina - start */

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

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

/* Ikonki edycji admina - end */

Zasada działania jest bardzo prosta: definiujesz dwie akcje dla wskazanego (na czerwono) gadżetu (lub gadżetów): jedną, w której kursor znajduje się w obrębie gadżetu - oraz drugą, w której kursor nie znajduje się w jego obrębie. Pierwszej akcji przypisujesz odkrycie ikonki przynależnej do gadżetu (poprzez nadanie jej atrybutu "display: block"), drugiej zaś jej ponowne ukrycie ("display: none").

Cały kod polecam umieścić w gadżecie "HTML/JavaScript" gdzieś na końcu strony (np. w footerze).