Visualizzazione post con etichetta tutorial. Mostra tutti i post
Visualizzazione post con etichetta tutorial. Mostra tutti i post
Come personalizzare l'icona dell'autore del blog nei commenti
in: // //

Come personalizzare l'icona dell'autore del blog nei commenti



Uno dei miei post più popolari è Come evidenziare il nome dell'autore nei commenti. Purtroppo il codice non funziona perché Blogger ha deciso di togliere quel pezzettino di codice che permetteva di rilevare l'autore del blog ed evidenziarne il commento.

Certo si può sempre trovare una soluzione inserendo uno script, ma oggi ti propongo un'alternativa più creativa per differenziare il commento dell'autore del blog dal resto dei commenti: personalizzando l'icona accanto al nome.

Di default, tutti i blog su Blogger mostrano una icona accanto al nome dell'autore, questo pallino grigio con una sorta di matita:



La mia icona, che ho invece personalizzato, è una tazza con un buon cappuccino fumante:



Il cappuccino non si vede, ma fidati se non è lui è cioccolata.
Il thé solo quando sto male.

Per personalizzarla devi innanzitutto avere una immagine da inserire che non sia troppo grande; la mia per esempio misura 26*30px.
Certo dovresti avere un programma di grafica, ma se non ce l'hai ti consiglio di utilizzare ciò che trovi online, come canva.com con il quale ho fatto creato questa immagine, semplicemente utilizzando una delle sue illustrazioni gratuite messe a disposizione per gli utenti.




Dove inserire l'icona?


All'interno del codice HTML devi cercare .icon.blog-author. Per cercare un codice il modo più semplice è:
  1. copiare il codice
  2. cliccare all'interno del frame che racchiude il tuo HTML
  3. premere CTRL+F per far comparire la casella di ricerca all'interno del frame
  4. incollare il codice da trovare all'interno della casella di ricerca.

Il codice che vedi qui sotto è quello all'interno del mio blog.
Al posto dell'url del tulipano che trovi qui, devi inserire l'indirizzo della tua icona.


