Añadir Widget de Caja de Notificacion Parpadiante en Blogger

Hello Amigos! Llama la atencion de tus visitantes y lectores de articulos de tu blog de blogger a la hora de dar una importante noticia o nota importante.Es una Caja de Notificacion.Para esto haremos una caja de notificacion.Adicionalmente se le ha añadido un efecto hover y que parpadea, que mejora o impresiona tu articulo.

Manos a la obra par a insertarlo en blogger.Mira el siguiente ejemplo.

Note:-Caja de Notificacion

Paso1 : Añadir el CSS 

• Entra en tu cuenta de Blogger
• Plantilla> Editar Html 
• Busca el siguiente codigo ]]></b:skin> (Ctrl+f)
• Añade el siguiente codigo antes de etiqueta ]]></b:skin>

.tip {
text-decoration: blink;
background: #FFC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAfMhVNqgBGLuWRn24IyIxG-mnUFTuqaFg34Y-FB5m487RwTDW83-0SCsZV_P8bKtoZNfFaok1-TU3FHmE1Z9sQEO8NOaPWcgaReNFIv1ku_noHhuLBC0dyttCu9jp0_GxYQ5pwRLyC5rg/s1600/pit2.png) center no-repeat;
margin: 0 auto;
width: 90%;
display: block;
border: 1px solid #D5B900;
background-position: 7px 50%;
padding: 10px 10px 10px 45px;
vertical-align: text-top !important;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.tip:hover{
 box-shadow: 0 0 5px 2px rgba(0,0,0,.35);
}

Paso 2 : Implementando la Caja de Notificacion 

Cuando desees usar esta caja solo usa el codigo de abajo : 

<div class="tip"><blink>Note:- </blink>Tu Texto Va Aqui</div>

Para finalizar Reemplace el texto en Rojo con el tuyo. 

Read More

Añadir Efecto Hover a Articulos De Blog De Blogger

 En este tutorial te mostrare como añadir estilo al borde de entrada de tu blog de blogger.En este articulo te enseñare como añadirle color al borde de tus articulos con efecto Hover-(esto es cuando pasar el cursor sonre el mismo se animara )cambiara de color el borde en tu pagina principal.Para hacerlo solo sigue estos sencillos pasos.
Ejemplo:

1.Entra en tu cuenta de Blogger
2.Da Click ahora en Plantilla>>Editar Html

3.Ahora encuentra el siguiente codigo presionando CTRL y F

.post {margin:.0;padding-bottom:0}

4.Luego reemplace el codigo de arriba con el siguente codigo.

.post {
    float: left;
    width: 600px;
    margin: 0 0 10px;
    padding: 10px;
    border:solid 3px #6a6970;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    -moz-box-shadow: 3px 5px 6px #000000;
    -webkit-box-shadow: 3px 5px 6px #000000;
    box-shadow: 3px 5px 6px #000000;

}
.post:hover {
    border:solid 1px #949494;
}

Customizacion

• Cambie 600px para aumentar o disminuir el ancho del borde de la entrada o articulo.

• Cambie 1px para aumentar o disminuir el efecto de Hover del borde. 
  

• Cambie #6a6970 para cambiar el color del borde.

Read More

Widget de Slide Eggs Bookmark Para Blog De Blogger

En este instante te dare un widget muy atractivo en forma de huevo para que lo integres a tu blog que ayudara a esparcir tus articulos en las redes sociales.Se trata de un atractivo truco que incluye el Efecto Hover este incluye los botones de Facebook compartir, Twitter,Google +, Blogger, LinkedIn, Stumble Upon, Email.

Como anadir este widget en forma huevo a tu blog de blogger.


1. Entrar a la cuenta de blogger e Ir a Diseño >> Edición de HTML
 
2. Encuentre la siguiente etiqueta usando Ctrl + F </ head>

3. Pegue el código de abajo antes de  </ head>

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options ({publisher: &quot;bea50586-2b9f-448d-947a-01385f28e305&quot;, onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

 5. Ahora busca el siguiente código mediante el uso de Ctrl + F </ body>

6. Pegue el código de abajo  antes de eiqueta </ body>

<div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareEgg&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#39;linkedin&#39;,&#39;blogger&#39;,&#39;stumbleupon&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareegg&#39;});</script><a href="http://www.ciudadblogger,info/">Blogger Widgets</a>

7. Ahora guarde la plantilla, ya está.

Read More

Menu Horizontal Para Blog En 3D

 
Existen un sinnumero de menu desplazables para  blogger, hoy compartire un menu horizontal de los mejores navegadores que jamas hayas visto. Este se fija bien en la plantilla de blogspot y no requiere ni jQuery o JavaScript, solo puro CSS y HTML. Este tiene un efecto de 3D al poner el cursor da la vuelta.

Ejemplo:

• Home HomeHome
• AboutAboutAbout
• Services ServicesServices
• Blogging BloggingBlogging

Como Anadirlo a Blogger

Anadiendo el Codigo CSS

• Entra en la Interface de Blogger
• Da Click en Plantilla > Edite HTML > Proceda
• Busca la siguiente etiqueta ]]></b:skin> y pegue el codigo de abajo sobre esta.

/* 3d Flipping Menu por Ciudadblogger.info */
        .block-menu {
            display: block;
            background: #000;
        }

        .block-menu li {
            display: inline-block;
        }

        .block-menu li a {
            color: #fff;
            display: block;
            text-decoration: none;
            font-family: 'Passion One',Arial,sans-serif;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
            font-smoothing: antialiased;
            text-transform: uppercase;
            overflow: visible;
            line-height: 20px;
            font-size: 24px;
            padding: 15px 10px;
        }

        /* animation domination */
        .three-d {
            -webkit-perspective: 200px;
            -moz-perspective: 200px;
            perspective: 200px;
            -webkit-transition: all .07s linear;
            -moz-transition: all .07s linear;
            transition: all .07s linear;
            position: relative;
        }

            .three-d:not(.active):hover {
                cursor: pointer;
            }

            .three-d:not(.active):hover .three-d-box,
            .three-d:not(.active):focus .three-d-box {
                -moz-transform: translateZ(-25px) rotateX(90deg);
                -webkit-transform: translateZ(-25px) rotateX(90deg);
                -o-transform: translateZ(-25px) rotateX(90deg);
                transform: translateZ(-25px) rotateX(90deg);
            }

        .three-d-box {
            -webkit-transition: all .5s ease-out;
            -moz-transition: all .5s ease-out;
            -ms-transition: all .5s ease-out;
            -o-transition: all .5s ease-out;
            transition: all .5s ease-out;
            -webkit-transform: translatez(-25px);
            -moz-transform: translatez(-25px);
            -o-transform: translatez(-25px);
            transform: translatez(-25px);
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
            pointer-events: none;
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 100%;
        }

        .front {
            -webkit-transform: rotatex(0deg) translatez(25px);
            -moz-transform: rotatex(0deg) translatez(25px);
            -o-transform: rotatex(0deg) translatez(25px);
            transform: rotatex(0deg) translatez(25px);
        }

        .back {
            -webkit-transform: rotatex(-90deg) translatez(25px);
            -moz-transform: rotatex(-90deg) translatez(25px);
            -o-transform: rotatex(-90deg) translatez(25px);
            transform: rotatex(-90deg) translatez(25px);
            color: #FFE7C4;
        }

        .front, .back {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: black;
            padding: 15px 10px;
            color: white;
            pointer-events: none;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

Guarda tu plantilla.


 Anadiendo el Codigo HTML

• Entra en Diseno > Anadir un Gadget (debajo de la seccion de encabezado)
• Escoja HTML/JavaScript y pegue el siguiente codigo.

<ul class="block-menu">
<li><a href="#" class="three-d">
Home
<span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span>
</a></li>
<li><a href="#" class="three-d">
About<span class="three-d-box"><span class="front">About</span><span class="back">About</span></span>
</a></li>
<li><a href="#" class="three-d">
Services
<span class="three-d-box"><span class="front">Services</span><span class="back">Services</span></span>
</a></li>
<li><a href="#" class="three-d">
Blogging
<span class="three-d-box"><span class="front">Blogging</span><span class="back">Blogging</span></span>
</a></li>
<li><a href="#" class="three-d">
Create this
<span class="three-d-box"><span class="front">Create this</span><span class="back">Create this</span></span>
</a></li>
</ul>

• Edite las partes con las sombras  a tu manera
• Guarda este widget y Listo!

Read More

Añadir Efecto Multi-Color A los Enlaces en blogger

Este es un simple truco para los links o enlaces en buen español hacer que estos al poner el cursor del mouse sobre ellos cambien de color incluyendo a verde luego anaranjado,amarillo,rojo etc. con la implementacion de un sencillo script a la plantilla html de tu blog.Sigue estos faciles pasos y wala lo obtendras y los visitantes a tu blog lo disfrutaran.

Añadir a Los Enlaces Efecto Multi-Color a tu blog de Blogger

1.Entra a la interface de blogger--> Diseño- -> Edite HTML

2.Busca la etiqueta </head> .

3.Ahora anade el codigo de abajo antes de la etiqueta </head> .

<script type='text/javascript'>
//<![CDATA[
var rate = 20;
if (document.getElementById) 
window.onerror=new Function("return true")
var objActive;  // The object which event occured in 
var act = 0;    // Flag during the action 
var elmH = 0;   // Hue 
var elmS = 128; // Saturation 
var elmV = 255; // Value 
var clrOrg;     // A color before the change 
var TimerID;    // Timer ID
if (document.all) { 
    document.onmouseover = doRainbowAnchor; 
    document.onmouseout = stopRainbowAnchor; 
} 
else if (document.getElementById) { 
    document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT); 
    document.onmouseover = Mozilla_doRainbowAnchor; 
    document.onmouseout = Mozilla_stopRainbowAnchor; 
}
function doRainbow(obj) 
{ 
    if (act == 0) { 
        act = 1; 
        if (obj) 
            objActive = obj; 
        else 
            objActive = event.srcElement; 
        clrOrg = objActive.style.color; 
        TimerID = setInterval("ChangeColor()",100); 
    } 
}

function stopRainbow() 
{ 
    if (act) { 
        objActive.style.color = clrOrg; 
        clearInterval(TimerID); 
        act = 0; 
    } 
}

function doRainbowAnchor() 
{ 
    if (act == 0) { 
        var obj = event.srcElement; 
        while (obj.tagName != 'A' && obj.tagName != 'BODY') { 
            obj = obj.parentElement; 
            if (obj.tagName == 'A' || obj.tagName == 'BODY') 
                break; 
        }
        if (obj.tagName == 'A' && obj.href != '') { 
            objActive = obj; 
            act = 1; 
            clrOrg = objActive.style.color; 
            TimerID = setInterval("ChangeColor()",100); 
        } 
    } 
}

function stopRainbowAnchor() 
{ 
    if (act) { 
        if (objActive.tagName == 'A') { 
            objActive.style.color = clrOrg; 
            clearInterval(TimerID); 
            act = 0; 
        } 
    } 
}

function Mozilla_doRainbowAnchor(e) 
{ 
    if (act == 0) { 
        obj = e.target; 
        while (obj.nodeName != 'A' && obj.nodeName != 'BODY') { 
            obj = obj.parentNode; 
            if (obj.nodeName == 'A' || obj.nodeName == 'BODY') 
                break; 
        }
        if (obj.nodeName == 'A' && obj.href != '') { 
            objActive = obj; 
            act = 1; 
            clrOrg = obj.style.color; 
            TimerID = setInterval("ChangeColor()",100); 
        } 
    } 
}

function Mozilla_stopRainbowAnchor(e) 
{ 
    if (act) { 
        if (objActive.nodeName == 'A') { 
            objActive.style.color = clrOrg; 
            clearInterval(TimerID); 
            act = 0; 
        } 
    } 
}

function ChangeColor() 
{ 
    objActive.style.color = makeColor(); 
}

function makeColor() 
{ 
    // Don't you think Color Gamut to look like Rainbow?
    // HSVtoRGB 
    if (elmS == 0) { 
        elmR = elmV;    elmG = elmV;    elmB = elmV; 
    } 
    else { 
        t1 = elmV; 
        t2 = (255 - elmS) * elmV / 255; 
        t3 = elmH % 60; 
        t3 = (t1 - t2) * t3 / 60;
        if (elmH < 60) { 
            elmR = t1;  elmB = t2;  elmG = t2 + t3; 
        } 
        else if (elmH < 120) { 
            elmG = t1;  elmB = t2;  elmR = t1 - t3; 
        } 
        else if (elmH < 180) { 
            elmG = t1;  elmR = t2;  elmB = t2 + t3; 
        } 
        else if (elmH < 240) { 
            elmB = t1;  elmR = t2;  elmG = t1 - t3; 
        } 
        else if (elmH < 300) { 
            elmB = t1;  elmG = t2;  elmR = t2 + t3; 
        } 
        else if (elmH < 360) { 
            elmR = t1;  elmG = t2;  elmB = t1 - t3; 
        } 
        else { 
            elmR = 0;   elmG = 0;   elmB = 0; 
        } 
    }
    elmR = Math.floor(elmR).toString(16); 
    elmG = Math.floor(elmG).toString(16); 
    elmB = Math.floor(elmB).toString(16); 
    if (elmR.length == 1)    elmR = "0" + elmR; 
    if (elmG.length == 1)    elmG = "0" + elmG; 
    if (elmB.length == 1)    elmB = "0" + elmB;
    elmH = elmH + rate; 
    if (elmH >= 360) 
        elmH = 0;
    return '#' + elmR + elmG + elmB; 
}
//]]>
</script>

Nota: Puedes cambiar el valor de var rate = 20. Este controla la velocidad con que los enlaces cambian de color.

5.Ahora da click en guardar plantilla y listo.

Read More