Fuj, konačno sam završio sa organizovanjem novih recepata iz časopisa. Dok su skupljali prašinu u kovertu samo na gomilu, nisam mislio da sam ih nakupio baš puno. Dok sam bila trudna sa sinom, pripremila sam toliko novih recepata da bi vjerovatno bili dovoljni za nekoliko kuharica. Možda zato što sam stalno htela da jedem :)) ili možda.. ko zna. Sa rođenjem djeteta praktički nije ostalo vremena za eksperimentiranje s kuhanjem, ali moj sin raste, voli pomagati mami da peče mafine i kolače, a konačno je stigao i do organiziranja recepata.
Dakle, uzela sam 2 fascikle, jednu za nove recepte, drugu za već isprobane, voljene i korištene.
Nisam dijelio fasciklu sa novim i neprovjerenim receptima na mnogo sekcija, prvo zato što je folder u svakom slučaju privremen, jer... recepte je potrebno testirati, a drugo, čak i razvrstavanje u nekoliko kategorija oduzimalo je dosta vremena.
Stoga sam podijelio nove recepte za privremeni folder na:
- Doručci;
- Grickalice;
- Salate;
- Juhe (ručci);
- Večere;
- Salate;
- Pekarski proizvodi (uglavnom slatkiši i deserti).
Odštampao sam separatore na štampaču u boji i desilo se ovo:
Moj folder sa novim receptima je prilično debeo, čak 80 stranica. Stoga, da biste brzo pronašli kategorije unutar mape, preporučujem da je dopunite bočnim razdjelnicima kako biste također brzo pronašli željenu kategoriju. Možete koristiti gotove, na primjer, poput ovih:
Ili preuzmite moj:
Razdjelnike sam isprintala na samoljepljivi papir, izrezala i jednostavno zalijepila na željene stranice:
Temeljito sam zbrisao sve recepte, konačno sam se riješio onih koje moja porodica definitivno ne bi jela. One koje sam htjela zadržati jednostavno sam izrezala makazama. Veoma naporan i težak zadatak. Stoga, ako ste sretni vlasnik rezača papira, sretni ste.
Koristila sam običan papir u boji kao podlogu za izrezane recepte. Imao sam ovaj MOLA papir iz IKEA-e. Ako želite, papir u boji se čak može koristiti kao osnova za podjelu recepata u kategorije, tada ćete znati da, na primjer, zelene stranice sadrže salate, a na primjer jela od crvenog mesa.
Jednostavno sam stavio izrezane recepte na pozadinu papira u boji. Ako mi se svidi jelo, staviću ga u fasciklu sa već isprobanim receptima. Ako ne, baciću ga.
Pozdrav. Nedavno su me pitali kako da učinim da stranica glatko skroluje do određenog dijela stranice. Općenito, ovo se naziva praćenjem sidrene veze. Kada posjetitelj stranice klikne na element kojem je dodana sidro veza, automatski se odvodi na dio stranice gdje je sidro dodano.
Tipično, sidra se koriste na stranicama velikog obima tako da možete brzo skočiti na željeni odjeljak radi lakše navigacije. Vjerovatno ste ovo vidjeli na mnogim web stranicama.
Da biste kreirali sidro, prvo morate napraviti bookmark na odgovarajućem mjestu i dati mu ime koristeći name atribut oznake .
Pogledajte testni blog da vidite kako to funkcionira.
Hajde da shvatimo kako pratiti sidrene veze unutar stranice u Bloggeru. Sve je prilično jednostavno.
Napravimo jednostavan meni, gdje kao parametar veze postavljamo id blokova do kojih će se pomicati. Ovako nešto
Da vas ponovo ne zavaravam, odmah ću vam dati kompletan kod. Možete ga kopirati i isprobati na svojoj stranici u probnom blogu prebacivanjem na HTML mod u uređivaču objava. I hajde da shvatimo šta je ovde urađeno
- Gdje početi
- Kako to učiniti
- Gdje dobiti
- Kako implementirati
Gdje početi
Kako to učiniti
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 differentio esse quod eius repudiandae at magni repellat, expedita molestiae, delectus, aliquam laborum vel eveniet reprehenderit sunt voluptate similique!
Gdje dobiti
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 differentio esse quod eius repudiandae at magni repellat, expedita molestiae, delectus, aliquam laborum vel eveniet reprehenderit sunt voluptate similique!
Kako implementirati
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 differentio esse quod eius repudiandae at magni repellat, expedita molestiae, delectus, aliquam laborum vel eveniet reprehenderit sunt voluptate similique!
I HTML kod, shodno tome dodajući takve dijelove teksta
Kako implementirati
SAV VAŠ TEKST BIĆE OVDJE
I ovdje vam jednostavno moram skrenuti pažnju na sljedeće
Ako ste naveli sidra prilikom uređivanja poruke, nemojte se prebacivati na karticu "Kreiraj", radite i napišite poruku u HTML modu. Tada će sidra ostati u svom izvornom obliku. U suprotnom će jednostavno doći do autokorekcije (ovo su hirovine Bloggera).
Ovde je neko ime
Oni će izgledati ovako
Odnosno, prijelaz će se izvršiti na nepostojeću stranicu (kao da nije objavljena).
Ako je i dalje teško raditi u HTML modu i da bi u ovom slučaju sve funkcionisalo kako treba, potrebno je samo malo promijeniti link kako bi oznaka sidra izgledala ovako
Ovde je neko ime
Gdje je https://n-t-b-b.blogspot.com/2019/08/blog-post.html link do stranice koja se može vidjeti na desnoj strani uređivača postova u postavkama ovdje
Sve je tako jednostavno. Blogovi na Wordpress-u imaju poseban dodatak za takve svrhe. Na Bloggeru se ovo lako implementira pomoću sljedećeg koda. Sretno svima.
Zdravo prijatelji. I još jedna mapa sajta za vas danas. Dugo je ležao u mojim „kantima“, a onda sam slučajno naišao na zaboravljeni stari. Možda će se nekome ovaj svidjeti. Ovaj je dizajniran u stilu harmonike.
Šta ćemo imati u takvoj mapi -
Sve oznake (naslovi, sekcije) su prikazane na lijevoj strani.
Kada kliknete na strelicu na desnoj strani, otvaraju se svi postovi ove prečice.
Oznaka postavljena - nova poruka.
Jednostavno prilagođavanje dizajna u skladu sa vašim stilovima.
Jednostavna instalacija na stranici.
Da vidite radnu verziju, idite na testni blog.
.table-of-content(background-color:#008B8B;color:#444;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden ;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;transition:initial)
.table-of-content .toc-header:hover(background-color:#fdfdfd)
.table-of-content .toc-header:before(content:"";width:0;height:0;position:apsolute;top:22px;desno:15px;border:5px čvrsta transparentna;border-color:#aaa transparentan transparentan;prijelaz:sve .3s lakoća)
.table-of-content .toc-header.active(color:#fc4f3f)
.table-of-content .toc-header.active:before(border-color:#666 transparentan transparentan;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg); -ms-transform:rotirati(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg))
.table-of-content .loading(display:block;padding:15px;text-decoration:blink)
.table-of-content ol(margin:0;padding:0;list-style:none;transition:initial)
.table-of-content li(line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:# 808080 !važno;prijelaz:početno)
.table-of-content a(boja:#d9d9d9!important;text-decoration:none;font-size:86%;prijelaz:inicijal)
.table-of-content a:visited(color:#a2a2a9;transition:initial)
.table-of-content a:hover,.table-of-content a:visited:hover(color:#ffc937!important;text-decoration:none;transition:initial)
.post ol li:before(display:none)
var toc_config = (
url: "https://"+window.location.hostname,
containerId: "tabela sadržaja",
showNovo: 15,
newText: "novo",
sortiraj po abecedi: (
the Panel: istina,
theList: istina
},
maxRezultati: 9999,
aktivni Panel: 1,
SlideSpeed: (
dolje: 400,
gore: 400
},
slideEasing: (
dolje: null,
gore: null
},
slideCallback: (
dolje: funkcija() (),
gore: funkcija() ()
},
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);for (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("alternate"==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+=")
Možete odmah kopirati cijeli kod. Idi blog admin panel - kartica stranice - kreiranje stranice. Odmah se prebacite na HTML način rada u uređivaču stranice, zalijepite kopirani kod i objavite.
To je to, ne morate ništa drugo da radite. Ovo se generiše putem vašeg blog feeda. U kodu sam opću boju pozadine označio sivom, ali je lako možete promijeniti u željenu. Evo boja, ali, kao i mnogi drugi stilovi - font, ivice, sjene, itd.
Brzo, jednostavno, povoljno, lijepo.
Želim vam svima puno sreće i vidimo se uskoro.
pretplatite se na nove cheat sheets
Koristeći grafičke programe kao što su Photoshop, Gimp i drugi, možete kreirati animirane slike u GIF formatu. U ovom članku želim da vam pokažem kako da kreirate trepćuće elemente od teksta i slika koristeći CSS3 i Javascript.
Odabir CSS3 je bolji od javascripta, jer ne usporava značajno otvaranje stranice pretraživača. Ova postavka može biti zanimljiva kako bi se istaknuo određeni pasus, ili kako bi se stimuliralo klikanje na neki element.
Radi jasnoće, podijelit ću post u 4 dijela:
bljeskanje slika pomoću CSS-a
treperi tekst koristeći Javascript
trepereća slika koristeći Javascript
Za individualne potrebe možete dodati i linkove.
pridružite se blogerovoj cheat sheet stranici na Facebooku
.blink_text(
animacija:1s blinker linear beskonačan;
boja: #00f;
font-size:18px;
font-weight:bold;
}
.blink_text a (boja:#f00;)
@keyframes žmigavac (
0% (prozirnost: 1.0; )
50% (prozirnost: 0,0; )
100% (prozirnost: 1.0; )
}
U skladu sa tim promijenite tekst i adresu stranice https://www.facebook.com/ViktoriyBarad/.
Ovo su stilovi teksta
boja: #00f;
font-size:18px;
font-weight:bold;
Vrijeme animacije je postavljeno na 1 sekundu (prilagodljivo)
2. Primjer uključene slike koja treperi CSS
Ja sam na Twitteru
Kod
.blink_text(
animacija:1s blinker linear beskonačan;
}
@keyframes žmigavac (
0% (prozirnost: 1.0; )
50% (prozirnost: 0,0; )
100% (prozirnost: 1.0; )
}
Postavke su slične - vaša adresa i slika u png formatu.
Sada da vidimo kako implementirati iste efekte koristeći javascript.
1. Treperi tekst u javascriptu
Pretplatite se na funkciju blogerovih varalica funkcije blink_one() ( document.getElementById("blink").style.visibility="visible"; setTimeout("blink_two()",700); ) funkciju blink_two() (document.getElementById(" blink ").style.visibility="hidden"; setTimeout("blink_one()",700); ) blink_one();
Promijenite je u svoju adresu i napišite svoj tekst.