Mostrando entradas con la etiqueta gadget. Mostrar todas las entradas
Mostrando entradas con la etiqueta gadget. Mostrar todas las entradas

18 julio 2015

Poner aviso de políticas de uso de cookies en el blog


Aunque solo es obligatorio cuando se utiliza google analytics, el uso del aviso de políticas del uso de cookies en la web ya se ha generalizado por casi toda la red. Y esto en parte se debe a que al principio una ley obligaba a que toda página web advierta a los visitantes que están siendo monitoreados y que el "rastro" que dejaban al navegar por la web iba a ser usada por google  para conocer más sobre gustos y preferencias del visitante y de acuerdo a esa información, google podría ofrecerle información "más relevante", lo que a ciertos "defensores de la privacidad" les pareció que vulneraba derechos.

En fin, que, so pena de recibir una multa que no es para nada tranquilizadora (algunos dicen que se trata de muchos miles de dólares) nos veremos en la imperiosa necesidad de poner nuestro aviso de cookies para alertar a nuestros visitantes.

La buena noticia es que poner este gadget no es complicado. Solo debes ir a diseño, agregar un gadget html y pegar allí este código:

<div id="barritaloca" style="display:none;position:fixed;left:0px;right:0px;bottom:0px;width:100%;min-height:40px;background: #f3f3f3;color:#000000;z-index: 99999;">
<div style="width:100%;position:absolute;padding-left:5px;font-family:verdana;font-size:12px;top:30%;">
 Estamos obligados a avisarte que esta web utiliza cookies de todos lados para fastidiarte, asi que si continúas navegando aceptas esta política absurda de cookies.
 <a href="javascript:void(0);" style="padding:4px;background:#000;text-decoration:none;color:#f1f1f1;" onclick="PonerCookie();"><b>Acepto</b></a>
 <a href="http://www.google.com/intl/es-419/policies/technologies/cookies/" target="_blank" style="padding-left:5px;text-decoration:none;color:#666666;">Conoce más</a>
</div>
</div>
<script>
function getCookie(c_name){
 var c_value = document.cookie;
 var c_start = c_value.indexOf(" " + c_name + "=");
 if (c_start == -1){
  c_start = c_value.indexOf(c_name + "=");
 }
 if (c_start == -1){
  c_value = null;
 }else{
  c_start = c_value.indexOf("=", c_start) + 1;
  var c_end = c_value.indexOf(";", c_start);
  if (c_end == -1){
   c_end = c_value.length;
  }
  c_value = unescape(c_value.substring(c_start,c_end));
 }
 return c_value;
}
function setCookie(c_name,value,exdays){
 var exdate=new Date();
 exdate.setDate(exdate.getDate() + exdays);
 var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
 document.cookie=c_name + "=" + c_value;
}
if(getCookie('aviso')!="1"){
 document.getElementById("barritaloca").style.display="block";
}
function PonerCookie(){
 setCookie('aviso','1',365);
 document.getElementById("barritaloca").style.display="none";
}
</script>

Lo que puedes personalizar para que el aviso te quede chido. El aviso Estamosobligados..., que puedes poner la lectura que se te ocurra siempre recuerda hacer alusión a la política de cookies; en background: #f3f3f3 que es el color de fondo del aviso y color:#000000 que es el color de las letras. También puedes cambiar  background:#000;text-decoration:none;color:#f1f1f1 que es el color de fondo y de la palabra acepto.

Aunque a mi me gusta tal como muestra la imagen, ustedes pueden personalizarla de acuerdo a su gusto.



07 julio 2013

Seis botones sociales para tu blog

Seis botones sociales para tu blog
Nadie duda de la importancia de tener botones sociales en nuestro blog para que los lectores puedan seguir y compartir todas las novedades y las noticias más actualizadas del mismo. Y existen un montón de redes sociales que ya quisiéramos tenerlos todos dentro del blog, pero aunque aquello no es posible por obvias razones aparte del espacio, sí podemos poner aquellos que, al pasar el tiempo, se vuelven más populares.

Aquí les traigo unos cuantos botones que bien nos podrían ayudar con ese propósito. Se trata de 6 botones, en los cuales he incluido los que hasta ahora son los más populares de acuerdo a una encuesta.

