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.
blogger Tab and accodion shortcode
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.

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

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

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.

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

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

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

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

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

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.

Related Articles

  • 5 Nightmares Of Switching To Custom Domain Name In BlogSpot
  • Blogger Responsive Random Post Slider
  • Good News – We are Re-Branding
  • Record And Capture Screen On Your Laptop
  • Google URL shortener (goo.gl) Google to Shut Down URL Shortener – 5 Best Goo.gl Alternatives
  • #10 Meta Description Tips For Better Search/Social CTR & SEO
  • Leave a Reply

    0 Shares
    Share
    +1
    Tweet
    Pin
    Share
    Stumble