Hyvää päivää ystävät. Mielenkiintoinen ratkaisu kuvakkeen napsauttamiseksi, joka ei ärsytä vierailijoita. Siihen voit sijoittaa tärkeitä ilmoituksia tai muuta tarvittavat tiedot. Se tulee näkyviin vain, kun käyttäjä napsauttaa kuvaketta (minun tapauksessani Android-kuvaketta).

Koodi ei todellakaan ole monimutkaista, ilman kirjastoja tai raskaita skriptejä. Ja se asennetaan helposti HTML/JavaScript-gadgetiin. Itse kuva ja "sulje"-painike ovat svg-muodossa. Tämä "design" näkyy selvästi testiblogissa oikeassa yläkulmassa.

Esittely
Kaikki koodi

Terveisiä

blogihuijauslehtiä bloggaajille luomisesta, asetuksista, suunnittelusta ja bloggaamisesta BLOGGER-alustalla Toivon, että löydät täältä paljon hyödyllistä ja mielenkiintoista tietoa. Olen erittäin iloinen nähdessäni palautteesi

.app-android-outer (
leveys: 50px;
asento: kiinteä;
alkuun: 0;
oikea: 50px;
z-indeksi: 9999
}
.app-android (
leveys: 50px;
korkeus: 55px;
rivin korkeus: 55 pikseliä;
marginaali: 0;
tekstin tasaus: keskellä;
asema: suhteellinen;
kellua: oikea;
kohdistin: osoitin
}
.app-android svg (
pystysuuntaus: keskellä;
opasiteetti: .7
}
.app-android:hover svg,
.app-android:focus svg,
.app-android:active svg (
opasiteetti: 1
}
.app-android:before (
sisältö: "";
sijainti: absoluuttinen;
alkuun: 0;
pohja: 0;
vasen: 0;
oikealla: 0
}
.app-content (
tausta: #fff url(https://2.bp.blogspot.com/-sSuAXU_yhVM/XPD3sxcQ8DI/AAAAAAABK4s/CusSSD-sJf8k_B6AuUkF4g5nkmivM6MEACLcBGAs/s300-rw/android) alhaalla vasen no-repeangt.
leveys: 300px;
pehmuste: 0;
reuna: 1px kiinteä #ccc;
reunan väri: rgba(0, 0, 0, .2);
linjan korkeus: 1,3;
-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
ääriviivat: 0;
sijainti: absoluuttinen;
oikea: 50%;
yläreuna: 50px;
marginaali-oikea: -40px;
-webkit-border-radius: 2px;
reunan säde: 2px;
-webkit-user-select: teksti;
z-indeksi: 2;
näyttö: ei mitään;
}
.app-content h3 (
marginaali: 0;
täyte: 5px 20px;
väri: #333;
fonttikoko: 18px;
fontin paino: 700;
border-bottom: 1px solid #ccc;
reunan väri: rgba(0, 0, 0, .2)
}
.app-content-on(
täyte: 10px 20px 16px;
väri: #333;
fonttikoko: 16px;
fontin paino: 400
}
.app-content-on svg (
pystytasaus: -7px;
}
.app-content:before (
sisältö: "";
reunan väri: läpinäkyvä;


sijainti: absoluuttinen;
oikea: 0;
marginaali-oikea: 30px;
z-indeksi: 1;
korkeus: 0;
leveys: 0;
border-bottom-color: #ccc;
border-bottom-color: rgba(0, 0, 0, .2);
yläreuna: -9,5 kuvapistettä
}
.app-content:after (
sisältö: "";
reunan väri: läpinäkyvä;
border-bottom-color: #fff;
reuna-tyyli: katkoviiva katkoviiva kiinteä;
reunan leveys: 0 8,5 pikseliä 8,5 kuvapistettä;
sijainti: absoluuttinen;
oikea: 0;
marginaali-oikea: 30px;
yläosa: -8,5 kuvapistettä;
z-indeksi: 1;
korkeus: 0;
leveys: 0
}
.app-close-button(
sijainti: absoluuttinen;
leveys: 18px;
korkeus: 18px;
rivin korkeus: 28 kuvapistettä;
tekstin tasaus: keskellä;
yläreuna: 7px;
oikea: 5px;
tausta: 0 0;
reuna: ei mitään;
kohdistin: osoitin;
pehmuste: 0
}
.app-close-button:before (
sisältö: "";
sijainti: absoluuttinen;
yläosa: -15px;
oikea: -15px;
pohja: -15px;
vasen: -15px;
kohdistin: osoitin
}
.slideInUp(
-webkit-animaatio-nimi: slideInUp;
animaation-nimi: slideInUp;
-Webkit-animation-duration: 1s;
animaation kesto: 1s;
-webkit-animaatio-täyttötila: molemmat;
animaatio-täyttötila: molemmat
}
@-webkit-keyframes slideInUp (
0% {


näkyvyys: näkyvä
}
100% {

muunnos: translateY(0)
}
}
@keyframes slideInUp (
0% {
-webkit-muunnos: translateY(100%);
muunnos: translateY(100%);
näkyvyys: näkyvä
}
100% {
-webkit-muunnos: translateY(0);
muunnos: translateY(0)
}
}
@medianäyttö ja (max-width:960px) (
.app-android-outer (
oikea: 80px
}
}
@medianäyttö ja (max-width:375px) (
.app-content (
marginaali oikea: -75px
}
.app-content:after,
.app-content:before (
marginaali oikea: 65 kuvapistettä
}
}
@medianäyttö ja (max-width:320px) (
.app-content (
marginaali oikea: -95px
}
.app-content:after,
.app-content:before (
marginaali oikea: 85 kuvapistettä
}
}

