Incrustar campos de texto de enlaces en URL, HTML y Foros debajo de cada entrada.

29 julio 2010

Incrustar campos de texto de enlaces en URL, HTML y Foros debajo de cada entrada.

    No hay comentarios
En este tutorial explicare, cual es la manera o como se hace para incrustar campos de textos debajo de cada entrada con diferentes enlaces, para ser insertados como enlace directos a la URL, enlaces de textos a la entrada actual y el código para insertar en foros de discusión. La verdad, es que este truco ya lo había visto en varias paginas web, pero nunca en un blog que no haya sido de Wordpress, asi, que si te ha gustado también, el tutorial de instalación ya esta disponible. Para que te des un poco mas de cuenta de lo que te hablo, observa la siguiente imagen.

1) Entra a tu cuenta Blogger > Diseño > Edicion HTML
2) Busca la etiqueta </head>
3) Copia el siguiente codigo justo antes de la etiqueta que acabas de buscar

<style type='text/css'>
.about-article{
background-color:#f9f9f9;
padding-bottom:5px;
padding-left:20px;
font-size:11px;
}
.about-article input{
background-color:#ffffff;
}
</style>

4) Expande los artilugios y encuentra el siguiente código

<data:post.body/>

5) Copia el siguiente codigo justo despues del codigo que acabas de buscar

<b:if cond='data:blog.pageType == &quot;item&quot;'>
&lt;div class=&quot;about-article&quot;&gt;<p>Enlaces para compartir en tu blog o pagina web.</p>&lt;p class=&quot;noborder&quot;&gt;&lt;label for=&quot;aa-url&quot;&gt;URL:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-url&quot; value=&quot;<data:post.url/>&quot; /&gt;&lt;/p&gt;&lt;p&gt;&lt;label for=&quot;aa-forum&quot;&gt;Enlace con HTML:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;&lt;a href=&amp;quot;<data:post.url/>&amp;quot;&gt;<data:post.title/>&lt;/a&gt;&quot; /&gt;&lt;/p&gt;&lt;p&gt;
&lt;label for=&quot;aa-forum&quot;&gt;Enlace para Foros:&lt;/label&gt;&lt;br /&gt;
&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;[url=<data:post.url/>]/<data:post.title/>[/url]&quot; /&gt;&lt;/p&gt;
<p align='center'><a href='http://www.frikibloggeo.com.ar/' style='display:none;' target='_blank'>Widget por Friki Bloggeo</a></p>
&lt;/div&gt;<br/>
</b:if>

6)Eso es todo! Disfruta tu nuevo gadget.

Enlaces para compartir en tu blog o pagina web.




Widget por Friki Bloggeo


No hay comentarios :

Publicar un comentario

Suscribirse a: Enviar comentarios ( Atom )