.comments .comments-content .icon.blog-author {
display: inline-block;
height: 29px;
width: 23px;
margin: 0 0 -4px 7px;
background-image: url(https://2.bp.blogspot.com/-zPyq_PWwtWA/XJs51AHT4KI/AAAAAAAAUr4/9Enzo8yVwNQy0QxOpIZehYOOzpitU_C-QCLcBGAs/s000/tulipano.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: bottom;
}


Ricorda di modificare le dimensioni di width ed height (larghezza ed altezza), in base alla tua immagine. Ovviamente lo devi decidere a monte quali devono essere le dimensioni, cioè già al momento della creazione dell'icona.

Per caricare le immagini e utilizzarle nel tuo codice HTML di Blogger, puoi creare una pagina lasciandola in bozza, e caricarle lì, avendo così sempre a tua disposizione le immagini come se fossero in una cartella.

E tu avevi mai fatto caso all'icona dell'autore?
Se hai trovato utile questo post e se userai questo mio tutorial nel tuo blog, per favore lascia pure un commento.
io li lovvo ♥




Aiutami a crescere, condividi il mio post!
Grazie!
Come creare un blog su Blogger: guida facile per principianti
in: // //

Come creare un blog su Blogger: guida facile per principianti



Vuoi condividere le tue passioni con il resto del mondo? Allora devi aprire un blog!
Se ti chiedi, però, perché aprire un blog ti consiglio di leggere il post dedicato per avere le idee più chiare.
Certo è che se stai leggendo questo post sai già che è questo ciò che vuoi fare.

Dove aprire un blog?


Anche qui ci sono varie scuole di pensiero: c'è chi preferisce Blogger, chi ti dirà che è meglio WordPress. Personalmente ne ho parlato nel post WordPress o Blogger: quale scegliere, e ribadisco il mio pensiero che tutto dipende da ciò che vuoi comunicare, condividere, in parole povere 'cosa ci devi fare con il blog?'.

Dal canto mio ti posso dire che ho provato entrambe le piattaforme, e che sono tornata su Blogger perché qui ho trovato una vera community ed è stato molto più facile allacciare i rapporti con altre bloggers. Inoltre il vantaggio di avere a disposizione tutti gli strumenti di Google con la creazione di una email su Gmail, per me è stato determinante.
Blogger, infatti, è una delle applicazioni figlie del colosso Google, e conta milioni di blog sulla sua piattaforma.
Questo non significa che non utilizzerò mai WordPress, perché probabilmente per il mio lavoro prima o poi dovrò rifare questo passo. Ma per come ho impostato ora la mia comuncazione sono più che felice di essere su Blogger.com.

Come aprire un blog su blogger?


Vai sulla pagina principale della piattaforma blogger.com e clicca sul tasto arancione Crea il tuo blog.



Verrai reindirizzata verso quella che sarà poi il tuo pannello di amministrazione del blog, e lì ti verrà chiesto di inserire il nome che apparirà nei commenti, o nei post se sceglierai di mostrare il nome dell'autore.
Dopo averlo inserito clicca su Procedi con la registrazione a Blogger.



Essendo tutto completamente nuovo per te, ti troverai di fronte l'immagine qui sotto che ti invita a Creare un nuovo blog.
Sì, anche questo è un tasto arancione.
È tutto molto arancione su Blogger.



A questo punto credo sia tutto davvero molto semplice ed intuitivo. Avrai di fronte una schermata in cui ti si chiede di inserire il Titolo del tuo blog e l'Indirizzo del tuo blog. Quest'ultimo dovrai inserirlo tutto minuscolo e attaccato e senza l'estenzione blogspot.com: a questo ci penserà lui dopo in automatico.

Se l'indirizzo che hai scelto è libero, cioè non utilizzato da nessun altro, allora ti comparira un check e l'ok da parte del sistema; in caso contrario devi scegliere un'alternativa che può essere anche la semplice aggiunta di un trattino, e infati io ti consiglio di procedere per tentativi che siano il più vicini alla tua scelta iniziale.



Per il tuo blog puoi scegliere fin da subito il Tema da utilizzare, ovvero la parte grafica. Blogger mette a disposizione diversi temi che possono essere personalizzati anche dai più inesperti attraverso il pannello Personalizza, che troverai nel menu a sinistra una volta creato il tuo blog.

Fatto ciò puoi iniziare a bloggare e iniziare ad essere, a tutti gli effetti, una blogger!

Ma prima di iniziare ecco alcuni post che ti consiglio di leggere:
  1. Cosa impostare nel tuo blog prima di iniziare a pubblicare un post 
  2. Come fare il backup del tuo blog e non perdere nulla 
  3. Come utilizzare e organizzare le etichette di Blogger 
  4. 5 errori da non fare mai più come blogger 
  5. Come rendere accattivante il tuo blog post 
  6. 7 errori da non fare con il blog! 
  7. Come scrivere la pagina ABOUT perfetta 
  8. Come riorganizzare post, pagine e categorie del blog 




Aiutami a crescere, condividi il mio post!
Grazie!

Come personalizzare la pagina 404 su Blogger
in: //

Come personalizzare la pagina 404 su Blogger



Dopo aver affrontato il tema della riorganizzazione del blog, ho deciso di fare questo tutorial su come creare e personalizzare la pagina 404 sulla piattaforma di Blogger. È importante infatti non lasciare nel vuoto il link appartenente al post che magari abbiamo deciso di rimettere in bozza o di eliminare.

Dobbiamo creare un messaggio personalizzato che spieghi all'utente perché quel post non si trova più nel nostro blog e invitarlo, comunque, a continuare a navigare.

Ora c'è chi preferisce fare un redirect direttamente verso la homepage; personalmente propendo per la pagina 404, e ti spiego perché.

Il redirect, con il reindirizzamento personalizzato, preferisco farlo quando al posto del mio vecchio articolo ne sostituisco uno nuovo che tratta dello stesso argomento, ma più completo, approfondito e valido.
In questo caso il post esiste ancora (fin quando si vuole) ma reindirizzo gli utenti verso il nuovo post.
Un esempio pratico?
Un tutorial che ormai non funziona più ma che potrebbe essere sostituito da uno nuovo rispondente alla stessa esigenza.

La pagina personalizzata 404 preferisco utilizzarla quando il link è interrotto perché il post non esiste più, quindi spiego agli utenti il perché non hanno trovato il post e li invito a continuare la navigazione attraverso pulsanti, immagini e così via.
In questo modo gli utenti si sentiranno meno disorientati.

Ma ognuno è libero di scegliere come operare nel proprio blog: ciò che faccio (e che ho sempre fatto) è semplicemente condividere con voi la mia personale esperienza.
In ogni caso ricorda che ci sono figure specializzate solo nella SEO che possono certamente consigliarti quale caso è meglio per il tuo blog.

Veniamo a noi.

Crea la pagina 404


Vai nella sezione Pagine e crea una Nuova Pagina inserendo come titolo proprio 404 e all'interno scrivi il messaggio che vuoi mostrare. Se vuoi puoi aggiungere immagini, pulsanti, casella di ricerca, ecc...
Ecco come si presenta la mia pagina 404.

Ho creato una immagine che avesse come richiamo il mio logo e poi ho inserito il messaggio per avvisarti che è tutto ok se non hai trovato ciò che stavi cercando, e che puoi continuare la navigazione proponendoti tante varianti: tornare alla homepage, la casella di ricerca e i pulsanti con alcuni argomenti che potrebbero interessarti.

Se vuoi sapere come realizzare i link pulsante segui il tutorial Come creare il "link in bio" su Blogger.

Per rendere unica la tua pagina, diversa da tutte le altre, ti basta aggiungere gli stili in fondo al post, proprio come ho fatto nel video che trovi sempre nel post della creazione del "link in bio" che ti ho appena linkato.

Gli stili andranno ad agire SOLO su quella pagina, non sulle altre!
Che figata, vero?

Aggiungi il codice di reindirizzamento


Per visualizzare la pagina 404 non dobbiamo certo inserirla nel menu o lasciare il link visibile da qualche parte nel nostro blog. Dobbiamo effettuare un reindirizzamento automatico qual'ora fosse necessario.
Per fare ciò vai in Modifca HTML e subito sotto il tag <head>, che trovi all'inizio, aggiungi questo codice:

<b:if cond='data:blog.pageType == "error_page"'>

<script type='text/javascript'>
BSPNF_redirect = setTimeout(function() {
location.pathname= "/p/404.html"
}, 0000);
</script>

</b:if>


Il codice che inizia con 'b:if' è uno dei miei migliori amici quando creo i temi grafici personalizzati. Sono le cosiddette condizioni che vengono inserite nel codice per dire al browser come si deve comportare quando incontra il contenuto della condizione enunciata.

In questo caso gli diciamo che quando si trova nella pagina di errore, error_page, deve attivare quello script, e avviare un redirect seguendo il percorso (pathname) che io gli ho indicato: /p/404...
E lo deve fare nel tempo da me stabilito, ovvero senza pause "0000".

So che può sembrare difficile, ma basta applicarsi un po' per inziare a capire come funziona.
Poi, è tutto divertimento!


Immagino che avrai un sacco di domande e spero di riuscire a soddisfarle, quindi lasciami pure un commento!





Aiutami a crescere, condividi il mio post!
Grazie!


Come creare il 'Link In Bio' su Blogger
in: // //

Come creare il 'Link In Bio' su Blogger



Il link in bio di instagram è fondamentale per chi deve condividere i contenuti del blog e non ha la possibilità di farlo direttamente dalle stories.
Farlo utilizzando direttamente una pagina del blog può essere decisivo per incrementare le visite e invogliare gli utenti a restare in casa nostra.

Io ho fatto proprio così!
Ho creato una pagina nel mio blog chiamandola "Welcome" e ho inserito i link verso i miei contenuti che ritengo di maggiore interesse, o verso i quali ritengo debba scorrere il flusso delle visite.

Ho preparato per te un video 'veloce' per farti capire come poter fare in modo semplice la pagina welcome.

Attenzione però!
Il risultato dipende molto dal tema grafico che hai installato sul tuo blog.
Nel mio blog viene visualizzzato in modo pulito, perché nel layout delle pagine non viene visualizzata la sidebar.

Ok, iniziamo.

Crea la tua pagina


Crea una nuova pagina e scegli il nome da visualizzare. Io ho scelto welcome, ma alcuni hanno scelto proprio la parola link in bio.



Se vuoi puoi scegliere di inserire un'immagine, oppure no.
Se decidi di inserirla fai in modo che la larghezza sia quella totale della pagina, ma che l'altezza non superi i 300px.

Questione di stili

Quando si costruiscono pagine come queste, ormai lo sai, è tutta questione di stili.
Sono gli stili che noi diamo infatti a determinare la grafica degli elementi che inseriamo, ma bisognerebbe spiegare per bene tutto il procedimento, attraverso dei video dedicati, ad esempio.

In questo video invece ti mostro come è facile, nel giusto contesto, creare una pagina da usare come Link In Bio per instagram.

Spero di riuscire a concretizzare il video corso che ho in mente da molto, troppo tempo ormai, ma che purtroppo ogni volta mi vedo costretta ad abbandonare per i miei strumenti non proprio idonei.
Per ora accontentiamoci di ciò che passa il convento :D.




Il risultato finale nel mio blog?
Eccolo!



E i codici?
Questo è il codice HTML da inserire nella pagina:


<center>
<a class='linkinbio' href="#">link #1</a>
<a class='linkinbio' href="#">link #2</a>
<a class='linkinbio' href="#">link #3</a>
<a class='linkinbio' href="#">link #1</a>
<a class='linkinbio' href="#">link #2</a>
<a class='linkinbio' href="#">link #3</a>
<a class='linkinbio' href="#">link #1</a>
<a class='linkinbio' href="#">link #2</a>
<a class='linkinbio' href="#">link #3</a>
</center>


Questi sono gli stili, il CSS:

<style>
.linkinbio {border: 1px solid; background: #fff !important; padding: 10px; margin: 10px auto; display: inline-block;}
</style>



Se hai bisogno di aiuto lascia un commento o puoi scrivermi tramite la pagina Contatti. Io offro servizi di personalizzazione delle pagine alle bloggers che ne hanno bisogno.





Aiutami a crescere, condividi il mio post!
Grazie!
 

Come personalizzare il 'blockquote' in un post
in: //

Come personalizzare il 'blockquote' in un post




Che cos'è il blockquote?
E' un particolare codice che ci permette di racchiudere una citazione, o una qualsiasi frase, in uno spazio, un blocco appunto, in modo da staccarlo dal resto del testo.
Personalmente utilizzo il blockquote quando voglio dare enfasi ad una frase per me rilevante.

Ecco come si presenta il codice del blockquote:
<blockquote>Ecco come appare il mio blockquote</blockquote>
e come lo vedi tu...
Ecco come appare il mio blockquote

Per personalizzare il blockquote ti basterà intervenire, come al solito, nel tuo CSS.
Di sicuro, se utilizzi un tema di terzi (ovvero scaricato e installato su Blogger) nel tuo CSS esiste già una voce 'blockquote'; ma se non dovesse esserci allora significa che gli stili sono quelli prelevati di default da Blogger. E non è che sia sempre bellissima la 'citazione' proposta da Blogger. Quindi ti mostrerò come puoi renderlo più carino e quali comandi dargli per personalizzarlo a tuo piacimento.
Ovviamente per rendere più bella e gradevole la lettura, inserirò delle citazioni tratte da uno dei miei romanzi preferiti: Jane Eyre.

Attenzione! Considera gli stili SENZA i selettori ".stile1, .stile2, ecc...", ma SOLO blockquote. Io ho dovuto inserirli perché altrimenti li avresti visualizzati con lo stile presente nel mio codice.
Cosa significano quelle parole all'interno delle parentesi graffe? (non i dolci anche se non sarebbero male a quest'ora...)
Ti dirò quelli più importanti:
  1. width = larghezza
  2. border = bordo
  3. padding = spazio all'interno dell'elemento
  4. margin = spazio all'esterno dell'elemento
  5. background = sfondo
Ricorda, inoltre che per cambiare il colore devi andare a modificare il codice HEX, facilmente riconoscibile perché preceduto dal simbolo dell'hashtag #.
(in fondo al post ti lascerò qualche link di siti nei quali puoi trovare i codici hex)

Ok, cominciamo!

Stile #1

Partiamo da uno stile semplice per un blockquote minimal e pulito.
Questo stile è veramente basilare; ha infatti, come unica decorazione, il bordo sinistro.
Non c'è felicità come quella di essere amati dai tuoi simili e sentire che la tua presenza è un'aggiunta al loro conforto.
Vediamo il codice:
blockquote.stile1 {
width:90%;
border-left: 3px solid #bbb;
padding: 20px;
font-style: italic;
}


Stile #2

Semplice come il primo, ma con i bordi superiori e inferiori.
Ti chiedo di percorrere la vita al mio fianco, per essere il mio secondo io, e il miglior compagno terreno
blockquote.stile2 {
width:90%;
border-top: 2px solid #bbb;
border-bottom: 2px solid #bbb;
padding: 20px;
font-style: italic;
color:#777;
}


Stile #3

Praticamente uguale al secondo stile, ma qui entra in campo la pseduo class, ovvero :before.
La pseudo class (anche in questo caso non so se sei maschile o femminile il termine) è per me un po' complicato da spiegare, ma cercherò di farlo nella maniera più semplice possibile, perché a noi non interessano i paroloni tecnici, ma capire come funzionano.
Le pseudo class :before e :after non fanno altro che aggiungere un elemento che nell'HTML è invisibile, perché viene costruito attraverso il CSS; :before riguarda un elemento che verrà visualizzato prima, o dietro, dell'elemento nel quale è inserito, :after dopo.
Lo so cosa stai pensando 'Dammi sto codice e basta!' e hai ragione, ma come ogni cosa in questo blog, è più facile a farsi che a dirsi.
In questo caso la pseudo class :before mi è servita a far visualizzare le virgolette della citazione.
La sua venuta era la mia speranza ogni giorno, la sua separazione era il mio dolore; la possibilità che i suoi passi ritardassero era ghiaccio in ogni vena.
Ecco il codice degli stili.
blockquote.stile3 {
width:90%;
border: 0;
padding: 20px;
font-style: italic;
border-width: 2px 0;
border-style: solid;
border-color: #bbb;
z-index:0;
}
blockquote.stile3:before {
content: '\201C';
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
width: 40px;
height: 30px;
line-height:30px;
font-family: Georgia, serif;
font-size: 3em;
color:#bbb;
text-align: center;
}


Stile #4

Questo stile è più allegro, gioioso, e non poter non inserire una delle frasi più belle di Jane Eyre... Ah, ma quanto bello e intenso è l'amore fra Jane e il signor Rochester?
Sono orribile, Jane? Molto, signore: lo siete sempre stato.
In questo caso ho inserito una sfumatura di colori partendo da destra, 'to right', e finendo a sinistra.
Io ho inserito solo due colori, ma se ne possono inserire di più creando la sfumatura che più tipiace, o che più si addice al tuo tema.
blockquote.stile4 {
width:90%;
border-left: 2px solid #f9e8de;
background: linear-gradient(to right, #efcdb4 0%, #ed9775 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding: 20px;
font-size: 26px;
font-weight:bold !important;
font-style: none !important;
}



Qualche link per recuperare i codici Hex color:
  1. direttamente da Google cercando le parole hex color
  2. Color Hex Color Codes 
  3. Hex Color Tool 
  4. Questo è fatto anche molto bene Html Color Codes


Spero che questo tutorial ti sia utile per abbellire almeno un po' il tuo blog.
Se hai domande, o richieste, scrivile pure nei commenti.





Aiutami a crescere, condividi il mio post!
Grazie!




Trasferire la proprietà di un blog da un account gmail ad un altro
in: // //

Trasferire la proprietà di un blog da un account gmail ad un altro



I motivi per cui trasferire la proprietà di un blog da un account gmail ad un altro possono essere i più svariati.
Ad esempio puoi aver creato il tuo blog con un account privato e poi dopo qualche tempo hai deciso di creare un altro account gmail che avesse lo stesso nome del blog, per inserirlo nella pagina contatti ed in un certo senso fare in modo che risulti più coerente con il contesto.

Ovviamente mettiamoci anche il fatto che, inserendo il modulo dei contatti, tu voglia ricevere i messaggi sulla email abbinata al blog, e non su quella personale.

Ma per fare ciò dobbiamo, appunto, trasferire la proprietà del blog dall'account personale a quello creato per il blog.

Come fare?

È davvero semplicissimo e bastano 3 semplici passaggi!

Aggiungi il nuovo account


Prima di tutto devi aggiungere il nuovo account gmail che hai creato fra gli autori del blog. Quindi vai nelle impostazioni e clicca su Aggiungi Autori. Nel box textarea che si aprirà devi scrivere l'indirizzo email esatto del tuo nuovo account gmail e clicca su Invita Autori.



Accetta l'invito


A questo punto riceverai un'email che ti notificherà l'invito a contribuire al blog come autore. Accetta l'invito cliccando sul bottone arancione.

Attenzione però! Questo passaggio ti consiglio di farlo in un altro browser.
Ad esempio, se stai utilizzando Google Chrome, e sei loggato con il tuo account personale, allora ti consiglio di aprire Mozilla firefox (o un browser a tuo piacere) e fare loggarti in Google con il nuovo account per il blog. Da qui aprirai l'email dell'invito.

Cambia i permessi ed elimina il vecchio account


Torna ora al pannello di amministrazione del blog e da Impostazioni, nella sezione Autorizzazioni, cambia i permessi da Autore ad Amministratore.
Infine, elimina il vecchio account gmail dagli Amministratori del blog per completare il trasferimento di proprietà.



E tu? Hai mai avuto bisogno di cambiare il tuo account gmail per il blog?
Hai avuto difficoltà?
Fammi sapere cosa ne pensi di questo tutorial e, se hai altre richieste sulla gestione del blog, per favore, scrivilo pure nei commenti!
Io continuo ad adorarli ♥






Aiutami a crescere, condividi il mio post!
Grazie!
Come creare una firma per la tua email
in: //

Come creare una firma per la tua email



Una delle domande che ricevo quando rispondo ad una email riguarda la firma che accompagna ogni mio messaggio di posta elettronica.
'Come l'hai fatta?'
In realtà non è nulla di complicato.
Per creare una bella firma da inserire nella tua email ti basta ben poco: un logo, un accenno a ciò che fai e i links ai tuoi social.

Questa è la mia firma nella email!



È davvero molto semplice: il logo richiama, ovviamente, quello del sito. Anche le icone, che riportano ai miei canali social, ricordano quelle nella sidebar e nella barra in alto.

Come l'ho fatta? Con Google Drive!
Di sicuro ci saranno altri metodi; questo è quello che ho utilizzato io e che ho trovato molto facile e veloce.

Ti lascio alla visione del video tutorial, sì perchè sono tornata sul mio canale!

Ricordati di iscriverti se non vuoi perdere i prossimi video, ma soprattutto metti un bel pollice in su!



Ti è piaciuto questo post? Pinnalo!

Personalizzare il gadget del form contatti di Blogger e inserirlo in una pagina
in: //

Personalizzare il gadget del form contatti di Blogger e inserirlo in una pagina



Non ricordo neanche più quando è stata l'ultima volta che ho pubblicato un tutorial per migliorare la grafica dei templates di Blogger. Di certo è passato molto tempo, e visto che la causa è stato il lavoro, beh direi che non è stato per niente un male.

Oggi voglio farti un regalino: il codice per inserire nella pagina del tuo blog il gadget form contatti di Blogger.
Il risulato sarà quello che vedi qui in basso.



Per inserire il codice:
  • vai nella tua pagina contatti
  • scrivi in modalità HTML
  • copia e incolla il codice che trovi nel file di testo

Ricordati che puoi inserire gli stili così come sono nel file, oppure puoi incollarli nel tuo CSS, ma senza il tag "style" (se non sai come fare leggi come inserire i codici nel tuo CSS)

Per cambiare il colore del tasto 'invia' ricordati di modificare il codice del background, inserendo quello del tuo colore del brand o quello che preferisci.
#ContactForm1 #contact-form-submit {
...
background: #000;
...
}

Se invece preferisci cambiare la scritta all'interno del campo 'input', devi modificare nell'HTML ciò che si trova fra virgolette alla voce placeholder.
placeholder="DEVI MODIFICARE QUI"


Se dovessi avere problemi di inserimento o di visualizzazione scrivilo pure nei commenti.
Se ti va, lasciami il tuo link alla pagina se usi questo breve tutorial, così potremo tutti venire a sbirciare e magari condividi il post :)