Puedes ponerlo dentro de tu sidebar como un gadget o si lo prefieres arriba de las entradas, eso ya es tu decisión.
Para ponerlo en el sidebar, entra en Diseño, Añadir gadget html, y copia este código:

<div align='right'>
<div id='top-social-profiles'>
<div class='widget-container'>
<div class='social-profiles-widget'>
<a href='http://twitter.com/YOUR_USERNAME' target='_blank'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBsxz75eYlsP1gCU9p3i48yC7-JkHMXxxf6V1zEVTq8nLjBWTiHx5iXaYZr1fqW_TjBa6Xzo7gBuE0GjEv-sbjileyDcCUSi7C9Wyap5x7Cs71UbwHEcT1D-ZFu8x_6060N7U0JW8ek2Dw/s0/twitter.png' title='Twitter'/></a> <a href='http://facebook.com/YOUR_USERNAME' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivdfexk5Pqitqd35-eK-qL9wz6enACYg4DNMkKqH_7YGKiqTG7m4cNmRs320h_jpVjVUzygWwubkdeYHNQBpix6nZjnXfY9XEUrzb2Og1JT3qRQmV5S8TdD77YqdYhKLoZkV4hBvdGyYPI/s0/facebook.png' title='Facebook'/></a> <a href='https://plus.google.com/XXXXXXXXXXX/posts' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD4PHhkDzrEW53J2KFtjRMHLVKbR8ZLjbCz67JTPBStt86fM1o9UB0YA85HxW8RTMLX2RRayZ058uClEsPTk2A9K6nhexBe9jBfi37vn2aTPwffIgqI-6Qio3c1MD7o1x6mNSdlu_OFc2z/s0/gplus.png' title='Google Plus'/></a> <a href='http://www.linkedin.com/XXXXXXXXXXXXX/' target='_blank'><img alt='LinkedIn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggxDVpibO6SxRUvKLOcJqxQxZN1dXOVOluG84htrJqPMWqkuLxRM7Jf1VJ_jIAJk1Q98vswMwBBPBok8yF8qDdnU0APwa6LYu5GD4nY3B8XGehwuXgk_hdepwsKfFCeRRVQN6zOEg1omDb/s0/linkedin.png' title='LinkedIn'/></a> <a href='http://www.youtube.com/XXXXXXXXXXXXX' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIj-_c6nqVuJPCPesbm_DmT5qBszayvoG-3IrAbYZaZLYzUn-n63cpmaSUHflEdFTOs2S6uSUMnFdrW7HKd_27C-RdPmdo7axnlNJXkVU3lMeg8P9oHoBSj5TfDcSPIXbFU-zxUXzBfek/s506-o/icono_youtube.png' title='Youtube'/></a> <a target="blank" href="http://pinterest.com/XXXXXXXXXXXX/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Xi0EfRUUV38M3Yz-Q_4KKLQd3DejIbFYR4g2XzSoAz0N1vnS2ZF_0i_pGJ3_Kv8KwO3TAPzKbbGucu52CqWyjVANOKzxd7soZkpEjoHpQibYO8nsI_T-qvxZF098CHmke81d1EkQqq8/w80-h28-no/pinterest-button.png" title="Pinterest" /></a>
</div>          
</div>
</div>
<div style='clear:both;'/>
    </div>
<div style='clear:both;'/>
<div>
</div>

Si lo quieres arriba de las entradas, entra en Plantilla, Editar html, y con los artilugios expandidos, busca esta parte del código en tu plantilla:

<div class='post-header-line-1'/>
Justo debajo de él pega el código anterior. Debes reemplazar dode dice YOUR USERNAME con el de tu usuario de Facebook, Twitter, Youtube, Pinterest y linkedln.  

20 junio 2013

Cambiar el color de fondo del blog a gusto del lector

Cambiar el color de fondo del blog a gusto del lector

Hay un truco que me pareció muy simpático y adecuado para que nuestros visitantes puedan interactuar en nuestro blog y que lo vi en ciudad blogger. Se trata de que quienes entren al blog puedan cambiar el color del fondo de nuestro blog.

