Quitar el fondo de un gadget

Hola a todos los angelitos de este blog ♥ El día de hoy les traigo un tutorial super fácil de como eliminarle el fondo a uno de nuestros gadgets, como se muestra en la imagen o aquí en mi blog de pruebas, bueno sin mas empecemos:

Paso 1:

Una vez instalado nuestro gadget, al que le queremos quitar el fondo, abrimos el blog donde lo pusimos. El que yo voy a utilizar de ejemplo, en este tutorial, es el de la imagen del osito, ustedes pueden quitarle el fondo a cualquier gadget, no solo a uno que tenga una imagen.

Paso 2:

Bueno ahora necesitamos averiguar el "nombre" de nuestro gadget, para obtenerlo primero haremos clip derecho en el gadget (no hagan el clip sobre una imagen, háganlo en alguna parte vacía del gadget), y seleccionamos la ultima opción donde dice Inspeccionar elemento. 

Paso 3:

Les aparecerá un ventana como la que muestra la imagen, con muchos códigos y uno de los renglones resaltado con gris, ahí es donde tenemos que mirar el "nombre" de nuestro gadget, por ejemplo el mio es HTML1 el de ustedes podría ser HTLM2 o 3 o 15 etc , bueno recordemos ese numerito porque lo utilizaremos enseguida.

Paso 4:

Vamos a Plantilla | Editar HTML | y con control + F buscamos ]]></b:skin> una vez que nos aparece, pegamos encima el siguiente código:

#HTML1 {
background: none;
border: none;
border-radius: none;
box-shadow: none;
}

Ahora es donde tienen que modificar lo que esta en negrita por el nombre de su gadget.

Paso 5: Resultado

 Y aquí está mi resultado, y solo son 5 pasos.. cualquier duda pueden preguntarme a mi correo sol.pourcel@gmail.com, espero les haya servido el tutorial ♥

Seguir leyendo

Como colocar una barrita de copy right en tu blog

Hola mis queridos angelitos, en la entrada de hoy les traigo un sencillo tutorial de como colocar en la parte de abajo de su blog una barrita de copyright o en donde puedan escribir el texto que quieran. Pueden verlo en la imagen de ejemplo o en mi blog de pruebas ♥

Paso 1 - 

Con ctrl + F busca </body> y coloca encima lo siguiente:

   <div id='copyright'>
      <center>
        <b>
          Gracias por pasarte por el blog♥ .. aquí debes insertar tu texto.
        </b>
      </center>
    </div>

Paso 2 - 

Pega encima de ]]></b:skin>  el siguiente código:

#copyright {
padding: 8px;
background-color: #fff /* Color del fondo */
background-image: url('url de tu imagen'); /* Imagen del fondo */ color: #222;   /* Color del texto */
margin-bottom: -2px;
font-family: Arial;  /* Tipo de fuente */
font-size: 8pt;  /* Tamaño de la fuente */
z-index: 1000;
}

Paso 3 -

Personaliza a tu gusto, les indiqué que cambia que con algunas etiquetas. 

Nota: si no quieres que tu barrita lleve una imagen de fondo y solo tenga un color debes borrar donde dice background-image: url('url de tu imagen'); 

Espero les haya servido el tutorial ♥ cualquier duda escríbeme a sol.pourcel@gmail.com

Seguir leyendo

Ventanas emergentes (pop-up) en tu blog

Hola a todos mis queridos angelitos hoy les traigo un pequeño tutorial de como colocar ventanas emergentes en tu blog aquí la vista previa (ver en el sidebar)

Paso 1

Para tenerlo en su blog deben ir a plantilla/ edición HTLM y pegar arriba de ]]></b:skin> el siguiente código:

#fade {
display: none;
background: #000;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: .20;
z-index: 9999;
}
.popup_block{
display: none;
background: #fff url(url de tu fondo)repeat;
padding: 20px;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%;
left: 50%;
z-index: 99999;
border: 2px solid #fafafa;
-webkit-border-radius: 14px;
-moz-border-radius: 14px;
border-radius: 14px;
}
img.btn_close {
float: right;
margin: -28px -28px 0 0;
background: transparent;
border: none;
}
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}

