Visualizzazione post con etichetta tutorial. Mostra tutti i post
Visualizzazione post con etichetta tutorial. Mostra tutti i post
Google friend connect non funziona? ecco come fare!
// //

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

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 ;)

Blog design: come inserire i codici nel tuo CSS
// //

Blog design: come inserire i codici nel tuo CSS



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

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:
Blog design: come inserire la firma visibile in tutti i post
// //

Blog design: come inserire la firma 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
// //

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!

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

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

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?

Come inserire il form dei contatti in una pagina statica
// //

Come inserire il form dei contatti in una pagina statica

Questo tutorial lo avevo visto tempo fa su un blog straniero, che purtroppo non riesco più a ricordare dove sta... altrimenti lo avrei anche linkato.

Ecco come inserire il modulo dei contatti che Blogger ci mette a disposizione in una pagina statica.

Anche se il form non deve comparire nella sidebar, dobbiamo comunque inserire il gadget affinché funzioni correttamente.
Quindi andate in Layout e scegliete il gadget Modulo dei contatti da 'altri gadget'

tutorial inserire form contatti pagina blogger - Simona S.

Per rendere invisibile il modulo all'interno della sidebar, aggiungete nel vostro CSS, negli stili del vostro blog questo codice:
video tutorial: come creare un 'vector'

video tutorial: come creare un 'vector'



E' tutto il giorno che ho lavorato a questo progetto, per non deludere a chi l'avevo promesso :)
Vi lascio dunque il link del lunghiiiiiiiissimo video tutorial, diviso però in tre parti.
Come sempre abbiate pietà per la mia voce che io trovo orribile :P

how to create a vector - part 1 - come creare un vector
how to create a vector - part 2 - come creare un vector
how to create a vector - part 3 - come creare un vector

p.s. sto valutando di realizzare video tutorial anche con il faccino... che dite, ci provo? ^_^


Colgo anche l'occasione per mostrarvi il mi nuovo progetto dell'anno: JUST COLORS, il blog di sole palette colori.
Se vi va dategli un'occhiata :)
Come eliminare lo sfondo grigio dalle immagini caricate sul blog
// //

Come eliminare lo sfondo grigio dalle immagini caricate sul blog

Quando è capitato a me sono uscita letteralmente pazza, tanto da dedicarne anche un piccolo post e scrivere sul forum della community di Blogger.

Capita a volte di caricare le immagini su blogger in perfetto stato e di vedersele poi pubblicate con uno sfondo grigio orribile e deprimente.
Tutta colpa delle nuove impostazioni di Google+.

Il punto è che le loro intenzioni erano buone, poichè avevano creato un'impostazione che voleva migliorare le immagini, attraverso la correzione automatica.
Invece s'è verificato solo un grande casino.
Ecco come fare per eliminare questo problema (ed io da allora non ho avuto più di questi problemi).

Seguite questo link e scorrete la pagina, fino ad arrivare alla sezione delle foto dove troverete questo:
tutorial immagini grigie blogger - Simona S.
Impostate il settaggio su OFF!
Fatto questo, le vostre immagini verranno visualizzate sul blog esattamente come create da voi... quindi se in futuro dovessero esserci problemi...beh... :D


p.s. Probabilmente negli ultimi 2 giorni avrete visto qualche post apparire e poi sparire... Mi dispiace, ho fatto un po' di casino... In pratica sto risistemando le etichette dei post e quindi non mi sono accorta che alcuni post erano delle bozze... insomma ho mandato online ciò che non doveva andare perchè vecchio e obsoleto. 
Sorry :P
Blog design: inserire uno slideshow semplice nel nostro blog
// //

Blog design: inserire uno slideshow semplice nel nostro blog

Nel demo troverai il nuovo slideshow che puoi trovare in questo post! cliccami!!!


Come vi avevo già preannunciato in questo post ho trovato un carinissimo slideshow da inserire facilmente all'interno del nostro blog.

Ho dovuto apportare un bel po' di modifiche per renderlo più... carino e anche per aggiustare qualche errorino che mi dava :)
L'originale è qui, mentre quello modificato da me lo potete vedere in questo demo.
inserire slideshow semplice blogger - Simona S.
Per ottenere lo slideshow bisogna innanzitutto posizionare gli script al punto giusto all'interno del codice del nostro blog.

Niente paura!!! Partite sempre dalla concezione che se ce l'ho fatta io, potete farcela anche voi!!!


Aprite da Modello -> Modifica HTML e incollate sotto <head> queste due righe

<script src='http://code.jquery.com/jquery-latest.min.js'/>
<script src='http://jj4me.altervista.org/slide-js/bjqs-1.3.min.js'/>

Scorrete la pagina fino a trovare il tag di chiusura di 'body', ovvero </body> e incollate subito prima i codici qui sotto.
Blog design: come definire la larghezza del logo
//

Blog design: come definire la larghezza del logo

Quanto siete entusiaste di creare da voi il vostro logo?
E quante volte vi siete demoralizzate perchè alla fine risultava troppo grande o troppo piccolo rispetto ai 'confini' del template?

