Apagar Luces Para Ver Video Con JQuery en Blogger

En super trucos blogger hoy te mostrare especial para los que les encanta disfrutar de videos en la internet, este es un sencillo script creado con  jQuery por Janko.

Preguntaras que es lo que este script hace? Este apaga la luz  asi todo lo que esta alrededor del video quedara en oscuras evitando que te veas distraido por otros elementos en la pagina mientras disfrutas de tu video favorito.

Bueno para ver un ejemplo de lo que estoy hablando dale click al enlace o link "Apaga las Luces".

Apaga las Luces

 Como Añadir el efecto de Luces Apagadas a Blogger

Para poner este efecto de "luces" en el blog, sigue estos pasos:

Paso 1. Entra a tu Plantilla > Editar HTML

Paso 2. Da Click en cualquier area del codigo y busca la siguiente etiqueta ,utiliza las teclas CTRL + F :

    </head>

Paso 3. Despues que lo encuentres, pega el siguiente script arriba de este:

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
    <script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function(){
    $("#darkness").css("height", $(document).height()).hide();
    $(".lightSwitcher").click(function(){
    $("#darkness").toggle();
    if ($("#darkness").is(":hidden"))
    $(this).html("Turn off the lights").removeClass("turnedOff");
    else
    $(this).html("Turn on the lights").addClass("turnedOff");
    });
    });
    //]]>
    </script>

Nota Importante:Si ya tienes instalado una version de jquery en tu Plantilla, entonces remueva la linea roja.

Paso 4. Ahora busca la siguiente etiqueta ]]></b:skin>  (Da click en la flecha de la izquierda si fuese necesario (podria usarand despues de expandirse, usar las teclas CTRL + F )

Paso 5. Justo arriba de ]]></b:skin> , añade el siguiente estilo de CSS :

    /* Apagado de Luces
    ----------------------------------------------- */
    #lightsVideo {
    position:relative;
    z-index:102;
    }
    #switch {
    max-width:640px;
    text-align:left;
    position:relative;
    height:25px;
    display:block;
    margin: 25px 0 0 60px;
    }
    .lightSwitcher {
    position:absolute;
    z-index:101;
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjahGA5E6CIAIRE7lcNHFDPK_B_qOF9e7jGjYeS2SJyaogcfE0f9PFLy7jSL4Ul_HNAVdY8FQveLmX6KeJKmrV2Dwc0jwU7ngocZrVYpFXCgn88OsNCa_zi-HphUtd4kHilse95aED95QWt/s1600/lights-on.png);
    background-repeat:no-repeat;
    background-position:left;
    padding: 0 0 0 20px;
    outline:none;
    text-decoration:none;
    }
    .lightSwitcher:hover {text-decoration:underline;}
    .turnedOff {
    color:#ffff00 !important;
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivQ-i997i2_Q2YNxyOnZtVSsSDmB1f0ThHCR_pmV0PI0YyLeZOgohnMCi04hsfD8WINVGKyd9UKqPJtBqwRnH-1Mn6ltlP8pD5IcCyOgI5YYb8SJKcuZQQyz51wIOjqyZ70dpu4CUmCApm/s1600/lights-off.png);
    }
    #darkness {
    background:#000;
    opacity:0.8;
    filter:alpha(opacity=80);
    position:absolute;
    left:0;
    top:0;
    width:100%;
    z-index:100;
    }

Paso 6. Busca la siguiente etiqueta </body> y añade el siguiente codigo de html arriba o antes de este:

<div id='darkness'/>

Paso 7. Da Click en boton de Guardar Plantilla para guardar cambios.

Luego, cuando desees añadir un video, sea en una entrada o articulo o en un Gadget como HTML/Javascript , usa el siguiente codigo:

<center>
<div id="switch"><a class="lightSwitcher" href="javascript:void(0);">Apagado de Luces</a></div>
<div id="lightsVideo">
...Aqui va el codigo del video...
</div>
</center>

