<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Chica Blogger &#187; Menú</title>
	<atom:link href="http://chicablogger.com/tag/menu/feed/" rel="self" type="application/rss+xml" />
	<link>http://chicablogger.com</link>
	<description>Recursos para Blogger y WordPress</description>
	<lastBuildDate>Thu, 05 Apr 2012 01:59:16 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Menú desplegable con jQuery Superfish en Blogger</title>
		<link>http://chicablogger.com/menu-desplegable-con-jquery-superfish-en-blogger/</link>
		<comments>http://chicablogger.com/menu-desplegable-con-jquery-superfish-en-blogger/#comments</comments>
		<pubDate>Sun, 30 Oct 2011 04:27:41 +0000</pubDate>
		<dc:creator>Claudia</dc:creator>
				<category><![CDATA[Tutoriales]]></category>
		<category><![CDATA[Blogger]]></category>
		<category><![CDATA[Menú]]></category>

		<guid isPermaLink="false">http://chicablogger.com/?p=5055</guid>
		<description><![CDATA[Tiempo atrás les hablaba de un tutorial para crear menús desplegables sólo con CSS. Para algunos funcionó bien, pero para otros no. Por eso, veremos otra alternativa simple de implementar, basada en los menús desplegables de las plantillas de Premium Blogger Templates. Este menú usa el plugin jQuery Superfish, y debiese funcionar bien para todos. [...]

<h3>Posts relacionados</h3><ul><li><a href='http://chicablogger.com/crear-un-menu-con-botones-con-una-sola-imagen/' rel='bookmark' title='Permanent Link: Crear un menú de botones con una sola imagen'>Crear un menú de botones con una sola imagen</a></li><li><a href='http://chicablogger.com/incorporar-jquery-tiptip-en-blogger/' rel='bookmark' title='Permanent Link: Incorporar jQuery TipTip en Blogger'>Incorporar jQuery TipTip en Blogger</a></li><li><a href='http://chicablogger.com/pure-css-menu-generador-de-menus-desplegables-sin-javascript/' rel='bookmark' title='Permanent Link: Pure CSS Menu: Generador de menús desplegables sin javascript'>Pure CSS Menu: Generador de menús desplegables sin javascript</a></li></ul>]]></description>
			<content:encoded><![CDATA[<p><img src="http://chicablogger.com/wp-content/uploads/2011/10/superfish-menu-desplegable-blogger.jpg" alt="" title="Menu Desplegable Blogger" width="500" height="146" class="aligncenter size-full wp-image-5070" /></p>
<p>Tiempo atrás les hablaba de un tutorial para <strong><a href="http://chicablogger.com/menus-css-desplegables-sin-javascript/" title="Menús Desplegables CSS">crear menús desplegables sólo con CSS</a></strong>. Para algunos funcionó bien, pero para otros no. Por eso, veremos otra alternativa simple de implementar, basada en los menús desplegables de las plantillas de Premium Blogger Templates. Este menú usa el plugin <strong>jQuery Superfish</strong>, y debiese funcionar bien para todos.</p>
<h3><strong>Agregando un menú desplegable a tu plantilla Blogger, paso a paso</strong></h3>
<p><strong>1. Carga la última versión de jQuery</strong></p>
<p>Si no tienes jQuery en tu plantilla, puedes cargarlo directamente desde Google, incluyendo la siguiente línea de código en la <strong>Edición de HTML de tu plantilla</strong> (todos los cambios se harán allí mismo), justo antes de <strong>&lt;/body&gt;</strong>:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="language" style="font-family:monospace;">&lt;script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/&gt;</pre></td></tr></table></div>

<p><strong>2. Agrega Superfish</strong></p>
<p><span id="more-5055"></span></p>
<p>Justo después de la línea anterior, pega el siguiente código para incluir jQuery Superfish en tu plantilla:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
</pre></td><td class="code"><pre class="language" style="font-family:monospace;">&lt;script type='text/javascript'&gt;
//&lt;![CDATA[
&nbsp;
(function($){
	/* hoverIntent by Brian Cherne */
	$.fn.hoverIntent = function(f,g) {
		// default configuration options
		var cfg = {
			sensitivity: 7,
			interval: 100,
			timeout: 0
		};
		// override configuration options with user supplied object
		cfg = $.extend(cfg, g ? { over: f, out: g } : f );
&nbsp;
		// instantiate variables
		// cX, cY = current X and Y position of mouse, updated by mousemove event
		// pX, pY = previous X and Y position of mouse, set by mouseover and polling interval
		var cX, cY, pX, pY;
&nbsp;
		// A private function for getting mouse position
		var track = function(ev) {
			cX = ev.pageX;
			cY = ev.pageY;
		};
&nbsp;
		// A private function for comparing current and previous mouse position
		var compare = function(ev,ob) {
			ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
			// compare mouse positions to see if they've crossed the threshold
			if ( ( Math.abs(pX-cX) + Math.abs(pY-cY) ) &lt; cfg.sensitivity ) {
				$(ob).unbind(&quot;mousemove&quot;,track);
				// set hoverIntent state to true (so mouseOut can be called)
				ob.hoverIntent_s = 1;
				return cfg.over.apply(ob,[ev]);
			} else {
				// set previous coordinates for next time
				pX = cX; pY = cY;
				// use self-calling timeout, guarantees intervals are spaced out properly (avoids JavaScript timer bugs)
				ob.hoverIntent_t = setTimeout( function(){compare(ev, ob);} , cfg.interval );
			}
		};
&nbsp;
		// A private function for delaying the mouseOut function
		var delay = function(ev,ob) {
			ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t);
			ob.hoverIntent_s = 0;
			return cfg.out.apply(ob,[ev]);
		};
&nbsp;
		// A private function for handling mouse 'hovering'
		var handleHover = function(e) {
			// next three lines copied from jQuery.hover, ignore children onMouseOver/onMouseOut
			var p = (e.type == &quot;mouseover&quot; ? e.fromElement : e.toElement) || e.relatedTarget;
			while ( p &amp;&amp; p != this ) { try { p = p.parentNode; } catch(e) { p = this; } }
			if ( p == this ) { return false; }
&nbsp;
			// copy objects to be passed into t (required for event object to be passed in IE)
			var ev = jQuery.extend({},e);
			var ob = this;
&nbsp;
			// cancel hoverIntent timer if it exists
			if (ob.hoverIntent_t) { ob.hoverIntent_t = clearTimeout(ob.hoverIntent_t); }
&nbsp;
			// else e.type == &quot;onmouseover&quot;
			if (e.type == &quot;mouseover&quot;) {
				// set &quot;previous&quot; X and Y position based on initial entry point
				pX = ev.pageX; pY = ev.pageY;
				// update &quot;current&quot; X and Y position based on mousemove
				$(ob).bind(&quot;mousemove&quot;,track);
				// start polling interval (self-calling timeout) to compare mouse coordinates over time
				if (ob.hoverIntent_s != 1) { ob.hoverIntent_t = setTimeout( function(){compare(ev,ob);} , cfg.interval );}
&nbsp;
			// else e.type == &quot;onmouseout&quot;
			} else {
				// unbind expensive mousemove event
				$(ob).unbind(&quot;mousemove&quot;,track);
				// if hoverIntent state is true, then call the mouseOut function after the specified delay
				if (ob.hoverIntent_s == 1) { ob.hoverIntent_t = setTimeout( function(){delay(ev,ob);} , cfg.timeout );}
			}
		};
&nbsp;
		// bind the function to the two event listeners
		return this.mouseover(handleHover).mouseout(handleHover);
	};
&nbsp;
})(jQuery);
&nbsp;
//]]&gt;
&lt;/script&gt;
&lt;script type='text/javascript'&gt;
//&lt;![CDATA[
&nbsp;
/*
 * Superfish v1.4.8 - jQuery menu widget
 * Copyright (c) 2008 Joel Birch
 *
 * Dual licensed under the MIT and GPL licenses:
 * 	http://www.opensource.org/licenses/mit-license.php
 * 	http://www.gnu.org/licenses/gpl.html
 *
 * CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
 */
&nbsp;
;(function($){
	$.fn.superfish = function(op){
&nbsp;
		var sf = $.fn.superfish,
			c = sf.c,
			$arrow = $(['&lt;span class=&quot;',c.arrowClass,'&quot;&gt; &amp;#187;&lt;/span&gt;'].join('')),
			over = function(){
				var $$ = $(this), menu = getMenu($$);
				clearTimeout(menu.sfTimer);
				$$.showSuperfishUl().siblings().hideSuperfishUl();
			},
			out = function(){
				var $$ = $(this), menu = getMenu($$), o = sf.op;
				clearTimeout(menu.sfTimer);
				menu.sfTimer=setTimeout(function(){
					o.retainPath=($.inArray($$[0],o.$path)&gt;-1);
					$$.hideSuperfishUl();
					if (o.$path.length &amp;&amp; $$.parents(['li.',o.hoverClass].join('')).length&lt;1){over.call(o.$path);}
				},o.delay);	
			},
			getMenu = function($menu){
				var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
				sf.op = sf.o[menu.serial];
				return menu;
			},
			addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };
&nbsp;
		return this.each(function() {
			var s = this.serial = sf.o.length;
			var o = $.extend({},sf.defaults,op);
			o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
				$(this).addClass([o.hoverClass,c.bcClass].join(' '))
					.filter('li:has(ul)').removeClass(o.pathClass);
			});
			sf.o[s] = sf.op = o;
&nbsp;
			$('li:has(ul)',this)[($.fn.hoverIntent &amp;&amp; !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() {
				if (o.autoArrows) addArrow( $('&gt;a:first-child',this) );
			})
			.not('.'+c.bcClass)
				.hideSuperfishUl();
&nbsp;
			var $a = $('a',this);
			$a.each(function(i){
				var $li = $a.eq(i).parents('li');
				$a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});
			});
			o.onInit.call(this);
&nbsp;
		}).each(function() {
			var menuClasses = [c.menuClass];
			if (sf.op.dropShadows  &amp;&amp; !($.browser.msie &amp;&amp; $.browser.version &lt; 7)) menuClasses.push(c.shadowClass);
			$(this).addClass(menuClasses.join(' '));
		});
	};