scarica qui il codice del gadget form contatti


Per far sì che funzioni nella pagina, devi inserire il gadget del modulo contatti da LAYOUT (la posizione è indifferente, nel mio caso comunque l'ho inserita nella sidebar, in fondo), vai poi in MODIFICA HTML, cerca il codice del gadget e inserisci cond='data:view.isPage' , così come vedi nell'immagine sottostante. In questo modo gli imporrai la condizione di essere visualizzato, e utilizzato in modo corretto, solo nella pagina.

Come 'non' fare la diretta su instagram
in: //

Come 'non' fare la diretta su instagram



Qualche giorno fa ho deciso di provare a fare qualcosa di nuovo, qualcosa che avevo progettato come obiettivo del mese: fare una diretta su instagram!

In un post precedente, avevo chiesto di lasciare i commenti con le vostre domande/dubbi circa la grafica dei vostri blog.
Ma diciamo che non è andata esattamente come mi sarei aspettata. Non mi sono piaciuta granché, ma ho deciso di non mollare, e che la prossima volta andrà di certo meglio!

Nel frattempo mi sono autorecensita, buttando giù i DO e DON'T durante una diretta.

Parlare lentamente

Questo mi darà la possibilità di respirare a pieni polmoni e non fare la figura di quella che ha l'ansia, nonostante io ce l'abbia... ma non devono per forza accorgersene tutti, no?
Parlando in modo lento, invece, avrò modo di non incespicare nelle parole (cosa che mi accade spesso quando sono nervosa e inizio a parlare a macchinetta), di sentirmi più sicura e apparire, quindi più decisa.

Evitare i lunghi silenzi

Ok, mettiamoci il fatto che è stata la mia prima esperienza, quindi non conoscevo come funzionava il meccanismo della diretta. Se fosse partita immediatamente oppure no... imbarazzante...
Di certo ora ho capito che ciò che bisogna fare è iniziare presentandosi brevemente: chi sono, cosa faccio nel web e perchè dovrebbero seguire la mia diretta, introducendo l'argomento scelto.
Attendere che ci sia qualcuno non aiuta, mette troppa ansia, fidati.

scegliere un orario comodo

Il sabato mattina alle ore 10:00 non è stata un'altra grande idea.
A me è risultato molto comodo: figli a scuola, casa libera, meno imbarazzo per me... E invece no!
Non ho riflettuto sul fatto che c'è gente che lavora, che fa la spesa, che pulisce casa, ecc...
Stabilire un orario comodo per me va bene, ma visto che la diretta è un modo di comunicare con altre persone, non mi sembra il caso di restare soli a guardare quel numero zero accanto l'occhietto.
Anche questo mette ansia.

non salutare tutti coloro che partecipano

A meno che non lascino un saluto nei commenti. Le persone che entrano per vedere la diretta, infatti, non è detto che vi restino. Anche questo è stato imbarazzante, ma ho la cattiva abitudine di essere educata :D

evitare di inquadrare sempre e solo un oggetto inanimato

...tipo lo schermo del pc? Che poi non è che si veda un granché.
Quante volte devo scrivere, ancora, la parola imbarazzante in questo post?


Ho tanto da imparare e ho una gran voglia di farlo, e sono certa che l'aiuto reciproco e la condivisione delle nostre esperienze ci può far crescere.
Se avete ulteriori consigli su cosa fare o non fare durante le dirette, sono più che ben accetti!
Blog Design: come scegliere il giusto template
in:

Blog Design: come scegliere il giusto template



Scegliere il giusto template per il nostro blog, luogo quasi sacro per noi bloggers, a volte diventa un vero e proprio tormento, e non solo per chi lo deve scegliere, ma anche per chi lo deve realizzare, come me.

Ovviamente, però, c'è tutta la pazienza da parte mia, perchè mi immedesimo in colei che deve fare questa ardua scelta che andrà a determinare, non solo la parte visiva del blog, ma anche la "personalità" del contenuto.

Si, carissime blogger, il giusto template fa anche questo!

Noi vestiamo in modo diverso a seconda dell'ambiente, della circostanza, dell'ora. Se la mattina faccio le faccende in casa non metterò di certo jeans e stivaletti. Se la sera devo uscire non lo farò di certo in pantofole.

Dobbiamo iniziare a pensare in questa ottica anche per il nostro blog!


A seconda di ciò che proponiamo nel nostro blog, del nostro contenuto, dobbiamo scegliere il template più adatto.

Nell'infographic qui sotto vi riporto alcuni esempi di layout, che, secondo me, possono essere abbinati ad alcuni tipi di blog.



Mi piacerebbe invece leggere i vostri di gusti: quale layout vi ispira di più? Con quale tipologia vi ritrovate?
Cosa impostare nel tuo blog prima di iniziare a pubblicare un post
in: // //

Cosa impostare nel tuo blog prima di iniziare a pubblicare un post



Appena si apre il blog la prima cosa che di solito facciamo è scrivere il nostro primissimo post, per dire al mondo intero 'Hey! Ci sono anche io!!!'

Non pensiamo a cosa settare, ovvero alle impostazioni delle pagine, dei post, della data, ecc...
Qui vi riporto qualche consiglio su come impostare in Blogger alcune funzioni, che secondo me aiutano a migliorare la visualizzazione dei post e a posizionare meglio i blog nei motori di ricerca.

Impostazioni di base

Compilate in maniera appropriata i campi del titolo e della descrizione. Questo aiuterà, chi sta facendo una ricerca su google, ad esempio, a capire quali argomenti vengono trattati nel tuo blog.



Certo non sempre si ha la certezza che la descrizione venga visualizzata correttamente: ecco perchè è importante scrivere la descrizione anche nel campo dei metatag.



Sempre nelle impostazioni, in lingua e formattazione, ricorda di impostare il fuso orario italiano, perchè altrimenti potresti correre il rischio di non vedere mai pubblicato il post quando decidi tu, al momento della pianificazione.
Credimi, io lo so!!!



Impostazioni del post

Prima di pubblicare c'è una opzione da considerare all'interno dei posts:



Questa è una delle opzioni che ritengo più importanti per una buona visualizzazione dei posts. Se non viene settata da subito, ci si potrebbe trovare di fronte a vecchi posts che conterranno doppi spazi, non proprio carini da vedere. Questo accade perchè l'opzione è valida solo per i posts futuri, non per quelli già pubblicati.

Impostazioni delle pagine

Un'opzione che forse molte di noi tralasciano è la descrizione della ricerca.
E' presente anche nel post, e devo essere sincera, ho inziato a compilare questo campo solo da poco.



Eh, ma qui parliamo di SEO, questo sconosciuto, effimero, e incomprensibile sistema che fa posizionare il sito, nei motori di ricerca, in cima all'infinita lista di blog e siti che trattano i nostri stessi argomenti.
Certo è un potente strumento, se lo si sa masticare. Ed io non è che sia proprio una grande masticatrice di SEO.
Ci sono però tanti siti dai quali attingere un po' di sapere: ve ne segnalo uno in particolare SEO per principianti di Giorgio Taverniti.

Prima di premere pubblica, modificate il Permalink, ovvero l'url del vostro post!
Blogger ne crea uno in automatico che non risulta essere sempre completo; noi, invece, abbiamo la possibilità, cliccando su link, di crearne uno personalizzato.
Ricordate solo di premere il trattino '-' al posto della barra dello spazio!

Spero che questo post vi sia un pochino utile.
Sentitevi libere di condividere il post ovunque! (il blog ed io ve ne saremo eternamente grati ♥)
Se avete altre dritte scrivetele nei commenti.


Come personalizzare i bottoni per il blog con il CSS
in: //

Come personalizzare i bottoni per il blog con il CSS


Rieccomi con un nuovo tutorial dopo tanto tempo (davvero troppo tempo).
La richiesta mi è stata fatta Mary, che appunto mi chiede di mostrare come creare un bottone da inserire nei post, proprio come questo:
corrispondente al codice:
<center><a href="URL" target='_blank'><button>CLICK THE BUTTON</button></a></center>

Certo visto così è proprio bruttino, anonimo, quindi vediamo come ravvivarlo un po'.
Prima però facciamo un ripasso sui tag utilizzati.
<a hre=' ' target='_blank'>...</a> racchiude il link testuale
<center>...</center> centra gli elementi contenuto in esso
<button>...</button> costituisce il bottone stesso
href='URL' contiene l'URL di destinazione
target='_blank' apre il link in una nuova finestra.

Ora possiamo continuare!

Per personalizzare i bottoni e renderli più carini, o comunque che si abbinino alla palette color del nostro blog, dobbiamo dargli degli stili.
Prima di procedere in questo c'è un'altra cosa da determinare: quanti bottoni voglio inserire? Questi bottoni saranno tutti uguali? Voglio usarne un tipo per un'occasione ed uno per un'altra?

In questo caso dobbiamo aggiungere al bottone un 'id' o una 'class'.
L'id farà in modo che il CSS vada ad agire SOLO su un elemento, di conseguenza va usato SOLO per un singolo elemento.
La class andrà ad agire su più elementi, modificandoli tutti.

Quindi, se io voglio inserire dieci bottoni nel mio blog, nove color menta e uno arancione, allora andrò ad usare class per i nove bottoni menta e id per il bottone arancione.
Fin qui tutto chiaro?
Ok!

Per ora utilizziamo l'id perchè così, se in futuro volessi inserire un bottone, non andrà ad influenzarne il CSS.
<center><a href="URL" target='_blank'><button id='bottone' >CLICK THE BUTTON</button></a></center>

Questa è la parte più divertente: aggiungere i CSS!
Qui si vede la trasformazione e i codici prendono vita!
Lo so, lo so, è strano che io mi esalti per queste cose, ma quando la gente mi dice "come fai?", beh... sento quel pizzico di orgoglio e quella risata dentro di me che fa muhuahahahah... avete capito no? :P

Come evidenziare il nome autore nei commenti del blog
in: // //

Come evidenziare il nome autore nei commenti del blog


Rieccomi dopo millenni a scrivere (finalmeeeeenteeee) un nuovo tutorial su codici, Html, CSS e tutte le cose strane che non capiamo, ma che faremo finta di capire... ehmm...ok.

Avete presente nei commenti del mio blog, le mie risposte?
Il mio nome appare evidenziato, così da distinguersi immediatamente.
Ecco, in questo post vi mostrerò come ottenere questo particolare, personalizzando ancora di più il vostro template.

In realtà non c'è nulla di più semplice! (veramente ho impiegato più tempo a modificare l'immagine da inserire nel post)

