Come rendere trasparente la Barra delle App di Windows 10.

La Barra delle Applicazioni di Windows 10 può essere personalizzata insieme al menù Start come abbiamo visto in un precedente articolo. In questo post riprenderò brevemente il tema per mostrare nel dettaglio come rendere completamente trasparente la Barra delle Applicazioni.

Infatti  andando su Impostazioni > Personalizzazione > Colori si può cliccare sul cursore per rendere trasparente Menù Start e Barra delle Applicazioni. Con questo sistema però non si potrà nascondere completamente tale Barra visto che si potrà settare un minimo di opacità solo intorno al 10-15%.

Personalizzare la Barra di Notifica per dare l'assenso ai cookie.

Aggiornamento: A seguito di script e modifiche dello stesso operate da Google per i siti su piattaforma Blogger vanno seguite le indicazioni di questo post più recente:

   Come personalizzare il banner di Google per i blog su Blogger -

Con questo post ho intenzione di chiudere almeno per il momento l'argomento dell'accettazione dei cookie di profilazione da parte dei lettori. Facciamo un breve resoconto delle puntate precedenti. Il Garante della Privacy ha fatto suo un regolamento della Comunità Europea che impone agli webmaster di avvertire i lettori che potranno essere registrate da un cookie di profilazione molte loro azioni compiute nello stesso sito a fini di migliorare la pertinenza degli annunci pubblicitari. 

I cookie di profilazione non vengono usati solo dai circuiti pubblicitari ma anche per esempio da Facebook per avere un profilo più analitico possibile dei suoi utenti sempre per mostrare pubblicità più mirata. In sostanza i proprietari del sito hanno installati banner pubblicitari, bottoni di Facebook, Google Analytics e altri strumenti che permettono di monitorare i lettori. Il Garante ritiene che i lettori debbano dare il loro assenso prima di iniziare la navigazione di un sito web. Per fortuna tale assenso può valere per un lasso di tempo molto lungo pari a un anno. 

Sticky Sidebar con JQuery per Blogger per condividere sui social network.

Sticky Sidebar JQuery è un plugin che mostra in verticale i bottoni di condivisione sui social network. Rispetto a versioni che ho precedentemente illustrato (prima versione e seconda versione), viene utilizzata la libreria JQuery che permette lo scorrimento della barra lasciandola flottare allo scorrere della pagina. Serve per dare la possibilità ai lettori del blog di condividere i singoli post sui vari social network quali Facebook, Twitter, Stumbleupon e Pinterest.

E' presente anche una icona per l'iscrizione ai feed del blog. Per avere una idea di come funzioni questa barra date uno sguardo alla apposita demo che ho postato online

Barra flottante con i bottoni di Facebook, Twitter e Google+.

La condivisione dei post sui social network è diventata una abitudine per i navigatori tanto che praticamente tutti i siti si sono dotati degli appositi pulsanti per facilitare tale operazione. C'è chi preferisce mettere i bottoni di condivisione all'inizio del post, chi li ama vedere alla fine e chi ha invece optato per posizionarli nella sidebar.

Un'altra opzione che vedo sta prendendo molto campo è quella di una barra di condivisione flottante in cui vengono inseriti tutti i principali bottoni. Ho già presentato un codice per mostrare i bottoni in una barra verticale in cui avevo inserito i pulsanti di Facebook, Google Plus, Twitter, Stumbleupon, Digg e Google Buzz.

Nel frattempo però Google Buzz è stato ritirato mentre Digg e Stumbleupon non sono molto popolari soprattutto in Italia. Ho quindi pensato di illustrare un altro sistema di realizzazione di una barra verticale flottante, vale a dire che rimane fissa durante lo scroll della pagina, con i soli bottoni di Twitter, Google Plus e Facebook. Per quest'ultimo social network ho inserito due opzioni, il pulsante Mi Piace e il pulsante Share per dare una doppia scelta di condivisione ai lettori. Tutti questi bottoni sono dotati di contatore che mostra il numero delle condivisioni

Barra con i pulsanti di Facebook, Google PlusOne, Stumbleupon, Twitter, Digg e Google Buzz.

Dopo l'introduzione di Google PlusOne è il caso di aggiornare il codice della barra flottante di condivisione che è stata adottata da molti di voi. Per il momento non sono riuscito a includere lo script di Google PlusOne direttamente nell'elemento pagina e quindi bisogna incollare una riga di codice nel modello. Potrebbe dipendere dal fatto che questo bottone ha solo un giorno di vita. Se ci fossero delle novità sarà mia cura aggiornare questo post. Dopo la installazione sarà visualizzata nel blog una barra verticale per condividere gli articoli sui vari social network che rimarrà immobile allo scorrere della pagina, come è possibile vedere in questa

• Demo dei pulsanti flottanti di FB, Google +1, SU, Twitter, Digg e Google Buzz -

 

