Visualizzazione post con etichetta tutorial. Mostra tutti i post
Visualizzazione post con etichetta tutorial. Mostra tutti i post
Come creare un menu a discesa semplice
in: // //

Come creare un menu a discesa semplice

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
in: //

Errore box commenti di Facebook: la soluzione



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
in: //

Social Icons personalizzate #2

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
in: // //

Blog design: immagini dei post popolari circolari

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
in: // //

Blog design: menu delle pagine fisso in alto

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
in: //

Come fare il backup del tuo blog e non perdere nulla

Grazie ad una richiesta, fatta nei commenti, oggi vado a scrivere questo post per ricordare un po' a tutte, ma soprattutto a chi non ci ha mai pensato, che è bene 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.
Ma ATTENZIONE: vi sono due vie da percorrere per salvare la grafica e il testo scritto.
Vi mostro come fare.


BACKUP DA MODELLO


Questa funzione vi dà la possibilità di salvare tutte le modifiche apportate al modello grafico 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 la parte testuale del proprio blog, vuol dire esportarlo. In pratica portiamo tutto ciò che c'è di scritto - post (pubblicati, bozze), pagine, commenti - dal web, direttamente nel nostro computer.

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 ^_^

UPDATE! Ora il pulsante per il backup della parte testuale del blog si chiama  esegui il bakcup dei contenuti 


p.s. perdonatemi ancora l'assenza, ma fino a quando non passerà Pasqua sarò più che altro assente (o quasi)... sono molto impegnata con la parrocchia, sono catechista, coordinatrice (di tutto il mio gruppo di catechiste del primo anno di cresima) e anche responsabile della direzione delle stazioni della rappresentazione della Via Crucis. Sono già due settimane che in pratica non ceno con la mia famiglia, ma sono agli sgoccioli, e nonostante lo stress questo è il periodo dell'anno liturgico che amo di più :)
So che non c'entrava nulla con il tutorial, ma diciamo che è una chicca per farvi conoscere un po' più ciò che faccio al di fuori del web ;)
Come centrare la data e il titolo di un post in Blogger
in: // //

Come centrare la data e il titolo di un post in Blogger

Certo questo tutorial non è in cima ai tutorials richiestimi, ma per realizzare quello delle pagine fisse in alto devo fare anche un video tutorial, perchè lo sapete ormai... mi piace semplificarvi la vita ;)

Quindi vediamo come centrare la data il titolo del post.
Niente di più semplice!

LA DATA


Cercate negli stili del vostro blog il blocco riguardante la data che trovate sotto il nome di .date-header span.
Probabilmente troverete l'allineamento del testo a sinistra, ovvero text-align:left, voi dovete dargli il comando di centrarlo, quindi sostituite left, con center.
Se invece non lo trovate, perchè non c'è scritto, inseritelo voi, come nell'immagine qui sotto.

Come avrete notato nell'immagine, un'altra riga ho evidenziato perchè importante, ovvero display:block.
Cosa sta a significare?

Con questo comando gli diciamo che l'elemento inserito nella pagina html, deve occupare tutta la riga, per intero, senza intereferenza da parte di nessun altro elemento.
In pratica su quella riga ci deve stare solo lui ;)
Quindi, anche questo aggiungetelo!

IL TITOLO DEL POST


La stessa cosa succede per il titolo del post.

Se doveste avere problemi, potete sempre lasciare un commento.
Spero vi sia utile :)
Google friend connect non funziona? ecco come fare!
in: // //

Google friend connect non funziona? ecco come fare!

Innanzitutto perdonate l'assenza di questo periodo!
Sono stata abbastanza impegnata al di fuori del web, e a volte ero così stanca da non riuscire a stare al pc... i commenti li ho potuto lasciare grazie al cellulare :(

Ritornando qui sul blog ho visto con immenso piacere che i miei followers sono aumentati... GRAZIE!!!!
Siete state gentilissime, non solo scegliendo di seguirmi, ma anche con i vostri commenti ♥

Avevo quindi deciso di ricambiare il gesto di gentilezza, diventando follower a mia volta, ma Google Friend Connect ha deciso di fare i capricci... diciamo così.
All'inizio ci avevo perso la pazienza, poi testarda, ma soprattutto non mi andava giù di non ricambiare quel gesto, ho provato una via più lunga.
Ed infatti ci sono riuscita!

Quando cliccate sul tasto 'unisciti a questo sito', vi compare una finestra popup, non cliccate subito su 'segui questo blog', ma su 'ALTRE OPZIONI'http://aboutsimona.blogspot.it/
Vi apparirà un'altra schermata, non c'è bisogno di cliccare nient'altro se non il tasto 'SEGUI'.
http://aboutsimona.blogspot.it/
Di certo qualcuna di voi avrà già trovato questa soluzione, ma di sicuro servirà a chi, come me, in questi giorni stava sclerando :P
A proposito del box commenti di Facebook
in: //

A proposito del box commenti di Facebook

Visti i dubbi, le difficoltà a volte nell'inserimento, ma soprattutto il voler rimediare ai miei errori, vi propongo un video tutorial realizzato proprio per questo scopo.


Nel video vi mostro come inserire in maniera semplicissima il box commenti all'interno del blog, anche in base alle funzioni che vogliamo che svolga.

Inoltre ci sono delle mie piccole considerazioni finali, che sono puramente personali, quindi non prendete come oro colato... anzi, ditemi la vostra a riguardo!

Nel video combatto anche con il mio coniglietto Taffy, che sembra prenderci gusto a gironzolare intorno alla postazione del pc, ed in particolare a mordicchiare i fili... e già di danni ne sta facendo parecchi -.-.
Ma è il mio tesoruccio e lo adoro (in questo momento è sdraiato dietro di me ♥).

Ah ve l'ho detto che la mia cricetina Biancaneve si è ripresa del tutto?
E' troppo bello vederla nuovamente arrampicarsi come una scimmietta ^_^

Ok sono andata fuori tema, ma anche questa sono io... mica solo codici ;)

