Menu Con Javascript

No Creas que me olvide del post de hoy!

el dia de hoy te traigo este menu javascript en el cual no tedras que estar esperando tanto que cargue la pagina tanto sino inmediatamente te llevara a la pagina.

bueno es simple el codigo solo buscar ciertas palabras en el codigo las cambias y listo como aparece en el ejemplo que les mostrare al final de la entrada.

es siquiente codigo que deveras pegar en un elemento 

HTML/JAVASCRIPT

solo editas unas palabras y titulos y listo.

CODIGO:

<ul class="tabs"> <li class="active" style=""><a href="#tab1">facebook</a></li> <li><a href="#tab2">videos</a></li> <li><a href="#tab3">twitter</a></li> </ul> <div id="content-wrapper"> <div id="crosscol-wrapper" style="text-align:center"> <div class="crosscol section" id="crosscol"> </div> </div> <div class="tab_container"> <div class="tab_content" id="tab1" style="display: block;"> <div id="andblogoContenido"> <div class="main section" id="main"> <div class="widget Blog" id="Blog1"> <div class="blog-posts hfeed"> <!-- google_ad_section_start(name=default) --> <div class="date-outer"> <div class="date-posts"> <div class="post-outer"> <div class="post hentry"> <a name="3196185773161135602"></a> <h3 class="post-title entry-title"> </h3> <div class="post-header"> <div class="post-header-line-1"> </div> </div> <div class="post-body entry-content"> aquie va el contenido! <div style="clear: both;"> </div> </div> <div class="post-footer"> <div class="post-footer-line post-footer-line-1"> <span class="post-author vcard"> <span class="fn"></span> </span> <span class="post-comment-link"> </span> <span class="post-icons"> <span class="item-control blog-admin pid-531118868"> </span> </span> </div> </div> </div> <div class="post-footer-line post-footer-line-2"> </div> <div class="post-footer-line post-footer-line-3"> <span class="post-location"> </span> </div> </div> </div> </div> <div class="post-outer"> <div class="post hentry"> <a name="1247203486566990351"></a> <h3 class="post-title entry-title"> </h3> <div class="post-header"> <div class="post-header-line-1"> </div> </div> <div class="post-footer"> <div class="post-footer-line post-footer-line-1"> </div> </div> </div> <div class="post-footer-line post-footer-line-2"> </div> <div class="post-footer-line post-footer-line-3"> <span class="post-location"> </span> </div> </div> </div> </div> </div> </div> <!-- google_ad_section_end --> </div> <div class="blog-pager" id="blog-pager"> <span id="blog-pager-older-link"> </span> </div> <div class="clear"> </div> <div class="blog-feeds"> <div class="feed-links"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxQNclWgiR-UxqKld5opHNiSTHIE2GODDnBYzsdxo1-c2muskozwyEXPkypz6wLpBOYXdKVTCghDBPCwdZVsxpfrNSNj4qXKxtRSA33XHAR7yq_EmssBRwwCnbdAulrdorvUuTo9SQ7H8/ 0/blfeedicono.png" style="margin-right: 4px;" /> Suscribirse a: <a class="feed-link" href="http://andblogo.blogspot.com/feeds/posts/default" target="_blank" type="application/atom+xml">Entradas (Atom)</a> </div> </div> </div> </div> <div class="tab_content" id="tab2" style="display: none;"> <div id="blsobremi" style="text-align:center"> <div class="blsobremi section" id="blsobremi"> <div class="widget HTML" id="HTML1"> <h2 class="title"> Sobre mi</h2> <div class="widget-content"> aqui va acerca de... </div> <div class="clear"> </div> <span class="widget-item-control"> <span class="item-control blog-admin"> <a class="quickedit" href="//www.blogger.com/rearrange?blogID=2870659219499856885&widgetType=HTML&a mp;widgetId=HTML1&action=editWidget§ionId=blsobremi" onclick="return _WidgetManager._PopupConfig(document.getElementById("HTML1"));" target="configHTML1" title="Editar"> <img alt="" height="18" src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" width="18" /> </a> </span> </span> <div class="clear"> </div> </div> </div> </div> </div> <div class="tab_content" id="tab3" style="display: none;"> <div id="blcontac" style="text-align:center"> <div class="blcontac section" id="blcontac"> <div class="widget HTML" id="HTML2"> <h2 class="title"> Siquenos En Twitter</h2> <div class="widget-content"> jaja hola! </div> <div class="clear"> </div> <span class="widget-item-control"> <span class="item-control blog-admin"> <a class="quickedit" href="//www.blogger.com/rearrange?blogID=2870659219499856885&widgetType=HTML&a mp;widgetId=HTML2&action=editWidget§ionId=blcontac" onclick="return _WidgetManager._PopupConfig(document.getElementById("HTML2"));" target="configHTML2" title="Editar"> <img alt="" height="18" src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" width="18" /> </a> </span> </span> <div class="clear"> </div> </div> </div> </div> </div> <div id="blcrrd" style="visibility: hidden;"> <a href="http://goo.gl/4xVx" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhseaUVuEjTXQPLPOlNErmtrALgpUi4votL2WXx3QaAch8jfoA06NLkwFWm-Jn_upZ071C5W0BJqmN3ahrrQNxm7ud1kA5HwVIJfhAcconqAZXbruA1cfb1Oo4BJNT7JCcdOFc-4jEzrYDn/ 0/bldds.png" /></a></div> <!-- spacer for skins that want sidebar and main to be the same height--> <div class="clear">  </div> <div class="blmenu section" id="blmenu"> <div class="widget LinkList" id="LinkList1"> <div class="widget-content"> <ul> <li></li> <li></li> <li></li> </ul> <div class="clear"> </div> <span class="widget-item-control"> <span class="item-control blog-admin"> <a class="quickedit" href="//www.blogger.com/rearrange?blogID=2870659219499856885&widgetType=LinkLi st&widgetId=LinkList1&action=editWidget§ionId=blmenu" onclick="return _WidgetManager._PopupConfig(document.getElementById("LinkList1"));" target="configLinkList1" title="Editar"> <img alt="" height="18" src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" width="18" /> </a> </span> </span> <div class="clear"> </div> </div> </div> </div> <div id="footer-wrapper"> <div class="footer section" id="footer"> </div> </div> <script type="text/javascript"> if (window.jstiming) window.jstiming.load.tick('widgetJsBefore'); </script> <script type="text/javascript" src="//www.blogger.com/static/v1/widgets/1384195903-widgets.js"></script> <script type="text/javascript" src="https://apis.google.com/js/plusone.js" gapi_processed="true"></script> <script type="text/javascript"> if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '2870659219499856885';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2870659219499856885', '//andblogo.blogspot.com/','2870659219499856885'); _WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '2870659219499856885', 'bloggerUrl': 'http://www.blogger.com', 'title': 'Miniblog', 'pageType': 'index', 'url': 'http://andblogo.blogspot.com/', 'canonicalUrl': 'http://andblogo.blogspot.com/', 'canonicalHomepageUrl': 'http://andblogo.blogspot.com/', 'homepageUrl': 'http://andblogo.blogspot.com/', 'blogspotFaviconUrl': 'http://andblogo.blogspot.com/favicon.ico', 'enabledCommentProfileImages': true, 'adultContent': false, 'disableAdSenseWidget': false, 'analyticsAccountNumber': '', 'searchLabel': '', 'searchQuery': '', 'pageName': '', 'pageTitle': 'Miniblog', 'encoding': 'UTF-8', 'locale': 'es', 'localeLanguage': 'es', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'languageDirection': 'ltr', 'feedLinks': '\74link rel\75\42alternate\42 type\75\42application/atom+xml\42 title\75\42Miniblog - Atom\42 href\75\42http://andblogo.blogspot.com/feeds/posts/default\42 /\76\n\74link rel\75\42alternate\42 type\75\42application/rss+xml\42 title\75\42Miniblog - RSS\42 href\75\42http://andblogo.blogspot.com/feeds/posts/default?alt\75rss\42 /\76\n\74link rel\75\42service.post\42 type\75\42application/atom+xml\42 title\75\42Miniblog - Atom\42 href\75\42http://www.blogger.com/feeds/2870659219499856885/posts/default\42 /\76\n\74link rel\75\42EditURI\42 type\75\42application/rsd+xml\42 title\75\42RSD\42 href\75\42http://www.blogger.com/rsd.g?blogID\0752870659219499856885\42 /\076', 'meTag': '', 'openIdOpTag': '\74link rel\75\42openid.server\42 href\75\42http://www.blogger.com/openid-server.g\42 /\76\n\74link rel\75\42openid.delegate\42 href\75\42http://andblogo.blogspot.com/\42 /\76\n', 'imageSrcTag': '', 'latencyHeadScript': '\74script type\75\42text/javascript\42\76(function() { var b\75window,e\75\42jstiming\42,g\75\42tick\42;(function(){function d(a){this.t\75{};this.tick\75function(a,d,c){c\75void 0!\75c?c:(new Date).getTime();this.t[a]\75[c,d]};this[g](\42start\42,null,a)}var a\75new d;b.jstiming\75{Timer:d,load:a};if(b.performance\46\46b.performance.timing){var a\75b.performance.timing,c\75b[e].load,f\75a.navigationStart,a\75a.responseStart;0 \74f\46\46a\76\75f\46\46(c[g](\42_wtsrt\42,void 0,f),c[g](\42wtsrt_\42,\42_wtsrt\42,a),c[g](\42tbsd_\42,\42wtsrt_\42))}try{a\75nul l,b.chrome\46\46b.chrome.csi\46\46(a\75Math.floor(b.chrome.csi().pageT),c\46\0460\ 74f\46\46(c[g](\42_tbnd\42,void 0,b.chrome.csi().startE),\nc[g](\42tbnd_\42,\42_tbnd\42,f))),null\75\75a\46\46b.gt bExternal\46\46(a\75b.gtbExternal.pageT()),null\75\75a\46\46b.external\46\46(a\75b .external.pageT,c\46\0460\74f\46\46(c[g](\42_tbnd\42,void 0,b.external.startE),c[g](\42tbnd_\42,\42_tbnd\42,f))),a\46\46(b[e].pt\75a)}catch( l){}})();b.tickAboveFold\75function(d){var a\0750;if(d.offsetParent){do a+\75d.offsetTop;while(d\75d.offsetParent)}d\75a;750\76\75d\46\46b[e].load[g](\42a ft\42)};var h\75!1;function k(){h||(h\75!0,b[e].load[g](\42firstScrollTime\42))}b.addEventListener?b.addEventL istener(\42scroll\42,k,!1):b.attachEvent(\42onscroll\42,k);\n })();\74/script\076', 'mobileHeadScript': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/393189cc1460f40b', 'plusOneApiSrc': 'https://apis.google.com/js/plusone.js', 'sf': 'n'}}, {'name': 'skin', 'data': {'vars': {'postfooterfont': 'normal normal 78% \47Trebuchet MS\47, Trebuchet, Arial, Verdana, Sans-serif', 'endSide': 'right', 'startSide': 'left', 'descriptionfont': 'normal normal 78% \47Trebuchet MS\47, Trebuchet, Arial, Verdana, Sans-serif'}, 'override': ''}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '/?view\75classic'}, 'flipcard': {'name': 'flipcard', 'url': '/?view\75flipcard'}, 'magazine': {'name': 'magazine', 'url': '/?view\75magazine'}, 'mosaic': {'name': 'mosaic', 'url': '/?view\75mosaic'}, 'sidebar': {'name': 'sidebar', 'url': '/?view\75sidebar'}, 'snapshot': {'name': 'snapshot', 'url': '/?view\75snapshot'}, 'timeslide': {'name': 'timeslide', 'url': '/?view\75timeslide'}}}]); _WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'andblogoCabecera3', null, document.getElementById('Header1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML2', 'blcontac', null, document.getElementById('HTML2'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList1', 'blmenu', null, document.getElementById('LinkList1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML1', 'blsobremi', null, document.getElementById('HTML1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_NavbarView', new _WidgetInfo('Navbar1', 'navbar', null, document.getElementById('Navbar1'), {}, 'displayModeFull')); _WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', null, document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': '//www.blogger.com/static/v1/jsbin/3156404218-lbx__es.js', 'lightboxCssUrl': '//www.blogger.com/static/v1/v-css/228702327-lightbox_bundle.css'}, 'displayModeFull')); </script> <script src="https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.es.0lB0pscqNR0.O/m=i frames_styles_bubble/exm=plusone/rt=j/sv=1/d=1/ed=1/am=UQ/rs=AItRSTOY1QPR7mCNeKMjt 7zTIF4mlXJP2g/cb=gapi.loaded_1" async=""></script><script src="https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.es.0lB0pscqNR0.O/m=p lusone/rt=j/sv=1/d=1/ed=1/am=UQ/rs=AItRSTOY1QPR7mCNeKMjt7zTIF4mlXJP2g/cb=gapi.load ed_0" async=""></script><script type="text/javascript">(function() { var b=window,e="jstiming",g="tick";(function(){function d(a){this.t={};this.tick=function(a,d,c){c=void 0!=c?c:(new Date).getTime();this.t[a]=[c,d]};this[g]("start",null,a)}var a=new d;b.jstiming={Timer:d,load:a};if(b.performance&&b.performance.timing){var a=b.performance.timing,c=b[e].load,f=a.navigationStart,a=a.responseStart;0<f&&a>=f &&(c[g]("_wtsrt",void 0,f),c[g]("wtsrt_","_wtsrt",a),c[g]("tbsd_","wtsrt_"))}try{a=null,b.chrome&&b.chro me.csi&&(a=Math.floor(b.chrome.csi().pageT),c&&0<f&&(c[g]("_tbnd",void 0,b.chrome.csi().startE), c[g]("tbnd_","_tbnd",f))),null==a&&b.gtbExternal&&(a=b.gtbExternal.pageT()),null== a&&b.external&&(a=b.external.pageT,c&&0<f&&(c[g]("_tbnd",void 0,b.external.startE),c[g]("tbnd_","_tbnd",f))),a&&(b[e].pt=a)}catch(l){}})();b.tic kAboveFold=function(d){var a=0;if(d.offsetParent){do a+=d.offsetTop;while(d=d.offsetParent)}d=a;750>=d&&b[e].load[g]("aft")};var h=!1;function k(){h||(h=!0,b[e].load[g]("firstScrollTime"))}b.addEventListener?b.addEventListene r("scroll",k,!1):b.attachEvent("onscroll",k); })();</script> <link href="http://andblogo.blogspot.com/favicon.ico" rel="icon" type="image/x-icon" /> <link href="http://andblogo.blogspot.com/" rel="canonical" /> <link rel="alternate" type="application/atom+xml" title="Miniblog - Atom" href="http://andblogo.blogspot.com/feeds/posts/default" /> <link rel="alternate" type="application/rss+xml" title="Miniblog - RSS" href="http://andblogo.blogspot.com/feeds/posts/default?alt=rss" /> <link rel="service.post" type="application/atom+xml" title="Miniblog - Atom" href="http://www.blogger.com/feeds/2870659219499856885/posts/default" /> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.blogger.com/rsd.g?blogID=2870659219499856885" /> <link rel="openid.server" href="http://www.blogger.com/openid-server.g" /> <link rel="openid.delegate" href="http://andblogo.blogspot.com/" /> <!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]--> Miniblog <link type="text/css" rel="stylesheet" href="//www.blogger.com/static/v1/widgets/2524447400-widget_css_bundle.css" /> <link type="text/css" rel="stylesheet" href="//www.blogger.com/dyn-css/authorization.css?targetBlogID=2870659219499856885 &zx=a80edfa6-2aaa-410e-b26b-c5d732181a02" /> <style id="page-skin-1" type="text/css"></style> <style> ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 32px; border-bottom: 1px solid #999; border-left: 1px solid #999; width: 100%; } ul.tabs li {height: 31px; float: left; margin: 0; padding: 0; line-height: 31px; border: 1px solid #999; border-left: none; margin-bottom: -1px; overflow: hidden; position: relative; background: #dddddd;} ul.tabs li a {font-size:15px; text-decoration: none; color: #000; display: block; font-size: 1.2em; padding: 0 20px; border: 1px solid #fff; outline: none; } ul.tabs li a:hover { background: #99CC99; } html ul.tabs li.active, html ul.tabs li.active a:hover { background: #fff; border-bottom: 1px solid #fff; }.tab_container { border: 1px solid #999; border-top: none; overflow: hidden; clear: both; float: left; width: 100%; background: #fff; } .tab_content { padding: 20px; font-size: 1.2em; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <script src="http://sites.google.com/site/scriptsbalcon/b/blsecciones.txt" type="text/javascript"></script> <style>*{outline:none}</style> <script type="text/javascript">var a=navigator,b="userAgent",c="indexOf",f="&m=1",g="(^|&)m=",h="?",k="?m=1";function l(){var d=window.location.href,e=d.split(h);switch(e.length){case 1:return d+k;case 2:return 0<=e[1].search(g)?null:d+f;default:return null}}if(-1!=a[b][c]("Mobile")&&-1!=a[b][c]("WebKit")&&-1==a[b][c]("iPad")||-1!=a[ b][c]("Opera Mini")||-1!=a[b][c]("IEMobile")){var m=l();m&&window.location.replace(m)}; </script><script type="text/javascript"> if (window.jstiming) window.jstiming.load.tick('headEnd'); </script> <script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/js/google_top_exp.js"></script><style> .gc-bubbleDefault{background-color:transparent !important;text-align:left;padding:0 !important;margin:0 !important;border:0 !important;table-layout:auto !important}.gc-reset{background-color:transparent !important;border:0 !important;padding:0 !important;margin:0 !important;text-align:left}.pls-bubbleTop{border-bottom:1px solid #ccc !important}.pls-topTail,.pls-vertShimLeft,.pls-contentLeft{background-image:url(// ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/border_3.gif) !important}.pls-topTail{background-repeat:repeat-x !important;background-position:bottom !important}.pls-vertShim{background-color:#fff !important;text-align:right}.pls-vertShimLeft{background-repeat:repeat-y !important;background-position:right !important;height:4px}.pls-vertShimRight{height:4px}.pls-confirm-container .pls-vertShim{background-color:#fff3c2 !important}.pls-contentWrap{background-color:#fff !important;position:relative !important;vertical-align:top}.pls-contentLeft{background-repeat:repeat-y;backgrou nd-position:right;vertical-align:top}.pls-dropRight{background-image:url(//ssl.gst atic.com/s2/oz/images/stars/po/bubblev1/bubbleDropR_3.png) !important;background-repeat:repeat-y !important;vertical-align:top}.pls-vert,.pls-tailleft,.pls-dropTR .pls-dropBR,.pls-dropBL,.pls-vert img{vertical-align:top}.pls-dropBottom{background-image:url(//ssl.gstatic.com/s2/o z/images/stars/po/bubblev1/bubbleDropB_3.png) !important;background-repeat:repeat-x !important;width:100%;vertical-align:top}.pls-topLeft{background:inherit !important;text-align:right;vertical-align:bottom}.pls-topRight{background:inherit !important;text-align:left;vertical-align:bottom}.pls-bottomLeft{background:inheri t !important;text-align:right}.pls-bottomRight{background:inherit !important;text-align:left;vertical-align:top}.pls-tailtop,.pls-tailright,.pls-tai lbottom,.pls-tailleft{display:none;position:relative}.pls-tailbottom,.pls-tailtop, .pls-tailright,.pls-tailleft,.pls-dropTR,.pls-dropBR,.pls-dropBL{background-image: url(//ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/bubbleSprite_3.png) !important;background-repeat:no-repeat}.pls-tailbottom{background-position:-23px 0}.pls-confirm-container .pls-tailbottom{background-position:-23px -10px}.pls-tailtop{background-position:-19px -20px}.pls-tailright{background-position:0 0}.pls-tailleft{background-position:-10px 0}.pls-tailtop{vertical-align:top}.gc-bubbleDefault td{line-height:0;font-size:0}.pls-topLeft img,.pls-topRight img,.pls-tailbottom{vertical-align:bottom}.pls-bottomLeft img,.bubbleDropTR,.pls-dropBottomL img,.pls-dropBottom img,.pls-dropBottomR img,.pls-bottomLeft{vertical-align:top}.pls-dropTR{background-position:0 -22px}.pls-dropBR{background-position:0 -27px}.pls-dropBL{background-position:0 -16px}.pls-spacertop,.pls-spacerright,.pls-spacerbottom,.pls-spacerleft{position:s tatic !important}.pls-spinner{bottom:0;position:absolute;left:0;margin:auto;right:0;top: 0} </style>


Fotografias del menu.

ESCRITO POR: Andy Gomez

enlaces: El Balcòn