Effetto Groovy 1970s per inserire barre colorate e animate sullo sfondo del blog.

Dallo stesso autore del Tinkerbell Mouse Effect di cui potete vedere una demo in questo post, e che crea una scia di stelline colorate al passaggio del mouse, vi presento il Groovy 1970s Effect. Si tratta di visualizzare nello sfondo del blog delle animazioni di barre colorate di cui si possono personalizzare i colori, la velocità e la dimensione.

Si può vederlo all'opera nello sfondo del blog che uso come motore di ricerca esterno: Demo Effetto Groovy 1970s. Le animazioni sono visualizzate solo nella parte di background non occupata dai contenuti del blog come l'area del post e le sidebar

Mostrare una immagine che indica lo stato di caricamento di una pagina del blog.

Ci sono blog che impiegano molto tempo a caricarsi perché sono pieni di immagini pesanti e di widget. In questo caso può essere carino inserire una immagine che mostra al navigatore lo stato di caricamento della pagina che è stata aperta. In rete ci sono almeno un paio di siti che offrono gratuitamente delle immagini a questo scopo.

Ajaxload.info consente di selezionare l'immagine animata che più ci piace da un menù verticale

Si possono selezionare anche il colore di sfondo e quello in primo piano (background e foreground). Si clicca su Generate It per creare l'immagine personalizzata quindi su Download It per scaricarla.

Come personalizzare o nascondere la Navbar negli ultimi modelli di Blogger.

La Barra di Navigazione è quell'iFrame orizzontale che si vede nella parte alta dei blog su Blogger. Sembra che negli ultimi modelli il metodo per nascondere la Navbar, così si chiama, non funzioni più bene. Vediamo quindi in dettaglio come personalizzarla, per chi la ama, e come nasconderla per chi non la sopporta. La barra ha diverse funzioni che sono oggettivamente utili e quindi, da questo punto di vista, mantenerla adattandola al blog sarebbe la scelta più giusta

Se non siamo loggati, si visualizza la scritta Entra che muta in Esci dopo che si è eseguito l'accesso. La casella di ricerca serve per trovare articoli del blog che hanno una data parola chiave. Gli articoli sono consultabili anche incollando nel browser un indirizzo come questo

http://nomeblog.blogspot.com/search?q=query

Come nascondere la Barra di Navigazione o Navbar su Blogger.

Ci sono blogger che non possono fare a meno della Barra di Navigazione perché gli permette di accedere rapidamente nelle pagine di gestione del blog cliccando su Entra nella parte destra della Barra.

La Navbar può essere configurata scegliendo tra vari colori e può servire anche per scoprire nuovi blog su Blogger cliccando su Blog successivo. Andando su Condividi, il navigatore può postare l'articolo su Twitter, Google Buzz, Facebook e Google Reader. La configurazione si fa da Design > Elementi pagina cliccando su Modifica all'interno dell'elemento corrispondente.

C'è anche il pulsante Segnala un violazione che è stato messo dal team di Blogger con le migliori intenzioni per cercare di mettere un freno ai blog di spam o a blog non in linea con i termini del servizio. Il mio sospetto è che ci sia chi ne abusa.

Come rendere visibile la Barra di Navigazione (NavBar) su Blogger in quei modelli in cui non è presente.

Per il compleanno dei dieci anni, Blogger sta inserendo molte altre funzioni. Nel precedente articolo ho parlato del bottone Condividi per postare gli articoli su Facebook, Twitter o inviarli via email.

Ho anche precisato che in molti modelli questa barra è stata tolta. Se adesso si volesse ripristinare perché comunque è veicolo di importanti servizi dobbiamo pensare che ogni modello fa storia a sé, quindi non ci possono essere delle procedure comuni, darò quindi delle linee guida di tipo generale. Guardate per esempio come si presenta questo blog di video costruito con il modello Professional

Se vogliamo inserire nuovamente la NavBar dobbiamo andare su Layout > Modifica HTML e cercare, cliccando su F3 oppure Ctrl+F il tag navbar.

Troviamo il seguente codice

/* Blogger Navigation Bar */
#Navbar1 {
margin: 0;
padding: 0;
visibility: hidden;
display: none;
}

Anche i non esperti capiranno da visibility: hidden; e display: none; che la navbar viene nascosta. Se invece si vuole ripristinare dobbiamo

1. Selezionare, copiare e salvare questo codice in un file di testo a futura memoria nel caso volessimo eliminare nuovamente la NavBar
2. Eliminare semplicemente tutto questo codice e Salvare il modello

L’aspetto del blog adesso sarà cambiato e sarà visibile la barra di navigazione con tutte le sue funzionalità, tra cui il bottone Condividi

 

Per gli altri modelli mancanti della NavBar si può fare una cosa simile, però ricordatevi sempre, prima di cominciare, di salvare il modello per evitare di combinare casini.

 

