Blogger: Come aggiungere il tasto di facebook “Mi Piace” sotto gli articoli

Come vi ho anticipato ieri alla fine dell’articolo su come inserire le icone dei social network sul blog oggi risponderò alla seconda domanda di Sara. Ecco la domanda:
 

Vorrei mettere sotto ai post il pulsante Mi piace di Facebook ma non ho ancora trovato una guida decente in Internet…come si fa??

Bene, andiamo subito a vedere come inserire il tasto “Mi piace” nel nostro blog di blogger.

Per prima cosa, al solito, andiamo su Design >> Modifica HTML e scarichiamo una copia del blog cliccando su “Scarica modello completo”. Così in caso facessimo errori nel modificare il modello possiamo ritornare indietro caricando nuovamente questo file.

Una volta scaricato il modello spuntiamo “Espandi i modelli widget” e cerchiamo la seguente riga

<data:post.body/>

Adesso...se vogliamo inserire il nostro plug-in sotto ai post incolliamoci subito sotto questo codice

<!--FACEBOOK MI PIACE INIZIO-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show-  faces=true&amp;width=530&amp;height=60&amp;action=like&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px'/>
</b:if>
<!--FACEBOOK MI PIACE FINE-http://www.fansland.net-->

se invece vogliamo inserire il tasto "Mi piace" sopra ai post incolliamolo subito sopra. Il risultato della nostra operazione sarà questo

Qualcuno a questo punto si starà chiedendo: "ma perchè nel codice 530 e il 60 sono scritti in rosso?" spieghiamolo subito.

Ogni blog ha la sua larghezza e quindi noi andremo a modificare il "530" in caso il nostro blog abbia una larghezza minore di 530px. Il "60" invece rappresenta l'altezza, e va modificato con il numero 30 solo nel caso in cui non volessimo visualizzare le icone con le immagini del profilo di chi cliccherà su "Mi piace".

Io personalmente ho inserito questo plug-in nella sezione Quattrorisate, passate a guardarlo!

Ti è piaciuto l'articolo? Vota Ok oppure No. Puoi votare le mie notizie anche in questa pagina.

Read More

Blogger: Come inserire le icone dei social network sul blog (blogspot)

Oggi voglio mostrarvi come inserire le icone dei social network con relativi link personali sul nostro blog. In questa specifica guida utilizzerò blogger come modello ma il codice HTML è “universale” e quindi utilizzabile su tutti i blog, tutti i siti e per qualsiasi altra immagine con link che vogliamo inserire nel nostro blog.

La necessità di scrivere questo articolo nasce da una richiesta fatta da una nostra lettrice e amica Sara del blog three4style di cui ne è autrice insieme alle proprie amiche Cecilia e Martina. Colgo anche l’occasione per salutarle tutte.

Per cominciare…

Dobbiamo creare o trovare le immagini da utilizzare. Se le icone le creiamo noi ci serve hostarle su un servizio gratuito di hosting tipo imageshack perchè in seguito avremo bisogno del link dell’immagine. Se le immagini le cerchiamo su internet copieremo solo il link dato che già qualcuno le ha hostate in precedenza. Cosa molto importante: attenzione al copyright!

Io per questa occasione ho creato tre icone richieste proprio da Sara: una per LookBook, una per Flickr e un’altra per Blog Lovin’.

   

Come inserire i loghi sul blog

Per prima cosa clicchiamo su Design, adesso, se abbiamo due colonne decidiamo dove inserire i nostri loghi e clicchiamo su “Aggiungi un gadget”.



A questo punto selezioniamo dalla lista “HTML/JavaScript”



e si aprirà una nuova finestra.
In questa finestra andremo ad incollare il codice HTML seguente:

<a href="QUI INSERIAMO IL NOSTRO LINK DI FACEBOOK, TWITTER O FLICKER"><img src="QUI INSERIAMO IL LINK DELL'IMMAGINE CHE VOGLIAMO VISUALIZZARE"></a>

Questo codice farà apparire come penso avrete capito un solo logo. Ovviamente incollando una seconda volta questo codice sotto quello precedente inseriremo un secondo logo. Quando avrete finito cliccate su salva e controllate il vostro blog.

Esempio con i 3 loghi

Il codice che utilizzeremo per visualizzare i tre loghi da me creati èil seguente...(ho diviso il codice HTML di ogni singolo logo per farvi capire meglio)

<a href="http://lookbook.nu/"><img src="http://img638.imageshack.us/img638/8898/lookbookb.png"></a><a href="http://flickr.com/"><img src="http://img535.imageshack.us/img535/4034/15226485.png"></a><a href="http://bloglovin.com/"><img src="http://img214.imageshack.us/img214/7499/bloglovin.png"></a>

e questo sarà il risultato…



Nel caso volessimo accentrare i nostri loghi dobbiamo solo inserire <center> all’inizio del codice e </center> alla fine del nostro codice HTML in questo modo