Bene oggi vi parlo di un trucchetto per avere un logo perfetto!
Almeno nelle misure ;)

Innanzitutto dovete entrare in PERSONALIZZA da Modello e andate a vedere in Modifica le larghezze del vostro blog, come nell'immagine qui sotto.

Il mio layout è largo 1020px, ma il mio logo è largo 900px... perchè?
Per come vi dicevo in un altro post, ci sono nel CSS predefinito di Blogger dei margini prestabiliti, che non permetterebbero mai al vostro logo di calzare perfettamente nell'header.
Sono i margin e i padding che a volte romponno le scatole, proprio per questo vi suggerisco, ogni volta che create il logo, di mantenervi al di sotto della larghezza dell'intero blog, di almeno 20/30px.

Se invece volete un logo che sia esattamente largo quanto l'intero blog, bisognerà andare a modificare qualcosina nei codici.
Ecco come.
Facebook cover: misure e suggerimenti
//

Facebook cover: misure e suggerimenti


Si sa, anche l'occhio vuole la sua parte, ed io ne sono un'accanita sostenitrice, ormai lo sapete.
Sarà forse che è radicato nel mio gene ancestrale derivante dall'antica Grecia, dove gli Esteti erano fissati con il bello...
Sta di fatto che ciò che mostriamo virtualmente, attraverso le immagini, risulta essere il nostro biglietto da visita.
E chi non vorrebbe un bel biglietto da visita che rappresenti il nostro spirito e la nostra passione in ciò che facciamo?
Forse un giorno arriveremo ad avere biglietti con la nostra foto che si muove e che ammicca, o che parla, come in Harry Potter, ma per ora dobbiamo accontentarci delle nostre capacità grafiche per far parlare di noi i nostri layouts, le nostre pagine, ecc...

Ogni elemento grafico è studiato e tenuto molto in considerazione dalle grandi aziende, perchè l'effetto visivo è ciò che all'inizio, più di qualsiasi contenuto, colpisce il visitatore, incuriosendolo su ciò che si trova all'interno della pagina.
Dite la verità quante volte avete giudicato un libro dalla copertina?

E proprio di copertina, di cover, vi parlerò oggi.

Quali sono le misure per la cover di facebook?
Le misure ideali per avere una cover perfetta sono 851x315px

Come devo realizzarla?
Beh, io posso darvi qualche suggerimento, il tutto è sempre molto soggettivo, lo sapete. L'importante è come scritto qui sotto:
  • mostrare ciò che più importante sempre sul lato destro della cover, perchè bisogna tener conto che l'immagine del profilo va a coprire uno spazio sul lato sinistro.
  • non tralasciare di inserire nella cover, non solo il nome della tua pagina (vabbè era ovvio), ma delle parole chiave per far capire di cosa tratta la pagina.
  • inserisci anche l'URL del tuo blog... è sempre comodo ;)


Se volete cimentarvi nel realizzare la vostra cover, ma non avete un programma di grafica che vi dia a possibilità di definire le dimensioni, vi fornisco la base della cover di facebook. Cliccando sul link vi apparirà la pagina di drive con un foglio bianco, salvatelo sul vostro pc.


Al di sotto della cover trovate i bottoni, ovvero le tabs, per accedere alle foto, ecc...
Anche questi possono essere personalizzati!

Layout inspiration #2 : la larghezza delle immagini

Layout inspiration #2 : la larghezza delle immagini

Continuiamo con la serie 'Layout Inspiration' per vedere come definire nel nostro template la larghezza delle immagini all'interno dei post e della sidebar.

Per l'occasione ho realizzato questo layout semplice pensato per un blog di cucina (lo so il logo è pietoso... ma quando si va di fretta...).
Nel menu del layout avrete notato quelle freccine, stanno ad indicare che si aprirà una tendina, come nel tutorial 'menu drop down' che trovate qui.

Avrete anche notato lo slideshow, queste immagini che si alternano sopra il post; sono assai utili per evidenziare post rilevanti o comunque maggiormente visitati.
Anche di questo realizzerò un tutorial: vi mostrerò come inserirli e come collegarli ai post del blog ;)


Veniamo ai famigerati codici da inserire negli stili del nostro blog.

crea il tuo menu a discesa - how to create your drop down menu
//

crea il tuo menu a discesa - how to create your drop down menu

tutorial dropdown menu blogger - Simona S.
Menu a discesa? Cos'è? Magari è questa la prima cosa che avrete pensato, ecco è esattamente quello che vedete qui sotto.



Come inserirlo nel blog?

Prima di ogni cosa, onde evitare che nel blog compaiano strane forme indecifrabili, dovete andare in MODELLO > Modifica HTML.