Tutto ciò che bisogna fare è aggiungere questo stile al vostro CSS
cite.user.blog-author {
background: #e7d351;
padding: 2px;
}

Il colore del background, in questo caso, è quello del mio blog e segue la linea della mia color palette, voi dovrete cambiare il valore con quello del vostro colore.

Come aggiungere i 'Post Correlati' sotto il tuo post
in: // //

Come aggiungere i 'Post Correlati' sotto il tuo post



Questo tutorial nasce da una richiesta che mi è arrivata via messaggio, tramite la mia pagina facebook.
A tale proposito, se ancora non la conoscete, questo è il momento giusto! :D
Voi sapete che non sono un tipo molto social ultimamente, per varie ragioni, ma riuscirò piano, piano a migliorare anche in questo.

Torniamo al tutorial.
Per aggiungere i related posts (i post correlati), alla fine dell'articolo del nostro blog, ci sono siti come linkwithin.com e engageya che mettono a disposizione i loro gadget da poter installare su Blogger.
Entrambi i gadget sono ottimi, ma presentano un piccolo difetto: espongono il link al loro sito (il che è più che legittimo) e si appoggiano a degli script esterni che a volte mi hanno dato dei problemi di 'trasmissione'... mettiamola così.

Lo script che vi propongo è quello che uso io e che ho recuperato da un template utlizzato tempo fa.
Non era mio, quindi non mi prendo nessun merito per questo... io l'ho solo personalizzato alle mie esigenze :)

