2013 November 23 Archive - EXEIdeas

Multitab widgets are very popular now a day. They help reduce webpage space and give a handy interface for users. Using multitab widget you can place different types of widgets or web data in a single place.In a website multitab can be used for creating different sub-categories at a single page for example a software company uses multitab for defining system requirements, features, downloads help or any other related data of software on the main page of the software. Users, therefore, need not to go back and forth between different web pages for data collection or information viewing.Similarly for blog different widgets like recent post, categories, top posts, blog archives and so on can be easily summed up at a single place. Multitab widgets usually used in blogs to shorten the height of the sidebars.There are many multitab widgets are available in the market, some of them uses jQuery, some are based on JavaScript and some claimed to be CSS3. No matter what type of they are, they are lengthy and heavy resulting in the more loading time of the page. The multitab widget that I am going to share today is a small JavaScript based multitab that is cross browser too. Some of the exciting features of the multitab are:CLICK HERE TO SEE DEMOFeatures:1.) Small In Size.2.) JavaScript Based.3.) Easy To Install.4.) Supports Blogger, WordPress And Web.5.) Can Extend New Tabs.6.) Fully Customizable.7.) Compatible With All Browsers.8.) Quick To Load.9.) Can Contain Any Data/Image/Code.10.) Awesome In Working.How To Add In Blogspot?1.) Go To Your www.blogger.com2.) Open Your Desire “Blog“.3.) Go To “Layout“.4.) Click “Add A Gadget” Where You Want To Add It.5.) Now Scroll To “HTML-JAVASCRIPT“6.) Click “+” Icon To Add It.7.) Now Copy The Below Code And Paste It To There.8.) Click “Save“, Now You Are Done.OR1.) Go To Your www.blogger.com2.) Open Your Desire “Blog“.3.) Go To “Template“.4.) Click “Edit HTML“.5.) Now Click Within Code Box.6.) Press [CTRL+F] To Search “ ” Code.7.) Now Copy The Below Code And Paste In It..8.) Click “Save Template” And Done.OR1.) Go To Your www.blogger.com2.) Open Your Desire Blog.3.) Create A “New Post” Or “Edit” Some One Existing.4.) Click “Edit HTML” Tab In The Post Editor.5.) Now Copy The Below Code And Paste It There8.) Click “Publish” Or “Update” To Done.How To Add In Website?1.) Just Go To Your HTML File.2.) Now Copy The Below Code And Paste It Between “ “.3.) Save It, Now You Are Done.Or Paste HTML,CSS,JavaScript In There Original Places… ::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;}::-webkit-scrollbar{width: 6px; background-color: #F5F5F5;}::-webkit-scrollbar-thumb{background-color: #0099ff;}#exe_multitab ul{display:inline; list-style-type:none;}#exe_multitab ul > li{background:#00c4ff;cursor:pointer;background:-moz-linear-gradient(90deg, #00c4ff 0%, #0099ff 100%);background:-webkit-linear-gradient(90deg, #00c4ff 0%, #0099ff 100%);background:-o-linear-gradient(90deg, #00c4ff 0%, #0099ff 100%);background:-ms-linear-gradient(90deg, #00c4ff 0%, #0099ff 100%);background:linear-gradient(180deg, #00c4ff 0%, #0099ff 100%); padding:7px; float:left; margin-right:5px; -moz-border-radius-topleft:5px; -webkit-border-top-left-radius:5px; border-top-left-radius:5px; -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px; border-top-right-radius:5px;}#exe_multitab ul > li a{color:#fff; text-decoration:none; font-weight:bold;}#exe_multitab ul > li a:hover{color:#0011ff}#tabcontent{width:250px; height:400px; padding:5px; background-color:#eee; margin-top:15px; -webkit-box-shadow:3px 3px 5px rgba(50, 50, 50, 0.75); -moz-box-shadow:3px 3px 5px rgba(50, 50, 50, 0.75); box-shadow:3px 3px 5px rgba(50, 50, 50, 0.75); -moz-border-radius-topright:5px; -webkit-border-top-right-radius:5px; border-top-right-radius:5px; -moz-border-radius-bottomright:5px; -webkit-border-bottom-right-radius:5px; border-bottom-right-radius:5px; -moz-border-radius-bottomleft:5px; -webkit-border-bottom-left-radius:5px; border-bottom-left-radius:5px;}#tab1{height:400px; overflow-x:hidden;}#tab2, #tab3 {height:400px; overflow-x:hidden; display:none;} #exe_multitab ul li a{background-color:#00c4ff; color:#fff; display:inline; padding:5px; margin-left:5px; float:left; text-decoration:none; font-weight:bold; font-family:Arial;} // Tab1 Tab2 Tab3 Tab1 Tab2 Tab3 Customization:The code for multitab is of three parts. CSS, JavaScript and HTML. CSS part is fully customizable. You can customize or change the whole CSS, but just remember, the first tab id will always have a display block property while the rest of the tabs have the display none property.#tab {display:block;}#tab2, #tab3, … #tabn {display:none;}In JavaScript you have to adjust the limit of variable i according to the number of total tabs. Always put the limit one more than the number of tabs, for example if there are 5 tabs then the limit value of variable i will be 6, if the number of tabs is 7 the value will be 8.for (i =1; i<5; i++){For HTML every tab has an id of tab1, tab2, tab3 and so on. Similarly every tab button have the increasing onclick function of exe_multitab(), like exe_multitab(1), exe_multitab(2), exe_multitab(3)…If you still have any queries, feel free to ask.