&nbsp;
	var sf = $.fn.superfish;
	sf.o = [];
	sf.op = {};
	sf.IE7fix = function(){
		var o = sf.op;
		if ($.browser.msie &amp;&amp; $.browser.version &gt; 6 &amp;&amp; o.dropShadows &amp;&amp; o.animation.opacity!=undefined)
			this.toggleClass(sf.c.shadowClass+'-off');
		};
	sf.c = {
		bcClass     : 'sf-breadcrumb',
		menuClass   : 'sf-js-enabled',
		anchorClass : 'sf-with-ul',
		arrowClass  : 'sf-sub-indicator',
		shadowClass : 'sf-shadow'
	};
	sf.defaults = {
		hoverClass	: 'sfHover',
		pathClass	: 'overideThisToUse',
		pathLevels	: 1,
		delay		: 800,
		animation	: {opacity:'show'},
		speed		: 'normal',
		autoArrows	: true,
		dropShadows : true,
		disableHI	: false,		// true disables hoverIntent detection
		onInit		: function(){}, // callback functions
		onBeforeShow: function(){},
		onShow		: function(){},
		onHide		: function(){}
	};
	$.fn.extend({
		hideSuperfishUl : function(){
			var o = sf.op,
				not = (o.retainPath===true) ? o.$path : '';
			o.retainPath = false;
			var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
					.find('&gt;ul').hide().css('visibility','hidden');
			o.onHide.call($ul);
			return this;
		},
		showSuperfishUl : function(){
			var o = sf.op,
				sh = sf.c.shadowClass+'-off',
				$ul = this.addClass(o.hoverClass)
					.find('&gt;ul:hidden').css('visibility','visible');
			sf.IE7fix.call($ul);
			o.onBeforeShow.call($ul);
			$ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
			return this;
		}
	});
