jQuery "Tabs Shortcode" For Blogger!

We have shared several Multi Tabs widget in the past but today we are sharing the shortcode for creating responsive tabs inside blogger posts, sidebars and comments. This new method will help you add shortcodes anywhere on your blog with a single line of code. You can add multiple Tabs widgets on a single Page with as many Tabbed panels as you want. Add anything inside the panels to organize content on your blog layout and make it look more professional. The tabs supports nested shortcodes, so you can also add the jQuery accordion shortcode inside it to provide the best possible user interface to your BlogSpot readers.

 

DEMO

How Shortcode Tabs UI works?

A Tab is a graphical control element that allows multiple panels to be contained within a single window, where switching between the documents inside the panels is done using the tabs as a navigation. All shortcodes are responsive and fluid, they will auto adjust to Mobile devices screen size.

You can also add FontAwesome icons next to tab headlines to make it more meaningful. You can also nest other shortcode objects inside the tabbed panel. The screenshot below shows a Soundcloud shortcode nested inside an accordion and the accordion itself is nested inside the Tabs Shortcode which it self is added inside a sidebar HTML/JavaScript widget.

All this done with few sentences and not a code! Because a shortcode itself it not a code but a text which is processed as HTML. You can choose to add icons to tabs or not.

You can also add content inside tabs and embed it inside blogger threaded comments or classic comment form!

Don't believe your eyes? Believe it! =)

Install Blogger Shortcode Plugin

First and foremost you need to install the Shortcode Plugin by following 7 easy steps shared on the tutorial link below

• Read: Install Blogger Shortcode Plugin

Add Tabs Shortcode To Blogger

1 Go To Blogger > Template > Backup your template 

2 Click Edit HTML

3 Search ]]></b:skin>

4 Paste the following CSS Styles just above it

/*-----Shortcode Tabs--------*/
.sc-tab ul.tabset.tabs li a.active{
border-bottom: 1px solid #70CF0A;
border-top: 3px solid #70CF0A;
padding: 8px 10px 10px 10px;
background: #70CF0A;
color: #fff;
border-left: 1px solid #70CF0A;
border-right: 1px solid #70CF0A;
}
.sc-tab ul.tabset.tabs li a:hover {
background: #70CF0A;
color: white;
border-color: #70CF0A;
}

.sc-tab ul.tabset.tabs {
margin: 0;
padding: 0;
list-style: none;
}
.sc-tab ul.tabset.tabs li {
float: left;
margin: 0px 4px 0px 0px;
border-right: 1px solid #EEE;
}
.sc-tab ul.tabset.tabs li a {
color: #666;
text-decoration: none;
    font-family: oswald, arial;font-size: 14px;
}
.sc-tab .tab-box {
clear: both;
position: relative;
z-index: 50;
top: 3px;
}
.sc-tab .tab_content {
display: none;
border: 1px solid #EEE;
padding: 1em;
border-bottom: 3px solid #70CF0A;
box-shadow: 2px 4px 6px #EEE;
font-family: arial;
font-size: 14px;
}
.sc-tab ul.tabset.tabs li a {
padding: 10px;
display: block;
border: 1px solid #EEE;
background: #fbfbfb;
position: relative;
z-index: 100;
}

 

• To change its theme color replace #70CF0A with your preferred hexadecimal color. Use our Color Generator tool
• To change The font type for tabs title replace oswald with your font name

6 Save your template and you are all done!

How to Create Responsive Tabs?

Creating Tabs using its shortcode is extremely easy. It follows almost a similar syntax as that of Accordion shortcode. You just need to paste the following shortcode where you want the Responsive Tabs to display:

Consider this code as TexT which you can insert anywhere like inside your blog posts, static pages, widgets and comments.

[tab]

[content title="Tab 1"] INSERT CONTENT HERE [/content]

[content title="Tab 2"] INSERT CONTENT HERE [/content]

[content title="Tab 3"] INSERT CONTENT HERE [/content]

[/tab]

Output:

• The above shortcode will create three tabs where [content marks the start of a new panel
• You can insert any HTML, text or even a new shortcode inside the content area represented by  INSERT CONTENT HERE
• Title of tab is changed by replacing the text Tab 1,2,3 etc.
• To create a new tab and panel you just need to add the following sub-shortcode above [/tab]

[content title="Title Of Tab"]INSERT CONTENT HERE[/content]

Add Icons Next To Tabs

If you wish to add FontAwesome icons next to the tab title then you just need to add the attribute icon=" " as shown below

[tab]

[content title="Facebook" icon="fa-facebook"] INSERT CONTENT HERE [/content]

[content title="Google+" icon="fa-google-plus"] INSERT CONTENT HERE [/content]

[content title="Twitter" icon="fa-twitter"] INSERT CONTENT HERE [/content]

[/tab]

Output

You just need to insert the Fontawesome icon name inside the icon attribute in this format

icon="fa-iconName"

For example to insert a Tag icon we will format the attribute as

icon="fa-tag"

That simple! Browse FontAwesome Icons to pick icon of your choice

Need Help?

In coming hours we will release more fresh shortcode tutorials. Make sure you stay updated by following all latest tutorials by subscribing to our free email updates. Let me know if you needed any help or assistance. You can now also suggest which Shortcode would you like us to create.

Stay healthy and take care of your loved ones. Peace and blessings buddies =>

SHARES

Share

Pin it

Tweet

Share

Share

Print

Buffer

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

Mohammad 4/05/2015