Colocar paginación en Blogger (CSS & JavaScript)

marvin    CSS, JavaScript, Webmasters     Cambiar el diseño y los colores de Paginacion (Blogger), Como colocar paginación en Blogger, Como paginar las entradas de Google Blogger, Mejorar la Paginación de Blogger, Sustituir "Entradas Antiguas" y "Entradas Recientes" por Paginación.

Este metodo de paginación esta basado en Javascript con estilos CSS, esto remplaza Entradas antiguas, Entradas más recientes e Inicio por una paginación mucho mejor como en las paginas web profesionales, no solo facilita la navegacion en el blog si no que también le da un toque de elegancia y profesionalismo al blog.

Comenzamos, ve a Diseño-> Edición de HTML y antes de </body> pega lo siguiente:

<!-- PAGE NAVIGATION START-->
<script type='text/javascript'>
var pageCount=7;
var displayPageNum=10;
var upPageWord =&#39;&#171; &#39;;
var downPageWord =&#39; &#187;&#39;;
</script>
<script type='text/javascript'>
//<![CDATA[
function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml='<span style="padding: 4px 8px;margin:0 4px;text-decoration:none;background:#dfdfdf;color:#686868; border:1px solid #989898;font-family: Arial, Verdana;font-size: 15px;"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span style="padding: 4px 8px;margin:0 4px;text-decoration:none;background:#dfdfdf;color:#686868; border:1px solid #989898;font-family: Arial, Verdana;font-size: 15px;"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span>'+thisNum+'</span>'}else{if(p==0){html+='<span><a href="/">1</a></span>'}else{html+='<span><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span style="padding: 4px 8px;margin:0 4px;text-decoration:none;background:#dfdfdf;color:#686868; border:1px solid #989898;font-family: Arial, Verdana;font-size: 15px;"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div><span style="COLOR: #676767;background:#fff;border: 1px solid #b6b5b5;font-size: 15px;padding:4px 8px;margin:0 4px;"> Páginas '+(postNum-1)+'</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-1;var thisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length):"";thisLable=thisLable.indexOf("?")!=-1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';var labelHtml='<span><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span style="padding: 4px 8px;margin:0 4px;text-decoration:none;background:#dfdfdf;color:#686868; border:1px solid #989898;font-family: Arial, Verdana;font-size: 15px;"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span>'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'1</a></span>'}else{html+='<span><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span style="padding: 4px 8px;margin:0 4px;text-decoration:none;background:#dfdfdf;color:#686868; border:1px solid #989898;font-family: Arial, Verdana;font-size: 15px;"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div><span style="COLOR: #999;"> Páginas ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}var home_page_url=location.href;var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ></script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ></script>')}}
//]]>
</script>
<!-- PAGE NAVIGATION STOP-->

Configuracion:
var pageCount= Indica el numero de entradas a mostrar en cada pagina.
var displayPageNum= Indica la cantidad máxima de números de paginación.

- Ahora pega lo siguiente antes de ]]></b:skin>

