Put videos, photos or whatsoever HTML inwards Tabs inwards Blogger alongside Jquery

There receive got been many inquiry close adding content into easily switchable tabs without whatsoever page load, blogger users commonly don’t detect using JQuery in addition to most of them never headed to the Jquery plugin site, the pedagogy are complicated at that topographic point in addition to it’s non easily understandable. But i volition hand slow in addition to clear pedagogy to install this Tabs JQuery plugin on Blogger.

Update 25th March 2017 – Due to around issues inwards hosting the script files the plugin mightiness non endure working properly for everyone who implemented this. I would asking you lot to come upwards dorsum hither inwards a solar daytime or ii in addition to re-add the script codes alongside update URLS (you exercise non receive got to re-do the tabs you lot created inwards your post.)

Before nosotros start this tutorial, thank you lot to sunsean.com for this JQuery plugin called idTabs, you lot are going to install that JQuery plugin on your blog.

Every blogger wants to add together dynamic business office but they are unable to exercise it, because at that topographic point are non much people who writes close installing JQuery plugins on Blogger Blogs. If you lot desire to display your post contents inwards a novel means thence this plugin is what you lot need, this plugin is useful for video bloggers having lots of videos inwards 1 post , if they purpose this plugin they tin dismiss trim infinite used for the videos.

If you lot aren’t certain this is what you lot are looking for thence delight run across the demonstration of the code.


There receive got been many inquiry close adding content into easily switchable tabs without whatsoever Put videos, photos or whatsoever HTML inwards Tabs inwards Blogger alongside Jquery
Believe me this tutorial is real slow but notwithstanding around people alongside less sense alongside codes volition detect this tutorial hard in addition to to brand this slow for you, i receive got divided the steps inwards parts, read farther for the instructions.

Follow these steps

Before you lot move along maintain a backup of your template thence if anything goes incorrect you lot tin dismiss revert it dorsum to normal.

Include JS files

The outset measurement is to include the JQuery library in addition to the JS file for this plugin into your template. JQuery lib. This is the script tags you lot need.

To add together it move to Blogger Dashboard -> Template -> Edit HTML -> Proceed -> Use CTRL+F to detect </head> inwards the template. Paste the next code but inwards a higher house </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js' type='text/javascript'></script> <script src='https://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 lot receive got already included it inwards your template thence don’t add together it again.
  • Line 2 : The minute trouble is for the master copy plugin JS file which makes the tabs work. The file is beingness hosted my DropBox, you lot tin dismiss host it on your ain server, download the JS file here.


The HTML is solely where you lot volition tin dismiss confused but if you lot sweat to sympathise the concept of this plugin in addition to how it plant thence it becomes slow for you lot to operate alongside this HTML. Anyway, i am going to tell briefly close each element.

Here’s the HTML nosotros 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 inwards div chemical ingredient alongside id=’tab1′ which is on trouble 9
  • Line iii : Similar to the description of trouble 2, this tab link is for the content inwards div chemical ingredient alongside id=’tab2′. 
  • Line four : This likewise exercise the same matter equally the trouble 2 in addition to trouble iii but goes for the div chemical ingredient alongside id=’tab3′ 
  • Line ix : From trouble ix to trouble eleven is the outset div chemical ingredient which volition appear for a tab, you lot tin dismiss lay whatsoever valid HTML into it, but similar i lay the Video embed code inwards the Demo
  • The other div elements are for their corresponding links, if the <a> chemical ingredient has #tab1 inwards it’s href value thence it’s the tab for the div chemical ingredient alongside id=’tab1′ in addition to that’s how it works.

Note : When you lot are giving an anchor link a href value alongside a hash similar this #target, thence it thinks links that to the electrical flow page (post editor) alongside the this #target. For trial if i hand the href value #mytab thence the whole URL becomes

And that sometimes stops the plugin from working. To foreclose this lay the electrical flow Post URL earlier the target tag. Now nosotros receive got got Custom permalink, thence you lot tin dismiss run across what’s the URL fifty-fifty earlier publishing the post. For trial run across this

<ul class="idTabs"> <li><a href="#tab1">First</a></li> </ul>  <div id="tab1"> <!-- Content Below this --> </div> 

Should endure turned to

<ul class="idTabs"> <li><a href=" #tab1">First</a></li> </ul>  <div id="tab1"> <!-- Content Below this --> </div> 

If you lot plough the URL correctly thence your plugin volition operate good in addition to at that topographic point volition endure no bugs.

The Final CSS

If you lot receive got a expect at your post later adding the CSS, it volition expect real irksome in addition to to hand it a professional person expect nosotros ask to apply the CSS on the tabs, nosotros volition endure applying styles but 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 enterprise 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 run across how to add together CSS to your blog.
There’s no especial pedagogy for CSS, you lot apply your ain CSS blueprint on the tabs to instruct inwards expect skillful alongside your weblog or if you lot don’t receive got whatsoever persuasion close the editing the CSS thence contact me for assistance at [email protected]

Great ! You Did it

Hows the tab switcher looking, i promise you lot integrated it without whatsoever difficulties. If you lot receive got question, proposition or but desire to country thank you lot thence your comments are welcomed. We volition endure publishing to a greater extent than JQuery  plugins for blogger thence subscribe to our Email Newsletter.

Sumber http://www.stramaxon.com