2013 January 31 Archive - EXEIdeas – Let's Your Mind Rock

After our previous post about CSS Multi Tabs Widget, here we have the same but with jquery effect that will make it more awesome and stylish. A navigation or menu bar is a bar made up of tabs. Behind each of those tabs is a link-to a post page, a static page, a label page, to another website etc. Making navigation tabs is not that difficult. They are basically links with some styling added for visual appeal.links are arranged vertically, navigation tabs are usually arranged horizontally.In this tutorial we will install the bar just below the header, a typical place for navigation bar. The bar will be added as a gadget via Page Elements page. The advantage of using a gadget is that if you want to remove it later on, it can be done easily without editing the HTML. #Demo {padding: 5px;border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px; background:#F8F8F8; box-shadow: 3px 3px 3px #D44B2C; width:200px; } #Demo{margin-bottom:5px;} #Demo a{color:#D44B2C;background:#F8F8F8;padding:8px 14px;display:inline-block;font-size:12px;line-height:12px;text-decoration:none;text-transform:uppercase;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px} #Demo a:hover{color:#fff;text-shadow:0px 1px 0px #000;background:#D44B2C;text-decoration:none} CLICK HERE TO SEE DEMO Features:1.) You Can Add Multi-Pages Data In One Page.2.) You Can Also Add Unlimited Tabs With Easy Coding.3.) Simple And Stylish Design With Speed Loading Time.4.) You Can Add Text, HTML Codes, Scripts, Videos, Pic And More In It.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.) Leave The Title Empty.9.) Click Save, Now You Are 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. $(document).ready(function() { $("#tabs").tabs(); }); Tab-1 Tab-2 Tab-3 Tab-4 Tab-5 Your Tab-1 Script or Text Here Your Tab-2 Script or Text Here Your Tab-3 Script or Text Here Your Tab-4 Script or Text Here Your Tab-5 Script or Text Here Customization:1.) Change Red Text With Your Desire Tab Names.2.) Change Blue Text With Text, HTML Codes, Scripts, Videos, Pic And More As You Want.3.) Save And Enjoy.