Visualizzazione post con etichetta coding. Mostra tutti i post
Visualizzazione post con etichetta coding. Mostra tutti i post
Come personalizzare i bottoni per il blog con il CSS
//

Come personalizzare i bottoni per il blog con il CSS


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

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

Ora possiamo continuare!

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

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

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

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

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

Blog Design: 'evidenziare' il nome autore nei commenti
// //

Blog Design: 'evidenziare' il nome autore nei commenti


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

Come aggiungere i 'Post Correlati' sotto il tuo post



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

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

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

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

come inserire i pulsanti di condivisione personalizzati
// //

come inserire i pulsanti di condivisione personalizzati



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

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

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

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

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

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

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

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

</div></div></div>
<script type='text/javascript'>var addthis_config = {&quot;data_track_addressbar&quot;:true};</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
//

codice per inserire la Barra top + Search box



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

Come nascondere un elemento del blog

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>


Blog design: inserire slideshow più semplice e professionale
//

Blog design: inserire slideshow più semplice e professionale

 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 :*

Blog design: menu a discesa semplice
// //

Blog design: 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.
Social Icons personalizzate #2
//

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

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

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


Blog design: come centrare la data e il titolo di un post
// //

Blog design: come centrare la data e il titolo di un post

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 :)
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?