Añade el codigo del video donde indica y Listo. Puedes ahora disfrutar de tus videos con las luces apagadas!
Recuerda que este super truco utiliza jQuery, si tienes instalado Scriptaculous o Mootools debes aplicar un parcho , o si utilizas otras versiones de jQuery,  debes usar una sola version.Que lo disfrutes.

Read More

Efecto de Pelar Pagina Con JQuery Para Blog De Blogger

El Super Truco Efecto de la pagina pelada es otra gran forma de atraer la atención de los visitantes, ya que aparecerá en la parte superior derecha de tu blog y que se pela al poner cursor del mouse.
Puedes ver el efecto en vivo en esta pagina solo pon el cursor en la parte superior derecha .

Esta ademas puede servir como un medio a través del cual usted puede aumentar sus suscriptores de blogs, ya que se utiliza el feed del blog. Este efecto se ha creado usando simples trucos de css y jquery y es simple de implementar en tu blog de blogger.

Como Anadir el Efecto De PelarPagina

• Si ya tienes instalado  el pluging de jquery , omita este paso, pero si no, anada el siguiente codigo de abajo dentro/despues de <head>

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

• Luego vaya a "Diseno" > "Editar HTML"
• Use ctrl F para encontrar </head> y pegue el siguiente codigo arriba/antes de

<style type='text/css'>
img { behavior: url(iepngfix.htc) }
#pageflip {
position: absolute;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .back-img {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;z-index:98;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLyU0kZiUyOBMLfjRV83s_MBbt7hoxtGBNaRniBRf0zoCGsPcyhj87Q2YnTUSSHVjsBy4J-PoQHxStqkgmOxT-bC57QTpqzgPs8fZjVeKsgwFg-rKeb3RMMQQE1yFW1eQc2hajVKYXR30G/s1600/mini_rss.png) no-repeat right top #fff;
}
</style><a href='http://ciudadblogger.info'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyjmQizvNlmAD4WsjKCJ2UttE3HkaUGI_cG4IgGW5alGz9k3jntGMxk5em0aongo6z32iAyAXpcoA2N9S69baIvit9JwIJrsQSDO3C3w2Yik2Eit_HXW-PbdkF1B0icXviwSl38fob_kg/s1600/1x1juice.png'/></a><script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .back-img&quot;).stop()
    .animate({
    width: &#39;307px&#39;,
    height: &#39;319px&#39;
    }, 500);
    } , function() {
    $(&quot;#pageflip img&quot;).stop()
    .animate({
    width: &#39;50px&#39;,
    height: &#39;52px&#39;
    }, 220);
$(&quot;.back-img&quot;).stop()
    .animate({
    width: &#39;50px&#39;,
    height: &#39;50px&#39;
    }, 200);
});
});
</script>

Copie el siguiente codigo  dentro/despues de <body> o busca <body y pega el codigo despues y cierra la etiqueta  ">"

<div id='pageflip'>
<a href=' http://feeds.feedburner.com/ciudadblogger/FyYj '><img alt='Ciudadblogger' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu2HohU8o6z6MGjAZlulpuZyd5NcJtK3aM0SX6_0VDpzQdc0yTPOeZLvhMFse4W1sUjQAugCAuc4DmLF09Mz86pdQjbL0qA_TGdFnoPqX57CkOAvWKGjFKBvfp4ysZqR3XUD-e8th0JujZ/s1600/page_flip.png'/></a>
<div class='back-img'/>
</div>

• Reemplace https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLyU0kZiUyOBMLfjRV83s_MBbt7hoxtGBNaRniBRf0zoCGsPcyhj87Q2YnTUSSHVjsBy4J-PoQHxStqkgmOxT-bC57QTpqzgPs8fZjVeKsgwFg-rKeb3RMMQQE1yFW1eQc2hajVKYXR30G/s1600/mini_rss.png con el enlace de tu imagen favorita,este es una imagen icono de rss por defecto.
• Reemplace http://feeds.feedburner.com/ciudadblogger/FyYjcon el enlace de feed, o cambielo a cualquier enlace que deseas que la imagen se dirija.
• Chequea los cambios y da clic en "Guardar Plantilla"

Eso es Todo.

Read More