How to Create a Tabbed Sidebar Widget in Blogger

How to Create a Tabbed Sidebar Widget in Blogger


From your blog, Go to the template page and click on the Edit HTML button, in template code, search for

]]></b:skin> Tag.

Just above it, paste this below  CSS code:


.tabviewcont{
margin:15px 0;
padding:0;
clear:both;
}

.tabviewnav {
margin: 0 0 0 14px;
padding:3px 0; /* If you are using a Blogger Template change 0 with 15px */
font-size:12px; /* Font size of text inside tabs */
font-weight:bold;
}
.tabviewnav li {
list-style:none;
margin:0;
display: inline;
}
.tabviewnav li a {
padding:3px 6px;
margin-right:1px;
background:#F6F6F6; /* The background color of the tabs */
border-radius:5px 5px 0 0;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
text-decoration:none;
color:#222222;
}
.tabviewnav li a:hover {
color:#222222;
background:#EBEBEB; /* Background color of the tab on mouseover */
text-decoration:none;
}
.tabviewnav li.tabviewactive a,
.tabviewnav li.tabviewactive a:hover {
background:#EBEBEB; /* Background color of the active tab */
color:#222222;
}
.tabviewcont .tabviewtab {
padding:5px;
border:1px solid #EEEEEE; /* Border around the container */
background:#fff; /* The background color of the gadget */
}
.tabviewcont .tabviewtab h2,
.tabviewcont .tabviewtabhide {
display:none;
}
.tabviewtab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabviewtab .widget-content li {
border-bottom:1px solid #ccc;
margin:0 5px;
padding:2px 0 5px 0;
}


Now ,search for </head> tag and just above it paste following script code:



<script type='text/javascript'>
// Tabview for grouping gadgets