<center>
<a href="http://lookbook.nu/"><img src="http://img638.imageshack.us/img638/8898/lookbookb.png" /></a><a href="http://flickr.com/"><img src="http://img535.imageshack.us/img535/4034/15226485.png" /></a><a href="http://bloglovin.com/"><img src="http://img214.imageshack.us/img214/7499/bloglovin.png" /></a>
</center>

Il risultato sarà ovviamente questo:





Nel prossimo articolo risponderò ad un'altra richiesta di Sara spiegando come inserire il tasto di facebook "Mi Piace" su Blogger.

Spero di essere stato utile anche a qualcun altro. Per eventuali problemi o mie dimenticanze usate i commenti.

Ti è piaciuto l'articolo? Vota Ok oppure No. Puoi votare le mie notizie anche in questa pagina.

Read More

Blogger: Come eliminare la barra di navigazione in alto (navbar)

Ci sono persone a cui dà fastidio vedere quella barra sul proprio blog (tra queste ci sono io).Alcuni si chiederanno…ma che fastidio ti può dare?
Il motivo principale è di certo un fattore di estetica. Il colore della barra non è in sintonia con i template di moltissimi blog,questo perchè la navbar a mio parere ha colori troppo sgargiati e poco personalizzabili.

Rimuovere la navbar

