2015 December 08 Archive - EXEIdeas

Multi-Tab widgets are great for your websites or blogs to show more data in less space and can have unlimited pages in same size that will overlap them to save spaces and can be easily access via buttons to have views on that too. Its best for having same category widgets in same place so this can help in design too.Now there are many one available only but not features are ok to use them because you have to watch out your loading time too so think twice before using the codes on your web that can make your loading time high of bad SEO effect. But this one is light weight and have to bunch of codes. All is here you you also do not have to hit any others URLs. Now go for it and garb the code to use it.CLICK HERE TO SEE DEMOFeatures:1.) Pure JavaScript Added.2.) No External JavaScript Or JQuery File.3.) Pure CSS Added.4.) Simple And Fast Loading Code.5.) Can Work With Any Browser.How To Add In A WebPage?1.) Just Go To Your “Web Page File”.2.) Now “Copy” The Below Codes And “Paste” It To There Positions.3.) “Save” It, Now You Are Done.JavaScript: //<![CDATA[function JAVASCRIPTMULTITAB(NBTID, id){ var JAVASCRIPTMULTITAB_WIDGET = document.getElementById(NBTID); var JMT = JAVASCRIPTMULTITAB_WIDGET.firstChild; while (JMT.className != "JMT" ) JMT = JMT.nextSibling; var NBT = JMT.firstChild; var i = 0; do { if (NBT.tagName == "A") { i++; NBT.href = "javascript:JAVASCRIPTMULTITAB_ubah('"+NBTID+"', "+i+");"; NBT.className = (i == id) ? "Active" : ""; NBT.blur(); } } while (NBT = NBT.nextSibling); var Halamans = JAVASCRIPTMULTITAB_WIDGET.firstChild; while (Halamans.className != 'Halamans') Halamans = Halamans.nextSibling; var Halaman = Halamans.firstChild; var i = 0; do { if (Halaman.className == 'Halaman') { i++; if (Halamans.offsetHeight) Halaman.style.height = (Halamans.offsetHeight-2)+"px"; Halaman.style.overflow = "auto"; Halaman.style.display = (i == id) ? 'block' : 'none'; } } while (Halaman = Halaman.nextSibling);}function JAVASCRIPTMULTITAB_ubah(NBTID, id) {JAVASCRIPTMULTITAB(NBTID, id);}function JAVASCRIPTMULTITAB_inisial(NBTID) {JAVASCRIPTMULTITAB(NBTID, 1);document.write('');}//]]> CSS: div.JAVASCRIPTMULTITAB_WIDGET div.JMT {height: 24px;overflow: hidden;}div.JAVASCRIPTMULTITAB_WIDGET div.JMT a:hover, div.JAVASCRIPTMULTITAB_WIDGET div.JMT a.Active {background-color: #eee;}div.JAVASCRIPTMULTITAB_WIDGET div.Halamans {clear: both;border: 2px solid #f4f4f4;overflow: hidden;background-color: #ffffff;}div.JAVASCRIPTMULTITAB_WIDGET div.Halamans div.Halaman {height: 100%; padding: 0px;overflow: hidden;}div.JAVASCRIPTMULTITAB_WIDGET div.Halamans div.Halaman div.Alas {padding: 3px 5px;}div.JAVASCRIPTMULTITAB_WIDGET div.JMT a {border-left:1px solid #eee;border-right:1px solid #eee;border-top:1px solid #eee;border-boNBTom:0px solid #eee;float: left;display: block;width: 95px;text-align: center;vertical-align: middle;height: 24px;padding-top: 3px;text-decoration: none;font-family: "Arial", Serif;font-size: 11px;font-weight: 900;color: #000000} HTML: Tab 1 Title Tab 2 Title Tab 3 Title Tab 1 content goes here Tab 2 content goes here Tab 3 content goes here JAVASCRIPTMULTITAB_inisial('JAVASCRIPTMULTITAB_WIDGET'); Customization:1.) Edit Your HTML & CSS As Per Your Requirements. Rest JavaScript Is Ok For General Us. If You Are Pro, Then You Can Do Any Thing.Last Words:That’s all we have. If you have any problem with this code in your blogger template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…