How To Add A Tabbed Navigation Widget to Blogger
Tabs are elements that allow you to group different gadgets into a container and can be selected using tabs.
Its main function is to save space on the blog by avoiding multiple gadgets in the same category so that more gadgets can be grouped together. There are several ways to create tables, some require jQuery, others MooTools or other scripts.
To add this widget to your blog, do the following:
Step 1: In Blogger dashboard, go to Templates section and click on Edit HTML button.
Step 2: Expand the template style by clicking the arrow next to it ...
Step 3. Use CTRL + F to find these tags:
Step 4. Above that, add the following code:
Step 5. Find it Tag and paste this script in the top right:
Step 6. Finally, look for this line:
Its main function is to save space on the blog by avoiding multiple gadgets in the same category so that more gadgets can be grouped together. There are several ways to create tables, some require jQuery, others MooTools or other scripts.
Step 1: In Blogger dashboard, go to Templates section and click on Edit HTML button.
Step 2: Expand the template style by clicking the arrow next to it
Step 3. Use CTRL + F to find these tags:
]]>
Step 4. Above that, add the following code:
/* tab for blogger
-------------------------------------------------- ------------ */
.tabviewcont{
margin: 15px 0;
detection: 0;
Both are obvious;
}
.tabviewnav {
margin: 0 0 0 14px;
padding: 3px 0; /* If you're using a Blogger template, change from 0 to 15px */
font-size: 12px; /* font size for the text inside the card*/
font-weight: bold;
}
.tabviewnav li {
List style: no;
margin: 0;
display: default;
}
.tabviewnav li {
padding: 3px by 6px;
margin-right: 1px;
background:#F6F6F6; /* tab background color */
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
Text drawing: No;
color:#222222;
}
.tabviewnav li a:pass {
color:#222222;
Background: #EBEBEB; /* tab background color on pass */
Text drawing: No;
}
.tabviewnav li.tabviewactive,
.tabviewnav li.tabviewactive a:pass {
Background: #EBEBEB; /* background color of active tab */
color:#222222;
}
.tabviewcont .tabviewtab {
padding: 5px;
border: 1px solid #EEEEEE; /* border around container */
background:#fff; /* gadget background color */
}
.tabviewcont .tabviewtab h2,
.tabviewcont .tabviewtabhide {
Display: No;
}
.tabviewtab .widget-content st {
List style: no;
margin: 0 0 10px 0;
detection: 0;
}
.tabviewtab .widget-content li {
border-bottom: 1px solid #ccc;
margin: 0 5px;
padding: 2px 0 5px 0;
}
Step 5. Find it Tag and paste this script in the top right:
Step 6. Finally, look for this line:
Or, if you're using an older Blogger template, check these lines:Lines like this:
Step 7 Paste below one of the following two lines of code:
Step 8 Save your changes and go to the Design section where you will see a new area to add gadgets.
Simply click "Add a Gadget" to add a gadget to the relevant tab, or drag an existing gadget to this section.
If you want to add more tabs, add them before you finish
Note that each row you add must have a different ID, such as Tab5 , Tab6 , etc.
You can add more tabs, repeat the last step and don't forget to rename the id.
Remember that if your sidebar is too narrow, you shouldn't have too many tabs or too long tab titles
Also note that these gadgets do not speed up the loading of the blog, they are only used to group the gadgets, since depending on the blog the tabs may take some time to load.
Post a Comment for "How To Add A Tabbed Navigation Widget to Blogger"