//<![CDATA[
document.write('<style type="text/css">.tabview{display:none;}<\/style>');function tabviewObj(argsObj){var arg;this.div=null;this.classMain="tabview";this.classMainLive="tabviewcont";this.classTab="tabviewtab";this.classTabDefault="tabviewtabdefault";this.classNav="tabviewnav";this.classTabHide="tabviewtabhide";this.classNavActive="tabviewactive";this.titleElements=['h2','h3','h4','h5','h6'];this.titleElementsStripHTML=true;this.removeTitle=true;this.addLinkId=false;this.linkIdFormat='<tabviewid>nav<tabnumberone>';for(arg in argsObj){this[arg]=argsObj[arg]}this.REclassMain=new RegExp('\\b'+this.classMain+'\\b','gi');this.REclassMainLive=new RegExp('\\b'+this.classMainLive+'\\b','gi');this.REclassTab=new RegExp('\\b'+this.classTab+'\\b','gi');this.REclassTabDefault=new RegExp('\\b'+this.classTabDefault+'\\b','gi');this.REclassTabHide=new RegExp('\\b'+this.classTabHide+'\\b','gi');this.tabs=new Array();if(this.div){this.init(this.div);this.div=null}}tabviewObj.prototype.init=function(e){var childNodes,i,i2,t,defaultTab=0,DOM_ul,DOM_li,DOM_a,aId,headingElement;if(!document.getElementsByTagName){return false}if(e.id){this.id=e.id}this.tabs.length=0;childNodes=e.childNodes;for(i=0;i<childNodes.length;i++){if(childNodes[i].className&&childNodes[i].className.match(this.REclassTab)){t=new Object();t.div=childNodes[i];this.tabs[this.tabs.length]=t;if(childNodes[i].className.match(this.REclassTabDefault)){defaultTab=this.tabs.length-1}}}DOM_ul=document.createElement("ul");DOM_ul.className=this.classNav;for(i=0;i<this.tabs.length;i++){t=this.tabs[i];t.headingText=t.div.title;if(this.removeTitle){t.div.title=''}if(!t.headingText){for(i2=0;i2<this.titleElements.length;i2++){headingElement=t.div.getElementsByTagName(this.titleElements[i2])[0];if(headingElement){t.headingText=headingElement.innerHTML;if(this.titleElementsStripHTML){t.headingText.replace(/<br>/gi," ");t.headingText=t.headingText.replace(/<[^>]+>/g,"")}break}}}if(!t.headingText){t.headingText=i+1}DOM_li=document.createElement("li");t.li=DOM_li;DOM_a=document.createElement("a");DOM_a.appendChild(document.createTextNode(t.headingText));DOM_a.href="javascript:void(null);";DOM_a.title=t.headingText;DOM_a.onclick=this.navClick;DOM_a.tabview=this;DOM_a.tabviewIndex=i;if(this.addLinkId&&this.linkIdFormat){aId=this.linkIdFormat;aId=aId.replace(/<tabviewid>/gi,this.id);aId=aId.replace(/<tabnumberzero>/gi,i);aId=aId.replace(/<tabnumberone>/gi,i+1);aId=aId.replace(/<tabtitle>/gi,t.headingText.replace(/[^a-zA-Z0-9\-]/gi,''));DOM_a.id=aId}DOM_li.appendChild(DOM_a);DOM_ul.appendChild(DOM_li)}e.insertBefore(DOM_ul,e.firstChild);e.className=e.className.replace(this.REclassMain,this.classMainLive);this.tabShow(defaultTab);if(typeof this.onLoad=='function'){this.onLoad({tabview:this})}return this};tabviewObj.prototype.navClick=function(event){var rVal,a,self,tabviewIndex,onClickArgs;a=this;if(!a.tabview){return false}self=a.tabview;tabviewIndex=a.tabviewIndex;a.blur();if(typeof self.onClick=='function'){onClickArgs={'tabview':self,'index':tabviewIndex,'event':event};if(!event){onClickArgs.event=window.event}rVal=self.onClick(onClickArgs);if(rVal===false){return false}}self.tabShow(tabviewIndex);return false};tabviewObj.prototype.tabHideAll=function(){var i;for(i=0;i<this.tabs.length;i++){this.tabHide(i)}};tabviewObj.prototype.tabHide=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}div=this.tabs[tabviewIndex].div;if(!div.className.match(this.REclassTabHide)){div.className+=' '+this.classTabHide}this.navClearActive(tabviewIndex);return this};tabviewObj.prototype.tabShow=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}this.tabHideAll();div=this.tabs[tabviewIndex].div;div.className=div.className.replace(this.REclassTabHide,'');this.navSetActive(tabviewIndex);if(typeof this.onTabDisplay=='function'){this.onTabDisplay({'tabview':this,'index':tabviewIndex})}return this};tabviewObj.prototype.navSetActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className=this.classNavActive;return this};tabviewObj.prototype.navClearActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className='';return this};function tabviewAutomatic(tabviewArgs){var tempObj,divs,i;if(!tabviewArgs){tabviewArgs={}}tempObj=new tabviewObj(tabviewArgs);divs=document.getElementsByTagName("div");for(i=0;i<divs.length;i++){if(divs[i].className&&divs[i].className.match(tempObj.REclassMain)){tabviewArgs.div=divs[i];divs[i].tabview=new tabviewObj(tabviewArgs)}}return this}function tabviewAutomaticOnLoad(tabviewArgs){var oldOnLoad;if(!tabviewArgs){tabviewArgs={}}oldOnLoad=window.onload;if(typeof window.onload!='function'){window.onload=function(){tabviewAutomatic(tabviewArgs)}}else{window.onload=function(){oldOnLoad();tabviewAutomatic(tabviewArgs)}}}if(typeof tabviewOptions=='undefined'){tabviewAutomaticOnLoad()}else{if(!tabviewOptions['manualStartup']){tabviewAutomaticOnLoad(tabviewOptions)}}
//]]>
</script>

Now search for below code whichever  you have from both of them,


<div class='column-right-inner'> or <div id='sidebar-wrapper'>

after finding the above line, below one of them paste the following code


<div class='tabview'>
<b:section class='tabviewtab' id='Tab1' maxwidgets='1'/>
<b:section class='tabviewtab' id='Tab2' maxwidgets='1'/>
<b:section class='tabviewtab' id='Tab3' maxwidgets='1'/>
</div>

Finally, save your template and check it.

Conclusion

If you know another way to Create a Tabbed Sidebar Widget in Blogger, please comment below, or share this article.



Comments

Post a Comment

Most Useful Articles

How to Make Blogger BlogSpot Layout As Responsive Template

Image
How to Make Blogger BlogSpot Layout As Responsive Template Are you working on Blogger BlogSpot?As we all know, BlogSpot Layout is not Responsive but still using Blogger, Here is a solution to make a Blog mobile Friendly Template and responsive layout. There are two ways to make your Blogspot Responsive, so simply follow these steps to customize Your Blogger Blogspot Template. As well, you can use  recently Blogspot Introduced New Responsive themes or mobile-friendly templates to make your blog responsive. 1.First Way to make BlogSpot as Mobile Friendly Template Go to the Blogger Dashboard and Select the Custom View Button, then  Choose Mobile Theme . Now, go to the Theme and search for the  widget which you want to display in Mobile View . Copy and paste this code into your blog HTML template- <b:widget id='PopularPosts1' locked='false' mobile='yes' title='Popular Posts' type='PopularPosts'>   Now Save your Theme a
Read more