Kopioi koko valmis koodi ja asenna se HTML/JavaScript-gadgetiin missä tahansa blogisi asettelussa. Kuvake sijaitsee täsmälleen tarkoitetussa paikassa. Harmaalla merkitty viiva sisältää läpikuultavan taustakuvan itse ponnahdusikkunasta. Jos se ei ole tarpeen, voit poistaa sen koodista ja asettaa haluamasi päätaustan makusi mukaan muuttamalla taustan arvoa: #fff haluamallesi.

Kiitos kaikille huomiosta. Nähdään.

tilaa uusia huijauslehtiä

Hei ystävät. Haluan näyttää kuinka helppoa on muuttaa koko blogin yleistä taustaa. Vaikka itse taustaa voidaan helposti muokata Teema-osiossa. Siellä voit valita valmiita taustoja tai ladata oman kuvan ja tehdä tarvittavat asetukset. Päätin kuitenkin tarjota sinulle mielestäni helpomman vaihtoehdon. Täällä voimme itse säätää taustakuvan kokoa. Tai pikemminkin sen leveys.

Ryhdytään hommiin. Aluksi testiblogini näytti tältä. Merkkasin teema-asetuksissa määritellyn tilan (tai koko kankaalle taustan).

Nyt muutamme sen tähän kuvaan

Jotta se näyttäisi jotenkin tältä

Tässä haluan kiinnittää huomionne. Blogin leveys on minun tapauksessani 1200 px. Taustakuvan mitat ovat 1450 x 950 px. Kuva täytti koko tilan kokonaan.

Jos taustakuvan koko on pienempi kuin koko blogikankaan koko, se ei peitä koko tilaa ja näyttää reunukselta. Katso ero

Se näyttää myös olevan melko hyväksyttävää. Jotkut ihmiset sisustavat verkkosivustoja tällä tavalla lomia varten. Joka tapauksessa harkitaan molempia vaihtoehtoja. Oikein valitulla tai millä tahansa editorilla luodulla taustalla molempia vaihtoehtoja voidaan säätää.

Ei vaadi erityisiä taitoja.

1. Valitse haluamasi kuva ja kopioi sen osoite.
2. Kopioi alla oleva koodi ja aseta kuvasi osoite

3. Siirry Teema - Muokkaa HTML-koodia -välilehteen, etsi ]]> ja asenna valmis koodi tämän rivin yläpuolelle.

Tulos näkyy aihetta tarkasteltaessa. Jos olet tyytyväinen, napsauta vapaasti Tallentaa ja ihailla uutta mallia.

Toistan sen uudelleen. Jos kuva osoittautuisi sellaiseksi pienempiä kokoja blogin leveys tai piilotettu kokonaan näkyvistä, sinun on asetettava leveysarvo koodissa. Lisää vain yksi rivi ja se näytti tältä

