Add WordPress Style ShortCode Tabs And Accordions To Blogger

Adding a Wordpress style tabs and accordions to blogger BlogSpot is a smart way of making your blog look awesome while making good use of the sidebar, footer and also at the post body depending on where you wish to use.

This WordPress style ShortCode Tabbed content and Accordions have been coded to work on every part of your blog. It works on Sidebar, Post body, Header and also at the comment section. It is very easy to add and that's why it's called shortcode.

This plugin is built on CSS, HTML and Jquery. It's fast loading and responsive. Automatically fits into all device screens from a smartphone, tabs up till laptops.

What Are Tabs

Tabs are easy to add plugins which can be used to join 2 or more widgets to gather. It uses a simple algorithm of showing clickable titles at the top. Whenever someone clicks on a title, it displays the content under it.

Accordions

This uses the same -- with tabs. It is a horizontal listing of titles. Each title which ranges from 1 to infinity has a hidden content. Whenever a user clicks on it, it scrolls down or up displays the content.

Similar Post: Properly SEO Optimize Blogger Blogspot

Both Tabs and Accordions which I think started from WordPress blogs can easily be added to BlogSpot blogs. 

View Demo
Live Preview

How To Add Tabs And Accordions To Blogspot

I believe you understand tabs and accordions mean and how to use them. I use an accordion at the sidebar of my blog and it saves a lot of space for me there.

Adding The CSS

I have used CSS to define the style, colours and fonts of this responsive tabs and accordion widget. This makes it very easy to customise. You can change anything to suit your taste.

Go to Blogger.com >> Select Your Blog >> Templates >> Edit HTML.

Using CTRL + F search for "]]></b:skin>"

/*------ Shortcode Accordion -----*/
.sc-accordion > h3 .anchor {
font-family: helvetica;
padding: 3px 7px !important;
color: #70CF0A;
margin: 0 8px 0 0 !important;
}
.sc-accordion > h3 a {
text-decoration: none;
font: normal 16px oswald;
color: black;
border-bottom: 1px solid #eee;
display: block;
padding: 0 0 0.6em 0 !important;
}
.sc-accordion .trigger {
border-bottom: 1px solid #DDD;
padding: 0 0 0.5em 0;
margin: 0 0 0.5em 0;
display: none;
    font-family: arial;
font-size: 14px;
}
.sc-accordion > h3.toggle {
margin: 0 0 0.5em !important;
}
.sc-accordion > h3 a.active {
border: none;
padding: 0;
} 
.sc-accordion > h3 a.active .anchor, .sc-accordion > h3 a.active {
color: #70CF0A;
} 
  .sc-accordion > h3 a:hover {
color: #70CF0A;
}
/*-----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;
} 

Right after  "]]></b:skin>" paste the above CSS code.

Customization Tips

You can edit every part of this CSS to suit your taste from colours to paddings.
Replace #70CF0A (green colour) with any hex colour of your choice.

Adding Blogger ShortCode Script

The script is what determine the functionality of the widget. In this version, we are making use of Jquery which I have optimised to load faster.

Using CTRL + F search for "</body>"

<!-- Optimize Jquery Code -->
<script async='async' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

<!-- Blogger Shortcode Plugin Dynamic JS File -->
    <script async='async' src='http://downloads.mybloggertricks.com/shortcodes.js' type='text/javascript'/>


<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("http://fonts.googleapis.com/css?family=Oswald");loadCSS("http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css");
//]]>
</script>

Paste the above code right above "</body>".

Note: If you already have Jquery, FontAwesome, Oswald codes on your blog, i recommend you remove them because they affect your blog load speed. The above code adds Minified Jquery, Optimised FontAwesome and Oswald css codes which will not affect your blog load speed.

How To Add Tabbed Content And Accordion To Sidebar

After proper placement of the CSS and Jquery Script, follow the below process to easily add the tabs and accordion to the sidebar of your blog.

Tabs On Sidebar

Tabs are made for sidebars and you can also use them inside the post body.

Layouts >> Sidebar >> Add A Widget >> HTML/JavaScript

Paste the below code inside the HTML/JavaScript.

[tab]
[content title="Tab 1"] CONTENT HERE [/content]
[content title="Tab 2"] CONTENT HERE [/content]
[content title="Tab 3"] CONTENT HERE [/content]
[/tab]

Customization Tip

Replace "CONTENT HERE" with the code of any widget you wish to add.
Replace "Tab1, Tab2, Tab3" with the title of your widget.

You can add or reduce the number of tabs easily by adding or removing the code in between

[tab] [/tab]

If I wanted to show two tabs only, then my code will be the one below.

[tab]
[content title="Tab 1"] CONTENT HERE [/content]
[content title="Tab 2"]  CONTENT HERE [/content]
[/tab]

Recommended Post: Related Posts, Subscription Box, Share Button Below Blogger Post

Adding Accordions

Accordions can be used at the sidebars and inside blogger posts. Let's add it to the sidebar and post body respectively.

Layout >> Sidebar >> Add Widget >> HTML/JavaScript

Paste the below code inside the HTML/JavaScript box

[accordion]
[item title="Title Of Tab 1"] INSERT CONTENT HERE [/item]
[item title="Title Of Tab 2"] INSERT CONTENT HERE [/item]
[item title="Title Of Tab 3"] INSERT CONTENT HERE [/item]
[/accordion]

Customization Tips

Replace "CONTENT HERE" with any widget or text of your choice
Replace "Section 1, Section 2, Section 3", with the title of your choice.

You can add or remove much more sections to it. All you need to do is to add the below code in between

[accordion]  [/accordion]

If you want to show 5 sections, then the code will be like the below one.

[accordion]
[item title="Title Of Tab 1"] INSERT CONTENT HERE [/item]
[item title="Title Of Tab 2"] INSERT CONTENT HERE [/item]
[item title="Title Of Tab 3"] INSERT CONTENT HERE [/item]
[item title="Title Of Tab 4"] INSERT CONTENT HERE [/item]
[item title="Title Of Tab 5"] INSERT CONTENT HERE [/item]
[/accordion]

Widget Credits And Appreciation

Big thanks to Mohammed of MyBloggerTricks for creating a  platform (Shortcode) for we other bloggers to work on. This shortcode plugin was designed by Mohammed for bloggers to enjoy the feeling of shortcodes. (Read Post Here).

Similar Widget: MBT Blogger Horizontal Share Button With Counter

More From Author

Adding WordPress style shortcode tabs and accordions widget to blogger blogs is a really nice way to make good use of space on your blog. You can add all your social media widgets into tabbed widget same can be done with post widgets.

BERITA LENGKAP DI HALAMAN BERIKUTNYA

Halaman Berikutnya

Subscribe to receive free email updates: