Como usar las Twitter Cards con blogger

Buscando  formas de cómo mejorar la presentación de los tweets del sitio, me encontré con las Twittter Cards  las cuales te permiten incrustar un pequeño sumario en cada link  que compartas en twitter así teniendo más atracción al usuario para que de click en tu link. Sí,  se ve muy mono pero como se implementa? Aquí te diremos como. 

Search box para blogger

Para los conocedores, una buena caja de búsqueda es esencial para mostrar el contenido de tu blog o pagina web para que tus usuarios puedan obtener la información que buscan. 

Si quieres personalizar tu caja de búsqueda o search box puedes seguir este código para la caja de búsqueda de Tecknomano se necesita un poco de CSS y algo de HTML.

El CSS es el siguiente.
  
#searchform {
margin-top: 8px; /*margen superior*/
}
#searchform br {
display: none; /*no mostras el tag br*/
}
#searchform #s {
width: 160px; /*ancho de la caja*/
height: 25px;/*largo de la caja*/
padding: 8px 6px 6px 8px; /*relleno de la caja*/
border: none; /*sin borde*/
margin-right: 2px; /*margen derecho*/
color: #333333; /*color en hexadecimal*/
font-weight: normal; /
font: bold 14px Arial, Helvetica, sans-serif;/*tipo de fuente*/
        background: #FEFEFE url(Imagen de Fondo) right center no-repeat; /*Fondo de la caja de búsqueda, en centro derecho sin repetir*/
}
/* search form botón- para especificar botón sólo utilizar [type="submit"] */
#searchform input {
background: url() no-repeat; /*fondo sin repetir*/
border: none; /*sin borde*/
width: 62px;/*ancho*/
height: 23px;/*largo*/
font: bold 12px Arial, Helvetica, sans-serif;/*fuente*/
color: #FEFEFE;/*color*/
vertical-align: middle;/*alineación en el medio*/ 
}

También se necesita el siguiente HTML que puedes ponerlo en cualquier parte de tu plantilla de Blogger.

<br /> <form id="searchform" action="url de tu blog/search" name="searchform" method="get"><input id="s" onfocus="if (this.value == 'descubre más'){this.value = '';}" value="Descubre más" name="q" onblur="if (this.value == '') {this.value = 'descubre más';}" type="text"/><br /> </form>

El CSS introdúcelo antes de la etiqueta "]]></b:skin>" para hacerlo entra a tu plantilla y edita el HTML, busca la etiqueta con la ayuda de tu navegador (ctrl+F). 

Puedes personalizar todo el CSS, los colores, tamaños, margenes, borde, fuente, alineación y demás.   

Source: blogger.com

Post relacionados para Blogger

Llega el momento el la vida de todo blogger tener esta función entre sus herramientas de diseño, para obtener ese sentimiento de que lo estas haciendo bien.

Esta función permite a tus usuarios pasar de la primera hoja de tu blog, claro que pueden dar click en "post anteriores" pero, el usuario normal espera encontrar algo que le interese en no mas de 3 click. Por esto es necesario presentar al usuario con post de toda la vida de tu blog no solo solo primero 5 o 10, que claro que después de unos 10 post sin sentido el usuario se retiraría de tu blog.

Entremos al código de una buena vez, posicionaté en el panel de blogger y entra a la pestaña de Diseño luego en la opción de editar HTML.

Encuentra esta linea

Código

</head>

E introduce esta otra antes de esta etiqueta

Código

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgJzOWPOsuSBs6RAw8S7yrFgqG7r4X4JaNDY6XJzQrcMunrnj4KhV-ur1pKiGpqS4rM7YqyPnQDHHjjkB7MD7tTv4v3lhJNEXTag34TP4v5g1YkVAeqSU5K_Lj-DmLYRF1zEW25XuNMag/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
</b:if>

Después encuentra esta otra, no sin antes marcar la casilla de "Expandir plantillas de artilugios"

Código

<div class='post-footer-line post-footer-line-1'>

E inmediatamente después introduce esto

Código

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'></b:if></b:if>

Si todo marcha bien podrás observar que ya tienes 5 post relacionados en cada post que tienes en tu blog. ahora solo falta personalizarlo.

Cambiar el Texto "Related Posts" por uno de tu elección.
busca

Código

var relatedpoststitle="Related Posts";

Cambia Related Posts por algo de tu gusto.

Cambia el numero de post relacionados que se muestran.
busca

Código

var maxresults=5;

cambia el número 5 por otro de tu elección.

Cambiar el color del separador
busca

Código

var splittercolor="#d4eaf2";

reemplaza el color en hexadecimal (#d4eaf2)por otro de tu agrado.

Puedes modificarlo mucho más,pero para eso necesitar entrar el código en java y ala estructura del CSS, si tiene alguna duda, problema o comentario. hazla en la sección de comentarios con mucho gusto te atenderé.

Source: bloggerplugins.org