Y lo mejor es que para lograr esto solo se tiene que ingresar un gadget en uno de tus sidebar y listo. Puedes probarlo en esta entrada haciendo click en los colores que tengo a tu derecha, si ingresas en esta entrada.

El código que debes pegar es este:

<a href="#" onclick="javascript:document.body.style.backgroundColor='#ff0000'; document.body.style.backgroundImage='none';"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggi9bSrLO2MuHJtIhO2SpZJlXbN3o2HIzp-mOoBFAUJ29BR4oZncie6O8lGXQ8I2zz2OdxkLfJIncF_qD40iPvb4QODWXkZKs5_dmcwHHH4IbJAoHTyMvR2DXFL47VWsCsvPRFrB27zehX/s200/body-rojo.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#fff000'; document.body.style.backgroundImage='none';">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIKUjg3xh0STfe0VYnhUHqHRW46vWyGAM9ii45o3KvqtMbJGjfm3h1u8kOuw6nyKWPxgKTTy2BZPNadkEuSPMDglzFqoVHiWEVAbxJp1CccNIF0Lqu-kiVGI1vY3Dwke6ovVozv2GquLlF/s200/body-amarillo.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#04B404'; document.body.style.backgroundImage='none';">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCpOXqwv47PY3_PUjfQFzYBquwSNCOsPim_atUdOrfzakZIIPcPFnf7FR_d9C415D6tjHnVMnkSnAIhdZVdAfN2nGtyoOMXzUIeMk4id0pmj_CcgDsvjxn-kmsHsM_MJyT6PNtzYLjUBVV/s200/body-verde.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#0080FF'; document.body.style.backgroundImage='none';">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbiAaCV_bM4den0dd6yrFHSuy6m-t8LAUMBLxdW_LxN0iqm1aE2VvEe0LUZzzdN_bno_qqo9NWcvjgYibJAzDq7ZS1BCBg39aHzYTC-tGlu0a-6pxHb9aw0Whb3nI0Ch-O6Y2nQbFSDPle/s200/body-azul.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#CC00FF'; document.body.style.backgroundImage='none';">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp4YHmXUWSwrmtFZO2V2JL6CajS-C0e4RVmZ7meODpb9sOOmhhF3enm6JnzmuJkoJw5vL32cFyB6bKXlKybORhLOtboV4ykX3EG-FEbRtUmlEbubWTWo0luqecvtAKdy4SEYhckHzZg0-P/s200/body-morado.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#F781BE'; document.body.style.backgroundImage='none';">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL7EgU7Wqtle55cIt5FhJJe0G1XmTgsT35cF32N4fTrOwZpWLWBCPGUTbGpjiPwCET-AUp2N1mVGs_XF8P_38IufoBNPz-acYNAm8pAUi0N84DT7dW6GfJrX76sZg0qoQUlyDJlOve9PCs/s200/body-rosa.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#000000'; document.body.style.backgroundImage='none';">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhubTD0NWN9cIHSR5RrLWG8f0pYUzZWXKsuU0_u2d668eaIzfAPYY6saiiv4x901gGSXwXpZfbHMfIE9wx1SZmaSNhiwIb1x8oiOvJ9C85z-ue5MbLwZDiaqU7pJLF7SWnRNHlpv-CRzMTp/s200/body-negro.png" /></a>
<a href="#" onclick="javascript:document.body.style.backgroundColor='#FFFFFF'; document.body.style.backgroundImage='none';">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg45rAR2gOHereb7No0gwETF-3obWIkIlxmcDOnsTNoT-SOBhC-eh-JbN7Wtabxq4w5RfrFWnM93sqplkn1WEsXmCRTk4I9evT1P9uBl9VzDoAFydgZNssyLVaygiyKfkFQOYT3H80Hz31H/s200/body-blanco.png" /></a>
</center> 

Si quieres cambiar los enlaces de la imagen de los colores con letras solo tienes que reemplazar <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg45rAR2gOHereb7No0gwETF-3obWIkIlxmcDOnsTNoT-SOBhC-eh-JbN7Wtabxq4w5RfrFWnM93sqplkn1WEsXmCRTk4I9evT1P9uBl9VzDoAFydgZNssyLVaygiyKfkFQOYT3H80Hz31H/s200/body-blanco.png" /> por el nombre del color que corresponda y listo, así quedará el enlace únicamente con letras.

