sábado, 20 de mayo de 2017

Leer más o Seguir leyendo automático con imágenes en miniatura en blogger


Diseño>Edición de HTML>expandimos artilugios



Busca la etiqueta <data:post.body/> y elimínala para incluir esto en su lugar:


<b:if cond='data:blog.pageType == "item"'><data:post.body/><b:else/>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/><b:else/>
<b:if cond='data:post.hasJumpLink'><data:post.body/><b:else/>
<b:if cond='data:post.snippet'><b:if cond='data:post.thumbnailUrl'><div class='bljjteImgn'><img expr:src='data:post.thumbnailUrl'/></div></b:if> <data:post.snippet/><div class='blLeerjtems'><a expr:href='data:post.url + "#more"' expr:title='data:post.title'>Leer post completo...</a></div>
<b:else/><data:post.body/></b:if></b:if></b:if></b:if>

 Puedes personalizar la frase que llevará el enlace editando el texto en color verde.

Ahora localiza la etiqueta </head> y justo antes añade esta línea:


<link href='https://sites.google.com/site/scriptsbalcon/b/bljLeermsjte.css' rel='stylesheet' type='text/css'/>

 Haz vista previa para comprobar el resultado y guarda la plantilla para terminar.




domingo, 14 de mayo de 2017

Fondo de noche estrellada para el blogger



Se trata de un código de css para nuestro blog blogger se caracteriza por background principal oscuro, podemos mostrar a modo simula torio unas estrelleras que centellean y parpadean sin parar como si el fondo de nuestro sitio se pareciera a un universo relajante.

Para poder ver un demo de este Fondo para su blog blogger solo ciclando aquí si te gusta si quieres colocarlo en tu blog aqui esta el codigo :


Modo de empleo en tu blog es facil solo buscar el siguiente codigo :

Copia el codigo de abajo y pegalo entre las etiquetas <body> de tu plantilla.


<div class="estrellas"></div>
<style>
@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
.estrellas {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
}
body {
  background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtQpkMzhPuc2atAOw3rzpwWbpxj3l1-vRbhiX5qAsjRmR46XJQD1nuYx9TCa3HjN23ZM3-hY9R01w5lrSYPwc6Xt-ojXx_4RIP8i8nvSxItubqOHNPtjeeJTPFWXJPSbZ9WxCRsG59ojc/s1600/estrellas.png) repeat top center;
}
.estrellas{
  background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxSIU0yCOhZi8JnX1Kxm4Q2DZMlMJ5s6or2pWVA3o2L5cb9KUKr1vSarQbfNWBhsLReimwLB1hDVGxVcdZXrmh97aRJsgYfyjmggF0CxST24z0b52SE-UtAlRUU9BnfKkiPHT0lpQtnLA/s1600/twinkling.png) repeat top center;
  z-index:-2;
  -moz-animation:move-twink-back 100s linear infinite;
  -ms-animation:move-twink-back 100s linear infinite;
  -o-animation:move-twink-back 100s linear infinite;
  -webkit-animation:move-twink-back 100s linear infinite;
  animation:move-twink-back 100s linear infinite;
}
</style>

Proteger el contenido de tu bloggger y Textos e imágenes


Buenos días, tarde o noche blogueros , voy a compartir con ustedes un pequeño truco que recién aprendí para proteger nuestro contenido de blogger que funciona perfecto.


Características:
  • Desactiva Click derecho
  • Evita el copiar y pegar
  • Evita que arrastren tus imágenes a su computador
  1. Opción 1: Lo primero que debemos hacer es Ir a Plantillas>Edición HTML hay buscaremos la etiqueta:
<body>
Cuando la encuentren la Reemplazan por el siguiente codigo:

<body oncontextmenu='return false;' onmousedown='return false;' onselectstart='return false;'>

  1.  Opción 2: Si no encuentran la etiqueta <body> Busquen la siguiente:
</head>
 abajo de esa etiqueta te va a parecer la etiqueta <body> quzas un poco diferente, lo cual no importa simplemente la reemplazan por el codigo:


<body oncontextmenu='return false;' onmousedown='return false;' onselectstart='return false;'>

Y eso seria todo ya tendríamos el contenido protegido.



lunes, 29 de agosto de 2016

Colocar Mensaje de Bienvenida o Alerta Para Blogger