How to Show Blogger Widgets in Mobile View with Simple Steps

Image
How to Show Blogger Widgets in Mobile View with Simple Steps Since I don't have any guide to create a blogger when I saw my blog in mobile view, I shocked, some important widgets are missing, I asked my self why widgets are not showing in the mobile template. Then I bit confused. As we all know, today's most content search visitors are from Mobile devices than common laptops and desktops. So showing widgets on mobile templates must. I felt very bad for now seeing my blogger widgets in mobile view. To increase the blog traffic from mobile view, we have to show them at least popular posts widget, about us widget and Facebook like the page. These are the most important things for every blogger to satisfy the blog visitors and to increase visitor interest. Finally, I got a solution that is useful. After knowing it, laughing myself because it is very simple to show blogger widgets in the mobile template with simple steps. As I have learned this trick, to help new blogg
Read more

How to Create Internal Links within The Post in Blogger

Image
How to Create Internal Links within the post in Blogger To reduce the difficulty when users reading very lengthy posts, it is better to create internal links within the post  to jump to the matter which is interested in him. So thus we can decrease user efforts by creating bookmarks and when we are clicking on it, directly goes to its header. Thus anchor links are useful for viewers to read long post interestingly. Automatic internal links in blogger For achieving an  On-Page SEO strategy, we have to create automatic internal links in blogger. Here, you have to understand what is internal linking?. Using the  link strategy , you can increase on- SEO optimization. Visitors can get more deep information from visited to navigate through other related content. It increases your site and posts SEO performance. You can provide in-depth content for blog readers.  Two types are: Internal Internal linking is we are linking our own blog referred posts with anchored texts within the p
Read more

How to Get Back A Hacked Facebook Account and Secure within 10 Steps

Image
How to Get Back A Hacked Facebook Account and Secure within 10 Steps One Day, My friend Asked Me that His account is hacked and its password email id setting also has been changed. On that question, I have started writing this Post to get back Hacked Facebook Account and Secure with the following Steps. How to Increase Organic Reach on Facebook How to Get More Likes On Facebook Fan Page How Many Ways Can I Earn Money from Facebook How to Set Up Facebook Business Manager : FBM Tutorial How to Share Your WhatsApp Status Updates to Facebook Stories and Other Apps  Some of my friends asked me, can we recover my  FB Account without email or can we get back my id  through friends' Facebook Id or Gmail, is it possible to use an old password? Another one posted to me that His email also had been changed, he asked? what can I do? , and  Password to be changed. My neighbor asked, his Facebook account Locked and How to delete it? For all these questions, I found this solut
Read more

How to Display Blogger Posts in Grid View with Thumbnails

Image
How to Display Blogger Posts in Grid View with Thumbnails In a Blogger, as a default, all posts are showing top to bottom in the lengthy bar But here I am sharing Grid view with thumbnails for the blogger posts on the home page and related posts in the short view which reduces users difficulty to show all posts in the grid view which user can select his required post immediately and he will put more interest on the additional posts if he needs. Grid view attracts more visitors and increases the views of our blogger posts. Thumb nails also play a very important role in what is the post in the one view. So you might have known list view templates in the grid style. In my opinion, you have to reduce the complex long scrolling problems for page visitors to choose an interesting article. In the below image, you can see the grid view with thumbnail posts. Start Adding Grid view to Blogger Posts Now, Go to the Blogger Dashboard ->Click on Theme Button->choose the EDIT H
Read more

Blogger Login Google Account: How to Create a New Google Account(Gmail)

Image
Blogger Login Google Account Creating a free Blogger Blogspot, we need Login Google Account for that we have to create Gmail Account initially, next create Blogger. Keeping the beginner bloggers requirement in my mind, I am sharing this article. Blogger Blogspot whether you are a skilled person or unskilled, you can create a unique and beautiful blog. It’s easy and free. Choose the Blog design theme according to your requirement. Now free responsive and static templates are available from blogger Blogspot. You can get a free domain and if you have good traffic for your Blogspot they will pay you through Google Adsense for your hard work. Google AdSense can automatically display relevant targeted ads on your blog.  You can find the most searched keywords to reach more audiences. You can know more about your blog traffic, where they are coming from, what they are searching for about your posts through Google Analytics . You can use a blogger for posting your fa
Read more