Lavoriamo insieme ✨

Sei pronta a diventare la blogger che hai sempre sognato di essere?
Agire facendo il primo passo è un ottimo modo per cominciare ecco chi sono

Blogger in Azione

Blogger in Azione

Primi Passi

Primi Passi

F.A.Q.

F.A.Q.

Social Icons: come personalizzare i colori

24.2.14
Simona S.
17 commenti
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

18.2.14
Simona S.
32 commenti
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

13.2.14
Simona S.
16 commenti
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

7.2.14
Simona S.
34 commenti
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 :)

Ma torniamo all'argomento principale: per condividere l'immagine del post in modo semplice e rapido basta aggiungere un codice altrettanto semplice.
Inserite il codice sottostante subito prima il tag di chiusura </body> che trovate nella modifica dell'HTML (per cercarlo velocemente premete i tasti CTRL+F e digitate il tag di chiusura)

<script type="text/javascript">
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', '');
}, 10);
</script>

<script>

//<![CDATA[

var bs_pinButtonURL = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhurjGW7dMONpDi7AkUFfIZ0RtSwGG4DWKXMSbMpkGyEJEtngxzGZTTzTDEWa1a0Jm4YEfJA81_3cwo3lPa_K0sE802__W1Ujkt3_Vh6ceKRo4cxEyBUoHZ7L6CqiMubxQJRVBvDpzxWxta/s1600/pinit.png";

var bs_pinButtonPos = "topright";

var bs_pinPrefix = "";

var bs_pinSuffix = "";

//]]>

</script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript" />

<script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'>

// This Pinterest Hover Button is brought to you by bloggersentral.com.

// Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.

// Feel free to use and share, but please keep this notice intact.
</script>

Il codice non è mio, ma lo sviluppatore è citato nel codice stesso.
Le parti colorati sono quelle che potete modificare.
La prima è l'immagine vera e propria, quella cioè che compare quando il mouse passa sulla vostra foto.
La seconda è la sua posizione, in questo caso 'topright' indica 'in alto a destra'.
Se vuoi cambiare la posizione ti basta sostituire 'topright' con uno di questi comandi: center, topleft, bottomleft, bottomright.

E se l'immagine non l'avete e non sapete come crearla?
Non c'è problema, ne ho preparate ben 18 e potete scaricarle gratuitamente (of course) cliccando qui sotto ^_^
Qui un'anteprima
free pin button blogger - Simona S.

per approfondire!


  • Non sai come fare per registrarti su Pinterest? Guarda qui :)
Come emerso dal commento di Silvia (quanto mi piace intavolare 'confronti' del genere), Pinterest dà l'opportunità di inserire un codice, un meta tag, che permette di bloccare 'il pinnaggio'.

Mi sono documentata e a quanto pare questo attributo deve essere inserito nei meta tag del sito/blog, quindi all'inizio del codice... in questo modo vieti di 'pinnare' tutte le tue foto.

Ciò nasce dal fatto che con la legge sulla proprietà intellettuale possono venire fuori un sacco di magagne legislative... Pinterest ti presenta il suo posto come un luogo dove condividere immagini, ti dà gli strumenti, come il pulsante da inserire nella barra del browser, per pinnare a destra e a manca, però ti dice pure che se vìoli il copyright sono cavoli tuoi.

Ecco perchè lo ha fatto, per pararsi meglio il fondo schiena, perchè lo sanno infondo, infondo che i 'mandanti' di questo reato sono loro ;)

Quindi se anche voi volete proteggere le vostre foto dai collezionisti di Pinterest, ecco a voi il codice da inserire nel vostro html, subito dopo il tag di apertura <html>
<meta name="pinterest" content="nopin" />

Crea sezioni carine per i tuoi link

6.2.14
Simona S.
23 commenti
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?