jQuery "Tabs Shortcode" For Blogger!

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.

 

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.

accordion nested inside tabs

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.

tab without icon

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

tabs inserted inside blog comments

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

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:

tabs without icons

  • 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

tabs with icons

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 =>

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 »

28 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. awesome i was waiting for this thank you sooooooooooooooooo much brother
    let me do in post after that i will tell you because right now light is going to go so tonight i will work on it

    ReplyDelete
    Replies
    1. I am so glad it worked for you tariq. Congratz for implementing it :)

      Delete
  2. awesome .. Thanks for the sharing brother

    ReplyDelete
  3. it is working i test on my testing blog thank you

    ReplyDelete
  4. Add embed video youtube master :D

    ReplyDelete
    Replies
    1. YouTube, Vimeo, Dailymotion and all other video portals are in our list dear beben! ;)

      Delete
  5. I need help in placing the tabshort code in blogger just below the main menu
    can you help where to edit it on the template

    have a look at the blog http://newshortert.blogspot.in/

    ReplyDelete
  6. bro can u tell me how to make tab like for video inside post like side by side tab youtune then click on next tab for other video thanks im waiting for ur reply

    ReplyDelete
  7. Pl update me what to do it will show as the same text i pasted

    ReplyDelete
  8. How Did you make collapse expand under the third tab please tell me

    ReplyDelete
  9. How can I stop anything plays in tab 1 when I switch to tab 2?
    Such as Video is playing.
    Thanks so much.

    ReplyDelete
  10. hello Bro
    if i want these tabs in my post??
    please reply as soon as possible ...
    please hurry...

    ReplyDelete
  11. Hello. Tabs are working, but they all have 'inactive' look. What should I do? Thanks.

    ReplyDelete
  12. Hello friend, I would like my help with something, well I followed this tutorial and achieve the end goal and it works fine, but it gives me a problem which is next, I want to add my google adsense ads but when you add them to post all the tabs are removed , I wonder what I do to show me the tabs and also ads from already thank you very much

    ReplyDelete
  13. not working on my blog, doesn't this work if i'm using blgtemplates other than the one provided by blogger

    ReplyDelete
  14. This is gold man! And you are giving it away for free...what is the catch ?!
    For my blog this is an game-changer! I love you.
    I don't have any money to give you. All i can do is white-list you in my addblocker. You have earned your adds my friend!

    ReplyDelete
  15. Bro its not working on my blog,...I followed all the steps but its not working...

    ReplyDelete
  16. Its working. Ignore my previous comment! You guys are the best!

    ReplyDelete
  17. i can't seem to put content tabs inside nested [item] tabs. why?

    ReplyDelete
  18. Hi, i have a question: how to add tabbed content in blogger posts and pages?

    ReplyDelete
  19. It is not working for me. I am trying to put this in my post but code is displaying instead of tabs. i have done everything as instructed please help me.

    ReplyDelete
  20. not isntalling on my blog why?

    ReplyDelete
  21. It's not working with me too, Only the shortcode appear instead of tabs

    ReplyDelete
  22. how to remove dotted left side of tab?

    ReplyDelete