Visualizzazione post con etichetta tutorial. Mostra tutti i post
Visualizzazione post con etichetta tutorial. Mostra tutti i post
Blockquote: a cosa serve e come renderlo unico
marzo 16, 2019


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.
Puoi attivarlo cliccando le virgolette a destra delle liste, nella barra della formattazione 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.





potrebbe interessarti:







 
 Aiutami a crescere, condividi il mio post!
Grazie!
 



Proprietà di un blog: come trasferirla da un account gmail ad un altro
marzo 05, 2019


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.

trasferire la proprietà di un blog su Blogger da un account gmail ad un altro

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 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à.

ATTENZIONE! Elimina il vecchio amministratore SOLO da Blogger, NON eliminare l'account Google, altrimenti perderai tutte le immagini legate a quell'account.



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!
trasferire la proprietà di un blog su Blogger da un account gmail ad un altro
Firma GMAIL: come crearla in Drive + video tutorial
gennaio 25, 2019


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!

Gadget Contatti di Blogger: come inserirlo in una pagina
febbraio 10, 2018


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
gennaio 17, 2018


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!
Come scegliere il giusto template per il tuo blog
dicembre 14, 2017


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?
Come personalizzare i bottoni per il blog con il CSS
marzo 17, 2017

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
gennaio 18, 2017

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
febbraio 28, 2016


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
febbraio 20, 2016


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!!!!
codice per inserire la Barra top + Search box
gennaio 19, 2016


Ciao belle!!!

Francesca in questo commento mi ha chiesto di realizzare un tutorial sulla barra in alto (come la vedete qui sul mio blog - ancora per poco)... ed eccola accontentata!

In realtà più che tutorial è un regalino!
In che senso? Beh, nel senso che vi lascio il link per il download
https://www.dropbox.com/s/9gsctxud8yoyhjo/barratop.txt?dl=0

Vi ricordo che:

  • per lo sfondo modifcate il background
  • per il carattere e la sua grandezza modificate font
  • per i bordi del search box modificate border
Per qualsiasi altro dubbio lasciate pure un commento.

Come nascondere un elemento del blog
novembre 22, 2015
Credo che molti di voi avrete notato la mia slideshow nella home (beh, ovvio), ma soprattutto avrete notato che non viene mostrata nelle pagine statiche e nei post.

Volete sapere come si fa?
Con un codice semplicissimo da inserire!




Questi sono i codici che realizzano la magia!

<b:if cond='data:blog.pageType != &quot;item&quot;'>
 </b:if>

 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
 </b:if>

 <b:if cond='data:blog.pageType != &quot;index&quot;'>
 </b:if>


Quando il logo fa la differenza
ottobre 26, 2015
Ora che sto preparando il tutto per la 'grande svolta' del mio blog, e ho realizzato il nuovo concept grafico, facendo delle ricerche mi sono resa conto di quanto effettivamente il logo del nostro blog possa fare la differenza!

Inconsciamente è la prima cosa che guardando conquista il nostro gusto oppure no; ci fa storcere il naso oppure no.
A me succede, e a voi?

Innanzitutto mi sono fatta un'idea (lo faccio sempre...un po' come strategia di marketing :P ) dell'aria che tira fra i blog simili al mio, e non solo:
  • dei colori del momento
  • delle tendenze dei fonts
  • della linea dei loghi
Non vi nascondo che ho impiegato un mese per arrivare al punto in cui sono, ovvero il template che state osservando. Un mese in cui ho cambiato decine di volte la disposizione della sidebar, la combinazione dei colori, insomma di tutto di più.

Quindi mi sono fermata e ho semplificato un po' il tutto, partendo dai colori.
Queste sono state le palettes alle quali mi sono ispirata (sì, avete letto bene le palettes, non la...)

palette color Simona S.

Una volta scelto il tema dei colori li ho elaborati in modo da ottenere toni scuri per i caratteri e toni chiari per gli sfondi.
Ovviamente ho tralsciato qualche tonalità e dato risalto ad altre, ma in fase di lavorazione, sinceramente, mi lascio trasportare molto dall'istinto...