Casi lo olvido: Asegúrate de probar primero el fondo de tu blog. No sea que las letras de tu entrada "desaparezcan" (no se distingan) al cambiar de color el fondo de tu blog.

06 septiembre 2012

Mostrar seguidores y últimos comentarios dentro del fanbox de Twitter con jQuery



Mostrar seguidores y últimos comentarios dentro del fanbox de Twitter con jQuery

Quienes hayan puesto el fanbox detwitter en el blog Mike More trae una variación de este widget que consiste en mostrar dentro de esta misma caja los últimos comentarios de nuestros seguidores y amigos actualizándolos cada vez que alguien twitee en nuestra cuenta.
A continuación mira el gadget funcinando en este demo:
Para ponerlo en tu blog solo entra en Diseño, Añadir Gadget, Html Javascript y allí pega el siguiente código:

<!-- Include javascript and CSS once -->
<link href="http://twitter-friends-widget.googlecode.com/svn/v2/dark.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://twitter-friends-widget.googlecode.com/files/jquery.twitter-friends-2.0.min.js" type="text/javascript"></script>

<!-- Required HTML -->
<div class="twitter-friends">
   <!-- {
      username: 'twitter'
      ,friends: 1
      ,width:358
      ,users_max:16
      ,users_height:120
      ,user_image:40
      ,user_animate:'width'
      ,tweet:1
      ,tweet_height:60
      ,loop:1
   } -->
   <a class="tfw-info" href="http://www.moretechtips.net" target="_blank">Twitter Friends/Followers Widget</a>
</div>
<!-- Required HTML -->  


Cambia lo que está en azul por tu cuenta de Twitter. Recuerda no borrar el crédito de este gadget que está en el enlace al final del código, que es la dirección de su creador.
Por lo demás espero que les agrade.

18 junio 2012

Cambiar a minúsculas el título de los gadgets


Cambiar a minúsculas el título de los gadgets
Algunos blogs tienen los títulos de los gadgets con letra mayúscula, lo que a algunos resulta un tanto molesto y quisieran cambiar dicho texto a minúscula. Pues eso se cambia de una manera tan rápida y sencilla que casi no lo creerán. 
Pues sí, y para hacerlo solo entra en Diseño, Edición Html, y busca lo siguiente:
Para plantillas del Diseñador de Plantillas de Blogger:

<Variable name="widget.title.text.transform" description="Widget Title Text Transform" type="string" default="uppercase" value="uppercase"/>

Para Plantillas Personalizadas:


/* Headings
----------------------------------------------- */
h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);
text-transform: uppercase;
  margin: 0 0 .5em;
}

También puedes cambiar el tamaño, la fuente y el color del texto. En las plantillas del Diseñador de Plantillas de Blogger debes reemplazar "uppercase" por "lowercase"; o en su defecto reemplazalo por "none" y el texto será tambien normal. En Plantillas Personalizadas, deberás agregar lo que está en rojo para conseguir cambiar a minúscula el texto; también cambia lo que está en fucsia por el valor de cada propiedad, así en font: $(widget.title.font); debes reemplazar por una fuente de texto válida (arial, arial arrow, san serif, etc.); y en color: $(widget.title.color); deber poner el código de color que más gustes. Mira esta entrada para que consigas el color que deseas.

¿Y si quieres agrandar el tamaño del texto? Busca:
 
  <Group description="Gadgets" selector="h2">
     <Variable name="widget.title.font" description="Title Font" type="font"
        default="normal normal 15px Palatino, serif" value="normal normal 15px Palatino, serif"/>

Reemplaza 15px por el tamaño de texto que quieras. Por último,  si notas que el texto de la fecha de las entradas también cambia de color, sólo busca el siguiente código en tu plantilla y agrega lo que está resaltado en verde:

/* Posts
=================================================*/
h2.date-header {
                margin:1.5em 0 .5em;
        color: #999999;
                }

Con lo demás no tendrás problemas. Lo ves, te dije que era super sencillo.

BLOGER & BLOGER ® 2020 | Plantilla Adaptada y Rediseñada Por Bloger & Bloger