Posts

Showing posts from September, 2020

How to Create Fullscreen Blog Pages With Javascript?

Image
Creating a Fullscreen Blog Page With Javascript - With a fullscreen blog page, you won't see the address bar and browser tabs, so you only focus on that page. Fullscreen mode is generally used in an embed, for example embedding a video. But this time we will make fullscreen mode for a web page. However, we cannot make the fullscreen automatically when the page is opened, because at this time the browser will ignore it. So fullscreen must have user involvement with the action of clicking a fullscreen button, simply by pressing a button F11on the keyboard. But for mobile, we can do this fullscreen when the blog is opened like when we open an application. We can do this with manifest.json , which I previously explained. When the user clicks on our blog icon from the main screen of the cellphone, the page will open automatically fullscreen, meaning that the user opens the blog like an application, without the browser address bar visible on the blog. Well, for the desktop we can make a ...

How to Make Responsive CSS Minifier Pages?

Image
This CSS Minifier functions to compress / shrink the css code that will be applied to the blog. So that the speed of the blog can feel even faster with the reduction in the size of the css. With a small css it will certainly improve your blog SEO. Have you ever used a tool to view or check the speed of your blog, then get a message to "Compress CSS"so that your blog speed increases. Then you type in a search engine with the keyword "How to Minify CSS" or even "How to compress CSS". Surely you will get a link that contains this CSS Minifier, even out there there are those that are not only for CSS, but Javascript and HTML Minifier. Don't you want to create a CSS Minifier on your own blog? to make it easier for you without having to use other people's tools. How to Create a CSS Minifier Tool Page on Blogspot? If you want to make this tool on your own blog, please watch and follow the tutorial until it's finished. First, please log in to your Blog...

How To Change Website Background Color With CSS?

Image
This has become the basis for creating a website. Because HTML and CSS will be the basic framework of the website and can be used to design websites. You must have tried downloading a template because you want to know what the coding looks like, right? In fact, you will try to change the template . Starting from changing images, menus, writing, background , and others. But, because you are still confused, you will definitely find it difficult to change it. In this tutorial, Event techy will give a few tips for changing the background color of a website with CSS. Event techy will provide step by step starting from finding the CSS file first. You can follow the methods below! How do I find the CSS file? 1. If you download a template, you can search for a folder which is usually named "css "or" assets". 2. Look for a file called style.css/ styles.css/ main.css (can have another name which is usually different from all existing css files and has a style written ). 3. If...

How To Create A Gradation Effect On A Button?

Image
In This tutorial will discuss an example of an effect created by CSS3, namely how to create a gradient effect on a button . Gradation is a very interesting color combination so that the gradient effect is one of the most widely used effects in website page designs today, one example that I will share with you is the use of the color gradient effect on the button element. For those of you who are curious about how to make it, there is nothing wrong with listening and at the same time following the steps below. To create a gradient effect this time, of course, the element we will use is the button element, please create and type it like the following syntax. <body> <button class = "btn btn-flex"> </button> </body> After creating the button element as above, next is to design and adjust the button element and of course create a color gradient effect on the button, please type in the CSS3 syntax as follows. * { margin: 0; padding: 0; box-si...

How to Make Sticky Social Media Share Buttons on a Blog?

Image
Marouses Sticky Keys Share Social Media in Post, Share Button is so important for a website / blog. because this is related to the popularity of the website or blog. the more visitors who share our articles, the more traffic / visitors we get from the results of sharing article links to social media. In the previous tutorial, I had made a social media share button floating on blogger, but it floated on the left side. while this time it's different, the share button that I will make floats in the post exactly below. exactly the same as having an igniel mba and already using the SVG icon, so you don't have to worry about the blog loading speed problem. How to Make Sticky Social Media Share Buttons on a Blog? Why do we make the button sticky or floating, if the button will be used by visitors to share the post, they will have no trouble finding the share button, because most visitors will not look for the share button to try to share the post. but they are also just sharing it for...

How to Make a Cool Folded Paper Blockquote on a Blog?

Image
Surely you have seen an important article on Blockquote, right? Well, this time Zishu will share How to Make a Cool Folded Paper Blockquote on a Blog. Apart from giving a very nice and pretty appearance to this blockquote, there are several color variations from red, yellow, green and blue, okay, let's go straight to how to make it. How to Make a Cool Folded Paper Blockquote on a Blog 1. Open an Account Blogger. 2. Select Theme Dashboard > Edit Theme. 3. Then you look for the code  ]]></b:skin>  to simplify the search you can use CTRL + F then type  ]]></b:skin> , then you copy and paste this code right above the code  ]]></b:skin>. >/* CSS Blockquote AE */ .note{position:relative;padding:1.2em 1.5em;margin:2em auto;color:#fff;background:#2ecc71;overflow:hidden} .note.yellow{background:#f1c40f} .note.red{background:#e74c3c} .note:before{content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid...