Super Widget de Entradas Populares

En este articulo te traigo otro widget interesante personalizado de entradas populares,muchas veces hacerlo no es tan facil, mas con este tutorial, seras capaz de personalizarlos utilizando el codigo de diseño CSS, ademas con efecto hover- se activa una vez el visitante apunta el mouse sobre la misma, esto le añade atractivo especial.

Chequea Articulo Como Añadir Galeria de Entradas Populares

El pequeño icono color rojo de cancelar aparece por defecto, con esquina redonda con puntitos, mientras  el icono verde pequeño marcado con bordes solido rojo aparecera al poner el mouse sobre el mismo.

Como Añadir EntradasPopulares En Tu Blog

Antes de personalizar el widget oficial de entradas populares en blogger , necesitaras añadirlo en tu plantilla, si ya no lo has hecho.

• Entra en cuenta de blogger
• Da Click en Diseño> Añadir un Gadget
• Luego Selecciona Entradas Populares!de el listado de opciones que apareceran en nueva ventana.
• Configurelo como se muestra aqui en la imagen,pero puedes cambiar el numero de entradas  mostrarse de 10.

• Da click en boton de Guardar.

Como Personalizar el Widget de Entradas Populares

• Entra en Plantilla > Editar HTML 
• Usa ctrl F para encontrar la etiqueta ]]></b:skin> y pega el siguiente codigo antes/arriba de ]]></b:skin>

