There have been many question about adding content into easily switchable tabs without any page load, blogger users normally don't find using JQuery and most of them never headed to the Jquery plugin site, the instruction are complicated there and it's not easily understandable. But i will give easy and clear instruction to install this Tabs JQuery plugin on Blogger.
Update 25th March 2017 - Due to some issues in hosting the script files the plugin might not be working properly for everyone who implemented this. I would request you to come back here in a day or two and re-add the script codes with update URLS (you do not have to re-do the tabs you created in your post.)
Before we start this tutorial, thanks to sunsean.com for this JQuery plugin called idTabs, you are going to install that JQuery plugin on your blog.
Every blogger wants to add dynamic function but they are unable to do it, because there are not much people who writes about installing JQuery plugins on Blogger Blogs. If you want to display your post contents in a new way then this plugin is what you need, this plugin is useful for video bloggers having lots of videos in one post , if they use this plugin they can reduce space used for the videos.
If you aren't sure this is what you are looking for then please see the demonstration of the code.
Demo
Believe me this tutorial is very easy but yet some people with less experience with codes will find this tutorial difficult and to make this easy for you, i have divided the steps in parts, read further for the instructions.
To add it go to Blogger Dashboard -> Template -> Edit HTML -> Proceed -> Use CTRL+F to find </head> in the template. Paste the following code just above </head>
Here's the HTML we need
And that sometimes stops the plugin from working. To prevent this put the current Post URL before the target tag. Now we have got Custom permalink, so you can see what's the URL even before publishing the post. For example see this
There's no special instruction for CSS, you apply your own CSS design on the tabs to make it look good with your blog or if you don't have any idea about the editing the CSS then contact me for help at depy45631@gmail.com
Update 25th March 2017 - Due to some issues in hosting the script files the plugin might not be working properly for everyone who implemented this. I would request you to come back here in a day or two and re-add the script codes with update URLS (you do not have to re-do the tabs you created in your post.)
Before we start this tutorial, thanks to sunsean.com for this JQuery plugin called idTabs, you are going to install that JQuery plugin on your blog.
Every blogger wants to add dynamic function but they are unable to do it, because there are not much people who writes about installing JQuery plugins on Blogger Blogs. If you want to display your post contents in a new way then this plugin is what you need, this plugin is useful for video bloggers having lots of videos in one post , if they use this plugin they can reduce space used for the videos.
If you aren't sure this is what you are looking for then please see the demonstration of the code.
Demo
Believe me this tutorial is very easy but yet some people with less experience with codes will find this tutorial difficult and to make this easy for you, i have divided the steps in parts, read further for the instructions.
Follow these steps
Before you proceed keep a backup of your template so if anything goes wrong you can revert it back to normal.Include JS files
The first step is to include the JQuery library and the JS file for this plugin into your template. JQuery lib. This is the script tags you need.To add it go to Blogger Dashboard -> Template -> Edit HTML -> Proceed -> Use CTRL+F to find </head> in the template. Paste the following code just above </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js' type='text/javascript'></script> <script src='http://cdn.stramaxon.com/stramaxon/ext/idTabs-stramaxon.js' type='text/javascript'/></script>
- Line 1 : This is the script for latest version of minified JQuery library hosted on Google, if you have already included it in your template then don't add it again.
- Line 2 : The second line is for the main plugin JS file which makes the tabs work. The file is being hosted my DropBox, you can host it on your own server, download the JS file here.
The HTML
The HTML is only where you will can confused but if you try to understand the concept of this plugin and how it works then it becomes easy for you to work with this HTML. Anyway, i am going to tell briefly about each element.Here's the HTML we need
<ul class="idTabs"> <li><a href="#tab1">First</a></li> <li><a href="#tab2">Second</a></li> <li><a href="#tab3">Third</a></li> <li><a href="#tab4">Fourth</a></li> <li><a href="#tab5">Fifth</a></li> </ul> <div id="tab1"> <!-- Content Below this --> </div> <div id="tab2"> <!-- Content Below this --> </div> <div id="tab3"> <!-- Content Below this --> </div> <div id="tab4"> <!-- Content Below this --> </div> <div id="tab5"> <!-- Content Below this --> </div>
- Line 1 : It is the starting tag of the UnorderedList (ul)
- Line 2 : This is the link tab for the content in div element with id='tab1' which is on line 9
- Line 3 : Similar to the description of line 2, this tab link is for the content in div element with id='tab2'.
- Line 4 : This also do the same thing as the line 2 and line 3 but goes for the div element with id='tab3'
- Line 9 : From line 9 to line 11 is the first div element which will appear for a tab, you can put any valid HTML into it, just like i put the Video embed code in the Demo
- The other div elements are for their corresponding links, if the <a> element has #tab1 in it's href value then it's the tab for the div element with id='tab1' and that's how it works.
http://www.blogger.com/blogger.g?blogID=6219123568585811984#mytab
And that sometimes stops the plugin from working. To prevent this put the current Post URL before the target tag. Now we have got Custom permalink, so you can see what's the URL even before publishing the post. For example see this
<ul class="idTabs"> <li><a href="#tab1">First</a></li> </ul> <div id="tab1"> <!-- Content Below this --> </div>Should be turned to
<ul class="idTabs"> <li><a href="http://stramaxon.blogspot.com/2012/07/jquery-tabs-plugin-blogger.html#tab1">First</a></li> </ul> <div id="tab1"> <!-- Content Below this --> </div>If you turn the URL correctly then your plugin will work well and there will be no bugs.
The Final CSS
If you take a look at your post after adding the CSS, it will look very dull and to give it a professional look we need to apply the CSS on the tabs, we will be applying styles just on tabs. Following is the CSS.idTabs {padding-left:0px !important;}
.idTabs li {display:inline;padding-left:0px;}
.idTabs li a {
padding:5px 15px;
background-color:#2EA537;
color:white;
text-decoration:none;
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
-ms-transition:all 0.3s;
-o-transition:all 0.3s;
font-weight:bold;
border:1px solid transparent;
border-radius:10px 10px 0px 0px;
}
.idTabs li a:hover {
padding:5px 15px;
background-color:#805D5A;
color:white;
text-decoration:none;
}
.idTabs li a.selected {
background-color:#42BEF8;
}
.idTabs li a.selected:hover {
background-color:#42BEF8;
}
[Click here] To see how to add CSS to your blog.There's no special instruction for CSS, you apply your own CSS design on the tabs to make it look good with your blog or if you don't have any idea about the editing the CSS then contact me for help at depy45631@gmail.com
