Pubblicato il 16/01/15e aggiornato il

Bottoni spettacolari di Demo e Download per Blogger.

Come mostrare dei bottoni animati per il Download e la Demo che possono anche essere usati con altre denominazioni.
Blogger è una piattaforma che non è flessibile come Wordpress ma che comunque può essere usata per molteplici attività sul web. Alcuni siti sono per esempio specializzati nella realizzazione di modelli per Blogger in cui è necessario inserire almeno due bottoni, uno di Demo per mostrare i template ai lettori e uno di Download per permettere di scaricare il file XML.

I bottoni accoppiati di Demo e di Download possono però servire anche in molti altri casi senza contare che magari al loro posto possono essere inserite altre espressioni quali Compra, Carrello, Guarda o altre ancora. Ho trovato nel web un sistema basato su CSS3 che permette di realizzare dei bottoni animati al passaggio del mouse estremamente interessanti 

demo-download-bottoni

Si può incollare il CSS nel modello in modo da dover inserire solo l'HTML nel post quando si vogliano mostrare i bottoni. Dopo aver salvato il template si va su Modello > Modifica HTML e intorno alla 14-esima riga si clicca sulla freccetta nera a sinistra di b:skin per visualizzare tutto il codice. Si cerca quindi la riga ]]></b:skin> e, subito sopra, si incolla questo codice

/* Bottoni Download e Demo */
#contenitore {
    margin: 20px auto;
    text-align: center;
}
#contenitore br {
    display: none;
}
.slide1, .slide_2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s; /* Durata animazione */
}
.slide_2 {
    border: 2px solid #efa666;
}
.slide1:hover {
    background-color: #0099cc;
}
.slide_2:hover {
    background-color: #efa666;
}
.slide1:hover span.cerchio, .slide_2:hover span.cerchio_2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}
.slide_2:hover span.cerchio_2 {
    color: #efa666;
}
.slide1:hover span.title, .slide_2:hover span.title2 {
    left: 40px;
    opacity: 0;
}
.slide1:hover span.title-hover, .slide_2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}
.slide1 span.cerchio, .slide_2 span.cerchio_2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}
.slide_2 span.cerchio_2 {
    background-color: #efa666;
}
.slide1 span.title,
  .slide1 span.title-hover, .slide_2 span.title2,
  .slide_2 span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}
.slide_2 span.title2,
  .slide_2 span.title-hover2 {
    color: #efa666;
    left: 80px;
}
.slide1 span.title-hover, .slide_2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}
.slide1 span.title-hover, .slide_2 span.title-hover2 {
    color: #fff;
}

Si salva il modello. Quando si vogliono mostrare i bottoni bisogna andare su Opzioni e mettere la spunta su Premi Invio per le interruzioni di riga.

premi-invio-interruzioni-riga

Si clicca nell'Editor su HTML accanto a Scrivi e si incolla questo codice

<div id="contenitore">
<a href="URL_COLLEGAMENTO" class="slide1" target="_blank">
<span class="cerchio"><i class="fa fa-rocket"></i></span>
<span class="title">Demo</span>
<span class="title-hover">Clicca qui</span>
</a>
<a href="URL_COLLEGAMENTO" class="slide_2" target="_blank">
<span class="cerchio_2"><i class="fa fa-download"></i></span>
<span class="title2">Download</span>
<span class="title-hover2">Clicca qui</span>
</a>
</div>

quindi si pubblica da HTML senza tornare su Scrivi. Al posto di URL_COLLEGAMENTO si mettono gli indirizzi rispettivamente della pagina della Demo e del Download. Si può anche evitare di modificare il modello e inserire tutto il codice nel post con l'accortezza di inserire la prima parte tra i tag <style> e </style>. Concludo ricordando che si possono cambiare anche i codici dei colori.




Fonte | Arlina Design -




Nessun commento :

Posta un commento

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.