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 

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.

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.

Demo
Clicca qui



Download
Clicca qui

Fonte | Arlina Design -