Inserire un'immagine accanto al titolo del blog, piattaforma Blogger

Per mettere un'immagine accanto al vostro titolo del blog è abbastanza semplice e veloce.

Andate su Modello > Modifica HTML e selezionate "Espandi i modelli widget" e cercate questa riga con Ctrl+F:

commenti (1) | | Read More...

Menù a tendina verticale personalizzato con le etichette di Blogger.

Prima di tutto se avete già installato il gadget andate al passaggio successivo, se invece ancora non lo avete messo sul blog, cliccate su Layout > Aggiungi un gadget > Etichette, in sostanza noi andremo a trasformare la classica nuvola di etichette standard di blogger in un menù a tendina come vedete nelle 2 immagini chiusa/aperta.
.

commenti (1) | | Read More...

Descrizione con immagine in miniatura delle elichette di Blogger

Vediamo come inserire e personalizzare un messaggio con miniatura per ciascuna tag che ci interessa più di altre, se non tutte.

Come prima cosa andate su Modello > Modifica HTML e fate una copia del template perchè non si sa mai. Dopo che avete o non avete fatto la copia cliccate su espandi modelli widget e cercate con Ctrl + F la seguente riga:

<b:include data='top' name='status-message'/>

Ricordo che il blog non sarà appesantito perchè sono presenti i tag condizionali che fanno caricare il messaggio solo nella pagina relativa. 

A parte dobbiamo ora creare la sintassi da seguire per ciascuna etichetta che sarà questa:

<b:if cond='data:blog.url == &quot;http://nome-blog.blogspot.com/search/label/nome-etichetta&quot;'>
<div id='MsgEtichetta'>
<img src='URL_IMMAGINE' style='float: left; border:0; margin: 0px 5px 10px 0px;'/>
... Testo messaggio ...
</div>
</b:if>

Dopo che avremo personalizzato questo codice con l'Url della immagine il testo del messaggio ecc.. possiamo incollarlo immediatamente sotto alla riga che abbiamo cercato precedentemente. Il testo del messaggio può anche essere formattato inserendo grassetto (<b>), corsivo (<i>), salti di riga (<br/>) e link (<a href="URL">Testo ancoraggio</a>). 

Ii numeri dopo margin rappresentano la distanza nelle quattro direzioni tra l'immagine e i bordi. Gli attributi dopo style accanto all'URL della immagine servono per lo stile di quest'ultima. Nel codice proposto viene inserita a sinistra, senza bordo e con i margini dati dai quattro valori numerici. 

Adesso bisogna cercare la riga:

]]></b:skin>

e immediatamente sopra, incolleremo questo blocco di codice CSS:

.status-msg-wrap {visibility:hidden;display:none;}

#MsgEtichetta {
background:#FDBCB7; /* Colore dello sfondo */
color:#003366; /* Colore del testo */
padding:15px;
margin:4px 4px 15px 4px;
}

Dopodichè si salva il modello. La prima riga del blocco serve per nascondere il messaggio che appare sempre all'inizio di tutte le pagine delle etichette di Blogger.

I valori evidenziati in rosso possono essere personalizzati come li si vuole e riguardano il colore del testo (#003366), il colore dello sfondo (#FDBCB7), la distanza tra il testo e il bordo (padding:15px) nelle quattro dimensioni e la distanza tra il rettangolo e il layout in ciascuna direzione da fissare in senso orario a partire dall'alto (margin: …).

commenti | | Read More...

Come eliminare la nevbar dal blog - blogger

Per togliere dal blog la Navbar, ovvero la barra di navigazione in alto nella pagina nei template base di e renderla invisibile ai visitatori è possibile inserire nel codice Html del template queste semplici righe:

#navbar {
height: 0px;
visibility: hidden;
display: none;
}

Il codice va posizionato nel codice Html del template, immediatamente prima del rigo:

/* Variable definitions

Per trovare più facilmente il rigo con scritto "/* Variable definitions" bisogna cliccare sui tasti Ctrl + F così comparirà una stringa dove possiamo scrivere la porzione di codice Html che stiamo cercando molto facilmente. Come tutte le operazioni di modifica del codice Html è utile visualizzare l’anteprima del blog prima di salvare ed è sicuramente opportuno fare prima il backup del template che si sta utilizzando.

commenti | | Read More...