ComputersProgramming

How to make a spoiler. Options

There are a lot of people who want to create websites. Most users learn this themselves, using different sources. And, of course, there are concepts that future owners have not even heard of. But if you have started, then you need to study it thoroughly. Therefore, the article will consider in detail the question of how to make a spoiler on its resource.

We begin, of course, with the very concept of what it is and why this object will be required. So, quite often on the sites there is information of a different kind, which (for various reasons) must initially be hidden from visitors. That is, not that it does not show at all, but simply provide only at will. Here's the spoiler in html just for this and is used. It stores the originally hidden content for the site. But this is not reflected in the ranking of the resource by search engines, since for them this design is open and there is no negative influence. Any hidden information is disclosed when clicking on the link.

In addition, how to make a spoiler, it is very interesting to many, and for what purpose it is done? Most often for the external beauty of the resource. Take, for example, a website whose main page design does not provide for the placement of large text. And the owner needs the search engines to promote the resource, so the content should be voluminous (the size of the article can play a significant role). So the creation of a spoiler comes to the rescue. Still its use will approach for hiding the auxiliary information, or that not always it would be desirable to read.

Not everyone wants to read them, but they can not escape from them. There is a way that will help to protect visitors from this fiction. This is the creation of a button that hides any kind of spoiler on the forum, in an article, etc. You can create it in different ways. The easiest way is to use the html code input class = "button". First you just need to make sure that when you add information, it supports the insertion of the code, and if so, the button will start working immediately after inserting the text into the right place.

This version is suitable for a site created on Ucoz. But even after installation, the button may not work, as it requires additional settings. First of all, this is its appearance. Then - the identifier, which should be unique. And, finally, in the page code, where the material should be located, a script is added before the tag, which is responsible for the correct operation of the button. It is important to place it correctly, and not just to know how to make a spoiler.

And now we will analyze this function, but only for the site made for WordPress. The easiest way is to use the Advanced Spoiler plug-in, which is easy to download from many resources. Its installation is standard:

- unpacking the archive on your computer;

- connection to the site with the help of the FTP client (the most popular is Total Commander);

- uploading a file to your hosting;

- in the site admin area, we search for the section "Plugins - inactive" and activate the newly installed one. After the performed actions it will start working. Now, adding material in any editor, both in visual and html, the "Spoiler" button will be visible. Adding the information needed between the [spoiler] [/ spoiler] tags and creating a spoiler. If the owner is well versed, the plug-in can be slightly reconfigured.

And one more way how to make a spoiler on the site. First of all, you need to connect the jQuery library and the so-called "pribluda" JS, which is required for the spoiler to fold and unfold more or less smoothly. On the desired page of the site, in the administrative panel, the required code is placed between the tags. Further, in order for the function to be closed by default, the .splCont {display: none; Padding: 3px 5px; If there is no such document, it is not so scary. The inscription can be placed anywhere right in the text, most importantly - before placing the spoiler itself. And, finally, between ... the code of information hiding is placed.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 en.atomiyme.com. Theme powered by WordPress.