Per prima cosa incollate il codice qui sotto subito prima della chiusura del tag </head>
Per cercarlo, come al solito, vi consiglio di cliccare all'interno del frame dell'HTML e premere CTRL+F: vi si aprirà un campo nel quale incollerete la riga da cercare.
Il numero in rosso è il risultato massimo dei post, potete aumentare il numero, se lo desiderate.

come inserire i pulsanti di condivisione personalizzati
in: // //

come inserire i pulsanti di condivisione personalizzati



I bottoni per condividere il post sono davvero molto importanti all'interno di un blog. Se non avete grandi pretese potete utilizzare quelli che Blogger mette a disposizione.
Se invece pensate che niente deve essere lasciato al caso, e che quindi persino gli share buttons debbano essere abbinati alla grafica corrente del vostro template... beh allora questo è il post che fa per voi.

Il codice si poggia su uno script di AddThis.com, che vi consiglio di visitare ed esplorare per questo genere di risorse, dopodiché non resta molto da spiegare.
Infatti vi basterà copiare ed incollare il codice qui sotto all'interno del vostro HTML.

Il meccanismo di ricerca è sempre lo stesso: cliccate all'interno della finestra del codice CTRL+F e incollate questa riga  <b:includable id='post' var='post'> e premete 'invio'.