Come inserire una slideshow semplice e professionale
settembre 06, 2015
 slideshow Simona S.
Rieccomi per proporvi un bellissimo e alquanto professionale slideshow da inserire nell'HTML del vostro blog.
Qui il DEMO.

Non abbiate assolutamente paura di inserire nuovi codici, perchè basta fare un backup del vostro template e metterete tutto al sicuro!
Perchè ogni tanto lo fate il backup, vero?????

Se non sapete come fare, eccovi il mio tutorial "come fare il backup del tuo blog e non perdere nulla" nel quale vi spiego anche come salvare la parte testuale del vostro blog (post, commenti, ecc...)

Dopo aver messo al sicuro tutto ciò che avete costruito fin'ora, passiamo alla parte...divertente!
Quello che dovete fare è semplicemente copiare il codice qui sotto...

<style type='text/css'>
/* <![CDATA[ */
    #lordSlideContainer           {position: relative;display: block;text-align:center; margin-bottom:100px;}
    #lordNivoSlider               {position:relative;width:815px  !important;height:302px  !important;min-height:310px  !important; margin: 30px auto 10px auto;float:none;}
    #lordNivoSlider img           {position:absolute;top:0;left:0;display:none}
    .nivoSlider                  {position:relative;width:100%;height:auto;}
    .nivoSlider img              {position:absolute;top:0;left:0;}
    .nivo-main-image             {display:block!important;position:relative!important;width:100%!important}
    .nivoSlider a.nivo-imageLink {position:absolute;top:0;left:0;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none}
    .nivo-slice                  {display:block;position:absolute;z-index:5;height:100%;top:0}
    .nivo-box                    {display:block;position:absolute;z-index:5;overflow:hidden}
    .nivo-box img                {display:block}
    .nivo-caption                {display:none;padding:10px;font-family:Helvetica,Arial,sans-serif;position:absolute;left:10px;bottom:10px;right:10px;background:#000;color:#fff;-ms-filter:"alpha(opacity=80)";filter:alpha(opacity=80);opacity:.8;width:auto;z-index:8;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
    .nivo-caption p              {padding:5px;margin:0}
    .nivo-caption a              {display:inline!important}
    .nivo-html-caption           {display:none}
    .nivo-directionNav a         {position:absolute;top:45%;z-index:9;cursor:pointer;display:block;width:30px;height:30px;background:url("http://3.bp.blogspot.com/-bJzN66mSNNc/T7dSdjkzf3I/AAAAAAAABgI/PlGK0Q8OYeU/s1600/w2bArrows.png") no-repeat;text-indent:-9999px;border:0}
    .nivo-prevNav                {left:10px}
    .nivo-nextNav                {background-position:-30px 0!important;right:10px}
    .nivo-controlNav             {position:absolute;left:0;right:0;bottom:-35px;text-align:center;}
    .nivo-controlNav a           {position:relative;z-index:9;cursor:pointer;display:inline-block;width:22px;height:22px;background:url("http://4.bp.blogspot.com/-DEGRTSA4m6A/T7dSenBUBpI/AAAAAAAABgM/EB-Q2htVToI/s1600/w2bBullets.png") no-repeat;text-indent:-9999px;border:0;margin-right:3px}
    .nivo-controlNav a.active    {font-weight:bold;background-position:0 -22px}
/* ]]> */
</style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'/> <script src='http://jj4me.altervista.org/jquery.nivo.slider.pack.js'/> <script type='text/javascript'>
/* <![CDATA[ */
jQuery(document).ready(function($) {
    $('#lordNivoSlider').nivoSlider({
  effect: 'fade,fold',               // Specify sets like: 'fold,fade,sliceDown,random'
    slices: 15,                     // For slice animations
    boxCols: 8,                     // For box animations
    boxRows: 4,                     // For box animations
    animSpeed: 500,                 // Slide transition speed
    pauseTime: 5000,                // How long each slide will show
    startSlide: 0,                  // Set starting Slide (0 index)
    directionNav: true,             // Next & Prev navigation
    controlNav: false,               // 1,2,3... navigation
    controlNavThumbs: false,        // Use thumbnails for Control Nav
    pauseOnHover: true,             // Stop animation while hovering
    manualAdvance: false,           // Force manual transitions
    prevText: 'Prev',               // Prev directionNav text
    nextText: 'Next',               // Next directionNav text
    randomStart: true,             // Start on a random slide
    beforeChange: function(){},     // Triggers before a slide transition
    afterChange: function(){},      // Triggers after a slide transition
    slideshowEnd: function(){},     // Triggers after all slides have been shown
    lastSlide: function(){},        // Triggers when last slide is shown
    afterLoad: function(){}         // Triggers when slider has loaded
});
});
/* ]]> */
</script> <div id='lordSlideContainer'><div id='lordNivoSlider'>
<a href=''><img border='0' src='http://images.movieplayer.it/images/2009/12/14/lo-scienziato-flint-lockwood-protagonista-del-film-piovono-polpette-141382.jpg'/></a>
<a href=''><img border='0' src='http://blog.screenweek.it/wp-content/uploads/2013/09/cloudyfood1.jpg'/></a>
<a href=''><img border='0' src='http://images.movieplayer.it/images/2013/12/09/piovono-polpette-2-piovono-marshmallow-per-flint-in-una-scena-294600.jpg'/> </a>
</div></div>

...ed incollarlo subito sotto il tag <div class='main-outer'> che trovate all'interno dell'HTML del vostro template.
Se non doveste riuscire a trovarlo, cliccando nella finestra dei codici, premete CTRL+F ed scrivete il tag, poi INVIO e vi si evidenzierà così la riga, facilitandovi la ricerca.

PERSONALIZZAZIONE

Potete personalizzare:

♦ la larghezza dello slideshow, cambiandone il valore in grassetto
♦ l'effetto dello slider, anche questo in grassetto, scegliendo un solo effetto o tutti scrivendo 'random'.
♦ il link dell'immagine href='...' collegandolo così ad un vostro post. Se non sapete come fare guardate qui.
♦ sostuite l'URL dell'immagine che trovate con quello dell'immagine del vostro post.

Se avete domande, dubbi, perchè magari  ho scordato qualcosa, commentate pure qui sotto!
Mi farebbe tanto, tanto piacere se voi convideste il post sul vostro social preferito, magari mettendo l'hashtag #socutethings
Baciotti :*

Come creare un menu a discesa semplice
febbraio 03, 2015
Devo ammettere che effettivamente il codice del precedente menu 'drop down' non era molto semplice da modificare, così sono andata alla ricerca di un aiuto nella costruzione del famigerato menu a discesa!
simple dropdown menu Simona S.
Dopo aver finalmente trovato un codice semplice da personalizzare, ecco che Blogger come al solito mette i bastoni fra le ruote.

Come?
Il codice inserito nel gadget HTML/Javascript nell'area 'adibita' alle pagine, sforma tutto il menu! Probabilmente è anche per questo motivo che inserendolo nel post di presentazione il menu si vedeva corretamente, mentre una volta inserito nel gadget si deformava, senza nessuna possibilità di modificarlo in modo semplice ed immediato.

Premesso ciò, vi dico che il seguente codice, davvero facilissimo da personalizzare, è da inserire all'interno del codice HTML del vostro template!

Nessuna paura!!!
Ormai siete diventate bravissime ;)