Eliminare la barra di navigazione richiede questa semplice operazione:
Andiamo su Layout >> Modifica HTML e cerchiamo di trovare il seguente codice scritto in blu. (Il vostro codice potrà essere leggermente diverso ma non vi preoccupate, basterà identificare la stringa “/* Variable definitions”)


Blogger Template Style
Name:     TicTac
Date:     1 March 2004
Updated by: Blogger Team
*/

/* Variable definitions
   ====================

   <Variable name="textcolor" description="Text Color"
             type="color" default="#333" value="#333333">

   <Variable name="pagetitlecolor" description="Page Header Color"
             type="color" default="#FFF" value="#FFFFFF">
Una volta individuata la parte di codice illustrata sopra aggiungete la parte colorata il rosso subito sopra la stringa “ /* Variable definitions “ (senza virgolette) in questo modo:
Blogger Template Style
Name:     TicTac
Date:     1 March 2004
Updated by: Blogger Team
*/

#navbar-iframe {
display: none !important;
}
/* Variable definitions
   ====================

   <Variable name="textcolor" description="Text Color"
             type="color" default="#333" value="#333333">

   <Variable name="pagetitlecolor" description="Page Header Color"
             type="color" default="#FFF" value="#FFFFFF"> Adesso salvate il modello e la barra di navigazione scomparirà “automagicamente”!

Io ho preferito toglierla…tu?

Read More

Blogger: Come cambiare la favicon standard con una personalizzata

In questa mini-guida voglio proporvi un metodo per cambiare la favicon standard di blogger (la b bianca su sfondo arancione) e inserirne al suo posto una personalizzata che rispecchi i contenuti o il logo del nostro blog.
Prima di iniziare vediamo di capire meglio cos’è questa favicon.

La favicon

è un  un’immagine che i browsers pongono a sinistra della barra degli indirizzi e quindi accanto all’url del nostro sito o blog…


come potete notare nell’immagine sopra la favicon si trova anche nella scheda del browser.

Come si personalizza la favicon

Personalizzare una favicon è molto semplice, innanzitutto effettuiamo una copia del template, questa ci servirà per ripristinare il tutto qualora qualcosa dovesse andare storto.
Dopo di che andiamo su Layout >> Modifica HTML  premiamo CTRL + F (funzione “trova” del browser), cerchiamo la stringa  “</head>” (senza virgolette) e incolliamo subito sopra il seguente codice:


Per immagine .gif <link href='url favicon.gif' rel='icon' type='image/gif'/>
Per immagine .png
<link href='url favicon.png' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
Per immaginr .ico <link href='url favicon.ico' rel='shortcut icon' type='image/x-icon'/>

Dove a url favicon va sostituito il link relativo all’immagine della favicon.
Dovreste avere quindi una cosa di questo tipo

clicca sull'immagine per ingrandirla

Salviamo il modello e controlliamo i risultati.

Link utili per la creazione di favicon

Ci sono dei siti che rendono la creazione di una favicon estremamente semplice…ve ne cito alcuni:

• Degraeve.com
• Favicon.cc
• Genfavicon.com
• Online fav-icon creator
• Free Online Favicon.ico Icon Generator

Ne conosci altri?

Read More

Blogger: Come cambiare il template del blog su blogspot

In questo articolo vedremo come cambiare il template standard che ci offre blogger al momento della registrazione del nostro blog.
Premetto che questa operazione è molto facile da fare, ma per facilitarla ancor di più utilizzerò, come mio solito,  immagini che illustreranno passo passo i procedimenti da seguire.

Primo passo

Per cambiare il vostro template è necessario avere un template!
Per prima cosa dobbiamo scaricarne uno. Il sito che vi propongo per cercare un template di vostro gradimento è btemplates, qui potete trovare migliaia di template gratuiti per blogger suddivisi in categorie abbastanza ordinate direi. Se su btemplates non troverete un template che soddisfi le vostre esigenze potete effettuare una ricerca su google…se ne trovano davvero tanti in giro sul web.
quindi…scarichiamo il nostro template, la maggior parte delle volte avremo un archivio, scompattandolo troveremo all’interno un file con estensione .xml, sarà questo il file che ci servirà per cambiare il template del blog. Infatti, senza entrare troppo sul tecnico, questo file contiene tutte le informazioni del template da noi scelto.

Come lo installo sul blog?

L’installazione richiede una ed una sola capacità…saper cliccare!
Ecco i passi da seguire:

• Effettuiamo il login su blogger.com

• Andiamo su Layout >> Modifica HTML

 

• Dato che è la prima volta che ci accingiamo a cambiare il nostro template la pagina che avremo davanti sarà di questo genere…

 

…dovremo quindi cliccare su “Scegli file” come indicato dalla freccia rossa nell’immagine precedente (nei cambiamenti successivi il bottone “scegli file” diventerà “Sfoglia…” ma non cambia nulla.). Dopo aver cliccato su “scegli file” si aprirà una finestrella di questo tipo…

 

cerchiamo la cartella su cui abbiamo il file xml relativo al template che vogliamo utilizzare, selezioniamolo e clicchiamo su “Apri” e successivamente su “Carica”. Adesso non ci resta altro che cliccare su “SALVA MODELLO” e andare a verificare i cambiamenti del vostro blog.
Facile no?

Nel prossimo articolo vedremo come cambiare la favicon standard di Blogger.

Read More

Come fare un blog con Blogger (blogspot): Primo passo? Registrazione!

Oggi comincerò ad intraprendere un lungo percorso su un argomento che sicuramente sarà utile a tutti coloro che vorrebbero creare un blog ma non sanno da dove partire.
Seguendo questa guida, passo dopo passo, sarai in grado di creare un blog gratis utilizzando la piattaforma blogger.

Come creare un blog con blogger?

Per prima cosa, dato che blogger è di proprietà di Google, consiglierei di non utilizzare il tuo indirizzo email personale. Creane uno apposito con Gmail utilizzando eventualmente il tuo nome oppure il nome che darai al tuo blog…
Per creare la nuova mail andiamo su Gmail e clicchiamo su “Crea un account” e inseriamo i nostri dati e confermiamo. Adesso abbiamo un nuovo account Google da utilizzare per il nostro blog.
Il secondo passo adesso è registrare il blog.
Vai sul sito di Blogger e clicca su “CREA BLOG”, a questo punto compila tutti i campi necessari alla registrazione.

Scegliamo un nome…

La scelta del titolo del blog è una fase molto importante, questa infatti è il punto di inizio di un nuovo blog e non deve essere trascurato. Questo non significa che ad un buon titolo equivalga un successo certo, ma serve più che altro a dare un’impronta, un riconoscimento del blog che duri nel tempo. Dobbiamo cercare di avere un effetto del tipo “…sai oggi ho letto un articolo interessante su fansland. Perché non gli dai uno sguardo!” e non di avere un effetto opposto, che non ci procurerà di certo altre visite…per esempio: “…ciao Pippo, sai? oggi ho letto su un blog  un bellissimo articolo su come far riprodurre i pesci rossi…”.
“Su un blog”??? Esistono migliaia di blog…sarà mica il tuo? Può darsi. Hai incrementato visite? No di certo.
I consigli che ti posso dare per cercare di avere un feedback positivo dai tuoi futuri lettori sono questi:

• Dai al tuo blog un nome semplice e facile da ricordare;
• Dai un nome che rispecchi il contenuto del tuo blog (se il blog è di nicchia);
• Dai un nome originale (se il blog sarà di contenuti vari);

Scelta del template

Adesso scegliamo un template tra quelli proposti…tranquillo/a se non trovi un template che ti piace! Lo cambieremo successivamente…
Anche la scelta del modello da utilizzare è molto importante. La scelta del template a mio modesto parere è soggettivo, i parametri per la scelta sono davvero tanti e toccano diversi aspetti. Pensa a come vuoi impostare il blog, devi capire quindi quante colonne dovresti utilizzare e in che modo dovranno essere utilizzate. Non ti preoccupare se per ora non hai proprio idee…queste ti verranno col tempo e con un pò di esperienza.
Nel mio caso, nella creazione di fansland ho optato per un template a 3 colonne. Questo perché avevo già in mente di utilizzare l’intera colonna di sinistra per le categorie (nel cuor mio sapevo già che la lista delle categorie si sarebbe fatta un pò lunghetta), così facendo ho avuto modo di inserire gli altri widget sulla colonna di destra e sul footer (parte bassa del blog).
Detto questo ti invito a leggere i successivi articoli per imparare a creare il tuo blog, sperando che siano sempre più esaustivi e alla portata di tutti!

ARTICOLO SUCCESSIVO:
Blogger: Come cambiare il template del blog su blogspot

Read More