<?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>Xyberneticos &#187; Tutoriales</title>
	<atom:link href="http://xyberneticos.com/index.php/category/tutoriales-y-manuales/feed/" rel="self" type="application/rss+xml" />
	<link>http://xyberneticos.com</link>
	<description>Desarrollo Web, Diseño, Recursos, Wordpress, Themes</description>
	<lastBuildDate>Fri, 04 Nov 2011 14:10:38 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>wordpress &#8211; Cómo usar los custom fields</title>
		<link>http://xyberneticos.com/index.php/2009/09/28/wordpress-como-usar-los-custom-fields/</link>
		<comments>http://xyberneticos.com/index.php/2009/09/28/wordpress-como-usar-los-custom-fields/#comments</comments>
		<pubDate>Mon, 28 Sep 2009 03:22:45 +0000</pubDate>
		<dc:creator>Nikko</dc:creator>
				<category><![CDATA[Tutoriales]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[tips]]></category>

		<guid isPermaLink="false">http://xyberneticos.com/index.php/2009/09/28/wordpress-como-usar-los-custom-fields/</guid>
		<description><![CDATA[Si buscaban desde hace tiempo información sobre los custom fields ó campos personalizados de wordpress, donde pueden aprender como funcionan y como utilizarlos, InfextedFX (estrenando nuevo diseño), acaba de publicar un fabuloso tutorial sobre cómo usar los custom fields de nuestros posts WordPress. Si aun no conocían como funcionaban, es un buen momento para tomarse [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center"><img src="http://xyberneticos.com/wp-content/uploads/2009/09/tutoinfectedfx.jpg" alt="tutoinfectedfx.jpg" /></p>
<p>Si buscaban desde hace tiempo información sobre los custom fields ó campos personalizados de wordpress, donde pueden aprender como funcionan y  como utilizarlos, <a href="http://infectedfx.net/como-usar-los-custom-fields-en-wordpress/2009/" target="_blank">InfextedFX</a> (estrenando nuevo diseño), acaba de publicar un fabuloso tutorial sobre <a href="http://infectedfx.net/como-usar-los-custom-fields-en-wordpress/2009/" target="_blank">cómo usar los custom fields</a> de nuestros posts WordPress. Si aun no conocían como funcionaban, es un buen momento para tomarse unos minutos a leer el tutorial, e indagar  en los ejemplos presentados.</p>
<p>Enlace <a href="http://infectedfx.net/como-usar-los-custom-fields-en-wordpress/2009/" target="_blank">Cómo usar los custom fields</a></p>
]]></content:encoded>
			<wfw:commentRss>http://xyberneticos.com/index.php/2009/09/28/wordpress-como-usar-los-custom-fields/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Paginar un largo artículo</title>
		<link>http://xyberneticos.com/index.php/2008/11/30/paginar-un-largo-articulo/</link>
		<comments>http://xyberneticos.com/index.php/2008/11/30/paginar-un-largo-articulo/#comments</comments>
		<pubDate>Mon, 01 Dec 2008 01:36:38 +0000</pubDate>
		<dc:creator>Nikko</dc:creator>
				<category><![CDATA[Diseño Web]]></category>
		<category><![CDATA[Tutoriales]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://xyberneticos.com/index.php/2008/11/30/paginar-un-largo-articulo/</guid>
		<description><![CDATA[Puede que en algún momento hayan publicado un tutorial en sus blog, y por lo general siempre que se intenta explicar cada pasó detalladamente, nos lleva a escribir un artículo más largo de lo que pensábamos. Pero con WordPress nada es difícil de solucionar, y una buena idea sería paginar estas entradas individuales o bien [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center"><img src="http://xyberneticos.com/wp-content/uploads/2008/11/pagesingle.jpg" alt="pagesingle.jpg" /></p>
<p>Puede que en algún momento hayan publicado un tutorial en sus blog, y por lo general siempre que se intenta explicar cada pasó detalladamente, nos lleva a escribir un artículo más largo de lo que pensábamos. Pero con WordPress nada es difícil de solucionar, y una buena idea sería paginar estas entradas individuales o bien “page” independientes del contenido.  Como lo lograremos? Muy simple, añadiendo el siguiente texto cada vez que queramos  cortar o pausar nuestra entrada.</p>
<p style="text-align: center"><img src="http://xyberneticos.com/wp-content/uploads/2008/11/pagesingle2.jpg" alt="pagesingle2.jpg" /></p>
<p><strong>Etiqueta requerida en tu plantilla:</strong><br />
La mayoría de los themes no tienen la etiqueta en el lugar deseado, si la paginación no aparece en la parte inferior de sus artículos o page, deberás editar la plantilla.<br />
Abrir los archivos <em><strong>single.php</strong></em> y <em><strong>page.php</strong></em> con el editor de texto que usas habitualmente  y busque la línea siguiente:</p>
<div class="igBar"><span id="lphp-3"><a href="#" onclick="javascript:showPlainTxt('php-3'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">PHP:</span>
<div id="php-3">
<div class="php"><span style="color:#000000; font-weight:bold;">&lt;?php</span> the_content<span style="color:#234365; font-weight:bold;">&#40;</span><span style="color:#234365;">'Leer el resto de esta entrada &amp;raquo;'</span><span style="color:#234365; font-weight:bold;">&#41;</span>; <span style="color:#000000; font-weight:bold;">?&gt;</span></div>
</div>
</div>
<p>
Reemplazar con:</p>
<div class="igBar"><span id="lphp-4"><a href="#" onclick="javascript:showPlainTxt('php-4'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">PHP:</span>
<div id="php-4">
<div class="php"><span style="color:#000000; font-weight:bold;">&lt;?php</span> the_content<span style="color:#234365; font-weight:bold;">&#40;</span><span style="color:#234365;">'Leer el resto de esta entrada &amp;raquo;'</span><span style="color:#234365; font-weight:bold;">&#41;</span>; <span style="color:#000000; font-weight:bold;">?&gt;</span><br />
<span style="color:#000000; font-weight:bold;">&lt;?php</span> link_pages<span style="color:#234365; font-weight:bold;">&#40;</span><span style="color:#234365;">'&lt;p&gt;Pages: '</span>, <span style="color:#234365;">'&lt;/p&gt;'</span>, <span style="color:#234365;">'next'</span>, <span style="color:#234365;">' &amp;raquo;'</span>, <span style="color:#234365;">'&amp;laquo; '</span><span style="color:#234365; font-weight:bold;">&#41;</span>; <span style="color:#000000; font-weight:bold;">?&gt;</span></div>
</div>
</div>
<p>
Fuente <a href="http://mywordpressdesign.com/tutorial-paginate-a-long-article/">mywordpressdesign</a></p>
]]></content:encoded>
			<wfw:commentRss>http://xyberneticos.com/index.php/2008/11/30/paginar-un-largo-articulo/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Tabs usando jQuery by nettuts</title>
		<link>http://xyberneticos.com/index.php/2008/08/14/tabs-usando-jquery-by-nettuts/</link>
		<comments>http://xyberneticos.com/index.php/2008/08/14/tabs-usando-jquery-by-nettuts/#comments</comments>
		<pubDate>Thu, 14 Aug 2008 03:17:20 +0000</pubDate>
		<dc:creator>Nikko</dc:creator>
				<category><![CDATA[Diseño Web]]></category>
		<category><![CDATA[Recursos Web]]></category>
		<category><![CDATA[Tutoriales]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://xyberneticos.com/index.php/2008/08/14/tabs-usando-jquery-by-nettuts/</guid>
		<description><![CDATA[Para aquellos que deseaban crear TABS para sus blogs con efectos realmente llamativos gracias a la utilización de bibliotecas como jQuery en ellos, nettuts ha preparado un extraordinario tutorial muy simple de seguir, y con el cual aprenderan a montarlo y conocer como diseñarlos desde cero. También podrán descargar los archivos correspondientes al demo que [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center"><img src="http://xyberneticos.com/wp-content/uploads/2008/08/tabsj.jpg" alt="tabsj.jpg" /></p>
<p>Para aquellos que deseaban crear TABS para sus blogs con efectos realmente llamativos gracias a la utilización de bibliotecas como jQuery en ellos, <a href="http://nettuts.com/javascript-ajax/create-a-tabbed-interface-using-jquery/">nettuts</a> ha preparado un extraordinario tutorial muy simple de seguir, y con el cual aprenderan a montarlo y conocer como diseñarlos desde cero. También podrán descargar los archivos correspondientes al demo que podremos ver funcionando. No tengo dudas, que les agradara.</p>
<p>Ver <a href="http://nettuts.s3.amazonaws.com/042_jQueryUITabs/demo/index.html">Demo </a>- <a href="http://nettuts.s3.amazonaws.com/042_jQueryUITabs/source.zip">Descarga </a>- Mas info <a href="http://nettuts.com/javascript-ajax/create-a-tabbed-interface-using-jquery/">Create A Tabbed Interface Using jQuery</a></p>
]]></content:encoded>
			<wfw:commentRss>http://xyberneticos.com/index.php/2008/08/14/tabs-usando-jquery-by-nettuts/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Dar estilo a tus Comentarios WordPress</title>
		<link>http://xyberneticos.com/index.php/2008/07/08/dar-estilo-a-tus-comentarios-wordpress/</link>
		<comments>http://xyberneticos.com/index.php/2008/07/08/dar-estilo-a-tus-comentarios-wordpress/#comments</comments>
		<pubDate>Tue, 08 Jul 2008 04:33:27 +0000</pubDate>
		<dc:creator>Nikko</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Diseño Web]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[Tutoriales]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://xyberneticos.com/index.php/2008/07/08/dar-estilo-a-tus-comentarios-wordpress/</guid>
		<description><![CDATA[Si piensas rediseñar por completo tu blog, no estaría nada mal, dedicar tiempo a elaborar cosas creativas para los comentarios de tu blog. Partiendo de esa idea, encuentro en darrenhoyt, algunos prácticos ejemplos que podrás utilizar como base, donde se incluyen inclusive ejemplos de códigos y la posibilidad de los PSD originales. Ampliar info y [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center"><img src="http://xyberneticos.com/wp-content/uploads/2008/07/commentsestilo.jpg" alt="commentsestilo.jpg" /></p>
<p>Si piensas rediseñar por completo tu blog, no estaría nada mal, dedicar tiempo a elaborar cosas creativas para los comentarios de tu blog. Partiendo de esa idea, encuentro en <a href="http://www.darrenhoyt.com/2007/08/18/styling-your-wordpress-comments/">darrenhoyt</a>, algunos prácticos ejemplos que podrás utilizar como base, donde se incluyen inclusive ejemplos de códigos y la posibilidad de los PSD originales.<br />
Ampliar info y mas ejemplos <a href="http://www.darrenhoyt.com/2007/08/18/styling-your-wordpress-comments/">Styling Your WordPress Comments</a><br />
Lo primero será, editar tu archivo "comments.php" de tu theme wp:</p>
<div class="igBar"><span id="lphp-7"><a href="#" onclick="javascript:showPlainTxt('php-7'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">PHP:</span>
<div id="php-7">
<div class="php">&lt;ol <span style="color:#000000; font-weight:bold;">class</span>=<span style="color:#234365;">"commentlist"</span>&gt;<br />
<span style="color:#000000; font-weight:bold;">&lt;?php</span> <span style="color:#666665;">foreach</span> <span style="color:#234365; font-weight:bold;">&#40;</span><span style="color:#6E8885;">$comments</span> <span style="color:#666665;">as</span> <span style="color:#6E8885;">$comment</span><span style="color:#234365; font-weight:bold;">&#41;</span> : <span style="color:#000000; font-weight:bold;">?&gt;</span><br />
&lt;li <span style="color:#000000; font-weight:bold;">&lt;?php</span> <a href="http://www.php.net/echo"><span style="color:#000066;">echo</span></a> <span style="color:#6E8885;">$oddcomment</span>; ?&gt;id=<span style="color:#234365;">"comment-&lt;?php comment_ID() ?&gt;"</span>&gt;<br />
&lt;div <span style="color:#000000; font-weight:bold;">class</span>=<span style="color:#234365;">"commenttext"</span>&gt;<br />
&lt;cite&gt;&lt;?php comment_author_link<span style="color:#234365; font-weight:bold;">&#40;</span><span style="color:#234365; font-weight:bold;">&#41;</span> ?&gt;&lt;/cite&gt;<br />
<span style="color:#000000; font-weight:bold;">&lt;?php</span> comment_text<span style="color:#234365; font-weight:bold;">&#40;</span><span style="color:#234365; font-weight:bold;">&#41;</span> <span style="color:#000000; font-weight:bold;">?&gt;</span><br />
&lt;span <span style="color:#000000; font-weight:bold;">class</span>=<span style="color:#234365;">"date"</span>&gt;&lt;img src=<span style="color:#234365;">"/images/commentlink.gif"</span> alt=<span style="color:#234365;">""</span> /&gt; &lt;a href=<span style="color:#234365;">"#comment-&lt;?php comment_ID() ?&gt;"</span> title=<span style="color:#234365;">""</span>&gt;&lt;?php comment_time<span style="color:#234365; font-weight:bold;">&#40;</span><span style="color:#234365; font-weight:bold;">&#41;</span> <span style="color:#000000; font-weight:bold;">?&gt;</span> on <span style="color:#000000; font-weight:bold;">&lt;?php</span> comment_date<span style="color:#234365; font-weight:bold;">&#40;</span><span style="color:#234365;">'n/j/y'</span><span style="color:#234365; font-weight:bold;">&#41;</span> ?&gt;&lt;/a&gt;&lt;/span&gt; <span style="color:#000000; font-weight:bold;">&lt;?php</span> edit_comment_link<span style="color:#234365; font-weight:bold;">&#40;</span><span style="color:#234365;">'edit'</span>,<span style="color:#234365;">'&amp;nbsp;&amp;nbsp;'</span>,<span style="color:#234365;">''</span><span style="color:#234365; font-weight:bold;">&#41;</span>; <span style="color:#000000; font-weight:bold;">?&gt;</span><br />
&lt;/div&gt;<br />
<span style="color:#000000; font-weight:bold;">&lt;?php</span> <span style="color:#666665;">if</span> <span style="color:#234365; font-weight:bold;">&#40;</span><span style="color:#6E8885;">$comment</span>-&gt;<span style="color:#375D81;">comment_approved</span> == <span style="color:#234365;">'0'</span><span style="color:#234365; font-weight:bold;">&#41;</span> : <span style="color:#000000; font-weight:bold;">?&gt;</span><br />
&lt;em&gt;Your comment is awaiting moderation.&lt;/em&gt;<br />
<span style="color:#000000; font-weight:bold;">&lt;?php</span> <span style="color:#666665;">endif</span>; <span style="color:#000000; font-weight:bold;">?&gt;</span><br />
&lt;/li&gt;<br />
<span style="color:#000000; font-weight:bold;">&lt;?php</span><br />
<span style="color:#008000;">/* Changes every other comment to a different class */</span><br />
<span style="color:#6E8885;">$oddcomment</span> = <span style="color:#234365; font-weight:bold;">&#40;</span> <a href="http://www.php.net/empty"><span style="color:#000066;">empty</span></a><span style="color:#234365; font-weight:bold;">&#40;</span> <span style="color:#6E8885;">$oddcomment</span> <span style="color:#234365; font-weight:bold;">&#41;</span> <span style="color:#234365; font-weight:bold;">&#41;</span> ? <span style="color:#234365;">'class=&quot;alt&quot; '</span> : <span style="color:#234365;">''</span>;?&gt;<br />
<span style="color:#000000; font-weight:bold;">&lt;?php</span> endforeach; <span style="color:#008000;">/* end for each comment */</span> <span style="color:#000000; font-weight:bold;">?&gt;</span><br />
&lt;/ol&gt;</div>
</div>
</div>
<p>
Un poco de estilo</p>
<div class="igBar"><span id="lcss-8"><a href="#" onclick="javascript:showPlainTxt('css-8'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">CSS:</span>
<div id="css-8">
<div class="css">ol<span style="color: #6666ff;">.commentlist </span><span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">margin</span>:<span style="color: #cc66cc;color:#800000;">0</span>;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">padding</span>:<span style="color: #cc66cc;color:#800000;">0</span>;<br />
&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></p>
<p><span style="color: #6666ff;">.commentlist </span>li <span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">margin-bottom</span>:8px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span>: #60360b <span style="color: #993333;">url</span><span style="color: #66cc66;">&#40;</span>http://www.yoursite.com/images/comment_arrows.gif<span style="color: #66cc66;">&#41;</span> <span style="color: #000000; font-weight: bold;">bottom</span> <span style="color: #993333;">no-repeat</span>;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">color</span>:#FFF;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">list-style</span>:<span style="color: #993333;">none</span>;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">width</span>:413px;<br />
&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></p>
<p><span style="color: #6666ff;">.commentlist </span><span style="color: #6666ff;">.commenttext </span><span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span>:<span style="color: #993333;">url</span><span style="color: #66cc66;">&#40;</span>http://www.yoursite.com/images/bg_paint.gif<span style="color: #66cc66;">&#41;</span> <span style="color: #993333;">no-repeat</span>;<br />
&nbsp; &nbsp; padding<span style="color: #3333ff;">:22px </span>22px 50px 22px;<br />
&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></p>
<p><span style="color: #6666ff;">.commentlist </span>cite <span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">display</span>:<span style="color: #993333;">block</span>;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">color</span>:#FFF;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">font-weight</span>:<span style="color: #993333;">bold</span>;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">text-transform</span>:<span style="color: #993333;">uppercase</span>;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">font-style</span>:<span style="color: #993333;">normal</span>;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span>:<span style="color: #993333;">url</span><span style="color: #66cc66;">&#40;</span>http://www.yoursite.com/images/bg_cite_arrows.gif<span style="color: #66cc66;">&#41;</span> <span style="color: #000000; font-weight: bold;">bottom</span> <span style="color: #993333;">repeat-x</span>;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">padding-bottom</span>:12px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">font-size</span>:<span style="color: #cc66cc;color:#800000;">1</span>.1em;<br />
&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></p>
<p><span style="color: #6666ff;">.commentlist </span>a:link, <span style="color: #6666ff;">.commentlist </span>a<span style="color: #3333ff;">:visited </span><span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">color</span>:#fff9b9;<br />
&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></p>
<p><span style="color: #6666ff;">.commentlist </span>a:hover, <span style="color: #6666ff;">.commentlist </span>a<span style="color: #3333ff;">:active </span><span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">color</span>:#FFF;<br />
&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></p>
<p><span style="color: #6666ff;">.commentlist </span><span style="color: #6666ff;">.date </span><span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span>:#930e27;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">padding</span>:3px;<br />
&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></p>
<p>li<span style="color: #6666ff;">.alt </span><span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span>:#836241 <span style="color: #993333;">url</span><span style="color: #66cc66;">&#40;</span>http://www.yoursite.com/images/comment_arrows_alt.gif<span style="color: #66cc66;">&#41;</span> <span style="color: #000000; font-weight: bold;">bottom</span> <span style="color: #993333;">no-repeat</span>;<br />
&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></p>
<p>li<span style="color: #6666ff;">.alt </span><span style="color: #6666ff;">.commenttext </span><span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span>:<span style="color: #993333;">url</span><span style="color: #66cc66;">&#40;</span>http://www.yoursite.com/images/bg_paint_alt.gif<span style="color: #66cc66;">&#41;</span> <span style="color: #993333;">no-repeat</span>;<br />
&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span>&nbsp; &nbsp;</p>
<p>li<span style="color: #6666ff;">.alt </span><span style="color: #6666ff;">.date </span><span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span>:#67421c;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">padding</span>:3px;<br />
&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</div>
</div>
<p>
<a href="http://www.darrenhoyt.com/downloads/comment_arrows.psd">Descarga PSD</a> original para este ejemplo  - Ampliar info y mas ejemplos <a href="http://www.darrenhoyt.com/2007/08/18/styling-your-wordpress-comments/">Styling Your WordPress Comments</a></p>
]]></content:encoded>
			<wfw:commentRss>http://xyberneticos.com/index.php/2008/07/08/dar-estilo-a-tus-comentarios-wordpress/feed/</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>Poner anuncios entre post</title>
		<link>http://xyberneticos.com/index.php/2008/06/26/poner-anuncios-entre-post/</link>
		<comments>http://xyberneticos.com/index.php/2008/06/26/poner-anuncios-entre-post/#comments</comments>
		<pubDate>Fri, 27 Jun 2008 02:17:04 +0000</pubDate>
		<dc:creator>Nikko</dc:creator>
				<category><![CDATA[Tutoriales]]></category>

		<guid isPermaLink="false">http://www.xyberneticos.com/index.php/2007/06/26/poner-anuncios-entre-post/</guid>
		<description><![CDATA[Creo que este post de infectedfx vendrá muy bien para seguir con el tema del post anterior sobre como adaptar de diferentes maneras los anuncios de Google Adsense en nuestros blog. En el tutorial de infectedfx veremos como insertar los anuncios después del post número "X", después de cada uno de los post, después del [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center;"><img src="http://www.xyberneticos.com/wp-content/uploads/2007/06/cg-inbetween.jpg" alt="cg-inbetween.jpg" /></p>
<p>Creo que <a href="http://www.infectedfx.net/poner-publicidad-entre-posts/2007/">este post</a> de infectedfx vendrá muy bien para seguir con el tema del post anterior sobre como adaptar de diferentes maneras los anuncios de Google Adsense en nuestros blog. En el tutorial de infectedfx veremos como insertar los anuncios después del post número "X", después de cada uno de los post, después del último post o visualizar el anuncio solo al ingresar al post. Y para hacerlo simple se utilizara el plugin CG-Inbetween, que nos permitirá lograr esto de una forma muy fácil.</p>
<p>Enlace <a href="http://www.infectedfx.net/poner-publicidad-entre-posts/2007/">Poner publicidad entre posts</a></p>
]]></content:encoded>
			<wfw:commentRss>http://xyberneticos.com/index.php/2008/06/26/poner-anuncios-entre-post/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>40 consejos y trucos WordPress para dar a tus proyectos aspectos realmente diferentes.</title>
		<link>http://xyberneticos.com/index.php/2008/06/22/40-consejos-y-trucos-wordpress-para-dar-a-tus-proyectos-aspectos-realmente-diferentes/</link>
		<comments>http://xyberneticos.com/index.php/2008/06/22/40-consejos-y-trucos-wordpress-para-dar-a-tus-proyectos-aspectos-realmente-diferentes/#comments</comments>
		<pubDate>Sun, 22 Jun 2008 03:54:49 +0000</pubDate>
		<dc:creator>Nikko</dc:creator>
				<category><![CDATA[Scripts]]></category>
		<category><![CDATA[Tutoriales]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Wp Plugin]]></category>

		<guid isPermaLink="false">http://xyberneticos.com/index.php/2008/06/22/40-consejos-y-trucos-wordpress-para-dar-a-tus-proyectos-aspectos-realmente-diferentes/</guid>
		<description><![CDATA[Si suelen buscar agradables consejos y técnicas las cuales luego puedan utilizar para mejorar sus themes wordpress o proyectos online basados en esta plataforma, les recomiendo este agradable articulo de Hongkiat, en el cual recopila los 40 tips y hacks WordPress mas buscados o con los cuales darás a tus proyectos aspectos realmente diferentes. Mas [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center"><img src="http://xyberneticos.com/wp-content/uploads/2008/06/wpicksk.jpg" alt="wpicksk.jpg" /></p>
<p>Si suelen buscar agradables consejos y técnicas las cuales luego puedan utilizar para mejorar sus themes wordpress o proyectos online basados en esta plataforma, les recomiendo este agradable articulo de <a href="http://www.hongkiat.com/blog/40-most-wanted-wordpress-tricks-and-hacks/" target="_blank">Hongkiat</a>, en el cual recopila  los <a href="http://www.hongkiat.com/blog/40-most-wanted-wordpress-tricks-and-hacks/" target="_blank">40 tips y hacks WordPress</a> mas buscados o con los cuales darás a tus proyectos aspectos realmente diferentes.</p>
<p>Mas info  <a href="http://www.hongkiat.com/blog/40-most-wanted-wordpress-tricks-and-hacks/" target="_blank">40+ Most Wanted WordPress Tricks and Hacks  </a></p>
<p>Algunos de ellos:</p>
<ul>
<li>Mostrar categorías en un menú horizontal desplegable, <a href="http://anthologyoi.com/wordpress/displaying-wordpress-categories-in-a-horizontal-dropdown-menu.html" rel="nofollow">ver cómo</a>.</li>
<li>Agregar Gravatar del autor de cada post, <a href="http://themeshaper.com/how-to-add-gravatars-for-the-post-author-in-wordpress/" rel="nofollow">ver cómo</a>.</li>
<li>Utilizar una página personalizada cómo página de inicio, <a href="http://bloggingexperiment.com/archives/wordpress-page-as-home-page.php" rel="nofollow">ver cómo</a>.</li>
<li>Poner la biografía del autor en cada post, <a href="http://hackwordpress.com/how-to-add-bio-info-to-wordpress-posts/" rel="nofollow">ver cómo</a>.</li>
<li>Mostrar los posts más recientes de una categoría en específico, <a href="http://www.readywpthemes.com/wordpress-recent-posts-from-specific-category/" rel="nofollow">ver cómo</a>.</li>
<li>Resaltar los comentarios del autor del post, <a href="http://www.mattcutts.com/blog/highlight-author-comments-wordpress/" rel="nofollow">ver cómo</a>.</li>
<li>Crear thumbnails (miniaturas) de una imágen de cada post y mostrarla, <a href="http://wordpressgarage.com/tips/giving-each-wordpress-post-a-thumbnail-and-display-the-thumbnail-on-the-home-page/" rel="nofollow">ver cómo</a>.</li>
<li>Crear y mostrar una imagen para una categoría, <a href="http://www.jtpratt.com/very-easy-wordpress-theme-hack-show-category-images/" rel="nofollow">ver cómo</a>.</li>
<li>Dar formato a las imágenes para que se muestren correctamente el los lectores de Feeds, <a href="http://www.pearsonified.com/2007/06/how-to-format-images-for-feed-readers.php" rel="nofollow">ver cómo</a>.</li>
<li>Crear un bonito botón para mostrar la fecha en WordPress, <a href="http://www.wpdesigner.com/2007/06/04/wordpress-date-button/" rel="nofollow">ver cómo</a>.</li>
<li>Ocultar anuncios para ciertos posts en particular, <a href="http://weblogtoolscollection.com/archives/2008/06/11/hiding-advertisements-for-single-posts/" rel="nofollow">ver cómo</a>.</li>
<li>Personalizar las páginas de error 404, <a href="http://www.themeplayground.com/advice-for-your-wordpress-blog-customize-your-404-page" rel="nofollow">ver cómo</a>.</li>
</ul>
<p>Traduccion <a href="http://www.carlosleopoldo.com/post/mas-de-40-consejos-y-trucos-para-wordpress/" target="_blank">carlosleopoldo</a> - <a href="http://www.carlosleopoldo.com/post/mas-de-40-consejos-y-trucos-para-wordpress/" target="_blank">Leer mas</a></p>
]]></content:encoded>
			<wfw:commentRss>http://xyberneticos.com/index.php/2008/06/22/40-consejos-y-trucos-wordpress-para-dar-a-tus-proyectos-aspectos-realmente-diferentes/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Tutorial 9 &#8211; Tutoriales, recursos, PSD, Brushes y mas</title>
		<link>http://xyberneticos.com/index.php/2008/06/16/tutorial-9-tutoriales-recursos-psd-brushes-y-mas/</link>
		<comments>http://xyberneticos.com/index.php/2008/06/16/tutorial-9-tutoriales-recursos-psd-brushes-y-mas/#comments</comments>
		<pubDate>Mon, 16 Jun 2008 21:42:56 +0000</pubDate>
		<dc:creator>Nikko</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[Diseño]]></category>
		<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[Recursos Web]]></category>
		<category><![CDATA[Tutoriales]]></category>

		<guid isPermaLink="false">http://xyberneticos.com/index.php/2008/06/16/tutorial-9-tutoriales-recursos-psd-brushes-y-mas/</guid>
		<description><![CDATA[Tutorial 9 es un extraordinario blog en el cual podrán encontrar muchos tutoriales sobre Photoshop, Illustrator, Photography y demás. A todo eso sumarle la cantidad de recursos que nos ofrece para descargar de forma totalmente gratuita, archivos PSD, Brushes, etc. Si acostumbran a buscar este tipo de recursos frecuentemente, Tutorial 9 les encantara. Enlace Tutorial [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center"><img src="http://xyberneticos.com/wp-content/uploads/2008/06/tutorial9.jpg" alt="tutorial9.jpg" /></p>
<p><a href="http://www.tutorial9.net/" target="_blank">Tutorial 9</a> es un extraordinario blog en el cual podrán encontrar muchos tutoriales sobre Photoshop, Illustrator, Photography y demás. A todo eso sumarle la cantidad de recursos que nos ofrece para descargar de forma totalmente gratuita, archivos <strong>PSD</strong>, Brushes, etc. Si acostumbran a buscar este tipo de recursos frecuentemente, Tutorial 9 les encantara.</p>
<p>Enlace  <a href="http://www.tutorial9.net/" target="_blank">Tutorial 9</a></p>
]]></content:encoded>
			<wfw:commentRss>http://xyberneticos.com/index.php/2008/06/16/tutorial-9-tutoriales-recursos-psd-brushes-y-mas/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>NETTUTS &#8211; Tutoriales y tips sobre desarrollo</title>
		<link>http://xyberneticos.com/index.php/2008/04/24/nettuts-tutoriales-y-tips-sobre-desarrollo/</link>
		<comments>http://xyberneticos.com/index.php/2008/04/24/nettuts-tutoriales-y-tips-sobre-desarrollo/#comments</comments>
		<pubDate>Thu, 24 Apr 2008 23:51:26 +0000</pubDate>
		<dc:creator>Nikko</dc:creator>
				<category><![CDATA[Diseño Web]]></category>
		<category><![CDATA[Scripts]]></category>
		<category><![CDATA[Tutoriales]]></category>

		<guid isPermaLink="false">http://xyberneticos.com/index.php/2008/04/24/nettuts-tutoriales-y-tips-sobre-desarrollo/</guid>
		<description><![CDATA[NETTUTS es un blog muy reciente que estará enfocado al desarrollo web y tips de gran utilidad, sin duda es un blog que promete mucho. Si notan un diseño similar al de PSDTUTS, es precisamente porque son ellos quienes están detrás de este blog. Tan solo lleva días online, pero ya podremos encontrar algunos tips [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center"><img src="http://xyberneticos.com/wp-content/uploads/2008/04/netsus.jpg" alt="netsus.jpg" /></p>
<p><a href="http://nettuts.com/">NETTUTS</a> es un blog muy reciente que estará enfocado al desarrollo web y tips de gran utilidad, sin duda es un blog que promete mucho. Si notan un diseño similar al de <a href="http://psdtuts.com/">PSDTUTS</a>, es precisamente porque son ellos quienes están detrás de este blog. Tan solo lleva días online, pero ya podremos encontrar algunos tips muy interesantes, por ejemplo:</p>
<p style="text-align: center"><img src="http://xyberneticos.com/wp-content/uploads/2008/04/tabsnetsus.jpg" alt="tabsnetsus.jpg" /></p>
<p><a href="http://nettuts.com/html-css-techniques/how-to-create-a-slick-tabbed-content-area/"> Crear Tabs usando CSS y jQuery </a>- Una de las formas mas simples de introducir mucho contenido en una sección reducida, es mediante la utilización de “tabs”, en Nettuts podremos encontrar un tutorial  muy completo para crear bonitos tabs que podremos usar posteriormente en nuestros proyectos. Si buscas algo simple será muy útil, pero les recomiendo el ejemplo en el cual se ha utilizado jQuery, porque posee unos efectos realmente extraordinarios.</p>
<p>Ver <a href="http://nettuts.s3.amazonaws.com/001_Tabbed/site/jQuery.html">Demo</a> - Mas Info <a href="http://nettuts.com/html-css-techniques/how-to-create-a-slick-tabbed-content-area/">Create a Slick Tabbed Content Area using CSS &amp; jQuery</a></p>
<p style="text-align: center"><img src="http://xyberneticos.com/wp-content/uploads/2008/04/netpaypal.jpg" alt="netpaypal.jpg" /></p>
<p><a href="http://nettuts.com/html-css-techniques/creating-a-paypal-payment-form/"> Crear formularios de pagos Paypal </a>- Un tips muy agradable que le servirá a aquellos que desean tener desde sus web un formulario integrado a su cuenta paypal, y el cual permita recibir los montos de una forma mas directa o simple. Tips útil para recibir donación o vender.</p>
<p>Ver demo y mas Info <a href="http://nettuts.com/html-css-techniques/creating-a-paypal-payment-form/">Creating a PayPal Payment Form</a></p>
<p>Via <a href="http://css-tricks.com/links-of-interest-27/">css-tricks</a></p>
]]></content:encoded>
			<wfw:commentRss>http://xyberneticos.com/index.php/2008/04/24/nettuts-tutoriales-y-tips-sobre-desarrollo/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Paginar artículos recientes en WordPress</title>
		<link>http://xyberneticos.com/index.php/2008/04/21/paginar-articulos-recientes-en-wordpress/</link>
		<comments>http://xyberneticos.com/index.php/2008/04/21/paginar-articulos-recientes-en-wordpress/#comments</comments>
		<pubDate>Mon, 21 Apr 2008 06:52:40 +0000</pubDate>
		<dc:creator>Nikko</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Tutoriales]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://xyberneticos.com/index.php/2008/04/21/paginar-articulos-recientes-en-wordpress/</guid>
		<description><![CDATA[Para aquellos que siempre están pensando en agregar cositas nuevas a sus themes wordpress, acabo de ver este agradable tip para generar paginación con nuestros articulos recientes. Ver demo en raproject - Mas info weblogtoolscollection Uso: Agregamos a nuestro sidebar el siguiente codigo PLAIN TEXT JavaScript: &#60;div id="recientespag"&#62; &#60;h3&#62;Articulos Recientes&#60;/h3&#62; &#60;ul&#62; &#60;?php $temp = $wp_query; [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center"><img src="http://xyberneticos.com/wp-content/uploads/2008/04/pagarticulos.jpg" alt="pagarticulos.jpg" /></p>
<p>Para aquellos que siempre están pensando en agregar cositas nuevas a sus themes wordpress, acabo de ver este agradable <a href="http://weblogtoolscollection.com/archives/2008/04/19/paging-and-custom-wordpress-loops/">tip</a> para generar paginación con nuestros articulos recientes.</p>
<p>Ver demo en  <a href="http://www.raproject.com/">raproject</a>  - Mas info <a href="http://www.raproject.com/"></a><a href="http://weblogtoolscollection.com/archives/2008/04/19/paging-and-custom-wordpress-loops/">weblogtoolscollection</a></p>
<p><strong>Uso:</strong></p>
<p>Agregamos a nuestro sidebar el siguiente codigo</p>
<div class="igBar"><span id="ljavascript-11"><a href="#" onclick="javascript:showPlainTxt('javascript-11'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JavaScript:</span>
<div id="javascript-11">
<div class="javascript">&lt;div id=<span style="color: #3366CC;">"recientespag"</span>&gt;<br />
&lt;h3&gt;Articulos Recientes&lt;/h3&gt;<br />
&lt;ul&gt;<br />
&lt;?php<br />
$temp = $wp_query;<br />
$wp_query= <span style="color: #003366; font-weight: bold;">null</span>;<br />
$wp_query = <span style="color: #003366; font-weight: bold;">new</span> WP_Query<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;<br />
$wp_query-&gt;query<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'showposts=5'</span>.<span style="color: #3366CC;">'&amp;paged='</span>.$paged<span style="color: #66cc66;">&#41;</span>;<br />
?&gt;<br />
&lt;?php <span style="color: #000066; font-weight: bold;">while</span> <span style="color: #66cc66;">&#40;</span>$wp_query-&gt;have_posts<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span> : $wp_query-&gt;the_post<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>; ?&gt;<br />
&nbsp; &nbsp; &lt;li&gt;&lt;a href=<span style="color: #3366CC;">"&lt;?php the_permalink() ?&gt;"</span> rel=<span style="color: #3366CC;">"bookmark"</span>&gt;&lt;?php the_title<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>; ?&gt;&lt;<span style="color: #0066FF;">/a&gt;&lt;/</span>li&gt;<br />
&lt;?php endwhile; ?&gt;<br />
&lt;/ul&gt;<br />
&lt;div <span style="color: #003366; font-weight: bold;">class</span>=<span style="color: #3366CC;">"navigation"</span>&gt;<br />
&nbsp; &lt;div <span style="color: #003366; font-weight: bold;">class</span>=<span style="color: #3366CC;">"alignleft"</span>&gt;&lt;?php previous_posts_link<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'&amp;laquo; Otros'</span><span style="color: #66cc66;">&#41;</span> ?&gt;&lt;/div&gt;<br />
&nbsp; &lt;div <span style="color: #003366; font-weight: bold;">class</span>=<span style="color: #3366CC;">"alignright"</span>&gt;&lt;?php next_posts_link<span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'Leer Mas &amp;raquo;'</span><span style="color: #66cc66;">&#41;</span> ?&gt;&lt;/div&gt;<br />
&lt;/div&gt;<br />
&lt;?php $wp_query = <span style="color: #003366; font-weight: bold;">null</span>; $wp_query = $temp;?&gt;<br />
&lt;/div&gt;</div>
</div>
</div>
<p>
un poco de estilo (Básicamente el estilo que muestro en la foto del post)</p>
<div class="igBar"><span id="lcss-12"><a href="#" onclick="javascript:showPlainTxt('css-12'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">CSS:</span>
<div id="css-12">
<div class="css"><span style="color: #cc00cc;">#recientespag <span style="color: #66cc66;">&#123;</span></span><br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">width</span>:300px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span>: #1B1B19;<br />
<span style="color: #000000; font-weight: bold;">border</span>: 1px <span style="color: #993333;">solid</span> #2A2A2A; <br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">float</span>:<span style="color: #000000; font-weight: bold;">right</span>;<br />
&nbsp; &nbsp; padding<span style="color: #3333ff;">:13px </span>15px 8px 15px;<br />
&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span><br />
#recientespag h3 <span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">font-family</span>: Georgia, <span style="color: #ff0000;">"Times New Roman"</span>, Times, <span style="color: #993333;">serif</span>;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">font-size</span>: <span style="color: #cc66cc;color:#800000;">2</span>.2em;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">color</span>: #C7C54F;<br />
<span style="color: #66cc66;">&#125;</span></p>
<p>#recientespag ul <span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">margin-top</span>:-5px;<br />
&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span><br />
&nbsp; &nbsp; <br />
#recientespag li <span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; border-bottom<span style="color: #3333ff;">:1px </span>solid #2A2A2A;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">list-style</span>:<span style="color: #993333;">none</span>;<br />
&nbsp; &nbsp; padding<span style="color: #3333ff;">:7px </span><span style="color: #cc66cc;color:#800000;">0</span> 7px 0px;<br />
&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></p>
<p>#recientespag a, #recent a<span style="color: #3333ff;">:visited </span><span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">color</span>:#999831;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">font-size</span>:<span style="color: #cc66cc;color:#800000;">0</span>.9em;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">font-family</span>: Verdana, Arial, Helvetica, <span style="color: #993333;">sans-serif</span>;<br />
&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</div>
</div>
<p></p>
]]></content:encoded>
			<wfw:commentRss>http://xyberneticos.com/index.php/2008/04/21/paginar-articulos-recientes-en-wordpress/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Personalizando listas con CSS</title>
		<link>http://xyberneticos.com/index.php/2008/04/12/personalizando-listas-con-css/</link>
		<comments>http://xyberneticos.com/index.php/2008/04/12/personalizando-listas-con-css/#comments</comments>
		<pubDate>Sat, 12 Apr 2008 07:28:00 +0000</pubDate>
		<dc:creator>Nikko</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Diseño]]></category>
		<category><![CDATA[Tutoriales]]></category>

		<guid isPermaLink="false">http://xyberneticos.com/index.php/2008/04/12/personalizando-listas-con-css/</guid>
		<description><![CDATA[Hoy en día todos los que llevamos un blog adelante, o estamos constantemente ligados a Internet por nuestro trabajo, es prácticamente común que no solo dediquemos tiempo a escribir en nuestros blog, sino que también a veces solemos buscar una forma de salir un poco de la rutina diaria participando en diferentes redes sociales, donde [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: center"><img src="http://xyberneticos.com/wp-content/uploads/2008/04/listascss.jpg" alt="listascss.jpg" /></p>
<p>Hoy en día todos los que llevamos un blog adelante, o estamos constantemente ligados  a Internet por nuestro trabajo, es prácticamente común que no solo dediquemos tiempo a escribir en nuestros blog, sino que también a veces solemos buscar una forma de salir un poco de la rutina diaria participando en diferentes redes sociales, donde solemos compartir imágenes, contar lo que estamos haciendo en un determinado momento, divertirnos con amigos, en fin. Aunque también es común, que no siempre solemos brindar desde nuestro blog los enlaces a ese tipo de redes, sean:  twitter, pownce, flickr etc en las cuales participamos. Pero si deseáramos hacerlo, como una forma de que nuestros usuarios nos comiencen a conocer un poco mas, no necesariamente deberemos crear enormes banner que llamen la atención de nuestros usuarios, ya que siempre existen otras alternativas, mas simples, limpias, ordenadas y agradables, que llamara de la misma forma la atención de nuestros usuarios, pero evitando arruinar el diseño de nuestro blog que tanto trabajo no haz costado. La forma más simple, es crear listas con iconos personalizados.<br />
Ver <a href="http://xyberneticos.com/demos/listas_%20con_%20iconos/listas.html">Demo</a> - <a href="http://xyberneticos.com/demos/listas_ con_ iconos/listas_ con_ iconos.rar">Descarga</a> Ejemplo</p>
<div class="igBar"><span id="lcss-15"><a href="#" onclick="javascript:showPlainTxt('css-15'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">CSS:</span>
<div id="css-15">
<div class="css"><span style="color: #6666ff;">.mac </span><span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">font-size</span>: 11px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">padding-left</span>: 17px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">margin-left</span>: 2px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">margin-bottom</span>: 5px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span>:<span style="color: #993333;">url</span><span style="color: #66cc66;">&#40;</span>images/macosx.gif<span style="color: #66cc66;">&#41;</span> <span style="color: #000000; font-weight: bold;">bottom</span> <span style="color: #000000; font-weight: bold;">left</span> <span style="color: #993333;">no-repeat</span>;<br />
&nbsp; &nbsp; List-style:<span style="color: #993333;">none</span>;<br />
<span style="color: #66cc66;">&#125;</span></p>
<p>
<span style="color: #6666ff;">.clickideas </span><span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">font-size</span>: 11px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">padding-left</span>: 17px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">margin-left</span>: 2px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">margin-bottom</span>: 5px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span>:<span style="color: #993333;">url</span><span style="color: #66cc66;">&#40;</span>images/cli.gif<span style="color: #66cc66;">&#41;</span> <span style="color: #000000; font-weight: bold;">bottom</span> <span style="color: #000000; font-weight: bold;">left</span> <span style="color: #993333;">no-repeat</span>;<br />
&nbsp; &nbsp; List-style:<span style="color: #993333;">none</span>;<br />
<span style="color: #66cc66;">&#125;</span><br />
<span style="color: #6666ff;">.pownce </span> <span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">font-size</span>: 11px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">padding-left</span>: 17px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">margin-left</span>: 2px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">margin-bottom</span>: 5px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span>:<span style="color: #993333;">url</span><span style="color: #66cc66;">&#40;</span>images/pow.gif<span style="color: #66cc66;">&#41;</span> <span style="color: #000000; font-weight: bold;">bottom</span> <span style="color: #000000; font-weight: bold;">left</span> <span style="color: #993333;">no-repeat</span>;<br />
&nbsp; &nbsp; List-style:<span style="color: #993333;">none</span>;<br />
<span style="color: #66cc66;">&#125;</span><br />
<span style="color: #6666ff;">.flickr </span> <span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">font-size</span>: 11px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">padding-left</span>: 17px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">margin-left</span>: 2px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">margin-bottom</span>: 5px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span>:<span style="color: #993333;">url</span><span style="color: #66cc66;">&#40;</span>images/flickr.gif<span style="color: #66cc66;">&#41;</span> <span style="color: #000000; font-weight: bold;">bottom</span> <span style="color: #000000; font-weight: bold;">left</span> <span style="color: #993333;">no-repeat</span>;<br />
&nbsp; &nbsp; List-style:<span style="color: #993333;">none</span>;<br />
<span style="color: #66cc66;">&#125;</span><br />
<span style="color: #6666ff;">.wordpress </span><span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">font-size</span>: 11px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">padding-left</span>: 17px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">margin-left</span>: 2px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">margin-bottom</span>: 5px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span>:<span style="color: #993333;">url</span><span style="color: #66cc66;">&#40;</span>images/wordpress.gif<span style="color: #66cc66;">&#41;</span> <span style="color: #000000; font-weight: bold;">bottom</span> <span style="color: #000000; font-weight: bold;">left</span> <span style="color: #993333;">no-repeat</span>;<br />
&nbsp; &nbsp; List-style:<span style="color: #993333;">none</span>;<br />
<span style="color: #66cc66;">&#125;</span><br />
<span style="color: #6666ff;">.blog </span> <span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">font-size</span>: 11px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">padding-left</span>: 17px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">margin-left</span>: 2px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">margin-bottom</span>: 5px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span>:<span style="color: #993333;">url</span><span style="color: #66cc66;">&#40;</span>images/blog.gif<span style="color: #66cc66;">&#41;</span> <span style="color: #000000; font-weight: bold;">bottom</span> <span style="color: #000000; font-weight: bold;">left</span> <span style="color: #993333;">no-repeat</span>;<br />
&nbsp; &nbsp; List-style:<span style="color: #993333;">none</span>;<br />
<span style="color: #66cc66;">&#125;</span><br />
<span style="color: #6666ff;">.mail </span> <span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">font-size</span>: 11px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">padding-left</span>: 17px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">margin-left</span>: 2px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">margin-bottom</span>: 5px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span>:<span style="color: #993333;">url</span><span style="color: #66cc66;">&#40;</span>images/mail.gif<span style="color: #66cc66;">&#41;</span> <span style="color: #000000; font-weight: bold;">bottom</span> <span style="color: #000000; font-weight: bold;">left</span> <span style="color: #993333;">no-repeat</span>;<br />
&nbsp; &nbsp; List-style:<span style="color: #993333;">none</span>;<br />
<span style="color: #66cc66;">&#125;</span><br />
<span style="color: #6666ff;">.tarjeta </span> <span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">font-size</span>: 11px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">padding-left</span>: 17px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">margin-left</span>: 2px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">margin-bottom</span>: 5px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span>:<span style="color: #993333;">url</span><span style="color: #66cc66;">&#40;</span>images/tarjeta.gif<span style="color: #66cc66;">&#41;</span> <span style="color: #000000; font-weight: bold;">bottom</span> <span style="color: #000000; font-weight: bold;">left</span> <span style="color: #993333;">no-repeat</span>;<br />
&nbsp; &nbsp; List-style:<span style="color: #993333;">none</span>;<br />
<span style="color: #66cc66;">&#125;</span><br />
<span style="color: #6666ff;">.info </span> <span style="color: #66cc66;">&#123;</span><br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">font-size</span>: 11px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">padding-left</span>: 17px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">margin-left</span>: 2px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">margin-bottom</span>: 5px;<br />
&nbsp; &nbsp; <span style="color: #000000; font-weight: bold;">background</span>:<span style="color: #993333;">url</span><span style="color: #66cc66;">&#40;</span>images/info.gif<span style="color: #66cc66;">&#41;</span> <span style="color: #000000; font-weight: bold;">bottom</span> <span style="color: #000000; font-weight: bold;">left</span> <span style="color: #993333;">no-repeat</span>;<br />
&nbsp; &nbsp; List-style:<span style="color: #993333;">none</span>;<br />
<span style="color: #66cc66;">&#125;</span></div>
</div>
</div>
<p>
Estructura</p>
<div class="igBar"><span id="lhtml-16"><a href="#" onclick="javascript:showPlainTxt('html-16'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">HTML:</span>
<div id="html-16">
<div class="html"><span style="color: #606060;">&lt;ul&gt;</span></p>
<p><span style="color: #606060;">&lt;li class=&quot;mac&quot;&gt;</span>Usando <span style="color: #606060;">&lt;a href=&quot;http://www.apple.com&quot;&gt;</span>Macintosh<span style="color: #606060;">&lt;/a&gt;</span><span style="color: #606060;">&lt;/li&gt;</span><br />
<span style="color: #606060;">&lt;li class=&quot;wordpress&quot;&gt;</span>Powered by <span style="color: #606060;">&lt;a href=&quot;http://www.wordpress.org&quot;&gt;</span>WordPress<span style="color: #606060;">&lt;/a&gt;</span><span style="color: #606060;">&lt;/li&gt;</span><br />
<span style="color: #606060;">&lt;li class=&quot;clickideas&quot;&gt;</span>Design by <span style="color: #606060;">&lt;a href=&quot;http://www.clickideas.net&quot;&gt;</span>Clickideas<span style="color: #606060;">&lt;/a&gt;</span><span style="color: #606060;">&lt;/li&gt;</span><br />
<span style="color: #606060;">&lt;li class=&quot;pownce&quot;&gt;</span>My <span style="color: #606060;">&lt;a href=&quot;http://www.pownce.com/nikko&quot;&gt;</span>Pownce<span style="color: #606060;">&lt;/a&gt;</span><span style="color: #606060;">&lt;/li&gt;</span><br />
<span style="color: #606060;">&lt;li class=&quot;flickr&quot;&gt;</span>My Photos <span style="color: #606060;">&lt;a href=&quot;http://www.flickr.com/photos/14412260@N08/&quot;&gt;</span>Flickr<span style="color: #606060;">&lt;/a&gt;</span><span style="color: #606060;">&lt;/li&gt;</span><br />
<span style="color: #606060;">&lt;li class=&quot;blog&quot;&gt;</span>My <span style="color: #606060;">&lt;a href=&quot;http://www.xyberneticos.com/&quot;&gt;</span>blog<span style="color: #606060;">&lt;/a&gt;</span><span style="color: #606060;">&lt;/li&gt;</span><br />
<span style="color: #606060;">&lt;li class=&quot;mail&quot;&gt;</span>My <span style="color: #606060;">&lt;a href=&quot;http://www.xyberneticos.com/index.php/contacto/&quot;&gt;</span>E-mail<span style="color: #606060;">&lt;/a&gt;</span><span style="color: #606060;">&lt;/li&gt;</span><br />
<span style="color: #606060;">&lt;li class=&quot;tarjeta&quot;&gt;</span>My <span style="color: #606060;">&lt;a href=&quot;http://www.xyberneticos.com/index.php/acerca-de/&quot;&gt;</span>vcard<span style="color: #606060;">&lt;/a&gt;</span><span style="color: #606060;">&lt;/li&gt;</span><br />
<span style="color: #606060;">&lt;li class=&quot;info&quot;&gt;</span>More <span style="color: #606060;">&lt;a href=&quot;http://www.xyberneticos.com/index.php/acerca-de/&quot;&gt;</span>Info<span style="color: #606060;">&lt;/a&gt;</span><span style="color: #606060;">&lt;/li&gt;</span></p>
<p><span style="color: #606060;">&lt;/ul&gt;</span></div>
</div>
</div>
<p></p>
]]></content:encoded>
			<wfw:commentRss>http://xyberneticos.com/index.php/2008/04/12/personalizando-listas-con-css/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
	</channel>
</rss>