&nbsp;
})(jQuery);
&nbsp;
//]]&gt;
&lt;/script&gt;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&lt;script&gt; 
&nbsp;
    $(document).ready(function(){ 
        $(&amp;quot;ul.menu-secondary&amp;quot;).superfish({ 
            pathClass:  &amp;#39;current&amp;#39; 
        }); 
    }); 
&nbsp;
&lt;/script&gt;</pre></td></tr></table></div>

<p><strong>3. El CSS<br />
</strong></p>
<p>Pega, justo antes de <strong>]]&gt;&lt;/b:skin&gt;</strong>, los estilos del menú. Podrás notar que no hay ninguna imagen, así que sólo será cosa de cambiar los <strong><a href="http://html-color-codes.info/codigos-de-colores-hexadecimales/" title="Colores hexadecimales" rel="nofollow">colores hexadecimales</a></strong> a tu gusto (y quizás una que otra propiedad) una vez que hayas incluido el menú.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
</pre></td><td class="code"><pre class="language" style="font-family:monospace;">/* SUPERFISH MENU */
&nbsp;
.menus,.menus *{margin:0;padding:0;list-style:none;list-style-type:none;}
.menus ul{position:absolute;top:-999em;100%;}
.menus ul li{width:100%}
.menus li:hover{visibility:inherit}
.menus li{float:left;position:relative}
.menus a{display:block;position:relative}
.menus li:hover ul,.menus li.sfHover ul{left:0;top:100%;z-index:99}
.menus li:hover li ul,.menus li.sfHover li ul{top:-999em}
.menus li li:hover ul,.menus li li.sfHover ul{left:100%;top:0}
.menus li li:hover li ul,.menus li li.sfHover li ul{top:-999em}
.menus li li li:hover ul,.menus li li li.sfHover ul{left:100%;top:0}
.sf-shadow ul{padding:0 8px 9px 0;-moz-border-radius-bottomleft:17px;-moz-border-radius-topright:17px;-webkit-border-top-right-radius:17px;-webkit-border-bottom-left-radius:17px}
.menus .sf-shadow ul.sf-shadow-off{background:transparent}
.menu-secondary-wrap{padding:0;margin:0;position:relative;height:40px;z-index:300;background: #F1F1F1; width: 100%;}
.menu-secondary{height:40px}
.menu-secondary ul{min-width:160px}
.menu-secondary li a{color:#1B1A1A;padding:13px 15px 12px 15px;text-decoration:none;text-transform:uppercase;font:bold 12px Arial,Helvetica,Sans-serif; border-right: 1px solid #FFF;}
.menu-secondary li a:hover,.menu-secondary li a:active,.menu-secondary li a:focus,.menu-secondary li:hover &gt; a,.menu-secondary li.current-cat &gt; a,.menu-secondary li.current_page_item &gt; a,.menu-secondary li.current-menu-item &gt; a{color:#FFF;background: #C3C3C3;outline:0;}
.menu-secondary li li a{color:#fff;background:#969696;padding:10px 15px;text-transform:none;font-weight:normal; border-right: 0;}
.menu-secondary li li a:hover,.menu-secondary li li a:active,.menu-secondary li li a:focus,.menu-secondary li li:hover &gt; a,.menu-secondary li li.current-cat &gt; a,.menu-secondary li li.current_page_item &gt; a,.menu-secondary li li.current-menu-item &gt; a{color:#fff;background:#B4B4B4;outline:0}
.menu-secondary a.sf-with-ul{padding-right:26px;min-width:1px}
.menu-secondary .sf-sub-indicator{position:absolute;display:block;overflow:hidden;right:0;top:0;padding:10px 13px 0 0}
.menu-secondary li li .sf-sub-indicator{padding:6px 13px 0 0}</pre></td></tr></table></div>

<p><strong>4. El HTML</strong></p>
<p>Copia el siguiente código bajo la cabecera de tu blog, o antes de ésta. Para copiar bajo la cabecera, debes buscar<strong> &lt;/header&gt; </strong>en las plantillas nuevas y poner el códijo justo debajo. En las plantillas más antiguas, deberás poner el código justo antes de <strong>&#160;&#160; &lt;div id=&#8217;content-wrapper&#8217;&gt;</strong>.</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
</pre></td><td class="code"><pre class="language" style="font-family:monospace;">&lt;div class='menu-secondary-wrap'&gt;
&lt;ul class='menus menu-secondary'&gt;
&lt;li&gt;&lt;a href='/'&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='#'&gt;Business&lt;/a&gt;
&lt;ul class='children'&gt;
&lt;li&gt;&lt;a href='#'&gt;Internet&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='#'&gt;Market&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='#'&gt;Stock&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href='#'&gt;Downloads&lt;/a&gt;
&lt;ul class='children'&gt;
&lt;li&gt;&lt;a href='#'&gt;Dvd&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='#'&gt;Games&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='#'&gt;Software&lt;/a&gt;
&lt;ul class='children'&gt;
&lt;li&gt;&lt;a href='#'&gt;Office&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href='#'&gt;Parent Category&lt;/a&gt;
&lt;ul class='children'&gt;
&lt;li&gt;&lt;a href='#'&gt;Child Category 1&lt;/a&gt;
&lt;ul class='children'&gt;
&lt;li&gt;&lt;a href='#'&gt;Sub Child Category 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='#'&gt;Sub Child Category 2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='#'&gt;Sub Child Category 3&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href='#'&gt;Child Category 2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='#'&gt;Child Category 3&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='#'&gt;Child Category 4&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href='#'&gt;Featured&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='#'&gt;Health&lt;/a&gt;
&lt;ul class='children'&gt;
&lt;li&gt;&lt;a href='#'&gt;Childcare&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='#'&gt;Doctors&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;&lt;a href='#'&gt;music&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href='#'&gt;politics&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;</pre></td></tr></table></div>

<p>Ahora sólo queda modificar los enlaces manualmente, reemplazando los textos ancla y los signos gato (<strong>#</strong>) por tus links con <strong>http://</strong>.</p>
<h3><strong>Finalmente&#8230;</strong></h3>
<p>Puedes hacer las modificaciones que quieras en el CSS y el HTML de tu menú. No es muy complicado, y sólo depende de tu creatividad.<br />
Lo bueno de un <strong>menú desplegable</strong> con jerarquías, es que logra una mayor organización en tu blog. Lo único malo que tiene, es que para que funcione en Blogger todos los cambios los tienes que hacer de forma manual.</p>


<h3>Posts relacionados</h3><ul><li><a href='http://chicablogger.com/crear-un-menu-con-botones-con-una-sola-imagen/' rel='bookmark' title='Permanent Link: Crear un menú de botones con una sola imagen'>Crear un menú de botones con una sola imagen</a></li><li><a href='http://chicablogger.com/incorporar-jquery-tiptip-en-blogger/' rel='bookmark' title='Permanent Link: Incorporar jQuery TipTip en Blogger'>Incorporar jQuery TipTip en Blogger</a></li><li><a href='http://chicablogger.com/pure-css-menu-generador-de-menus-desplegables-sin-javascript/' rel='bookmark' title='Permanent Link: Pure CSS Menu: Generador de menús desplegables sin javascript'>Pure CSS Menu: Generador de menús desplegables sin javascript</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://chicablogger.com/menu-desplegable-con-jquery-superfish-en-blogger/feed/</wfw:commentRss>
		<slash:comments>17</slash:comments>
		</item>
		<item>
		<title>Añadir enlaces externos al menú de páginas de Blogger</title>
		<link>http://chicablogger.com/anadir-enlaces-externos-al-menu-de-paginas-de-blogger/</link>
		<comments>http://chicablogger.com/anadir-enlaces-externos-al-menu-de-paginas-de-blogger/#comments</comments>
		<pubDate>Tue, 16 Aug 2011 09:50:43 +0000</pubDate>
		<dc:creator>Claudia</dc:creator>
				<category><![CDATA[Blogger]]></category>
		<category><![CDATA[Menú]]></category>
		<category><![CDATA[pagelist]]></category>
		<category><![CDATA[páginas]]></category>

		<guid isPermaLink="false">http://chicablogger.com/?p=4528</guid>
		<description><![CDATA[Muchas personas que usan Blogger me han preguntado cómo hago para poner enlaces a mis cuentas de Twitter y Facebook en el menú. Solía responder que uso WordPress, o que pueden reemplazar un widget de tipo &#8220;PageList&#8221; (páginas) por un &#8220;LinkList&#8221; (lista de enlaces). Ello aún suena un poco complicado si se trata de retocar [...]

<h3>Posts relacionados</h3><ul><li><a href='http://chicablogger.com/pure-css-menu-generador-de-menus-desplegables-sin-javascript/' rel='bookmark' title='Permanent Link: Pure CSS Menu: Generador de menús desplegables sin javascript'>Pure CSS Menu: Generador de menús desplegables sin javascript</a></li><li><a href='http://chicablogger.com/menu-desplegable-con-jquery-superfish-en-blogger/' rel='bookmark' title='Permanent Link: Menú desplegable con jQuery Superfish en Blogger'>Menú desplegable con jQuery Superfish en Blogger</a></li><li><a href='http://chicablogger.com/sencilla-opcion-para-proteger-los-enlaces-del-disenador-en-temas-wordpress/' rel='bookmark' title='Permanent Link: Sencilla opción para proteger los enlaces del diseñador en Temas WordPress'>Sencilla opción para proteger los enlaces del diseñador en Temas WordPress</a></li></ul>]]></description>
			<content:encoded><![CDATA[<p>Muchas personas que usan Blogger me han preguntado cómo hago para <strong>poner enlaces a mis cuentas de Twitter y Facebook en el menú</strong>. Solía responder que uso WordPress, o que pueden reemplazar un widget de tipo &#8220;<strong>PageList</strong>&#8221; (páginas) por un &#8220;<strong>LinkList</strong>&#8221; (lista de enlaces). Ello aún suena un poco complicado si se trata de retocar el código, especialmente para quienes comienzan con un blog.</p>
<p>La creación de <strong>páginas estáticas de Blogger</strong> siempre fue una de las funciones más esperadas. Sin embargo, el widget típico de <strong>Páginas</strong> sólo permitía mostrar las páginas del blog. Ello, por un lado, facilitaba enormemente el trabajo de los usuarios, al no tener que hacer nada para mostrar enlaces a sus páginas automáticamente, pero hacía extrañar las listas típicas de menú en HTML, que permiten enlazar lo que queramos.</p>
<p>Para quienes quieren tener un solo menú principal en su blog de Blogger que muestre páginas y enlaces externos, les tengo una buena noticia: <a href="http://blog.louisgray.com/2011/07/blogger-enables-static-pages-to-link-to.html" rel="nofollow"><strong>Luis Gray</strong> </a>anuncia que ya es posible <strong>añadir enlaces externos en un widget de páginas de Blogger</strong>.</p>
<h3><strong>Cómo hacerlo, paso por paso:</strong></h3>
<p><strong>1.</strong> En Diseño/Elementos de la página, añadir un widget de <strong>Páginas</strong> en tu plantilla Blogger. Si ya lo tienes añadido, sáltate este paso.</p>
<p><strong>2.</strong> Ve a <a href="http://draft.blogger.com/" rel="nofollow"><strong>Blogger in Draft</strong></a>, que te permite probar las nuevas funciones de Blogger antes de ser lanzadas públicamente. Una vez allí, accede al blog donde quieras añadir algún enlace externo, y ve a <strong>Páginas</strong> /<strong>Página nueva</strong> / <strong>Dirección Web</strong>.</p>
<p><img src="http://chicablogger.com/wp-content/uploads/2011/08/Blogger-in-Draft.jpg" alt="" title="Blogger-in-Draft" width="500" height="279" class="aligncenter size-full wp-image-4530" /></p>
<p>Ahora, sólo agrega tu enlace, como se muestra a continuación:</p>
<p><img src="http://chicablogger.com/wp-content/uploads/2011/08/paginas-blogger.jpg" alt="" title="paginas-blogger" width="500" height="228" class="aligncenter size-full wp-image-4531" /></p>
<p>Después de ello, el enlace será añadido automáticamente a tu menú de Páginas, y podrás moverlo a la ubicación que desees.</p>


<h3>Posts relacionados</h3><ul><li><a href='http://chicablogger.com/pure-css-menu-generador-de-menus-desplegables-sin-javascript/' rel='bookmark' title='Permanent Link: Pure CSS Menu: Generador de menús desplegables sin javascript'>Pure CSS Menu: Generador de menús desplegables sin javascript</a></li><li><a href='http://chicablogger.com/menu-desplegable-con-jquery-superfish-en-blogger/' rel='bookmark' title='Permanent Link: Menú desplegable con jQuery Superfish en Blogger'>Menú desplegable con jQuery Superfish en Blogger</a></li><li><a href='http://chicablogger.com/sencilla-opcion-para-proteger-los-enlaces-del-disenador-en-temas-wordpress/' rel='bookmark' title='Permanent Link: Sencilla opción para proteger los enlaces del diseñador en Temas WordPress'>Sencilla opción para proteger los enlaces del diseñador en Temas WordPress</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://chicablogger.com/anadir-enlaces-externos-al-menu-de-paginas-de-blogger/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Pure CSS Menu: Generador de menús desplegables sin javascript</title>
		<link>http://chicablogger.com/pure-css-menu-generador-de-menus-desplegables-sin-javascript/</link>
		<comments>http://chicablogger.com/pure-css-menu-generador-de-menus-desplegables-sin-javascript/#comments</comments>
		<pubDate>Wed, 27 Jan 2010 21:03:00 +0000</pubDate>
		<dc:creator>Claudia</dc:creator>
				<category><![CDATA[Blogger]]></category>
		<category><![CDATA[Herramientas]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Menú]]></category>

		<guid isPermaLink="false">http://chicablogger.com/?p=4214</guid>
		<description><![CDATA[Jebú me comentaba sobre Pure CSS Menu, un sitio para crear menús desplegables (drop down) únicamente con CSS, y con la misma técnica usada por Janko Jovanovic. Aunque el sitio está en inglés, es intuitivo y simple de usar, especialmente para quienes tienen pocos conocimientos de CSS y HTML. Puedes elegir una plantilla, cambiar los [...]

<h3>Posts relacionados</h3><ul><li><a href='http://chicablogger.com/menus-css-desplegables-sin-javascript/' rel='bookmark' title='Permanent Link: Menús CSS desplegables sin javascript'>Menús CSS desplegables sin javascript</a></li><li><a href='http://chicablogger.com/9-sitios-para-descargar-menus-css/' rel='bookmark' title='Permanent Link: 9 sitios para descargar menús CSS'>9 sitios para descargar menús CSS</a></li><li><a href='http://chicablogger.com/css-sprit-es-un-generador-de-css-sprites/' rel='bookmark' title='Permanent Link: CSS-sprit.es: Un generador de CSS sprites'>CSS-sprit.es: Un generador de CSS sprites</a></li></ul>]]></description>
			<content:encoded><![CDATA[<p><a href="http://dedomojado.blogspot.com/" rel="nofollow"><strong>Jebú</strong></a> me comentaba sobre <strong><a href="http://purecssmenu.com/" rel="nofollow">Pure CSS Menu</a></strong>, un sitio para <strong>crear menús desplegables (drop down) únicamente con CSS</strong>, y con la misma <a href="http://chicablogger.com/menus-css-desplegables-sin-javascript/" rel="nofollow"><strong>técnica</strong></a> usada por Janko Jovanovic.</p>
<p>Aunque el sitio está en inglés, es intuitivo y simple de usar, especialmente para quienes tienen pocos conocimientos de CSS y HTML. Puedes elegir una plantilla, cambiar los bordes, colores, estilo de fuente, configurar enlaces con pocos clicks y descargar luego el paquete zip hacia tu computador.</p>
<p><img src="http://chicablogger.com/wp-content/uploads/2010/01/pure-css-menu.jpg" alt="" title="pure-css-menu" width="450" height="273" class="aligncenter size-full wp-image-4225" /></p>
<h3><strong>Cómo instalar un menú (en Blogger)</strong></h3>
<p>El fichero &#8220;<strong>purecssmenu-com.zip</strong>&#8221; contiene un archivo HTML y una carpeta con imágenes. Su intalación no es complicada:</p>
<p>1. Abrir el archivo <strong>purecssmenu.html</strong>. Éste se abre en una nueva pestaña de tu navegador.</p>
<p>2. Una vez abierta la pestaña, hacer click sobre ella con el botón derecho de tu mouse, y seleccionar la opción &#8220;<strong>Ver código fuente de la página</strong>&#8220;. Esos son los correspondientes códigos a ser pegados en la plantilla.</p>
<p><img src="http://chicablogger.com/wp-content/uploads/2010/01/dropdown-menu.jpg" alt="" title="dropdown-menu" width="450" height="240" class="aligncenter size-full wp-image-4226" /><br />
3. El código <strong>CSS</strong> comprendido entre las etiquetas <strong>&lt;style&gt;</strong> y <strong>&lt;/style&gt;</strong> (excluidas éstas), debe ser pegado en la<strong> Edición de HTML</strong> de la plantilla, justo antes de <strong>]]&gt;&lt;/b:skin&gt;</strong>. Guardar los cambios.</p>
<p>4. El código<strong> HTML</strong> comprendido entre los comentarios <span style="color:#008000">&lt;!&#8211; Start PureCSSMenu.com MENU &#8211;&gt;</span> y <span style="color:#008000">&lt;!&#8211; End PureCSSMenu.com MENU &#8211;&gt;</span> debe ser copiado antes o después del cierre del div &#8216;<strong>header-wrapper</strong>&#8216; (en la <em>plantilla Mínima de Blogger</em>), reemplazando las dobles comillas por comillas simples (<strong>&#8216;</strong>). Una manera más simple de hacerlo, es creando un nuevo <em>gadget de HTML/Javascript</em> desde <strong>Diseño</strong> /<strong>Elementos de la página</strong>, en la sección llamada &#8220;<strong>crosscol-wrapper</strong>&#8221; que está justo bajo la cabecera y copypasteando el código allí. Esto último facilita su edición en cualquier momento.</p>
<p>5. Como últimos pasos, queda hospedar en tu <strong>hosting</strong> las imágenes contenidas en la carpeta <strong>images</strong> y reemplazar los enlaces en el CSS, justo donde se indica; y estilizar un poco el menú para integrarlo a la plantilla. Para ello, puedes modificar totalmente el CSS. En mi plantilla de <a href="http://purecssmenutest.blogspot.com/" rel="nofollow"><strong>pruebas</strong></a>, le di al contenedor #crosscol-wrapper un ancho de 100%, usando el mismo color del fondo que tenía originalmente mi menú:</p>

<div class="wp_syntax"><div class="code"><pre class="language" style="font-family:monospace;">#crosscol-wrapper { background:#E62E6B; width: 100%;}</pre></div></div>



<h3>Posts relacionados</h3><ul><li><a href='http://chicablogger.com/menus-css-desplegables-sin-javascript/' rel='bookmark' title='Permanent Link: Menús CSS desplegables sin javascript'>Menús CSS desplegables sin javascript</a></li><li><a href='http://chicablogger.com/9-sitios-para-descargar-menus-css/' rel='bookmark' title='Permanent Link: 9 sitios para descargar menús CSS'>9 sitios para descargar menús CSS</a></li><li><a href='http://chicablogger.com/css-sprit-es-un-generador-de-css-sprites/' rel='bookmark' title='Permanent Link: CSS-sprit.es: Un generador de CSS sprites'>CSS-sprit.es: Un generador de CSS sprites</a></li></ul>]]></content:encoded>
			<wfw:commentRss>http://chicablogger.com/pure-css-menu-generador-de-menus-desplegables-sin-javascript/feed/</wfw:commentRss>
		<slash:comments>25</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Served from: chicablogger.com @ 2012-05-23 10:05:20 -->