Paso 2:

Ahora debes editar lo que esta resaltado, abajo explico que cambia que:

top: 50%;  entre mayor sea el porcentaje la ventara aparecerá mas abajo
left: 50%; entre mayor sea porcentaje  la ventara aparecerá más a la derecha.

Si no modificas esos valores la ventana aparecerá en el centro de tu pantalla

background: #fff url(url de tu fondo)repeat;  este código es para modificar el fondo de la ventana emergente, solo remplaza con la url de tu imagen o el color que deseas que tenga el fondo.

-webkit-border-radius: 14px; -moz-border-radius: 14px;border-radius: 14px;

este código es para redondear los bordes de la ventana emergente, entre mayor sea el número mas redondeada será.

Paso 3

Una vez que lo editas a gusto ve a diseño y en un gadget coloca lo siguiente:

<a href="#?w=500" rel="ventana1" class="poplight"><img border="0" src="url de tu gif" /></a><br/>

<div id="ventana1" class="popup_block">

<center><img border="0" src="urldetu imagen" />
Contenido de tu ventana!
</center>
</div>


<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    //Code goes here
});
//When you click on a link with class of poplight and the href starts with a # 
$('a.poplight[href^=#]').click(function() {
    var popID = $(this).attr('rel'); //Get Popup Name
    var popURL = $(this).attr('href'); //Get Popup href to define size
    //Pull Query & Variables from href URL
    var query= popURL.split('?');
    var dim= query[1].split('&');
    var popWidth = dim[0].split('=')[1]; //Gets the first query string value
    //Fade in the Popup and add close button
    $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://media.tumblr.com/tumblr_m441nk6nGt1qb1380.gif" class="btn_close" title="Cerrar ventana" alt="Close" /></a>');
    //Define margin for center alignment (vertical   horizontal) - we add 80px to the height/width to accomodate for the padding  and border width defined in the css
    var popMargTop = ($('#' + popID).height() + 80) / 2;
    var popMargLeft = ($('#' + popID).width() + 80) / 2;
    //Apply Margin to Popup
    $('#' + popID).css({
        'margin-top' : -popMargTop,
        'margin-left' : -popMargLeft
    });
    //Fade in Background
    $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
    $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies 
    return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
    $('#fade , .popup_block').fadeOut(function() {
        $('#fade, a.close').remove();  //fade them both out
    });
    return false;
});
</script>

Lo que está en purpura es lo que se verá en el gadget, lo que al hacerle clip te abrirá la ventana emergente, puedes poner una imagen o un texto con un link.

Si quieres poner un link en lugar de una imagen remplaza todo lo que está en purpura con este código:

<center><a href="#?w=500" rel="ventana1" class="poplight"> Tu Texto aquí </a></center>

Lo que está en rojo es lo que aparecerá en la ventana emergente, remplaza solamente donde dice Aquí va el contenido de tu ventana puedes colocar lo que quieras (imágenes, texto un cbox, etc.).

Lo que está en azul no debes borrarlo nunca o no funcionará.

¿Como agregar más ventanas?

Pega en cualquier parte de tu blog los códigos purpurá y rojo, no hace falta que los pongas en el mismo gadget mientras no borres el gadget donde se encuentre lo de color azul (que no hace falta que lo pegues mas de una vez) podrás colocar ventanas emergentes por todo tu blog modificando y pegando lo siguiente donde quieras:

<center><a href="#?w=500" rel="ventana1" class="poplight"><img src="url de tu imagen" /></a></center>

<div id="ventana1" class="popup_block">
<center> Aquí va el contenido de tu ventana </center><br/>
</div>

Debes remplazar lo que esta en rosado por ventana2 o ventana3 etc, no importa que nombre le pongas en cuanto respete lo siguiente: cada código rojo y purpura de la misma ventana emergente deben tener el mismo nombre si no no funcionará, los nombres de los códigos purpura y rojo no deben repetirse con los de las otras ventanas emergentes que pongas en el blog.

Código creado por HoneyPixel

Espero que se entienda lo ultimo u.u cualquier duda pueden escribirme a sol.pourcel@gmail.com o dejarme un comentario.

Seguir leyendo