How To Add A Tabbed Navigation Widget to Blogger
Tab views are elements that allow us to group multiple devices in a single container and can be sorted by tabs.
Its main function is to save space on the blog to avoid devices that are distributed in the same section so that you can group multiple devices into one. There are several ways to create tab tabs, some requiring jQuery, others MooTools, or another font.
To add this puzzle to your blog, please follow these steps:
Step 1. From the Blogger control screen , go to Templates and click the Edit HTML button
Step 2. Expand the template style by clicking on the arrow ...
Step 3. Search with CTRL + F for the following labels:
Step 4. Just add the following code above:
Step 5. Search Mark and higher, paste this font:
Step 6. Finally, look at this row:
Its main function is to save space on the blog to avoid devices that are distributed in the same section so that you can group multiple devices into one. There are several ways to create tab tabs, some requiring jQuery, others MooTools, or another font.
Step 1. From the Blogger control screen , go to Templates and click the Edit HTML button
Step 2. Expand the template style by clicking on the arrow
Step 3. Search with CTRL + F for the following labels:
]]>
Step 4. Just add the following code above:
/ * Blogger Tabs Views
-------------------------------------------------- --- ---------- * /
.tabviewcont
Margin: 15 px 0;
Filling: 0;
Both clear;
or
.tabviewnav
Margin: 0 0 0 14px;
Filling: 3px 0; / * If you use a Blogger template, 15 px instead of 0 * /
Font size: 12 px; / * Font size of text inside tabs * /
Letter weight: bold;
or
.tabviewnav band
List style: None;
Margin: 0;
Watch: online;
or
.tabviewnav band a
Filling: 3px 6px;
Right margin: 1 px;
Wallpaper: # F6F6F6; / * Background color for maps * /
Edge radius: 5px 5px 0 0;
-moz-radius-rand: 5px 5px 0 0;
-Kitu web-radius-grens: 5 px 5px 0 0;
Text decoration: none;
Color: # 222222;
or
.tabviewnav li a: rri pezull.
Color: # 222222;
Wallpaper: #EBEBEB; / * Color background file * /
Text decoration: none;
or
.tabviewnav li.tabviewactive a,
.tabviewnav li.tabviewactive a: rri pezull
Wallpaper: #EBEBEB; / * Active file background color * /
Color: # 222222;
or
.tabviewcont .tabviewtab
Filling: 5px;
Limit: 1px solid #EEEEEE; / * Container boundary * /
Wallpaper: #fff; / * Background color tools * /
or
.tabviewcont .tabviewtab h2,
.tabviewcont .tabviewtabhide
Screen: None;
or
.tabviewtab .widget content ul
List style: None;
Margin: 0 0 10px 0;
Filling: 0;
or
.tabviewtab .widget content ato.
Bottom line: 1px solied #ccc;
Margin: 0 5px;
Filling: 2px 0 5px 0;
or
Step 5. Search Mark and higher, paste this font:
Step 6. Finally, look at this row:
Or, if you use an older Blogger template, check out this rule:A row like this:
Step 7. Paste one of these two lines, this code:
Step 8 Save your changes, go to the layout and there you will see new areas to add devices.
To add tools to the appropriate tab, click Add a tool or drag an existing tool into that section.
If you want to add more cards, add before the last
Note that each row you add must have a different ID, such as Tab5 , Tab6 , etc.
You can add more cards, just repeat the last step and do not forget to rename the IDs.
Remember that if the sidebar is too narrow, you should not have too many tabs or tab titles that are too long.
Also note that this gadget does not speed up the loading of blogs, it may just take a while for the toolkits to be grouped into one, even depending on the blog loading the tab view.