Intanto vi presento il nuovo menu!
L'ho inserito nel blog demo dello slideshow per questione di comodità, soprattutto nel farvi vedere come effettivamente vien fuori inseirto nel modo corretto.... è il menu sotto il titolo del blog.

Arriviamo al codice.
Errore box commenti di Facebook: la soluzione
agosto 18, 2014


Quando avete cercato di installare il box commenti di facebook avete riscontrato questo fastidiosissimo errore?

Error parsing XML, line xxx, column xx:
The reference to entity "version" must end with the ';' delimiter.

Questo errore ci ha portati tutti fuori strada, credendo che ciò che non andava fosse il ';'.... per l'appunto.

E invece no!

Finalmente ho trovato in questo sito la soluzione, che ho provato, e posso dire che non dà più l'errore famelico!

Quindi seguendo il video tutorial che ho fatto precedentemente, se nel salvare le modifiche all'HTML vi trovate davanti a quell'errore non perdete la testa!
Notate che viene evidenziata la riga in questione?

js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";

Ecco lasciatela evidenziata (così vi verrà più facile trovarla), e poi non dovete far altro che aggiungere subito prima della parola 'version' queste lettere 'amp;'.

Social Icons personalizzate #2
luglio 03, 2014
free social icons personalizzate - Simona S.


