Pf, am terminat în sfârșit cu organizarea de noi rețete din reviste. În timp ce strângeau praf într-un plic doar într-o grămadă, nu credeam că am acumulat destul de multe. În timp ce eram însărcinată cu fiul meu, am pregătit atât de multe rețete noi încât probabil ar fi suficiente pentru mai multe cărți de bucate. Poate pentru ca am vrut sa mananc tot timpul :)) sau poate.. cine stie. Odată cu nașterea unui copil, practic nu mai era timp să experimenteze cu gătitul, dar fiul meu crește, îi place să-și ajute mama să coacă brioșe și prăjituri și, în sfârșit, s-a apucat să organizeze rețete.
Așadar, am luat 2 mape, unul pentru rețete noi, celălalt pentru cele deja testate, iubite și folosite.
Nu am împărțit folderul cu rețete noi și netestate în multe secțiuni, în primul rând, pentru că folderul este temporar în orice caz, pentru că... rețetele trebuie testate și, în al doilea rând, chiar și sortarea în mai multe categorii a durat mult timp.
Prin urmare, am împărțit noile rețete pentru folderul temporar în:
- Mic dejun;
- Gustări;
- Salate;
- Supe (pranzuri);
- cine;
- Salate;
- Produse de patiserie (în principal dulciuri și deserturi).
Am imprimat separatoarele pe o imprimantă color și iată ce s-a întâmplat:
Dosarul meu cu rețete noi este destul de gros, până la 80 de pagini. Prin urmare, pentru a găsi rapid categorii în interiorul unui folder, vă recomand să îl completați cu separatoare laterale pentru a găsi rapid și categoria dorită. Puteți folosi cele gata făcute, de exemplu, ca acestea:
Sau descărcați-l pe al meu:
Am imprimat separatoarele pe hârtie autoadezivă, le-am tăiat și pur și simplu le-am lipit de paginile dorite:
Am aruncat la gunoi toate rețetele, scăpând în cele din urmă de cele pe care familia mea cu siguranță nu le-ar mânca. Pe cele pe care am vrut să le păstrez le-am tăiat pur și simplu cu foarfecele. O sarcină foarte obositoare și dificilă. Prin urmare, dacă sunteți fericitul proprietar al unui tăietor de hârtie, aveți noroc.
Am folosit hârtie de artizanat colorată obișnuită ca suport pentru rețetele decupate. Am avut această hârtie MOLA de la IKEA. Dacă doriți, hârtia colorată poate fi folosită chiar și ca bază pentru împărțirea rețetelor pe categorii, atunci veți ști că, de exemplu, paginile verzi conțin salate și, de exemplu, preparatele din carne roșie.
Pur și simplu am plasat rețetele decupate deasupra unui fundal de hârtie colorată. Daca imi place preparatul il voi pune intr-un folder cu retete deja incercate. Dacă nu, îl voi arunca.
Salutări, tu. Recent am fost întrebat cum să fac o pagină să defileze fără probleme la o anumită parte a paginii. În general, acest lucru se numește urmărirea unei legături de ancorare. Când un vizitator al site-ului face clic pe un element care are adăugat un link de ancorare, acesta este dus automat în partea din pagină în care a fost adăugată ancora.
De obicei, ancorele sunt folosite pe pagini cu un volum mare, astfel încât să puteți sări rapid la secțiunea dorită pentru o navigare mai ușoară. Probabil ați văzut asta pe multe site-uri.
Pentru a crea o ancoră, trebuie mai întâi să creați un marcaj în locul potrivit și să îi dați un nume folosind atributul nume al etichetei .
Consultați blogul de testare pentru a vedea cum funcționează.
Să ne dăm seama cum să urmăm linkurile ancora într-o pagină în Blogger. Totul este destul de simplu.
Să creăm un meniu simplu, unde ca parametru de legătură setăm id-ul blocurilor la care va avea loc derularea. Ceva de genul acesta
Pentru a nu te păcăli din nou, îți voi da imediat codul complet. Îl puteți copia și încerca pe pagina dvs. într-un blog de testare trecând la modul HTML în editorul de postări. Și să ne dăm seama ce s-a făcut aici
- De unde să încep
- Cum se face
- De unde să-l iei
- Cum se implementează
De unde să încep
Cum se face
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis rerum deleniti quibusdam molestiae esse ad iusto natus, asperiores doloribus impedit quia quasi placeat unde recusandae ut fuga enim vel incidunt sed perspiciatis magni culpa corporis hic! Ducimus distinctio esse quod eius repudiandae at magni repellat, expedita molestiae, delectus, aliquam laborum vel eveniet reprehenderit sunt voluptate similique!
De unde să-l iei
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis rerum deleniti quibusdam molestiae esse ad iusto natus, asperiores doloribus impedit quia quasi placeat unde recusandae ut fuga enim vel incidunt sed perspiciatis magni culpa corporis hic! Ducimus distinctio esse quod eius repudiandae at magni repellat, expedita molestiae, delectus, aliquam laborum vel eveniet reprehenderit sunt voluptate similique!
Cum se implementează
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis rerum deleniti quibusdam molestiae esse ad iusto natus, asperiores doloribus impedit quia quasi placeat unde recusandae ut fuga enim vel incidunt sed perspiciatis magni culpa corporis hic! Ducimus distinctio esse quod eius repudiandae at magni repellat, expedita molestiae, delectus, aliquam laborum vel eveniet reprehenderit sunt voluptate similique!
Și codul HTML, adăugând în consecință astfel de secțiuni de text
Cum se implementează
TOT TEXTUL TĂU VA FI AICI
Și aici trebuie pur și simplu să vă atrag atenția asupra următoarelor
Dacă ați specificat ancore la editarea unui mesaj, nu treceți la fila „Creare”, lucrați și scrieți mesajul în modul HTML. Apoi ancorele vor rămâne în forma lor originală. În caz contrar, autocorecția va avea loc pur și simplu (acestea sunt capriciile Blogger).
Există un nume aici
Vor arăta așa
Adică trecerea se va face la o pagină inexistentă (parcă nepublicată).
Dacă este încă dificil să lucrezi în modul HTML și ca totul să funcționeze corect în acest caz, trebuie doar să schimbi puțin linkul, astfel încât eticheta de ancorare să arate așa
Există un nume aici
Unde https://n-t-b-b.blogspot.com/2019/08/blog-post.html este linkul către pagina care poate fi văzută în partea dreaptă a editorului de postări în setări aici
Totul este destul de simplu așa. Blogurile de pe Wordpress au un plugin special pentru astfel de scopuri. Pe Blogger, acest lucru este ușor de implementat folosind următorul cod. Mult succes tuturor.
Salutare prieteni. Și o altă hartă a site-ului pentru tine astăzi. A stat mult timp în „pubele” mele, apoi am dat din greșeală de unul vechi uitat. Poate cuiva îi va plăcea asta. Acesta este proiectat în stilul acordeonului.
Ce vom avea pe o astfel de hartă -
Toate etichetele (titluri, secțiuni) sunt afișate în partea stângă.
Când faceți clic pe săgeata din dreapta, se deschid toate postările acestei comenzi rapide.
Set de etichete - mesaj nou.
Personalizare ușoară a designului pentru a se potrivi stilurilor dvs.
Instalare ușoară pe pagină.
Pentru a vedea versiunea de lucru, accesați blogul de testare.
.cuprins(culoarea fundalului:#008B8B;culoarea:#444;familia fonturilor:Verdana,Geneva,Tahoma,Arial,Sans-serif;dimensiunea fontului:13px;greutatea fontului:400;overflow:ascuns ;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.2))
.table-of-content .toc-header(color:#444;font-family:inherit;font-weight:400;font-size:14px;background-color:#fff;margin:0;padding:15px;overflow :hidden;cursor:pointer;border-bottom:1px solid #ccc;tranziție:inițial)
.table-of-content .toc-header:hover(culoarea fundalului:#fdfdfd)
.tabel-de-conținut .toc-header:before(conținut:"";lățime:0;înălțime:0;poziție:absolut;sus:22px;dreapta:15px;bord: 5px transparent solid;border-color:#aaa transparent transparent; tranziție: toate .3s ușurință)
.tabel-de-conținut .toc-header.active (culoare:#fc4f3f)
.table-of-content .toc-header.active:before(border-color:#666 transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg); -ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg))
.tabel-de-conținut .încărcare(display:block;padding:15px;text-decoration:blink)
.table-of-content ol(margin:0;padding:0;list-style:none;tranziție:inițial)
.tabel-de-conținut li(line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:# 808080 !important;tranziție:inițial)
.Cuprins a(culoare:#d9d9d9!important;decorare text:niciuna;dimensiune font:86%;tranziție:inițială)
.tabel de conținut a:vizitat(culoare:#a2a2a9;tranziție:inițială)
.tabel de conținut a:hover,.tabel de conținut a:visited:hover (culoare:#ffc937!important;text-decoration:none;tranziție:inițială)
.post ol li:before(display:none)
var toc_config = (
url: "https://"+window.location.hostname,
containerId: „tabel de conținut”,
aratăNou: 15,
newText: „nou”,
sortați alfabetic: (
thePanel: adevărat,
theList: adevărat
},
maxResults: 9999,
ActivePanel: 1,
slideSpeed: (
jos: 400,
în sus: 400
},
slideEasing: (
jos: nul,
sus: nul
},
slideCallback: (
jos: function() (),
sus: function() ()
},
clickCallback: function()(),
jsonCallback: „_toc”,
!function(e,o)(var t=o.getElementById(toc_config.containerId),c=o.getElementsByTagName("head"),n=;e=function(e)(for(var o,c,i= e.feed.entry,a=e.feed.category,l="",s=0,d=a.length;d>s;++s)n.push(a[s].term);pentru (var r=0,f=i.length;f>r;++r)(toc_config.showNew||toc_config.showNew>0)&++g)(l+=""+n[g]+"" ,l+="";for(var _=0,p=i.length;p>_;++_)(o=i[_].title.$t;for(var w=0,u=i [_].link.length;u>w;++w)if(„alternativ”==i[_].link[w].rel)(c=i[_].link[w].href; break)for(var v=0,m=i[_].category.length;m>v;++v)n[g]==i[_].category[v].term&&(l+="
Puteți copia imediat întregul cod. Du-te la panoul de administrare blog - fila pagină - creați pagina. Treceți imediat la modul HTML în editorul de pagini, inserați codul copiat și publicați.
Asta e, nu trebuie să faci altceva. Acesta este generat prin feedul dvs. de blog. În cod am evidențiat culoarea generală de fundal ca gri, dar o puteți schimba cu ușurință în cea dorită. Aici sunt culorile, la fel ca multe alte stiluri - font, chenaruri, umbre etc.
Rapid, simplu, convenabil, frumos.
Vă doresc tuturor succes și ne vedem curând.
abonați-vă la noi cheat sheets
Folosind programe de grafică precum Photoshop, Gimp și altele, puteți crea imagini animate în format GIF. În acest articol vreau să vă arăt cum să creați elemente intermitente din text și imagini folosind CSS3 și Javascript.
Alegerea CSS3 este mai bună decât javascript, deoarece nu încetinește semnificativ deschiderea paginii browser. Această setare poate fi interesantă pentru a evidenția un anumit paragraf sau pentru a stimula clicul pe un element.
Pentru claritate, voi împărți postarea în 4 secțiuni:
imagini intermitente folosind CSS
text intermitent folosind Javascript
imagine intermitent folosind Javascript
Pentru nevoi individuale, puteți adăuga și link-uri.
alăturați-vă paginii de Facebook a bloggerului
.blink_text(
animație: 1s intermitent liniar infinit;
culoare: #00f;
dimensiunea fontului: 18px;
greutate font: bold;
}
.blink_text a (culoare:#f00;)
@keyframes intermitent (
0% (opacitate: 1,0; )
50% ( opacitate: 0,0; )
100% (opacitate: 1,0; )
}
Schimbați textul și adresa paginii https://www.facebook.com/ViktoriyBarad/ în consecință.
Acestea sunt stilurile de text
culoare: #00f;
dimensiunea fontului: 18px;
greutate font: bold;
Durata animației este setată la 1 secundă (personalizabilă)
2. Un exemplu de imagine intermitentă CSS
Sunt pe Twitter
Cod
.blink_text(
animație: 1s intermitent liniar infinit;
}
@keyframes intermitent (
0% (opacitate: 1,0; )
50% ( opacitate: 0,0; )
100% (opacitate: 1,0; )
}
Setările sunt similare - adresa dvs. și o imagine în format png.
Acum să vedem cum să implementăm aceleași efecte folosind javascript.
1. Text intermitent în javascript
Abonați-vă la funcția de fișe ale bloggerului blink_one() ( document.getElementById("blink").style.visibility="visible"; setTimeout("blink_two()",700); ) function blink_two() ( document.getElementById(" blink ").style.visibility="hidden"; setTimeout("blink_one()",700); ) blink_one();
Schimbați-l la adresa feedului dvs. și scrieți textul.