Inserire in Blogger una Barra dei Menu senza modificare il modello.

Questo argomento l'ho già accennato in questo articolo ma forse è il caso di riprenderlo perché ho ricevuto diverse richieste in tal senso.

Fissiamo alcuni punti fondamentali

• Esistono modelli di Blogger che prevedono una specifica Barra dei Menù quindi in quel caso è inutile e dannoso intervenire
• Nessun modello di Blogger tra quelli di default che vengono proposti all'atto di creare un blog prevede tale Barra; quindi è a loro che è rivolto questo articolo
• La Barra dei Menù può essere inserita anche modificando il modello, segnatamente i fogli di stile e ci sono diversi post in rete che spiegano come fare
• Il procedimento che adotterò non prevede la modifica del template ma solo l'aggiunta di un gadget o elemento pagina che dir si voglia.
• Occorre fare un programma delle voci da inserire p.e. Home, Profilo, Scambio Link, Email, ecc.
• Bisogna sapere di quanti pixel può essere lunga questa Barra dei Menù e quindi regolarsi di conseguenza con i singoli elementi

Nel caso di questo blog la Barra può essere lunga al massimo circa 900-950 pixel ma possiamo farla anche più corta per lasciare la possibilità di inserire un'altra voce in futuro.

Per quanto riguarda le pagine da collegare queste devono avere tutte un URL già acquisito. Home e Profilo si può ricavare da Blogger; Scambio Link nel mio caso è un post retrodatato che uso per scambi di collegamenti con altri blog. Email merita un discorso a parte perché ci sono due possibilità

1. Se volete che i vostri lettori vi possano mandare delle email direttamente cliccando sopra al collegamento allora il link dovrà essere
   mailto:mionome@dominio.it
   dove nell'ultima parte colorata di rosso inserite la vostra email
2. Se invece volete che i vostri visitatori aprano un modulo per inserire i loro messaggi allora leggetevi questo post e inserite il collegamento alla pagina come è lì specificato.

Considerate la lunghezza delle parole che compongono i collegamenti e dei relativi spazi

• HOME  4 lettere più 2 spazi per un totale di 6 (inizio e fine parola)
• SCAMBIO LINK  11 lettere più 3 spazi per un totale di 14
• PROFILO   7 lettere più due spazi per un totale di 9

Moltiplicate per un numero adeguato le lettere di ogni collegamento; per il mio modello 12 va bene, in un altro caso scegliete un numero più grande o più piccolo. Allora

• HOME sarà lunga 6x12=72 pixel
• SCAMBIO LINK    14x12=168 pixel
• PROFILO              9x12=108 pixel

e così via. Adesso occorre aprire un programma di grafica; io ho utilizzato Photoshop ma anche il gratuito Gimp va più che bene. Per ogni parola aprite File>Nuovo di larghezza uguale ai pixel voluti e di larghezza adeguata. Un'altezza che vada da 14 a 20 pixel è adeguata

Impostate lo sfondo Trasparente oppure Bianco quindi cliccate su OK. Sulla sinistra selezionate lo Strumento Testo ed il Colore adatti al vostro blog

    

Cliccando due volte sul colore si può impostarlo conoscendone il colore numerico in esadecimali. Per saperne di più su questo argomento potete consultare questo articolo o quest'altro.

Adesso digitate il testo del vostro collegamento dopo averne scelte le caratteristiche di font e grandezza

Con lo Strumento Sposta posizionatelo adeguatamente nel posto desiderato

   

quindi File>Salva con nome e scegliete un formato JPG, GIF o PNG. Eseguite lo stesso identico procedimento per tutti i collegamenti che volete creare, modificate soltanto la larghezza a seconda della lunghezza della parola.

Adesso aprite l'editor di Blogger con Nuovo Post ed inserite le immagini che avete appena salvato partendo dall'ultima in ordine di posizionamentoe scegliendo Nessuno come Layout

Adesso con il mouse e il drag & drop posizionatele orizzontalmente, quindi selezionatene una per una e incollateci il collegamento voluto cliccando sull'icona della catena

Nel caso di EMAIL mettete l'espressione mailto:indirizzo email se volete il collegamento diretto al programma di posta elettronica predefinito.

Adesso passate alla visualizzazione in HTML e copiate tutto il codice che avete generato

Andate in Layout>Elementi pagina>Aggiungi gadget>HTML/Javascript ed incollatelo nel corpo dell'elemento

Quindi Salva e posizionatelo in alto dove sta di solito la Barra dei Menù

Adesso non resta che Salvare e Visualizzare il blog.

Nel vostro blog resterà una Bozza non pubblicata che si riferisce a questo post di escamotage che abbiamo creato

Cliccate su Elimina e quando vi si chiede se eliminare anche le immagini mantenetele altrimenti vi scomparirà tutta la vostra Barra.