keho (
tausta: url(http://www.clipartbest.com/cliparts/9iz/EnR/9izEnR56T.png)
ei toistoa ylä kiinteä ;
taustan koko: 100 %;
}

Taustakoon arvolla: 100 %; voit leikkiä ja vaihtaa sen pienempään, kunnes saavutat haluamasi.

Tällaisilla yksinkertaisilla manipuloinneilla voit luoda erilaisia ​​taustoja eri lomapäiville, vuodenaikoina tai mielialaasi.

Ehkä missasit sen

Kaikkea hyvää ja nähdään pian.

Hei kaikki. Tänään tarjoan sinulle koodin, joka saa kuvan näkyviin, kun viet hiiren linkin päälle. Linkkien suunnitteluun on monia vaihtoehtoja. Mutta tämä on alkuperäinen ratkaisu temaattisille blogeille. Tai luoda erillinen viesti. Voit aina valita kuvan haluamaasi teemaan ja muotoiluun sopivaksi.

Voit katsoa live-demon heti alta. Olen lisännyt linkkejä joillekin blogini sivuille selvyyden vuoksi. Muutat ne tietysti sivujen osoitteiksi. Kuvat ja teksti - vastaavasti.

Tässä itse koodi.

Hyvät "linkkitekstin" lukijat, hyvää uutta vuotta 2020 linkkiteksti. Aloitetaan uudella nousulla Kohti parempia korkeuksia elämässä Ja hyvä pankkitilin linkkiteksti Tuo harmoniaa liike-elämään, Paljon onnea henkilökohtaiseen elämääsi!

.stage(
näyttö: taulukko-solu;
pystysuuntaus: keskellä;
}
.tabled, .middled (
tekstin tasaus: keskellä;
marginaali: 0 auto;
}
.jumbo(
kirjasinkoko: 150%;
pystytasaus: -25px;
muunnos: käännä (8 astetta);
}
.jumbo:first-child (
-webkit-animaatio: aalto 10s äärettömän helppous;
animaatio: aalto 10s ääretön helppous;
}
.jumbo:last-child (
-webkit-animaatio: aalto 15s äärettömän helppous;
animaatio: aalto 15s ääretön helppous;
}
@keyframes wave (
0 % ( muunnos: käännä (8 astetta); )
25 % ( muunnos: käännä (15 astetta); )
75 % (muunnos: kierrä (-10 astetta); )
100 % ( muunnos: käännä (8 astetta); )
) @-webkit-keyframes wave (
0% ( -webkit-muunnos: rotate(0deg); )
50 % ( -webkit-muunnos: käännä (10 astetta); )
100 % ( -webkit-muunnos: rotate(0deg); )
}
p(
kirjasinkoko: 110%;
kirjasinperhe: Helvetica, sans;
suurin leveys: 24em;
marginaali: 0 auto;
tekstin tasaus: tasaa;
väri: #00695C;
fontin paino: kevyempi;
rivin korkeus: 1,5 em;
}
a (
väri: #ccc;
tekstikoristelu: ei mitään;
reuna-ala: kiinteä ohut #f7901d;
}
a:hover (
väri: #f7901d;
}
.boo (
asema: suhteellinen;
}
.boo:ennen, .boo:after (
sijainti: absoluuttinen;
siirtyminen: kaikki 0,15s helppous;
}
.boo:before (
yläosa: -75px;
vasen: -70px;
-webkit-transform:rotate(0deg) scale(0);
-moz-transform:rotate(0deg) scale(0);
-o-muunnos:kierto(0aste) asteikko(0);
-ms-transform:rotate(0deg) scale(0);
muunnos:kierrä(0aste) asteikko(0);
}
.boo:after (
yläosa: -115px;
oikea: -70px;
-webkit-transition-delay: 0,05s;
siirtymäviive: 0,05 s;
-webkit-transform:rotateY(180deg) scale(0);
-moz-muunnos:pyöritäY(180aste) asteikko(0);
-o-muunnos:käännä Y(180 astetta) asteikko(0);
-ms-muunnos:kierto Y(180 astetta) asteikko(0);
muunnos:kierrä Y(180°) asteikko(0);
}
.boo:hover:before (
yläosa: -140px;
-webkit-transform:rotate(15deg) scale(1);
-moz-muunnos: käännä (15 astetta) asteikko (1);
-o-muunnos: käännä (15 astetta) asteikko (1);
-ms-muunnos: käännä (15 astetta) asteikko (1);
muunnos:kierrä (15 astetta) asteikko(1);
}
.boo:hover:after (
-webkit-transform:rotateY(180deg) scale(0.7);
-moz-muunnos:kierto Y(180 astetta) asteikko(0,7);
-o-muunnos: käännä Y(180 astetta) asteikko (0,7);
-ms-muunnos: käännä Y(180 astetta) asteikko (0,7);
muunnos:kierrä Y(180 astetta) asteikko(0,7);
}
.boo:ennen, .boo:after (
content: url("linkki kuvaan. png");
}

Kopioi koko koodi, tee tarvittavat asetukset ja asenna se viestieditoriin HTML-tilassa haluamaasi paikkaan. Esimerkki sisältää 3 linkkiä. Joka tapauksessa voit poistaa tai lisätä tällaisen rivin

"linkin teksti")

Ja koko sydämestäni haluan toivottaa teille kaikille oikein hyvää uutta vuotta. Hymyjä, iloa, terveyttä, vaurautta perheelle ja ystäville. Hyvää ja rauhaa kotiisi!!!

HYVÄÄ UUTTA VUOTTA 2020 KAIKILLE!!!

Hei kaikki. Navigointi tavallisissa Blogger-malleissa ei herätä lainkaan huomiota. Kaikki eivät huomaa tuskin havaittavaa paneelia sivun lopussa. Siksi uusi vierailija ei välttämättä näe linkkiä edellisiin tai seuraaviin blogiartikkeleihin.
Navigointityylejä on monia. Mutta tämä ei ole ensimmäinen kerta, kun heille kerrotaan, että monet heistä "käskettiin elämään pitkään". Ja sivuston navigointi on ehkä kaikkein peruselementti. Siksi annan linkkejä artikkeleihin, joissa olen jo julkaissut navigoinnin suunnitteluvaihtoehtoja, ja tarjoan toisen toimivan koodin. Tältä se tulee näyttämään blogitekstien alla.

Tämän päivän versio näyttää varsin tyylikkäältä. Näyttää numeroidun sivuluettelon paneelissa ja näyttää edelliset ja seuraavat sivut oikein.

Asentaaksesi sinun on ensin kopioitava tämä koodi

//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