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

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 DEMOFeatures:1.) Simple And Stylish Multi-Tab Data Container.2.) You Can Add Text, Pic, Video Or HTML Code Easily.3.) You Can Add Un-Limited Tab.4.) Speed Loading Time.5.) You Can Make Multi-Pages In On Blog Post, Blog Gadget Or Website.6.) JQuery 1.6.1 Added.7.) Easy To Install And Fully Customizable.8.) Scroll Up Effect On Tab Changing.9.) Free To Use With Any Data.10.) All Tabs Data Will Be Loaded On Page Load.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. #tabbed_box_1 {margin: 0px auto 0px auto;width:500px;}.tabbed_box h4 {font-family:Arial, Helvetica, sans-serif;font-size:23px;color:#ffffff;letter-spacing:-1px;margin-bottom:10px;}.tabbed_box h4 small {color:#e3e9ec;font-weight:normal;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;text-transform:uppercase;position:relative;top:-4px;left:6px;letter-spacing:0px;}.tabbed_area {border:1px solid #494e52;background-color:#636d76;padding:8px;}ul.tabs {margin:0px; padding:0px;margin-top:5px;margin-bottom:6px;}ul.tabs li {list-style:none;display:inline;}ul.tabs li a {background-color:#464c54;color:#ffebb5;padding:8px 14px 8px 14px;text-decoration:none;font-size:9px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight:bold;text-transform:uppercase;border:1px solid #464c54;background-image:url(https://lh5.googleusercontent.com/-4oB3c0hJXFo/TwgIZu7CB3I/AAAAAAAAUfM/0yDsmg_GI54/s1600/tab_off.jpg); background-repeat:repeat-x;background-position:bottom;}ul.tabs li a:hover {background-color:#2f343a;border-color:#2f343a;}ul.tabs li a.active {background-color:#ffffff;color:#282e32;border:1px solid #464c54;border-bottom: 1px solid #ffffff;background-image:url(https://lh4.googleusercontent.com/-w4udt2FfX80/TwgIZHBXHcI/AAAAAAAAUfI/p4LDF-CsN7E/s1600/tab_on.jpg);background-repeat:repeat-x;background-position:top; }.content {background-color:#ffffff;padding:10px;border:1px solid #464c54;font-family:Arial, Helvetica, sans-serif; background-image:url(https://lh6.googleusercontent.com/-35jZQ4g9ijI/TwgIabuIPhI/AAAAAAAAUfU/4pH5w6Ptzwo/s1600/content_bottom.jpg);background-repeat:repeat-x;background-position:bottom;}#Part_2, #Part_3, #Part_4, #Part_5 { display:none; }.content ul {margin:0px;padding:0px 20px 0px 20px;}.content ul li {list-style:none;border-bottom:1px solid #d6dde0;padding-top:15px;padding-bottom:15px;font-size:13px;}.content ul li:last-child { border-bottom:none;}.content ul li a {text-decoration:none;color:#3e4346;}.content ul li a small {color:#8b959c;font-size:9px;text-transform:uppercase;font-family:Verdana, Arial, Helvetica, sans-serif;position:relative;left:4px;top:0px;}.content ul li a:hover {color:#a59c83;}.content ul li a:hover small {color:#baae8e;} $(document).ready(function(){$("a.tab").click(function () {$(".active").removeClass("active");$(this).addClass("active");$(".content").slideUp();var content_show = $(this).attr("title");$("#"+content_show).slideDown();});}); Part 1 Part 2 Part 3 Part 4 Part 5 Your 1st DIV Data In Text, Image, DIV, Span, HTML, JQuery, JavaScript, Frame etc... Your 2nd DIV Data In Text, Image, DIV, Span, HTML, JQuery, JavaScript, Frame etc... Your 3rd DIV Data In Text, Image, DIV, Span, HTML, JQuery, JavaScript, Frame etc... Your 4th DIV Data In Text, Image, DIV, Span, HTML, JQuery, JavaScript, Frame etc... Your 5th DIV Data In Text, Image, DIV, Span, HTML, JQuery, JavaScript, Frame etc... Widget by: EXE Ideas Customization:1.) Just Change The Red Text To Your Desire Tab Heading.3.) Just Change The Blue Text With Your Desires Data.3.) Save And Done.