Esta Vez les vengo a traer este truco que suele estar en muchos blogs que visitas y quieres tener en tu blog que al entrar te puede decir que no olvides comentar o no  copies o algo que quiera informar sobre el blog pero resumido bueno sin mas nada que decir les explicare como colocar este pequeño truco para que lo tengas en tu blog blogger de Mensaje de Bienvenida para tu blogger


Simplemente vamos a agregar un gadget HTML/Javascript (sin ponerle título, no es necesario) y vamos a volcar dentro de él lo siguiente:


<script language="JavaScript" type="text/javascript">
alert("Acá coloca el mensaje que quieres que aparezca");
</script>

Ya Solo te toca cambiar lo que esta de color rojo porque que quieras que aparesca en el mensaje de entrar en tu blog blogger 

lunes, 15 de agosto de 2016

Colocar Borde de Colores a una Imagen

Para poner borde a imágenes de una entrada utilizamos, dependiendo de la ubicación, los siguientes códigos:


Imagen a la izquierda :

<div class="separator" style="clear: both; text-align: center;"><img src="URL" style="clear: left; float: left; margin-top: 5px; margin-right: 10px; border: 1px solid #COLOR"/></div>

Imagen a la derecha :

<div class="separator" style="clear: both; text-align: center;"><img src="URL" style="clear: right; float: right; margin-top: 5px; margin-left: 10px; border: 1px solid #COLOR"/></div>

Imagen en el centro:

<div class="separator" style="clear: both; text-align: center;"><img src="URL" style="margin-left: 1opx; margin-right: 110px; border: 1px solid #COLOR"/></div>


  • En URL ponemos la URL de la imagen correspondiente.
  • En COLOR ponemos el número correspondiente al código del color que se asigne al borde.

Blog para saber los códigos de colores HTML :  AQUI

lunes, 21 de marzo de 2016

Gadget Elegante Google Traductor Para Blogger



Bueno en esta ocacion les  compartiré un gadget  Google Translate widget que se pueden conectar en la barra lateral o pie de página del blog. Seguiremos los siguientes pasos sencillos y básicos.

Abre tu Blogger> Diseño> Añadir Gadget> Haz clic en el HTML / JavaScript> Copiar todo el código que esta abajo> Guardar el Gadget.


<style type="text/css">
#translator-wrapper {
  display:block;
  width:90%;
  max-width:300px;
  border:none;
  background-color:#fff;
  color:#444;
  overflow:hidden;
  position:relative;
  height:40px;
  line-height:40px;
  border:1px solid #e0e0e0;
}
#translator-wrapper select {
  border:none;
  background:transparent;
  font-family:'Verdana',Arial,Sans-Serif;
  font-size:12px;
  width:100%;
  color:#444;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  -webkit-appearance:none;
  cursor:text;
  padding:5px 10px;
}
#translator-wrapper a,
#translator-wrapper a:hover {
  display:block;
  background-color:#4791d2;
  border:none;
  color:#fff;
  margin:0 0;
  text-decoration:none;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  cursor:pointer;
  width:14%;
  transition:all 0.3s ease;
}
#translator-wrapper a:before {
  content:"";
  display:block;
  width:0;
  height:0;
  border:6px solid transparent;
  border-left-color:white;
  position:absolute;
  top:50%;
  left:45%;
  margin-top:-5px;
}
#translator-wrapper a:hover {opacity:0.9;}
#translator-wrapper a:active {opacity:0.9;}
#translator-wrapper select:focus,
#translator-wrapper a:focus,
#translator-wrapper select:active,
#translator-wrapper a:active {
  border:none;
  outline:none;
  cursor:pointer;
}
option {
  background:#444;
  color:#e0e0e0;
}
</style>
<div id="translator-wrapper">
    <select id="translate-language">
        <option value="en" selected="selected">English</option>
        <option value="id">Indonesian</option>
        <option value="af">Afrikaans</option>
        <option value="sq">Albanian</option>
        <option value="ar">Arabic</option>
        <option value="hy">Armenian</option>
        <option value="az">Azerbaijani</option>
        <option value="eu">Basque</option>
        <option value="be">Belarusian</option>
        <option value="bn">Bengali</option>
        <option value="bg">Bulgarian</option>
        <option value="ca">Catalan</option>
        <option value="zh-CN">Chinese</option>
        <option value="hr">Croatian</option>
        <option value="cs">Czech</option>
        <option value="da">Danish</option>
        <option value="nl">Dutch</option>
        <option value="en">English</option>
        <option value="eo">Esperanto</option>
        <option value="et">Estonian</option>
        <option value="tl">Filipino</option>
        <option value="fi">Finnish</option>
        <option value="fr">French</option>
        <option value="gl">Galician</option>
        <option value="ka">Georgian</option>
        <option value="de">German</option>
        <option value="el">Greek</option>
        <option value="gu">Gujarati</option>
        <option value="ht">Haitian Creole</option>
        <option value="iw">Hebrew</option>
        <option value="hi">Hindi</option>
        <option value="hu">Hungarian</option>
        <option value="is">Icelandic</option>
        <option value="id">Indonesian</option>
        <option value="ga">Irish</option>
        <option value="it">Italian</option>
        <option value="ja">Japanese</option>
        <option value="kn">Kannada</option>
        <option value="ko">Korean</option>
        <option value="la">Latin</option>
        <option value="lv">Latvian</option>
        <option value="lt">Lithuanian</option>
        <option value="mk">Macedonian</option>
        <option value="ms">Malay</option>
        <option value="mt">Maltese</option>
        <option value="no">Norwegian</option>
        <option value="fa">Persian</option>
        <option value="pl">Polish</option>
        <option value="pt">Portuguese</option>
        <option value="ro">Romanian</option>
        <option value="ru">Russian</option>
        <option value="sr">Serbian</option>
        <option value="sk">Slovak</option>
        <option value="sl">Slovenian</option>
        <option value="es">Spanish</option>
        <option value="sw">Swahili</option>
        <option value="sv">Swedish</option>
        <option value="ta">Tamil</option>
        <option value="te">Telugu</option>
        <option value="th">Thai</option>
        <option value="tr">Turkish</option>
        <option value="uk">Ukrainian</option>
        <option value="ur">Urdu</option>
        <option value="vi">Vietnamese</option>
        <option value="cy">Welsh</option>
        <option value="yi">Yiddish</option>
    </select><a id="translate-me" href="#" title="Translate"></a>