/* — NUMBER PAGE NAVIGATION — */
.showpageNum a{font:15px Arial,Verdana;padding:4px 8px;margin:0 4px;text-decoration:none;border:0 solid #333;background:#dfdfdf;color:#686868;border:1px solid #989898}
.showpageOf{margin:0 8px 0 0;color:#222;font:15px Arial,Verdana}
.showpageNum a:hover{color:#494949;background:#dfdfdf;border:1px solid #626262}
.showpageArea{margin:10px 0;font:15px Arial,Verdana;color:#111}
.showpagePoint{color:#434343;font:bold 15px Arial,Verdana;padding:4px 8px;margin:2px;border:1px solid #b6b5b5;background:#fff;text-decoration:none}

Guardar cambios y listo, tendrás el truco de paginación para Blogger.

Descargar Colocar paginación en Blogger (CSS & JavaScript) (HD)

Agregar boton de Twitter Oficial (Twittear)

marvin    Webmasters     Como Agregar boton de Twitter Oficial (Tweetear), Como seleccionar el tamaño dle boton Twittear, Como utilizar el boton de Twitter: Twittear, Conseguir visitar con boton de Twitter (Twittear) 2011, Conteo Horizontal ó No contar - Boton Twitter (Oficial), Cuenta vertical

Hay tres formas de poner el botón de twitter: Cuenta vertical, Conteo Horizontal ó No contar, aquí explicare como poner esas tres formas.

Para agregar el botón ve a Diseño-> Edición de HTML, activar la casilla Expandir plantillas de artilugios y busca (Ctrl+F) lo siguiente:

<div class=’post-body entry-content’>

Y ahora elige el botón de tu agrado, pega lo después del código de arriba:

Cuenta vertical:

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<a href=”http://twitter.com/share” data-count=”vertical”>Tweet</a><script type=”text/javascript” src=”http://platform.twitter.com/widgets.js”></script></b:if>


Conteo Horizontal:
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<a href=”http://twitter.com/share” data-count=”horizontal”>Tweet</a><script type=”text/javascript” src=”http://platform.twitter.com/widgets.js”></script></b:if>


No contar:

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<a href=”http://twitter.com/share” data-count=”none”>Tweet</a><script type=”text/javascript” src=”http://platform.twitter.com/widgets.js”></script></b:if>

El código que esta en azul es para que no aparezca en la entrada principal, esto es porque da errores,  lo puedes quitar si quieres, para que se muestre en la entrada principal.

Descargar Agregar boton de Twitter Oficial (Twittear) (HD)

Agregar Botón +1 'Plus One' de Google

marvin    SEO, Webmasters     Boton +1 Plus One (Google SEO), Como Agregar Botón +1 'Plus One' de Google en Web o Blog, Crear boton +1 de Forma automatica (SEO), https://apis.google.com/js/plusone.js (Boton Google +1), SEO con Boton +1 de Google Plus One

El botón +1 es una forma rápida de indicar que algo es muy interesante o merece la pena que otras personas lo vean.

Haz click en el botón +1 para decir públicamente que te gusta algo. Tus +1 pueden ayudar a tus amigos y contactos, o a otros usuarios, a encontrar los mejores resultados cuando buscan en Internet. Google

• Para agregar el botón +1 “Plus One”, en nuestra web o blog ve a esta pagina http://www.google.com/intl/es/webmasters/+1/button/ y sigue las siguientes indicaciones:

Seleciona el Tamaño y el Idioma, una vez hecho esto, aparecera un codigo como el siguiente:

<!– Añade esta etiqueta en la cabecera o delante de la etiqueta body. –>
<script type=”text/javascript” src=”https://apis.google.com/js/plusone.js”>
{lang: ‘es’}
</script>

<!– Añade esta etiqueta donde quieras colocar el botón +1 –>
<g:plusone></g:plusone>

El primer codigo similar al azul que aparecera, se pega abajo de la etiqueta <body> tal como se indica, el segundo marcado en rojo en donde se colocará el Botón +1.

Ejemplo:

Ve a Diseño-> Edición de HTML-> marca la casilla Expandir plantillas de artilugios, si quieres que el botón aparezca al final del contenido de las entradas busca (Ctrl+F) y pega el codigo abajo de lo siguiente.

<div class=’post-footer-line post-footer-line-1′>

Si quieres que aparezca abajo del titulo de la entrada, pega el código abajo de:

<div class=’post-header-line-1′/>

Si quieres que aparezca al inicio del contenido de la entrada pega el código abajo de:

<data:post.body/>

Descargar Agregar Botón +1 'Plus One' de Google (HD)

Descargas Relacionadas (2012)

• https://plusone google com/descargar/

Como Optimizar los titulos de Blogger (SEO)

marvin    SEO, Webmasters     (SEO BLOGGER), Consejos SEO para Blogger, Mejorar el SEO de tu blog Blogger, Tips de SEO para Blogger, Titulo SEO para Blogger

En las plantillas por defecto se muestra primero el título del blog y luego el título del post.
¿Y eso importa? Si, es necesario para los buscadores como Google, ya que este post se mostraría así:

Marvin Ce| Como Optimizar los títulos de Blogger (SEO)

<title><data:blog.pagetitle/></title>

Y remplazalo por esto:

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<title><data:blog.pageName/> | <data:blog.title/> </title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

De esta manera en los resultados de Google se mostrará así:

Como Optimizar los títulos de Blogger (SEO) | Marvin Ce

Seguro que poco a poco empezaras a tener visitas de calidad, ya que te encontrarán por tu contenido.

Descargar Como Optimizar los titulos de Blogger (SEO) (HD)

Plugins para mejorar SEO de tu Blog

marvin    Webmasters     Agregar Meta Tags a Blogger para indexarse a los buscadores (Plugins SEO Wordpress), All in One SEO Pack (Plugins SEO Wordpress), Auto Subscribe RSS Feed (Plugins SEO Wordpress), Automatic SEO Links (Plugins SEO Wordpress), Optimizar los títulos de Blogger (Plugins SEO Wordpress), Platinum SEO Plugin (Plugins SEO Wordpress), Posteo Relacionados (Plugins SEO Wordpress), SEO Friendly Images 2.6 (Plugins SEO Wordpress), SEO SearchTerms Tagging 2 (Plugins SEO Wordpress), Sharebar (Plugins SEO Wordpress), WordPress Related posts (Plugins SEO Wordpress), Yet Another Related Post Plugin (Plugins SEO Wordpress)

A continuación les presento una serie de plugins y formas de mejorar el SEO y el posicionamiento de tu Blog en los buscadores. Generar mejores contenidos y mayor visitas a tu web.

Los Plugins de WordPress Utiles para Mejorar SEO (WordPress)

All in One SEO Pack: SEO fuera de lo normal para tu blog WordPress. Mega-recomendado y usado por mucho de los profesionales.

Auto Subscribe RSS Feed: Automáticamente lanza un mensaje de suscripción para despertar y hacer que el visitante se suscriba a tu feed siempre que publican un nuevo comentario.

WordPress Related posts: Genera una lista de posts relacionados a través de las etiquetas de WordPress.

Yet Another Related Post Plugin: Devuelve una lista de entradas basadas en un único algortimo, para mostrar en el blog y RSS feeds. Una plantilla permite incluso a personalización de lo que se muestra.

SEO SearchTerms Tagging 2: Permite incorporar términos de búsqueda frecuente con los que tus visitantes llegan a tu blog, en particular a los artículos de tu blog. Ideal para mostrar las keywords más usadas a los usuarios, pero a la vez este plugin puede ser bastante útil para detectar algunos términos potenciales que pueden ayudarte a optimizar las páginas del sitio web (en conjunto con otras herramientas que ya conocemos como Google Analytics).

SEO Friendly Images 2.6: Como sabeis el tener bien etiquetadas las imagenes mediante sus atributos ALT y TITTLE puede generarnos un importante tráfico mediante la búsqueda de imágenes en los principales buscadores, por eso os dejo un plugin de WordPress que realiza esta acción automaticamente.

Sharebar:  Sharebar es un marcador social con buscador, con el que puedes compartir tus entradas con las diferentes redes sociales como: Facebook, Twitter, Delicious, Stumble, entre otras muchas más.

Automatic SEO Links: nos permite seleccionar una palabra o frase de enlace automatico,  tanto internos como externos, sistema de anclaje de texto, elegir si el elnace o enlaces tendran la propiedad “nofollow” o no y mucho más.

Platinum SEO Plugin: ofrece caracteristicas como redireccion automatica 301, generacion automatica de meta etiquetas, ayuda a evitar el contenido duplicado y una serie de caracteristacas mas.

de búsqueda a indexar mejor tu blog.Head META DEscription: Inserta descripciones HTML META tag: extracto/breve contenido para posts/páginas, descripción para la categoría y tagline de blog para todo lo demás.

Descargar Plugins para mejorar SEO de tu Blog (HD)