Buona giornata, amici. Una soluzione interessante per cliccare su un'icona che non infastidirà i visitatori. In esso puoi inserire annunci importanti o altro informazione necessaria. Apparirà solo quando l'utente fa clic sull'icona (nel mio caso, l'icona di Android).

Il codice non è assolutamente complicato, senza librerie o script pesanti. E si installa facilmente nel gadget HTML/JavaScript. L'immagine stessa e il pulsante "chiudi" sono in formato SVG. Puoi vedere chiaramente questo "design" sul blog di prova nell'angolo in alto a destra.

Dimostrazione
Tutto il codice

Saluti

Trucchi per blog per blogger su creazione, impostazioni, progettazione e blogging sulla piattaforma BLOGGER Spero che qui troverai molte informazioni utili e interessanti. Sarò molto felice di vedere il tuo feedback

.app-android-esterno (
larghezza: 50px;
posizione: fissa;
superiore: 0;
destra: 50px;
indice z: 9999
}
.app-android (
larghezza: 50px;
altezza: 55px;
altezza della linea: 55px;
margine: 0;
allineamento testo: centro;
posizione: relativa;
galleggiante: giusto;
cursore: puntatore
}
.app-android svg (
allineamento verticale: medio;
opacità: .7
}
.app-android: passa il mouse in formato SVG,
.app-android:focus SVG,
.app-android:svg attivo (
opacità: 1
}
.app-android:prima (
contenuto: "";
posizione: assoluta;
superiore: 0;
in basso: 0;
a sinistra: 0;
a destra: 0
}
.app-contenuti (
sfondo: #fff url(https://2.bp.blogspot.com/-sSuAXU_yhVM/XPD3sxcQ8DI/AAAAAAABK4s/CusSSD-sJf8k_B6AuUkF4g5nkmivM6MEACLcBGAs/s300-rw/android-4.png ) nessuna ripetizione in basso a sinistra;
larghezza: 300px;
imbottitura: 0;
bordo: 1px solido #ccc;
colore bordo: rgba(0, 0, 0, .2);
altezza della linea: 1,3;
-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
box-ombra: 0 2px 10px rgba(0, 0, 0, .2);
contorno: 0;
posizione: assoluta;
destra: 50%;
in alto: 50px;
margine destro: -40px;
-raggio-bordo-webkit: 2px;
raggio del bordo: 2px;
-webkit-user-select: testo;
indice z: 2;
visualizzazione: nessuno;
}
.app-contenuto h3 (
margine: 0;
imbottitura: 5px 20px;
colore: #333;
dimensione carattere: 18px;
peso carattere: 700;
bordo inferiore: 1px solido #ccc;
colore bordo: rgba(0, 0, 0, .2)
}
.app-content-on(
imbottitura: 10px 20px 16px;
colore: #333;
dimensione carattere: 16px;
peso carattere: 400
}
.app-content-su SVG (
allineamento verticale: -7px;
}
.app-content:prima (
contenuto: "";
colore bordo: trasparente;


posizione: assoluta;
destra: 0;
margine destro: 30px;
indice z: 1;
altezza: 0;
larghezza: 0;
colore-bordo-bottom: #ccc;
colore-bordo-bottom: rgba(0, 0, 0, .2);
in alto: -9,5px
}
.app-content:dopo (
contenuto: "";
colore bordo: trasparente;
colore del bordo inferiore: #fff;
stile bordo: tratteggiato tratteggiato solido;
larghezza del bordo: 0 8,5px 8,5px;
posizione: assoluta;
destra: 0;
margine destro: 30px;
in alto: -8,5px;
indice z: 1;
altezza: 0;
larghezza: 0
}
.pulsante-chiudi-app(
posizione: assoluta;
larghezza: 18px;
altezza: 18px;
altezza della linea: 28px;
allineamento testo: centro;
in alto: 7px;
destra: 5px;
sfondo: 0 0;
bordo: nessuno;
cursore: puntatore;
imbottitura: 0
}
.pulsante-chiudi-app:prima (
contenuto: "";
posizione: assoluta;
in alto: -15px;
destra: -15px;
in basso: -15px;
sinistra: -15px;
cursore: puntatore
}
.slideInUp(
-nome-animazione-webkit: slideInUp;
nome dell'animazione: slideInUp;
-durata-animazione-webkit: 1s;
durata dell'animazione: 1s;
-webkit-animation-fill-mode: entrambi;
modalità di riempimento dell'animazione: entrambi
}
@-webkit-keyframes slideInUp (
0% {


visibilità: visibile
}
100% {

trasformazione: traduciY(0)
}
}
@keyframes slideInUp (
0% {
-webkit-trasformazione: TranslateY(100%);
trasformazione: traduciY(100%);
visibilità: visibile
}
100% {
-webkit-transform: TranslateY(0);
trasformazione: traduciY(0)
}
}
@schermo multimediale e (larghezza massima: 960px) (
.app-android-esterno (
destra: 80px
}
}
@schermo multimediale e (larghezza massima: 375px) (
.app-contenuti (
margine destro: -75px
}
.app-content: dopo,
.app-content:prima (
margine destro: 65px
}
}
@schermo multimediale e (larghezza massima: 320px) (
.app-contenuti (
margine destro: -95px
}
.app-content: dopo,
.app-content:prima (
margine destro: 85px
}
}