Come inserire i codici nel tuo CSS in Blogger
in: // //

Come inserire i codici nel tuo CSS in Blogger



E' ovvio che io sbaglio quando mi riferisco a tutte voi nei miei tutorials, come se fossero scontate alcune conoscenze, e vi chiedo scusa :)

Per rimediare ho realizzato un video tutorial piccino, picciò per mostrare come e dove inserire i codici nel vostro CSS.

Ma cos'è un CSS? (si chiederanno alcune di voi)
Beh io sono un'autodidatta, come il 99% di chi mi segue, e allora ve lo spiego in modo semplice e conciso:
il CSS è composto da una serie di codici che hanno il potere di cambiare l'aspetto grafico e l'impostazione del vostro blog.

E' come se fosse la macchina da cucire di una sarta :D

Detto ciò, i professionisti del web mi staranno lanciando maledizioni di ogni genere, ma visto che sono sicura che da queste parti di Guru non ne transitano, sono piuttosto serena :P

Bando alle ciance, che ne faccio sempre troppe, eccovi il video tutorial!

Social Icons: come personalizzare i colori
in: //

Social Icons: come personalizzare i colori

free social icons - Simona S.


Quelle che vedete qui sotto sono delle semplici social icons bianche....(?)

No, non vi chiedo di mostrarmi la vostra tecnica di colorazione migliore, con chissà quale programma ultra mega all'avanguardia :D


Ciò che vi mostro oggi è come prendere delle semplici icone bianche ed inserirle in div da colorare e personalizzare a nostro piacimento!

Prima di ogni cosa ci servono le icone, e intanto potete prelevare queste :)
Poi dovete caricarle sul blog... beh ma comunque il link vi apparirà ugualmente nel tutorial :P (è l'orario...sì sì...credici -.-)

Ogni immagine/icona deve essere un link per avere effetto come questo

Ormai sapete che per ottenere un link bisogna che ci sia il tag a che racchiuda l'elemento linkabile, di conseguenza avremo questo codice:
Come inserire immediatamente la firma dell'autore visibile in tutti i post
in: // //

Come inserire immediatamente la firma dell'autore visibile in tutti i post

In un tutorial fatto quasi un anno fa (wow come passa il tempo) vi spiegavo come inserire una firma semplice nei vostri post. Certo questo aveva un piccolo difetto, ossia quello di far visualizzare la firma nei post successivi all'inserimento del codice.

Oggi invece vi mostro come inserire una firma visibile in tutti i post, anche in quelli vecchi.

Creiamo la nostra firma... come? dove? Beh esistono alcuni tool online facili ed intuitivi.
Uno che posso consigliarvi è Pixlr Editor, che somiglia un po' a Photoshop, ma più semplice.

Dopo aver creato la vostra firma come immagine, dobbiamo caricarla sul blog.
Forse mi ripeterò, ma vi consiglio di creare un post e mantenerlo come bozza in modo da avere le immagini a disposizione, come se fosse una cartella :)

Una volta caricata l'immagine avrà come codice su per giù questo:
<img src='URL_VOSTRA_FIRMA' border='0' alt='' />
Ora andate in Modifica HTML e andate al widget Blog1 come nell'immagine sotto.

tutorial inserire firma nei post - Simona S.

Scendete giù pian,pianino, per cercare nel codice la sezione del post. Una volta trovato cliccate sulla freccina per espanderlo.

Come inserire le immagini dei tutorial in una griglia
in: // //

Come inserire le immagini dei tutorial in una griglia

