martes, 11 de noviembre de 2014

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

viernes, 31 de octubre de 2014

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



miércoles, 29 de octubre de 2014

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


sábado, 25 de octubre de 2014

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

jueves, 23 de octubre de 2014

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>
 

©2011 Trucos Gadgets Para Blogger | FuuTheme diseñado por Fuutec | Ir arriba ↑