Copia l'intero codice finito e installalo nel gadget HTML/JavaScript in qualsiasi punto del layout del tuo blog. L'icona si troverà esattamente nel luogo previsto. La linea contrassegnata in grigio contiene un'immagine di sfondo traslucida della finestra pop-up stessa. Se non necessario, puoi rimuoverlo dal codice e impostare lo sfondo principale preferito secondo i tuoi gusti modificando il valore di background: #fff con quello desiderato.

Grazie a tutti per la vostra attenzione. Ci vediamo.

iscriviti a nuovi cheat sheet

Ciao amici. Voglio mostrare quanto sia facile cambiare lo sfondo generale dell'intero blog. Sebbene lo sfondo stesso possa essere facilmente personalizzato nella sezione Tema. Lì puoi selezionare sfondi già pronti o caricare la tua foto ed effettuare le impostazioni appropriate. Tuttavia, ho deciso di offrirti un'opzione più semplice, secondo me. Qui possiamo regolare noi stessi la dimensione dell'immagine di sfondo. O meglio, la sua larghezza.

Andiamo al sodo. Inizialmente, il mio blog di prova appariva così. Ho contrassegnato lo spazio (o lo sfondo dell'intera tela) specificato nelle impostazioni del tema.

Ora lo cambieremo in questa immagine

Per farlo sembrare qualcosa del genere

Qui voglio attirare la tua attenzione. La larghezza del blog nel mio caso è di 1200 px. Le dimensioni dell'immagine di sfondo sono 1450 x 950 px. L'immagine riempiva completamente l'intero spazio.

Se la dimensione dell'immagine di sfondo è inferiore alla dimensione dell'intera tela del blog, non coprirà l'intero spazio e sembrerà un bordo. Vedi la differenza

Sembra essere anche abbastanza accettabile. Alcune persone decorano i siti Web in questo modo per le vacanze. In ogni caso, consideriamo entrambe le opzioni. Con uno sfondo selezionato correttamente o creato in qualsiasi editor, entrambe le opzioni possono essere regolate.

Non sono richieste competenze speciali.

1. Selezionare l'immagine desiderata e copiarne l'indirizzo.
2.Copia il codice qui sotto e imposta l'indirizzo della tua immagine

3. Vai alla scheda Tema - Modifica HTML, trova ]]> e installa il codice finito sopra questa riga.

Il risultato sarà visibile durante la visualizzazione dell'argomento. Se sei soddisfatto, sentiti libero di fare clic salva e ammirare il nuovo modello.

Lo ripeterò ancora. Nel caso in cui l'immagine risultasse essere dimensioni più piccole larghezza del blog o è completamente nascosto alla vista, devi impostare il valore della larghezza nel codice. Aggiungi solo una riga e apparirà così