Mi è stato chiesto da Marilù Maaga come si possono inserire le immagini dei tutorial così come ho fatto io nella mia pagina TUTORIAL-LIST.



Il sistema utilizzato da me è quello delle tabelle (presto un tutorial - se non video tutorial - sull'argomento), che possono sembrare difficili da realizzare, ma che una volta capito il sistema, non c'è niente di più semplice!


Prima di ogni altra cosa avrete bisogno delle immagini che richiamino i vostri tutorials...
eccone una...

ed eccona un'altra...

Proprio per evitare questo stile a colonna, o di inserirle affiancate, ma averle quasi appiccicate (mi riferisco alle blogger che non hanno dimestichezza con i codici), è possibile affidarsi alle tabelle.

Piccolo promemoria!


Ricordate i tag, ovvero le paroline inserite nelle '<...>', hanno un'apertura ed una chiusura, riconoscibile dalla barretta trasversale subito dopo la prima virgoletta '</...>'.
Se non chiudete bene il tag, sicuramente vi sarà segnalato un errore!

La base del codice è questo:
<table>
<tr>
<td>

</td>
</tr>
</table>

Vediamo un po' cosa significano questi tags:

  • table sta per tabella e racchiude tutto ciò che sta all'interno.
  • tr sta per table row, ovvero la riga nel quale sono contenuti gli elementi.
  • td sta per table data, ossia cella conosciuta meglio come colonna (è così che la chiamerò io) nel quale inserire i dati (scritti o immagini).

Questo giusto per farvi capire in linea di massima come sono strutturate le tabelle, ma in un altro contesto vi spiegherò come utilizzarle al meglio.

Torniamo a noi!
Le immagini che io ho inserito nella mia pagina sono racchiusi in una tabella a due colonne e tante righe, quante me ne servono.

Quando si deve lavorare con i codici, vi consiglio (ma certamente lo sapete già) di utilizzare sempre in modalità HTML del post, e anche di caricare le immagini da qui. Sarà più semplice posizionarle nelle varie colonne.
Ecco il codice per una tabella ad una riga e due colonne:

<table>
<tr>
<td>

</td>

<td>

</td>
</tr>
</table>

Vi basterà cliccare all'interno del tag td, ovvero nello spazio che intercorre fra '<td>' e '</td>' (per facilitarvi ho creato questo spazio) e caricare la vostra immagine.

Una volta caricate le immagini, vi basterà andare in modalità Scrivi, cliccare sulle di esse e dare il comando inserisci link. Così vi sarà più facile aggiungere un collegamento, ma anche a quale immagine lo stiamo facendo :)

Per avere più righe a due colonne, vi basterà duplicare i tag tr con tutto il loro contenuto (meglio se prima di aggiungere le immagini).

PER APPROFONDIRE

  • Questo metodo vale anche per l'inserimento di tabelle all'interno di gadget nella sidebar, come visto qui.
  • Ricorda che puoi sempre creare un post apposito dove ospitare le immagini che usi nella sidebar, quasi fosse una cartella immagini.
Inserire il pulsante 'Pin It' sulle immagini + pin buttons
in: //

Inserire il pulsante 'Pin It' sulle immagini + pin buttons

tutorial inserire pin button blogger - Simona S.

I social networks si sa, sono molto importanti per allargare la cerchia dei nostri utenti, per far conoscere il nostro blog.

Un buon metodo è diffondere le immagini dei nostri post e uno dei social network più famosi che utilizza questo meccanismo è senza ombra di dubbio Pinterest.
Lì si trovano idee di ogni tipo, un singolo materiale è oggetto di innumerevoli DIY, come il sughero.

Se ancora non lo conosci e vuoi registrarti per far parte di questa bellissima e 'pulita' community, ma non sai come fare... qual'è il problema? Ne ho fatto un tutorial qui :)


Crea sezioni carine per i tuoi link
in: //

Crea sezioni carine per i tuoi link



Quante/i di voi hanno una pagina in cui condividono i loro blog preferiti, perchè metterli nella sidebar significherebbe renderla un'autostrada?
Io personalmente lo preferirei facendo comunque una cernita fra quelli che seguo, altrimenti dovrei inserirne più di 200...

Pensando a come sistemarli, senza l'utilizzo di photoshop, mi sono venute in mente queste soluzioni: tipo raccoglitore a schede.

F
O
O
D

crafter

Di certo a raccogliere solo alcuni blog, tralasciandone qualcuno solo perchè ci è passato di mente, potrebbe offendere qualche blogger, ecco perchè, magari, sarebbe meglio fare una buona premessa all'inizio, del tipo:
 'condivido con voi i blog da me seguiti che potrebbero risultarvi utili grazie all'ausilio dei loro tutorials - mi scuso in anticipo se ho dimenticato qualcuno, ma anche io sono umana :) -'.
Che dite ci può stare?