Ricordate questo mio post?

Parlavo di immagini di social icons semplicissimi, bianchi, quasi insignificanti presi da soli, ma dando loro un background (alias sfondo), facendo in modo che questo cambiasse colore al passaggio del mouse (:hover), acquistavano di certo più carattere.

Oggi vi mostro come trasformarli da quadratini, come mostrato nell'altro tutorial, a cerchietti, e vi accorgerete come alcuni codici visti in passato possono utilizzati per giocare con i vari elementi del blog.
(copia e incolla i codici direttamente nel gadget HTML/Javascript e ricorda di modificare il link)




Clicca per copiare il codice Chiudi X

Le mie icone, in alto a destra, sono fatte allo stesso modo, ma le ho rimpicciolite senza usare un programma di grafica. Come? Con i codici! :D

Nel tag img ho inserito i parametri della larghezza (width) e dell'altezza (height), così:

<img src="http://3.bp.blogspot.com/-9RMPMQmbYa8/UwuQk-c3UCI/AAAAAAAALak/uy2w1vJsTDs/s1600/b-lovin.png " width='20px' height='auto'/>



Clicca per copiare il codice Chiudi X

Utilizzando le varie possibilità che ci sono con lo stile border-radius, possiamo creare vari effetti come questi:
Blog design: immagini dei post popolari circolari
giugno 27, 2014
Ovvero come arrotondare le miniature del gadget 'Popular Post'.

Lo so, è l'ultimo in ordine delle richieste di tutorial, ma è anche quello che risco a fare in poco tempo, e visto che quando i figli sono a casa bisogna in pratica prendere il numero per stare al pc... appunto -.-

Per ottenere questo effetto...

tutorial popular post blogger - Simona S.

Il procedimento è davvero semplicissimo e vi basterà semplicemente copiare e incollare il codice CSS!

.item-thumbnail a img {
filter:alpha(opacity=100);
-webkit-border-top-right-radius:50;
-webkit-border-top-left-radius:50;
-webkit-border-bottom-right-radius:50;
-webkit-border-bottom-left-radius:50;
border-radius: 50px;
-moz-border-radius: 50px;
border:1px dashed #999;
padding:3px;
}

Se non volete il bordo tratteggiato, ma liscio, sostituite dashed con solid all'interno di questa riga border:1px dashed #999;.
Se invece non volete proprio il bordo, lì dove trovate 1px cambiate con 0.

Ho notato che in alcuni blog la lista delle immagini dei Post Popolari sono precedute da un puntino (caratteristica delle liste, appunto). Volete eliminarlo? Ecco come fare! Inserite questo codice, anche subito sotto quello precedente (vedi sopra)

.widget .popular-posts ul {
list-style: none;
}




HAI BISOGNO DI UN AIUTINO?


Blog design: menu delle pagine fisso in alto
maggio 12, 2014
Innanzitutto scusatemi l'assenza di ben quasi un mese (cavoli), ma tante cose, fra cui influenza spietata si sono messe fra me ed un bel post che dovevo fare da tempo -.-
Vi sono mancata? Spero di sì :D
Nel frattempo ho visto che una cara amica blogger mi ha citata in un suo post sulla larghezza delle immagini: Tine/Silvia!!!!
Non avete ancora visto il post? E che aspettate?

