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 customize. 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 optimized 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 choiceReplace "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