Are you ready to elevate the design and functionality of your Blogger site? In this guide, we'll explore adding multi-tab widgets in the sidebar.
Thanks to Everyone engaging, This post is a request from Daniel who want to implement multi-tab widget on his blog as seen on this site.
A multi-tabbed sidebar is a design element in web development where the sidebar of a website contains multiple tabs, each representing a distinct section or category of content. Each tab typically corresponds to different types of information, functionalities, or widgets.
This feature is mostly seen in Wordpress or other Platforms but Blogger has no Official implementation. This is a custom implementation made possible and crafted with HTML CSS and JavsaScript.
When I wanted to add this feature on this site template, then I had not reach the level of coding from scratch; but thanks to the already built codes I found it was made possible.
Today I will just share the code sources. I never since have the chance or the reason to code a multi tabbed sidebar widget since these sources have made it flawless.
The credit for the functional codes goes to the brilliant minds at My Blogger Tricks (MBT) and My Blogger Lab.
Usefulness of Multi-Tabbed Sidebar:
- Multi-tabbed sidebars are useful for organizing content efficiently. Different tabs can house various categories of information, making it easier for users to locate what they're looking for.
- When dealing with a limited amount of screen space, a multi-tabbed sidebar allows you to present diverse content without cluttering the interface. Users can switch between tabs to access different sets of information.
- Users can quickly navigate to specific sections of interest without having to scroll through a lengthy sidebar. This improves the overall user experience by providing a more streamlined and organized interface.
- Each tab can host specific widgets or functionalities. For instance, a blog might have tabs for recent posts, popular posts, categories, and tags. This compartmentalization enhances the sidebar's functionality.
- Tabs can be tailored to suit the content structure and design preferences of the website.
- Multi-tabbed sidebars are particularly beneficial for websites with diverse content types. Whether it's articles, product categories, or recent activities, different tabs enable the showcasing of varied information.
- By presenting information in a categorized manner, multi-tabbed sidebars encourage users to explore different sections of the website. This can lead to increased engagement and a longer time spent on the site.
In summary, a multi-tabbed sidebar is a versatile design choice that facilitates organization, enhances user experience, and allows for the efficient presentation of diverse content on a website. Its usefulness extends across various types of websites, from blogs to e-commerce platforms.
Various Multi tabbed sidebar widget Implementation
Ok as I said this post is just to share sources; Note this to implement this will require you to edit your template so remember to back it up.
You have to visit the following posts on My Blogger Tricks and My Blogger Lab:
And because I am now always reducing dependence on jQuery. For any of these source code that is coded in jQuery, I have converted it pure JavaScript and you can just copy and replace the jQuery code with the provided JavaScript in this post.
This is why I prefer pure JavaScript code to jQuery. This is personal.
You can always leave code in jQuery as long as your site relies on it and has the library on your template.
Make sure your template have something like this '<script src="https://cdnhost url/jQuery version number.js" /> '
Type One: Used on this Site
This snippet is fully widgetized. This means you can add archives, labels, author profile or other blogger official widgets to it from blogger layout
<!-- Tab Widget [start] -->
<div class='tabviewsection'>
<script type='text/javascript'>
document.addEventListener('DOMContentLoaded', function () {
var tabs = document.querySelectorAll('.tabs-widget-widget-themater_tabs-1432447472-id li a');
var tabContents = document.querySelectorAll('.tabs-widget-content-widget-themater_tabs-1432447472-id');
tabContents.forEach(function (content) {
content.style.display = 'none';
});
tabs[0].classList.add('tabs-widget-current');
tabContents[0].style.display = 'block';
tabs.forEach(function (tab) {
tab.addEventListener('click', function (event) {
event.preventDefault();
tabs.forEach(function (t) {
t.classList.remove('tabs-widget-current');
});
this.classList.add('tabs-widget-current');
var activeTab = document.querySelector(this.getAttribute('href'));
tabContents.forEach(function (content) {
content.style.display = 'none';
});
activeTab.style.display = 'block';
});
});
});
</script>
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li class='about_tab'><a href='#widget-themater_tabs-1432447472-id1'>About</a></li>
<li class='tags_tab'><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li>
<li class='laster'><a href='#widget-themater_tabs-1432447472-id3'>Popular</a></li>
</ul>
<!-- Tab Widget 1 -->
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>
</div>
<!-- Tab Widget 2 -->
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>
</div>
<!-- Tab Widget 3 -->
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>
</div>
</div>
<!-- Tab Widget [end] -->
This JavaScript code achieves the same functionality as the jQuery code provided in the original Code.
It uses the native DOM methods and event listeners to handle the tab switching behavior.
Replace and paste below <div id='sidebar-wrapper'> or if your template do not have that, paste below '<aside>
Type Two: Advance Wordpress Like Muti-Tab Structure
This is Made by MyBloggerTricks and it is fully widgetized. It is modified based on the styling of Lawny Designs and script by Barelyfitz.
This script is coded in Javascript
Read How to Implement this on your site:
Add WordPress Style Menu Tabs Widget To Blogger!
Type Three: Wordpress Style
This style was Crafted by The MyBloggerTricks Team. This is also built using JQuery. It is a Simple three tab functional layout.
Here is the Javacript equivalent to the Original JQuery build.
<div class='MBT-tabviewsection'>
<script type='text/javascript'>
document.addEventListener('DOMContentLoaded', function () {
var tabs = document.querySelectorAll('.MBT-tabs-widget-MBT-id li a');
var tabContents = document.querySelectorAll('.MBT-tabs-content-widget-MBT-id');
tabContents.forEach(function (content) {
content.style.display = 'none';
});
tabs[0].classList.add('MBT-tabs-current');
tabContents[0].style.display = 'block';
tabs.forEach(function (tab) {
tab.addEventListener('click', function (event) {
event.preventDefault();
tabs.forEach(function (t) {
t.classList.remove('MBT-tabs-current');
});
this.classList.add('MBT-tabs-current');
var activeTab = document.querySelector(this.getAttribute('href'));
tabContents.forEach(function (content) {
content.style.display = 'none';
});
activeTab.style.display = 'block';
});
});
});
</script>
<ul class='MBT-tabs MBT-tabs-widget-MBT-id'>
<li><a href='#widget-MBT-id1'>Subscribe</a></li>
<li><a href='#widget-MBT-id2'>Latest Tricks</a></li>
<li><a href='#widget-MBT-id3'>Search</a></li>
</ul>
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>
</div>
<div style='clear:both;'/>
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>
</div>
<div style='clear:both;'/>
<div class='MBT-tabs-content MBT-tabs-content-widget-MBT-id' id='widget-MBT-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>
</div>
</div>
<div style='clear:both;'/>
Read How to Implement this on your site:
Add WordPress Style Menu Tabs Widget To Blogger!
Type Four: Same Wordpress Simple Structure with Different Design
This is a MBT redesign of the wordpress styled multi-tabbed widget.
Read How to Implement this on your site:
New Multi Tabbed Widget For Blogger - Editable Tabs!
This is the Javascript substitute for the implemented jquery
<div class='tabviewsection'>
<script type='text/javascript'>
document.addEventListener('DOMContentLoaded', function () {
var tabs = document.querySelectorAll('.tabs-widget-widget-themater_tabs-1432447472-id li a');
var tabContents = document.querySelectorAll('.tabs-widget-content-widget-themater_tabs-1432447472-id');
tabContents.forEach(function (content) {
content.style.display = 'none';
});
tabs[0].classList.add('tabs-widget-current');
tabContents[0].style.display = 'block';
tabs.forEach(function (tab) {
tab.addEventListener('click', function (event) {
event.preventDefault();
tabs.forEach(function (t) {
t.classList.remove('tabs-widget-current');
});
this.classList.add('tabs-widget-current');
var activeTab = document.querySelector(this.getAttribute('href'));
tabContents.forEach(function (content) {
content.style.display = 'none';
});
activeTab.style.display = 'block';
});
});
});
</script>
<ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
<li><a href='#widget-themater_tabs-1432447472-id1'>About</a></li>
<li><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li>
<li><a href='#widget-themater_tabs-1432447472-id3'>Archives</a></li>
</ul>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'>
</b:section>
</div>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'>
</b:section>
</div>
<div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'>
</b:section>
</div>
</div>
<div style='height:5px;clear:both;'/>
That's It
Feel free to modify based on your specific design and preferences. If you have any specific Issue you'd like to highlight or if there's anything more you'd like to implement, let me know!
Happy blogging!
