Understanding the Page Elements of a Blogger Layout

While following the instructions for adding gadgets/widgets or making some adjustments to your Blogger blog, some new users may not know the meaning of some terms and find them difficult. When it comes to gadgets, you usually need to go to the blog layout to add or adjust an element on the page.

For better understanding, here are some basic explanations about Blogger Dashboard Page - Elements .

What are page elements?

Page content is basically the content of our blog. To access the page elements, we must click on the " Design " option in the blogger control panel .

Understand the Page Elements section

Blogger layout consists of sections and elements . Sections identify specific areas of a page . Representation in each category It has a unique "id" that gives the name of the tag and its element, followed by the " class " CSS selector Each section has some properties , with which we can define the number of elements allowed in the section and whether the section allows adding "page elements" .

Here's an example of the standard code associated with the header section found in the Blogger HTML template:

class='header' id='header' maxwidgets='1' showaddelement='no' >
<- the rest of the code -->

To break the code above:

1. Section start tag.
2. class='header' - describes the group in the "header" element.
3. id='header' : Identifies and sets the header as a single element.
4. maxwidgets='1' - defines the number of elements allowed in the " header "; Here are the number of gadgets we can include in the header section. In this example , '1' means this field only allows us to add gadgets.
5. showaddelement='no' - The 'No' attribute means that the header will not show the " Add Gadget" link or we will not be able to move any element on the page. To enable this option to add new page elements (Add Gadgets) we need to change "No " to "Yes" . By setting the " showaddelement " attribute to 'yes' we can arrange the elements as we wish, just click on the element you want to move and drop it to where you want to drag it.

The space reserved for adding items to an existing section is called a gadget (or widget). You can easily add various widgets to your pages by clicking the Add Gadget link. This will open a pop-up window to select items to add. Click the gadget header or the blue plus icon to add it to your blog layout.

After adding page elements, gadgets can be moved up, down or sideways. You can place them wherever you want. Among all the gadgets available, the most used one is " HTML/JavaScript " You can insert any code into this widget be it in HTML or JavaScript.

Whenever you decide to add a new gadget, click the "Add Gadget" link in the area you want to add. For example, if you want to add JavaScript code and have it appear in the sidebar, you should click the " Add a Gadget" link in the "Sidebar" section, select the " HTML/JavaScript " option, and paste the code there.

After adding a new widget, it's a good idea to check your changes by clicking the Preview button before saving anything. So, if something goes wrong, you can just click " Delete " and everything unsaved will go back to its original state. If the position of the page element (gadget) is reset, you must click the Save Settings button to see the changes.