Project for organizing recipes from magazines. Organize it! Project for organizing recipes from magazines Flashing picture in javascript
Phew, I'm finally done with organizing new recipes from magazines. While they were gathering dust in an envelope just in a pile, I didn’t think that I had accumulated quite a lot of them. While I was pregnant with my son, I prepared so many new recipes that they would probably be enough for several cookbooks. Maybe because I wanted to eat all the time :)) or maybe.. who knows. With the birth of a child, there was practically no time left to experiment with cooking, but my son is growing up, loves to help his mother bake muffins and cakes, and finally got around to organizing recipes.
So, I took 2 folders, one for new recipes, the other for already tested, loved and used ones.
I did not divide the folder with new and untested recipes into many sections, firstly, because the folder is temporary in any case, because... the recipes need to be tested, and secondly, even sorting into several categories took quite a lot of time.
Therefore, I divided the new recipes for the temporary folder into:
- Breakfasts;
- Snacks;
- Salads;
- Soups (lunches);
- Dinners;
- Salads;
- Baked goods (mainly sweets and desserts).
I printed the separators on a color printer, and this is what happened:
My folder with new recipes is quite thick, as much as 80 pages. Therefore, to quickly find categories inside a folder, I recommend supplementing it with side dividers so that you can also quickly find the desired category. You can use ready-made ones, for example, like these:
Or download mine:
I printed out the dividers on self-adhesive paper, cut them out and simply glued them to the desired pages:
I thoroughly trashed all the recipes, finally getting rid of those that my family definitely wouldn’t eat. The ones I wanted to keep I simply cut out with scissors. A very tedious and difficult task. Therefore, if you are the happy owner of a paper cutter, you are lucky.
I used regular colored craft paper as a backing for the cut out recipes. I had this MOLA paper from IKEA. If desired, colored paper can even be used as a basis for dividing recipes into categories, then you will know that, for example, the green pages contain salads, and, for example, the red meat dishes.
I simply placed the cut out recipes on top of a colored paper background. If I like the dish, I will put it in a folder with already tried recipes. If not, I'll throw it away.
Sometimes it takes a lot of time, effort and nerves to find the right item on the table. To avoid stress and quickly find this or that item, you need to properly organize storage in drawers. How to do it? We've found the coolest and fastest-to-implement ideas that will help you sort out even the biggest mess.
Cutlery storageIf cutlery items are stored in a drawer without dividers, then sooner or later they will mix with each other. To prevent this from happening, it is better to immediately ensure that forks, spoons and knives are stored separately. To do this, you can buy a special container with dividers at a kitchenware store, or make partitions yourself from plywood blocks. In this case, it is better to cover the bottom with a piece of non-woven tablecloth or stick a decorative film.
Storage of cosmetics
To store cosmetics in a drawer, you need to get plastic and metal containers of different sizes. For convenience, it is recommended to put lipsticks and glosses in one container, place brushes and sponges for applying cosmetics in a separate jar, fix eye shadows and blush so that they do not fall off when opening and closing the drawer. Little Helpers
To turn a drawer into a functional organizer, you don’t have to spend money on containers or look for special dividers. It's worth looking into the kitchen and seeing if there are any unwanted cardboard boxes from cornflakes or oatmeal. Boxes (and their lids) left over after buying shoes, a phone or other accessories will also come in handy. For beauty, they can be decorated with remnants of wallpaper, glued together and decorated in the same style.
Original solutions If you don’t have boxes, containers and dividers at hand, then the most common items that can be found in any kitchen will come to the rescue. For example, in almost any supermarket eggs are sold in cardboard cells, which are often simply thrown into the trash after purchase. In fact, they are convenient for storing paper clips, pins, erasers, keys, threads and much more.
Greetings. Recently I was asked how to make a page scroll smoothly to a certain part of the page. In general, this is called following an anchor link. When a site visitor clicks on an element that has an anchor link added to it, they are automatically taken to the part of the page where the anchor was added.
Typically, anchors are used on pages with a large volume so that you can quickly jump to the desired section for easier navigation. You've probably seen this on many websites.
To create an anchor, you must first make a bookmark in the appropriate place and give it a name using the name attribute of the tag .
Check out the test blog to see how it works.
Let's figure out how to follow anchor links within a page in Blogger. Everything is quite simple.
Let's create a simple menu, where as a link parameter we set the id of the blocks to which scrolling will occur. Something like this
So as not to fool you again, I’ll give you the complete code right away. You can copy it and try it on your page in a test blog by switching to HTML mode in the post editor. And let's figure out what's done here
Where to begin
How to do
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!
Where to get
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!
How to implement
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!
And the HTML code, accordingly adding such sections of text
How to implement
ALL YOUR TEXT WILL BE HERE
And here I simply must draw your attention to the following
If you have specified anchors when editing a message, do not switch to the "Create" tab, work and write the message in HTML mode. Then the anchors will remain in their original form. Otherwise, autocorrection will simply occur (these are the vagaries of Blogger).
They will look like this
That is, the transition will be made to a non-existent page (as if unpublished).
If it’s still difficult to work in HTML mode and for everything to work correctly in this case, you just need to change the link a little so that the anchor tag looks like this
There's some name here
Where https://n-t-b-b.blogspot.com/2019/08/blog-post.html is the link to the page that can be seen on the right side of the post editor in settings here
It's all quite simple like that. Blogs on Wordpress has a special plugin for such purposes. On Blogger this is easily implemented using the following code. Good luck everyone.
Hello friends. And another site map for you today. It has been lying in my “bins” for a long time, and then I accidentally came across a forgotten old one. Perhaps someone will like this one. This one is designed in the accordion style.
What will we have in such a map -
All labels (headings, sections) are displayed on the left side.
When you click on the arrow on the right, all posts of this shortcut open.
Label set - new message.
Easy design customization to suit your styles.
Easy installation on the page.
To view the working version, go to the test 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:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa transparent transparent;transition:all .3s ease)
.table-of-content .toc-header.active(color:#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))
.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 !important;transition:initial)
.table-of-content a(color:#d9d9d9!important;text-decoration:none;font-size:86%;transition:initial)
.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: "table-of-content",
showNew: 15,
newText: "new",
sortAlphabetically: (
thePanel: true,
theList: true
},
maxResults: 9999,
activePanel: 1,
slideSpeed: (
down: 400,
up: 400
},
slideEasing: (
down: null,
up: null
},
slideCallback: (
down: function() (),
up: 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);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+="
You can immediately copy the entire code. Go to blog admin panel - page tab - create page. Immediately switch to HTML mode in the page editor, paste the copied code and publish.
That's it, you don't need to do anything else. This is generated through your blog feed. In the code I highlighted the general background color as gray, but you can easily change it to the desired one. Here are the colors. However, like many other styles - font, borders, shadows, etc.
Fast, simple, convenient, beautiful.
I wish you all good luck and see you soon.
subscribe to new cheat sheets
Using graphics programs like Photoshop, Gimp and others, you can create animated images in GIF format. In this article I want to show you how to create blinking elements from text and images using CSS3 and Javascript.
Choosing CSS3 is better than javascript, because it does not significantly slow down the opening of the browser page. This setting can be interesting in order to highlight a specific paragraph, or in order to stimulate clicking on some element.
For clarity, I will divide the post into 4 sections:
flashing images using CSS
flashing text using Javascript
flashing image using Javascript
For individual needs, you can also add links.
join the Facebook page blogger cheat sheets
.blink_text(
animation:1s blinker linear infinite;
color: #00f;
font-size:18px;
font-weight:bold;
}
.blink_text a (color:#f00;)
@keyframes blinker (
0% (opacity: 1.0; )
50% ( opacity: 0.0; )
100% (opacity: 1.0; )
}
Change the text and address of the page https://www.facebook.com/ViktoriyBarad/ accordingly.
These are the text styles
color: #00f;
font-size:18px;
font-weight:bold;
Animation time is set to 1 second (customizable)
2. An example of a flashing picture on CSS
I'm on Twitter
Code
http://s019.radikal.ru/i618/1406/76/98d12801cd3d.png " />
.blink_text(
animation:1s blinker linear infinite;
}
@keyframes blinker (
0% (opacity: 1.0; )
50% ( opacity: 0.0; )
100% (opacity: 1.0; )
}
The settings are similar - your address and a picture in png format.
Now let's see how to implement the same effects using javascript.
1. Flashing text in javascript
Subscribe to the blogger's cheat sheets function 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();
Change it to your feed address and write your text.