/*--- Personaliza el Widget de Entradas Populares Diseño By www.ciudadblogger.info --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSd6uPDYRGkV_P2lrOiEOA8Atq-OsAUChU7vsps68AK_nvXA87NQ4E11oRED3BSDgoNxDciHCpJ6Km2fn6dvOAY3D_OIndqhFEhc_PXaTgkvT5RUnY8pNFGiaxfQTzYnxjwx3DHWd1WMY/s1600/rb+cancel+icon...jpg) no-repeat scroll 5px 10px;
list-style-type: none;
margin: 0 0 5px 0px;
padding: 5px 5px 5px 33px !important;
border: 1px dashed #dddddd;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.popular-posts ul li:hover {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaqAW_EVAI36joACq8agcsx4gxKj7P2JNaKWbzWfKx68lOUpgGIvddW17R2U7spuoBN88Mzh-1tUe-gmhm0M1ywkizURCXVvWm6rXqW4Ojzx4pRSGEqB6ha_aopTOtzDnVA4jAr10Zdh8/s1600/rb+mark+icon...jpg) no-repeat 2px;
border: 2px solid #b60000;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
.popular-posts ul li a:hover {
text-decoration:none;
}

• Para Finalizar guarda la plantilla y todo esta listo.Que lo disfrutes.

Chequea Widget Cuadrado de Entradas Populares para Blog de Blogger

Read More

Añadir Widget Social Media Slide Out En Tu Blog De Blogger

En este tutorial te incluire un widget muy especial para compartir tus entradas o articulos en las redes sociales.Este se esconde en el lado de la pantalla .Cuando el lector o visitantes ponen el cursor del raton sobre las mismas este se desplazara hacia afuera y una vez quitemos el cursor se desplaza hacia adentro o se escondera. 

Tiene varios elementos o folder donde se muestra la pagina principal nuestra de esas paginas como twitter,you tube,google plus,facebook y subscripcion Rss.

Muy recomendado si deseas estar adelante en propagar tus articulos atraves del mundo de la internet.Para instalarlo es muy simple solo siguie estos pasos.  

1.Entra cuenta de tu Blogger 
2.Selecciona Plantilla
3.Da Clic en Editar HTML
4.Encuentre el siguiente codigo ]]></b:skin> puedes usar teclas dentro editor para buscarlo(Ctrl + F)   
5.Copie el codigo de abajo y peguelo antes/arriba de ]]></b:skin>  
 

#on {visibility:visible;}
#off {visibility:hidden;}
#facebook_div {width:196px;height: 353px;overflow: hidden;}
#twitter_div {width:246px;height: 353px;overflow: hidden;}
#google_plus_div {width:200px;height: 143px;overflow: hidden;}
#knfeedburner_div {width:300px;height: 97px;overflow: hidden;}
#facebook_right {z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:196px;height: 353px;position: fixed;right: -200px;}
#facebook_right img {position: absolute;top: -2px;left: -35px;}
#facebook_right iframe {border:0px solid #3c95d9;overflow: hidden;position: static;height: 360px;left:-2px;top:-3px;}
#twitter_right {z-index: 10004;border:2px solid #6CC5FF;background-color: #6CC5FF;width:246px;height: 353px;position: fixed;right: -250px;}
#twitter_right_img {position: absolute;top: -2px;left: -35px;border: 0;}
#google_plus_right {z-index: 10003;background-color: #006ec9;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom: 2px solid #0056a0;border-right:2px solid #0056a0;border-left: hidden;width:200px;height: 143px;position: fixed;right: -203px;}
#google_plus_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
#feedburner_right {z-index: 10002;background-color: #fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom: 2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left: hidden;width:300px;height: 97px;position: fixed;right: -303px;}
#feedburner_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
#youtube_right {z-index: 10001;background-color: #fefefe;border:2px solid #ff0000;border-top:2px solid #5b5b5b;border-bottom: 2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left: hidden;width:301px;height: 106px;position: fixed;right: -303px;}
#youtube_right_img {position: absolute;top: -2px;left: -33px;border: 0;}

6.Otra vez busca la etiqueta </head> (CTRL+F)   
7.Ahora copie el codigo de abajo y peguelo antes de </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
jQuery(document).ready (
function(){jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); });
jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); });
jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -203}, 500); });
jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });
jQuery("#youtube_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#youtube_right").stop(true,false).animate({right: -303}, 500); });
});
</script>

     8.Guarde Plantilla.
     9.Vaya ahora a Diseno.
    10.Ahora da Clic en Anadir un Gadget.
    11.Seleccione la opcion HTML/Javascript
    12. Copie el codigo de abajo y peguelo en espacio de contenido.

<div id="on"><div id="facebook_right"style="top:8%;"><div id="facebook_div"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7bNzSeA2EwTlvJtdhVqwNovKcxjC7q3iF1AivR1PMPTXHLOFl86CISO4_9fCJxOnWion4ZBVdVd2M-WRgoX6AJe0EQevDWc8N_eaDoqSEScLpyzeOF8cTQESOUxvXblkauGu2OVuqNg/s1600/Facebook.png"alt=""/><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FTu Enlace de Pagina Fanaticos de FACEBOOK&amp;locale=en_GB&amp;width=200&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=356"scrolling="no"></iframe></div></div></div><div id="on"><div id="twitter_right"style="top:25%;"><div id="twitter_div"><img id="twitter_right_img"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyTSOFwJwby8wimAnuSCLEXN6GWEqS5GfrokyKroonVUzI9VT7IQALRnjpLATIY-yA5sMnV7vVWr0pi1bedP9ZdT6YvVF-zUVgfDxUEutmo7h50J7WIW-toR5ZiaHFoXkbxm0KhqdRBg/s1600/Twitter.png"/><script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({version:2,type:'profile',rpp:4,interval:1000,width:246,height:265,theme:{shell:{background:'#63BEFD',color:'#FFF'},tweets:{background:'#FFF',color:'#000',links:'#47a61e'}},features:{loop:false,live:true,scrollbar:false,hashtags:false,timestamp:true,avatars:true,behavior:'all'}}).render().setUser('YOUR-TWITTER-ID-Va aqui').start();</script></div></div></div><div id="on"><div id="google_plus_right"style="top:42%;"><div id="google_plus_div"><img id="google_plus_right_img"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH0EnYGF4tg7-I_YxMxqqmnIxL3wYyU5E-dDU_qZLVlYSyvvL_T6nOhxgVMPRpvZDWactb8Tb6xGCVM-exyVxLLWxiFHpz9MQoyoGBeU_UbfPiJfZoG0JWZzG-Dipdu52XTEItqPQCxA/s1600/Google+Plus.png"/><div style="float:left;margin:1px 0px 0px 2px;"><script type="text/javascript">mbgc='006ec9';ww='200';mbc='006ec9';bbc='006ec9';bmobc='3b71c6';bbgc='006ec9';bmoc='3F79D5';bfc='FFFFFF';bmofc='ffffff';tlc='ffffff';tc='ffffff';nc='ffffff';bc='ffffff';l='y';t='Add_Me_To';fs='20';fsb='13';bw='3F79D5';ff='4';pc='4889F0';b='0';pid='102256859586166648016';</script><script type="text/javascript"src="http://widgetsplus.com/google_plus_widget.js"></script></div></div></div></div><div id="on"><div id="feedburner_right"style="top:59%;"><div id="knfeedburner_div"><center><br />&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;&#9660;<h4 style="color:#F66303;">Puedes Tambien Recibir Actualizaciones Gratis en E-Mail Updates:</h4><form action="http://feedburner.google.com/fb/a/mailverify"method="post"target="popupwindow"onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=El ID del-FEEDBURNER-Aqui','popupwindow','scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10"class="enteryouremail"name="email"value="Enter Your E-Mail Here..."onblur="if (this.value == &#39;&#39;){this.value = &#39;Enter Your E-Mail Here...&#39;}"onfocus="if (this.value == &#39;Enter Your E-Mail Here...&#39;){this.value = &#39;&#39;}"type="text"/><input value="Tu Nombre de FEED va aqui"name="uri"type="hidden"/><input value="Submit"class="submitbutton"type="submit"/></form></center><img id="feedburner_right_img"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSVzx_q5ssjj9_WARCeKJSBPyBX6Oyn0H-dos6A0cD7HBgrLeudLq812dhNwnHBNmfGaIlJQegLW-zRLf5bR3Va6wuk_b4_P7qySli7OZqGLyPdVqEnOkSWvLQgRakrdrCSQwEigNitA/s1600/Subscribe.png"/></div></div></div><div id="on"><div id="youtube_right"style="top:76%;"><div id="youtube_div"><img id="youtube_right_img"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzDsUOFy9guj_6xWw5WzLLJKArrJh1vlG2p120FZVrdTH_42WBusbXKyJ3OIl1maVei5otJGeHzH4hPNjwWVOB47Oxg-gv1zD4ELaWP09QR34NHih4bDoMgIvj6UwTG6xW4F0wMsC_5Q/s1600/YouTube.png "/><div style="float:left;margin:1px 0px 0px 2px;"><iframe src=http://www.youtube.com/subscribe_widget?p=Tu ID deYOUTUBE-ID-Aqui ="height:105px;width:300px;border:0;"scrolling="no"frameBorder="0"></iframe>
</div></div></div>
</div>

13.Guarda el gadget y chequea tu blog para que veas esta barra al lado derecho de tu pantalla.Listo.
Nota:Reemplaza lo que esta en ROJO en codigo anterior por direcciones y ID de tu cuenta en redes sociales  .

Read More

Añade Estilo Ladrillo A Tus Etiquetas De Blogger

En esta ocasion les mostrare el truco como añadir el gadget de estilo de ladrillo o cuadrado a las etiquetas en blogger este gadget le da un estilo y forma especial a tu blog, se que a la mayoria de tus visitantes les encantara y veran mas categorias de tus articulos.

Este gadget lo puedes aplicar a tu plantilla de tu blog en simples pasos a continuacion.

1. Entra en tu cuenta de blogger & Ir a  Diseño >> Editar HTML

2. Encuentra  usando Ctrl+F  el siguiente codigo ]]></b:skin>

3.Pegue el codigo de abajo antes de  ]]></b:skin>

#Label1 a{
color:#333;
padding:2px 8px;
line-height:24px;
margin:0 2px;
background:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHIytbrVwDwlRxsJEPqVnxlxMyOd3udI7UIrxye7TWknukEflpbZvkW0ZcmTFC3TGouTawatXsRmVp2wUlRq2h6JWK1LQixbky4NZqu267-zFEDp_WjRb5hP72AZ1r6IPp0f3MBsiteAw/s1600/bricks.png) center center repeat-x;
border:1px solid #ddd;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
font-size:10px !important;
text-decoration:none;}
#Label1 a:hover{
color:#666;
background:none #fff;
text-decoration:none;}

4.Ahora da Clic en Guardar Plantilla..

  Listo...

Read More

Añadir EL Widget De Social Media De Botones Debajo de Tus Entradas

Los medios sociales crecen dia a dia y sirven para aumentar el trafico a tu blog, seria grandioso para nuestros visitantes  o seguidores compartir nuestro articulo facilmente en las redes sociales asi aumentar el trafico nuestro blog..

Hoy en este articulo te mostrare como anadir el widget para compartir en redes sociales con los botones Integrados de Google+, Facebook, Twitter y Stumbleupon  junto a un contador para cada entrada en blogger .Añadamos este  widget a tu blog.

1. Entre a la interface de Blogger ve a Plantilla > Edite Html
2. Antes de  Editar la Plantilla haga una copia de seguridad de tu plantilla
3. Da Click en Plantilla
4.Ahora busca el codigo de abajo presionando las teclas Ctrl + F

<data:post.body/>

5. Inmediatamente bajo este <data:post.body/> pegue el siguiente codigo.

<div style='clear: both;'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div align='left'>
<p style='margin:0; border-bottom:2px solid #333;'><font color='#333' face='Arial Black' size='5'>Amablemente Comparta Esta Entrada &#187;&#187;</font></p>
<table border='0' cellpadding='5' cellspacing='10'><tbody>
    <tr>
<td style='padding-top:8px;'>
<g:plusone size='tall'/>
<script type='text/javascript'>
  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</td>
      <td style='padding-top:8px; '>    <script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/>
</td>
      <td style='padding-top:8px;'>   <div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/></td>
      <td style='padding-top:8px;'><a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/> </td>
      <td>
<!-- AddThis Button BEGIN -->
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<!-- AddThis Button END -->
</td>
    </tr>
  </tbody></table></div></b:if>
<div style='clear: both;'/> 

• Reemplace Amablemente Comparta Esta Entradacon cualquier texto que desee.
• Reemplace #333 para cambiar el color de la letra.
• Reemplace #333para cambiar el color del borde debajo del texto

Que disfruten y aumente el trafico a tu blog.

Read More

Como Añadir Gadget Lea Mas Articulos Con Fotos En Blogger

Este asombroso truco  creara un resumen de tus entradas con foto. No necesitaras anadir codigo en cada entrada que hagas o escribas.

1.Eentra en tu "Plantilla" --> "Editar HTML" de tu blog.
2.Da Click en "Plantilla de Formato"
3.Baja hasta donde dice </head> tag.
4.Añade el codigo de abajo antes de </head> .

<script type='text/javascript'>
summary_noimg = 250;
summary_img = 200;
img_thumb_height = 150;
img_thumb_width = 150; 
</script>
<script type='text/javascript'>
//<![CDATA[

function removeHtmlTag(strx,chop){ 
 if(strx.indexOf("<")!=-1)
 {
  var s = strx.split("<"); 
  for(var i=0;i<s.length;i++){ 
   if(s[i].indexOf(">")!=-1){ 
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
   } 
  } 
  strx =  s.join(""); 
 }
 chop = (chop < strx.length-1) ? chop : strx.length-2; 
 while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
 strx = strx.substring(0,chop-1); 
 return strx+'...'; 
}

function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
 if(img.length>=1) { 
  imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
  summ = summary_img;
 }

 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
 div.innerHTML = summary;
}

//]]>
</script>

Nota : Puedes cambiar los valores a tu gusto.
summary_noimg : Numberos de caracteres mostrados cuando no hay una imagen.
summary_img :numeros de caracteres a mostrar cuando hay imagen.
img_thumb_height :altura de la foto.
img_thumb_width : anchura de la foto.


5AHORA baja a donde veas este codigo:

<data:post.body/>

6.Reemplaza el codigo de arriba por este de abajo.

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div style='float:right;margin-right:10px;margin-top:5px;'>
<a expr:href='data:post.url'>Read More</a>
</div>
</b:if>
</b:if>

7.Guarda tu plantilla y esta listo.disfrutalo.

Read More

La Diferencias Entre Las Paginas y Entradas de Tu Blog De Blogger

En Febrero del 2010, Blogger introdujo las Paginas : esto le da a tus blog una categorias de temas que puedes acceder a ellos atraves del  menu bar en la cabecera o una lista de enlaces en la barra del lado usando un gadget para esto, e integrandolo en el editor de paginas .

Muchas personas le llaman "Paginas Estaticas", por que uno de sus usos es que no cambia  son unicas en su forma de temas particulares.


Que tiene de especial las paginas:
Inicialmente pense que las paginas eran articulos especiales sin fecha de publicacion.Esto es verdad, pero tiene algo mas algo que no esperaba.He aqui unas cosas que he notado:

1 Las editas atraves de opciones de Blogger

Cuando vas al encasillado de opciones de paginas,la lista de paginas no es igual a la lista de entradas.
Las Paginas publicadas tienen un fondo azul, y un enlace de vista en el tab de ediccion.
Las paginas retiradas tiene un fondo gris y la palabra  "draft" debajo de estos, y no tienen enlace visto.
Ademas puedes tener muchas paginas con el mismo titulo (aun cuando seria tonto hacerlo).
 

  2.Las paginas no tiene una fecha asociada

• No son enumeradas en el gadget de archivo,
• No se pueden accesar atraves de los enlaces de Nueva entradas/ Entradas Antiguas.
• No se incluyen en ningun RSS feeds de tu blog

Esto significa que deberas usar un gadget de paginas suministrado por  Blogger o otro gadget   que incluya  los enlaces de las paginas. Si no haces esto no hay manera de que los visitantes lleguen a tus paginas.

3 .Solo una pagina se muestra al momento

Debido a esto el modelo de jump-break  no se implementa en el editor de paginas, y cualquier jump-break que pongas en una pagina (usando el codigo <!-- mas --> HTML ) es ignorado cuando la pagina se ejecuta.

4 Las Paginas no tiene labels

No se incluiran si usas el gadget de labels

5 Las Paginas no se incluyen cuando exportas el blog

En el encasillado de Configuracion ,hay una herramienta para exportar o importar tu blog.Las paginas no se incluyen en el archivo creado.

Si usted quiere hacer una copia o backup  debera hacerlo individualmente por cada pagina que tenga su blog.

(esto es un defecto que Google arreglara pronto.
UPDATE: He escuchado rumores que las paginas las exporta , pero no son publicadas automaticamente cuando las importas de un file. )

6 Las Paginas no pueden ser usadas como home page

Por defecto, tu "home page" mostrado en el articulo con la ultima fecha. 

7  Las paginas no son incluidas en tu RSS

Hay una forma de compartir tu post enviando notificaciona tus subcriptores sobre el asunto.

8 El buscador de producto de amazonno se muestra en el editor.

Esta es una observacion desde el 2010 la integracion de Blogger / Amazonha removido el editor de productos  del editor del post totalmente.

9 El editor es el unico "nuevo editor" : no tendras la opcion de usar el viejo editor para ellas.

Hay una observacion de  2010 - desde entonces esta obsoletapor que el viejo editor no esta disponible  el  "nuevo" programa de Blogger software (primer piloto de Sepiembre 2011, se coviertio en compulsorio para todo usuario en Setiembre de 2012).

10   Otras opciones no encontradas.

No puedes poner un perma link , o un  link incluido en el titulo de la pagina.

11    Las Paginas no se postean " como post"

Inicialmente las paginas eran como mini-post.  Pero ahora pueden ser un link en la barra de menu, dirigidas a una direccion de una weby asi te permite poner post n las paginas.

---

Read More