Efectuarea de fotografii în posturi prin css în blogger (blogspot)

Efectuarea de fotografii în postări prin CSS în Blogger (Blogspot)

Fotografiile, capturile de ecran, imaginile fac parte integrantă din orice blog modern. Ele completează, subliniez și, poate chiar complet, formez conținutul său. În acest caz, nu se poate pierde din vedere, un moment atât de important ca designul și designul imaginilor din blog.

Utilizând proprietățile CSS, puteți configura afișarea aproape a oricărui element al unei pagini web, inclusiv a imaginilor. În acest articol, vom vorbi despre structura unui bloc cu imagini și despre selectorii de bază care pot fi utilizați pentru a modela pozele în postările de pe Blogger. Și, de asemenea, ia în considerare problema de a face primele imagini (previzualizare) în posturi de aceeași dimensiune și de a le oferi același stil.
Deci, să începem cu blocuri de imagini adăugate.
Imaginea adăugată în modul HTML are cel mai simplu cod:

Toți parametrii - descriere, sfat util, dimensiune etc. și, dacă este necesar, blocuri suplimentare, în acest caz, sunt prescrise manual. Această metodă este bună pentru bloggeri avansați.
La încărcare, imaginea se transformă într-un container suplimentar, iar întregul HTML arată astfel:

Acest container are propriul separator selector. care pot fi folosite pentru a proiecta întregul bloc al imaginii.
Dacă este adăugată semnătura. apoi în loc de blocare, imaginea este înfășurată într-un tabel:

Caption imagine

Întregul design are un selector: .tr-caption-container. și o celulă cu o semnătură separată este .tr-caption.

Selectori de imagini în șablonul CSS Blogger

Șablonul conține inițial deja toți selectorii necesari și, dacă doriți, puteți adăuga sau modifica proprietățile CSS existente pentru ele. Această secțiune din codul șablonului arată inițial astfel:

post-body img. post-corp .tr-caption-container. Profil img. Imagine img,
.BlogList .item-miniatură img padding: $ (image.border.small.size);

fundal: $ (imagine.background.color);
graniță: 1px solid $ (image.border.color);

-moz-box-shadow: 1px 1px 5px rgba (0, 0, 0. 1);
-webkit-box-shadow: 1px 1px 5px rgba (0, 0, 0. 1);
box-shadow: 1px 1px 5px rgba (0, 0, 0. 1);
>

post-body img. post-corp .tr-caption-container de umplere: $ (image.border.large.size);
>

post-corp .tr-caption-container culoare: $ (image.text.color);
>

post-corp .tr-caption-container img padding: 0;

fundal: transparent;
frontieră: nici una;

-moz-box-shadow: 0 0 0 rgba (0, 0, 0. 1);
-webkit-box-shadow: 0 0 0 rgba (0, 0, 0. 1);
box-shadow: 0 0 0 rgba (0, 0, 0. 1);
>

Nu există multe stiluri, selectorii de blocuri diferite cu imagini sunt combinați pentru a scrie proprietăți comune, dar putem scrie proprietățile necesare numai selectorilor de care avem nevoie, separându-i. Pentru imaginile postate, acestea sunt următoarele:
- .post-body img - imagini în mesaj, sau .entry-content img care este în esență același;
- .separator - containerul cu imaginea fără semnătură;
- .post-corp .tr-caption-container img - selectorul pentru imaginea la care a fost adăugată semnătura;
- .tr-caption-container - selectorul întregii mese cu imaginea;
- .tr-caption - un selector pentru o celulă cu o semnătură de imagine;

Cum să faceți toate imaginile în postări de blog de aceeași dimensiune

Solicitând stilul general, uneori este necesar ca imaginile din mesaje să aibă aceeași înălțime sau lățime, indiferent de dimensiunile originale. Este foarte simplu, puteți adăuga o lățime de atribut fiecărei imagini cu valoarea necesară de fiecare dată sau o puteți face simplu: trebuie doar să adăugați următorul CSS în șablon:

post-body img <
înălțime: 150px; / * înălțime, orice valoare dorită, puteți în% * /
lățime: auto; / * lățime, valoare obligatorie * /
>

post-body img <
înălțime: auto; / * înălțime, valoare obligatorie * /
lățime: 150px; / * lățime, orice valoare dorită, poate fi în% * /
>

Cum de a schimba stilul doar pentru prima fotografie postare din Blogger

Din păcate, folosind selectorii de șablon standard, acest lucru nu este posibil, chiar folosind pseudo-clase.
Dar eticheta . precum și pentru oricare altul, este posibil să se adauge o clasă separată cu înregistrarea stilului necesar. Când creați un mesaj, trebuie doar să intrați în modul de editare HTML și să îl adăugați la eticheta primei imagini.
De exemplu:

În CSS, setați-l la nivel global, de exemplu:

primul-img float: stânga;
raza de graniță: 5px;
margine: 5px;
înălțime: 200px;
lățime: auto;
>

Nu uitați că pentru ca scriptul să funcționeze, trebuie să conectați biblioteca jQuery la blog. cu excepția cazului în care ați făcut-o mai devreme.

Asta e, sper că postul a fost util.

"dar puteți face acest lucru pur și simplu - adăugați doar o dată următoarea CSS la șablon:
. „- acest lucru nu este rabotaet.Da, lățimea imaginile sunt aliniate (dacă luați două versiune), dar calitatea imaginii se deteriorează foarte mult Astfel, originale de dimensiuni mai mari ..

Am încercat multe coduri pe care le-am găsit în rețea. Dar, în toate cazurile, calitatea imaginilor se deteriorează. Iată un test blog - test-blogger-9.blogspot.com. originale ale imaginilor de diferite mărimi și de calitate și toate fotografiile sunt o pierdere foarte vizibilă a calității pe blog.

Aici sunt bloguri în care există mai multe fotografii în postări și toate fără pierderea calității:

Este important pentru mine ca calitatea să nu fie pierdută și aliniată atunci când descarcă mai multe (10-15) fotografii într-un singur mesaj simultan, ca și aceste bloguri, pentru a nu edita totul manual. Te rog ajută.

Articole similare

Pagina anterioară