Come creare un bottone in 3D e sfumatura per il Continua a leggere di Blogger.

Come creare con il CSS un pulsante con Effetto 3D da applicare al link Continua a Leggere della funzione Inserisci Intervallo di Blogger.

A seguito di un commento ricevuto in un articolo in cui spiegavo come sostituire il Continua a leggere di Blogger con una immagine ho pensato di integrare quella procedura per illustrare come utilizzare un bottone specifico per quel tipo di link mostrato in Homepage sotto il riassunto dell'articolo per aprire tutto il contenuto del post. Lascerò i colori che attualmente uso per questo sito lasciando ai lettori l'onere di cambiare i codici dei colori per adattarli a quelli del loro blog eventualmente anche utilizzando il tool Oto255 per trovare tutti i toni e le sfumature del caso.

Di default il posizionamento di Continua a leggere è sulla sinistra. Si può modificare l'espressione visualizzata andando su Layout > Post sul blog > Modifica e accanto a Test del link della pagina di post si può sostituire l'espressione predeterminata. Ricordarsi di andare poi in basso per salvare le modifiche

Se invece preferite visualizzare il Continua a leggere sulla destra invece che sulla sinistra dovete andare su Modello > Modifica HTML e cercare questo blocco di codice

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>

che dovrà essere modificato in questo modo

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
      <div style='float:right; margin-right:20px;'>        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
        </div>
      </div>
    </b:if>

in cui sono state aggiunte le due righe evidenziate di giallo per posizionare il link sulla destra (right) a una distanza di 20 pixel dal margine destro con questo risultato

Per personalizzare questo link sia che sia a sinistra sia che sia a destra e per farlo diventare un pulsante con sfumatura e con effetto 3D al passaggio del mouse dovremo andare sempre su Modello > Modifica HTML e cliccare sulla freccetta nera intorno alla 13-14esima riga per visualizzare tutto il codice della sezione <b:skin> in questo modo

Successivamente si trova l'ultima riga di questa sezione ]]></b:skin> scorrendo il codice o cercandola con Ctrl+F. Subito sopra a questa si incolla il seguente codice

/* Jump Link Customize */
div.jump-link {
margin-top:8px; /* Spazio in alto */
margin-bottom:35px; /* Spazio in basso */}
div.jump-link a {
color: #FFF; /* Colore del testo */
background:linear-gradient(to bottom, #fedede 4%, #e50909 100%); /* Colore  pulsante con sfumatura */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fedede', endColorstr='#e50909',GradientType=0);
box-shadow: 2px 2px 2px #aaa; /* Ombreggiatura pulsante */
text-shadow:1px 1px 1px #ccc;  /* Ombreggiatura testo */
text-align:center;
padding:3px 12px; /* Spazio tra testo e bordi pulsante */
text-decoration:none;
border-radius:8px; /* Raggio curvatura pulsante */
font-family:Georgia;  /* Famiglia di caratteri */
font-size:14px;  /* Dimensione caratteri */
font-weight:bold;
}
div.jump-link a:hover {
color:#a5f3e9; /* Colore testo pulsante al passaggio del mouse */
box-shadow: 1px 1px 1px #aaa; /* Ombreggiatura pulsante al passaggio del mouse */
text-shadow:0px 0px 0px #ccc; /* Ombreggiatura testo al passaggio del mouse */
text-decoration:none;
position: relative; /* Movimento del pulsante al passaggio del cursore */
top:1px;
left:1px;
}

Si salva il modello. Accanto ai valori di molti parametri ho inserito dei commenti colorati di verde per informare su cosa agiscono. Quando si passa sopra al pulsante con il mouse c'è un movimento relativo che fa abbassare e spostare a destra di un pixel il pulsante. Per avere l'effetto 3D l'ombreggiatura è tale da rimanere invece invariata visto che diminuisce della stessa misura.

Ovviamente si tratta solo di una proposta esemplificativa che può essere modificata a piacimento.