(Ora magia delle magie...riciclerò un'immagine già usata in precedenza, anche il mio blog è ecosostenibile :P )

Seguite l'immagine qui sotto...

Blog design: creare i 'blog buttons' con il css

Blog design: creare i 'blog buttons' con il css

Volete realizzare dei semplici blog buttons per il vostro blog, ma non avete un programma di grafica?
No problem!!!
Con un pizzico di HTML e una spruzzatina di CSS tutto (o quasi) è possibile.

Innanzitutto vi serve una palette color, che trovate qui o qui.
Io ho usato questa palette.


Poi vi serve quel pizzico di HTML per racchiudere le informazioni in un piccolo box colorato:
<div class="buttons"><a href="URL">ABOUT ME</a></div>
<div class="buttons1"><a href="URL">MY SHOP</a></div>
<div class="buttons2"><a href="URL">PINTEREST</a></div>
<div class="buttons3"><a href="URL">INSTAGRAM</a></div>
<div class="buttons4"><a href="URL">FACEBOOK</a></div>
<div class="buttons5"><a href="URL">CONTACT</a></div>

Poi passiamo agli stili, CSS, che diranno esattamente ai 'div' come comportarsi all'interno della pagina web.
.buttons {width:240px; height:25px;margin:2px auto;text-align:center;font-size:16px; padding:5px 10px; background:#EDE9E6;line-height:25px;}
.buttons1 {width:240px; height:25px;margin:2px auto;text-align:center;font-size:16px; padding:6px 10px;line-height:25px; background:#E6DBD6;}
.buttons2 {width:240px; height:25px;margin:2px auto;text-align:center;font-size:20px; padding:6px 10px;line-height:25px; background:#B4AAB5;}
.buttons3 {width:240px; height:25px;margin:2px auto;text-align:center;font-size:16px; padding:6px 10px;line-height:25px; background:#545257;}
.buttons4 {width:240px; height:25px;margin:2px auto;text-align:center;font-size:16px;line-height:25px; padding:6px 10px; background:#F2B885;}
.buttons5 {width:240px; height:25px;margin:2px auto;text-align:center;font-size:16px;line-height:25px; padding:6px 10px; background:#DEE6B5;}
.buttons a, .buttons1 a, .buttons2 a, .buttons3 a, .buttons4 a, .buttons5 a {color:#fff !important; text-decoration: none !important;}


Vi è piaciuto questo tutorial?
Spero di sì :)

Hai bisogno di un aiutino?



Layout inspiration: piccoli suggerimenti #1

Layout inspiration: piccoli suggerimenti #1

Il layout (ossia l'impaginazione grafica di un template) è un qualcosa che va studiato bene, o almeno progettato bene.
Di solito io lo progetto prima su un foglio e poi passo a photoshop, i risultati non sempre sono uguali, ma photoshop mi dà comunque sempre un'idea più precisa di come dovrebbe venire sul web.
Nel mini tutorial qui sotto, cerco di dare qualche piccolo suggerimento e anche una piccola ispirazione su un layout che potrebbe garbarvi :)



Blog design: Inserire la data come un calendario
// //

Blog design: Inserire la data come un calendario

Un po' di tempo fa, mi fu chiesto questo tutorial, ma per via del mio shop, nel quale avevo dato anche questo servizio, non avevo esaudito la richiesta... ora visto che lo shop non esiste più e che è difficle che mi venga fatta una richiesta del genere da una mia qualunque ex cliente straniera, eccomi qui che esaudisco tale richiesta.

Qual'era? Mi fu chiesto come inserire la data, così com'è presente nel mio blog.

Sembra difficile, ma in realtà è semplice se si segue passo, passo il procedimento, e senza paura.
Ricordate che prima di mettere mano bisogna fare il backup del proprio modello (ovvero salvarne una copia, ogni tanto fatene una anche del vostro blog, con i post i commenti...anzi finito lo faccio pure io!) e poi premendo CTRL+Z si può sempre fare qualche passo indietro all'interno del codice, cancellando le modifiche, ma funziona SOLO se non si chiude MAI la pagina delle modifiche dell'HTML.

Copia lo script qui sotto:
come inserire il box commenti di Facebook in Blogger
// //

come inserire il box commenti di Facebook in Blogger

Vuoi inserire il box dei commenti di facebook sotto i tuoi post e non sai come fare?
No problem, ho studiato io per te :)

Vai prima di tutto a questa pagina, poi segui le istruzioni dell'immagine n.1



Per inserire il box sotto ad ogni post devi entrare nel codice HTML del tuo blog, poi segui l'immagine qui sotto

Evidenzia poi tutta la riga che racchiude il 'post' e clicca lì dove ci sono i puntini sospensivi. Si aprirà il widget completamente evidenziato. LASCIATE EVIDENZIATO e, stando attenti a questo, scendete fino alla fine del widget, ossia fino a quando incontrerete il tag di chiusura.
Ecco proprio prima di questo tag, inserite il secondo codice dato da fb.



----------------------------------------------------------------

Spero sia utile a qualcuna/o di voi!
E' ovvio che più un blog ha una pagina con molti fans attivi, e più si ha l'esigenza di inserire uno script del genere.
Fatemi sapere se ne usufruite, se lo ritenete utile oppure no :)

AGGIORNAMENTO!

Se volete inserire il box sotto ad ogni post, o comunque vedere come procedere date un'occhiata a questo video tutorial ;)