</div>
<script type="text/javascript">
(function() {
    var mylang = "id", // Your website language
        anchor = document.getElementById('translate-me');
    anchor.onclick = function() {
        window.open('http://translate.google.com/translate?u=' + encodeURIComponent(location.href) + '&langpair=' + mylang + '%7C' + document.getElementById('translate-language').value + '&hl=en');
        return false;
    };
})();
</script>

Añadir Widget Social estilo Metro Blogger

Hola hoy vamos a ver como colocar un widget social en nuestro blog este widget tiene un estilo modelo donde vamos a poder colocar nuestros enlaces sociales de Facebook, Twitter, Google + y las entradas RSS, con solo colocar este codigo HTML a continuacion



Vamos a instalar el widget a continuacion ;

1. Una vez en el Dashboard de nuestro blogger, vamos a la opción de diseño de nuestro panel izquierdo.




2. El segundo paso es añadir un Gadget en el lugar que deseemos mostrar el widget.



3. el tercero es seleccionar la opción HTML/Javascript



4. cuarto el titulo del Widget y agregamos el siguiente código.


<div class="metro-social">
<li><a class="fb" href="Tu URL de Facebook"></a></li>
<li><a class="tw" href="Tu URL de Twitter"></a></li>
<li><a class="gp" href="Tu URL de GooGle"></a></li>
<li><a class="fd" href="Tu URL de FeedBurner"></a></li>
</div>
<style>
/*Metro UI Social Profile Widget v2.0 by Tech Prevue Labs
Web link to gadget code:
Distributed under license CC BY-NC-ND 3.0 INT
Please keep license information intact while using this widget*/
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:140px;height:70px}
.metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/ncoLY) no-repeat center center #e9a01c;width:282px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .fd{background:url(//goo.gl/JFGqn) no-repeat center center #e9a01c}
</style>


ya solo te toca cambiar las URL que estan en roja por tus redes sociales

domingo, 30 de noviembre de 2014

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;
}

jueves, 27 de noviembre de 2014

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


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


viernes, 14 de noviembre de 2014

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.

jueves, 13 de noviembre de 2014

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

martes, 11 de noviembre de 2014

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



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>

jueves, 18 de septiembre de 2014

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.


miércoles, 17 de septiembre de 2014

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>
 

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