Ma passiamo a noi, al come spostare il menu delle pagine in alto nel nostro blog e mantenerle fisse, facendo in modo che coprano tutti gli altri elementi del blog, una volta che si scende verso il basso con lo scrollbar.

In partica come nel mio blog :P

blogger menu fisso in alto - Simona S.

Ho realizzato un video tutorial per facilitarvi l'inserimento dei codici, ma i codici ve li scrivo qui, così vi basterà copiarli ed incollarli come mostrato nel video.
Dite la verità... ma quanto vi voglio bene??? TANTO COSI'!!!!!!!!!!!!

Vi lascio qui il link diretto ;) CLICCA PER IL VIDEO

Per centrare la pagine (e vale anche se non lasciate le pagine così come sono, senza spostarle in alto) inserite questo codice nel blocco delle tabs (vedi video)
.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;text-transform:uppercase;}

Per eliminare i bordi
.tabs-outer {border:none !important;}

Copia e incolla questo codice per inserire le pagine (vedi video)
<div style='width:100%; height:30px; display:block; position:fixed; z-index:9000; background:#fff;'>

INSERISCI QUI IL CODICE DELLE PAGINE

</div>

PER APPROFONDIRE


Avrai notato dal video che le pagine non sono proprio attaccate al bordo superiore, questo perchè, anche se io l'ho reso invisibile dal gadget, la navbar resta comunque presente.
Per eliminare quello spazio, dobbiamo eliminarlo dal contenitore che racchiude tutto il nostro blog, quindi cerca body (lo trovi all'inizio degli stili) e inserisci questo codice all'interno degli stili:
margin-top:-30px;

Se non sono stata abbastanza chiara, se ti sei persa un passaggio, lascia pure un commento qui ;)


Come fare il backup del tuo blog e non perdere nulla
aprile 14, 2014
Hai paura di perdere i tuoi contenuti del blog e magari tutte le modifiche fatte nel tuo tema grafico?
Allora devi asspultamente prendere l'abitudine di fare, almeno una volta al mese, un backup del proprio blog.



Cos'è un backup?
In parole semplici, semplici, è il salvataggio grafico e testuale del nostro blog alla data del backup stesso.

ATTENZIONE: vai alla fine del post per leggere il metodo aggiornato al 2020!

BACKUP tema: salvare la parte grafica del blog.


Questa funzione vi dà la possibilità di salvare tutte le modifiche apportate al modello grafico, il tema appunto, del vostro blog.
Una volta in MODELLO, cliccate sulla scritta BACKUP/RIPRISTINO, accanto alla rotellina in alto a destra. Si aprirà una finestra popup (la stessa per caricare i nuovi template).
Cliccate SCARICA MODELLO COMPLETO come nell'immagine.

Salvate il file .xml con il nome del template (es. About Simona) che volete dargli, oppure con la data di quel backup (es. template-11-04-2014).


ESPORTARE IL BLOG: salvare i post, le pagine, i commenti e le immagini del blog.


Salvare la parte testuale del proprio blog, vuol dire non perdere nulla di ciò che si è scritto fin'ora, salvando tutto ciò che abbiamo scritto - post (pubblicati, bozze), pagine, commenti - dal web, direttamente nel nostro computer.
Facendo il backup dei contenuti salvi anche tutte le immagini.

Andate su IMPOSTAZIONI e poi su ALTRO, quindi scegliete ESPORTA BLOG; vi basterà salvare il file sul vostro pc, e il gioco è fatto :)


In caso di dubbi, sapete che potete sempre lasciare un commento ♥


aggiornamento 14/02/2020!

Vediamo come fare il backup dei contenuti e del tema con la nuova interfaccia di Blogger.
Per salvare la parte grafica, il template, vai, dal menu a sinistra, in Tema. Clicca sui 3 puntini in alto a destra, e poi su Esegui Backup.


Per salvare il Contenuto del blog, post, pagine, commenti e immagini, vai in Impostazioni - Altro - Esegui il Backup dei contenuti.



Ricorda di fare il backup almeno 1 volta al mese!