corpo (
sfondo: URL (http://www.clipartbest.com/cliparts/9iz/EnR/9izEnR56T.png)
top senza ripetizione risolto;
dimensione dello sfondo: 100%;
}

Con valore dimensione sfondo: 100%; puoi giocare, cambiandolo con uno più piccolo finché non ottieni ciò che desideri.

Con manipolazioni così semplici puoi creare sfondi diversi per festività, stagioni o umore diversi.

Forse te lo sei perso

Ti auguro il meglio e a presto.

Ciao a tutti. Oggi ti proporrò un codice che fa apparire un'immagine quando passi il mouse sopra un collegamento. Esistono molte opzioni per la progettazione dei collegamenti. Ma questa sarà una soluzione originale per i blog tematici. Oppure per creare un messaggio separato. Puoi sempre scegliere un'immagine adatta al tema e al design desiderati.

Puoi vedere la demo live immediatamente qui sotto. Ho fornito collegamenti ad alcune pagine del mio blog per chiarezza. Ovviamente li cambierai con gli indirizzi della tua pagina. Immagini e testo - rispettivamente.

Ecco il codice stesso.

Cari lettori di "link text", buon anno nuovo 2020 link text. Che tutto inizi con un nuovo decollo Verso vette migliori nella vita E un buon testo di collegamento al conto bancario Porta armonia negli affari, Molta felicità nella tua vita personale!

.palcoscenico(
visualizzazione: cella-tabella;
allineamento verticale: medio;
}
.tabellato, .medio (
allineamento testo: centro;
margine: 0 automatico;
}
.jumbo(
dimensione carattere: 150%;
allineamento verticale: -25px;
trasformazione: ruota (8 gradi);
}
.jumbo:primo figlio (
-animazione webkit: wave 10s infinita facilità;
animazione: facilità infinita dell'onda 10;
}
.jumbo:ultimo-bambino (
-animazione webkit: wave 15s infinita facilità;
animazione: facilità infinita dell'onda 15;
}
@onda fotogrammi chiave (
0% ( trasformazione: rotazione (8 gradi); )
25% (trasformazione: rotazione (15 gradi);)
75% (trasformazione: rotazione (-10 gradi); )
100% ( trasformazione: rotazione (8 gradi); )
) @-webkit-keyframes onda (
0% ( -webkit-transform: ruota (0 gradi); )
50% ( -webkit-transform: ruota (10 gradi); )
100% ( -webkit-transform: ruota (0 gradi); )
}
P(
dimensione carattere: 110%;
famiglia di caratteri: Helvetica, sans;
larghezza massima: 24em;
margine: 0 automatico;
allineamento testo: giustifica;
colore: #00695C;
peso-carattere: più leggero;
altezza della linea: 1,5 em;
}
UN (
colore: #ccc;
decorazione del testo: nessuna;
bordo inferiore: solido sottile #f7901d;
}
a: passa il mouse (
colore: #f7901d;
}
.boo (
posizione: relativa;
}
.boo:prima, .boo:dopo (
posizione: assoluta;
transizione: tutti gli 0,15 sono facili;
}
.boo:prima (
in alto: -75px;
sinistra: -70px;
-webkit-transform:rotate(0deg) scale(0);
-moz-transform:rotate(0deg) scale(0);
-o-trasforma: ruota (0 gradi) scala (0);
-ms-transform:rotate(0deg) scale(0);
trasformazione: rotazione (0 gradi) scala (0);
}
.boo:dopo (
in alto: -115px;
destra: -70px;
-ritardo di transizione webkit: 0,05 s;
ritardo di transizione: 0,05 s;
-webkit-transform:rotateY(180deg) scale(0);
-moz-transform:rotateY(180deg) scale(0);
-o-transform:rotateY(180deg) scale(0);
-ms-transform:rotateY(180deg) scale(0);
trasforma: ruota Y (180 gradi) scala (0);
}
.boo:al passaggio del mouse:prima (
in alto: -140px;
-webkit-transform: ruota (15 gradi) scala (1);
-moz-transform: ruota (15 gradi) scala (1);
-o-trasforma: ruota (15 gradi) scala (1);
-ms-transform: ruota (15 gradi) scala (1);
trasforma: ruota (15 gradi) scala (1);
}
.boo:al passaggio del mouse:dopo (
-webkit-transform:rotateY(180deg) scale(0.7);
-moz-transform:rotateY(180deg) scale(0.7);
-o-trasforma: ruota Y (180 gradi) scala (0,7);
-ms-transform:rotateY(180deg) scale(0.7);
trasformazione: ruota Y (180 gradi) scala (0,7);
}
.boo:prima, .boo:dopo (
contenuto: url("link a immagine. png");
}

Copia l'intero codice, effettua le impostazioni necessarie e installalo nell'editor dei messaggi in modalità HTML nella posizione desiderata. L'esempio contiene 3 collegamenti. In ogni caso, puoi rimuovere o aggiungere una riga come questa

"testo del collegamento")

E con tutto il cuore vorrei augurare a tutti voi un felice anno nuovo. Sorrisi, gioia, salute, prosperità per la famiglia e gli amici. Bontà e pace a casa tua!!!

BUON ANNO 2020 A TUTTI!!!

Ciao a tutti. La navigazione nei modelli Blogger standard non attira affatto l'attenzione. Non tutti noteranno il pannello appena percettibile alla fine della pagina. Pertanto, qualsiasi nuovo visitatore potrebbe non vedere il collegamento agli articoli del blog precedenti o successivi.
Esistono molti stili di navigazione. Ma questa non è la prima volta che viene detto loro che a molti di loro era stato “ordinato di vivere a lungo”. E la navigazione del sito è forse l’elemento più basilare. Pertanto, fornirò collegamenti ad articoli in cui ho già pubblicato opzioni di progettazione della navigazione e offrirò un altro codice funzionante. Questo è ciò che apparirà sotto i post del blog.

La versione di oggi sembra piuttosto elegante. Visualizza un elenco numerato di pagine nel pannello e visualizza correttamente le pagine precedente e successiva.

Per installare, devi prima copiare questo codice

//1J "+i+\" 1H \"+g+"";7 1f=L(i)-1;5(i>1)(5(i==2)(5(l=="s") (6+=\" \"+Q+\"\")e(6+=\" \"+Q+\"\"))e(5(l=="s")(6+=\" \"+Q+\"\")e(6+=\" \"+Q+\"\")))5(E>1)(5(l=="s")(6+=\" 1\")e(6+=\" 1\"))5(E>2)(6+=\"...\")1m(7 m=E;m