Come creare un pulsante di post casuale su Blogger

Come creare un pulsante per Blogger per un articolo casuale? Come ben sapete, questa piattaforma ci consente di modificare quasi tutto il modello. In questo post vedremo come crare un bottone da inserire nel sito web al cui click verrà mostrato un articolo casuale preso dall'intero blog.

Andiamo su " Tema "
Quindi clicchiamo su "modifica HTML"
Passiamo alla modifica del codice HTML, per prima cosa clicchiamo "crtl + F" per avviare la procedura di ricerca Cerchiamo il tag </body> e prima incollate il codice che vi ho messo qui sotto:

Ora create un widget html, andate quindi su "Layout", nello spazio in cui volete inserire il pulsante cliccate "aggiungi widget"
Selezionate "HTML/script" e incollate il seguente codice:

Ultimo passaggio è incollare il seguente codice sempre nel modello Blogger, quindi riaprite la modifica dell'HTML (come nel primo passo), quindi cercate il tag ]]></b:skin> e subito sopra incollate questo:

#hel-random a {
background-color:#000000;
padding:10px;
position:relative;
font-family: 'Open Sans', sans-serif;
font-size:12px;
text-decoration:none;
color:#fff;
border: solid 1px #186f8f;
background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(44,160,202)),
color-stop(1, rgb(62,184,229))
);
-webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
-moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
#hel-random a::before {
background-color:#ccd0d5;
content:"";
display:block;
position:absolute;
width:100%;
height:100%;
padding:8px;
left:-8px;
top:-8px;
z-index:-1;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
-moz-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
-o-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;
}
#hel-random a:active {
padding-bottom:9px;
padding-left:10px;
padding-right:10px;
padding-top:11px;
top:1px;
background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(62,184,229)),
color-stop(1, rgb(44,160,202))
);
}

Infine salvate il modello e vi apparirà il pulsante

Segui Help Tecno Blog sui canali social per rimanere aggiornato sulle ultime novità, basta un click:
-Seguici su Facebook😄
-Seguici su Twitter😀
-Seguici su YouTube😁
-Iscriviti ai Feed😏

Offerte consigliate:

Help Tecno Blog - Guide Internet

Cerca nel blog

Come creare un pulsante di post casuale su Blogger

Commenti

Posta un commento