Fatto ciò, vi sarà evidenziata in giallo la parte interessata. Scendete pian, piano fino ad arrivare a questa riga  <span class='post-labels'> e incollate subito sotto il codice  degli share buttons:
<!-- AddThis Button BEGIN -->
<div style='text-align: center;margin-top:20px;'>
<div class='addthis_toolbox'>

<div class='custom_images'>
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share This On Facebook'>
<img alt='Facebook share' border='0' src='URL_IMMAGINE' style='margin-right:5px;'/></a>

<a class='twitter' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Tweet This'><img alt='Twitter share' border='0' src='URL_IMMAGINE' style='margin-right:5px;'/></a>

<a class='addthis_button_pinterest_share'><img alt='Pin This' border='0' src='URL_IMMAGINE' style='margin-right:5px;'/></a>

<a class='addthis_button_google_plusone_share + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Share on Google Plus' border='0' src='URL_IMMAGINE' style='margin-right:5px;'/></a>

</div></div></div>
<script type='text/javascript'>var addthis_config = {&quot;data_track_addressbar&quot;:false};</script><script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-511bbe8405a64ebd' type='text/javascript'/>
<!-- AddThis Button END -->

Per completare il tutto non vi resterà che inserire l'URL delle vostre immagini che raffigureranno i vari social: facebook, twitter, pinterest e google+.
Io ho inserito solo questi quattro, perchè credo siano quelli che abbiano maggiore influenza e affluenza.

Spero che questo tutorial vi sia di aiuto: se così è stato vi prego di condividerlo e magari lasciare un commento, che non fanno mai male :)

Baci!!!!