How to make a complete alphabetic divider with your own hands. Cool ideas that will help you get your desk in perfect order. Cutlery storage
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 storage
If 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.
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.
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.
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
- Where to get
- How to implement
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).
There's some name here
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 blogger's cheat sheet Facebook page
.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
.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.
