TUTORIALES DE BLOGGER: agosto 2016

Introduccion de mensaje de Bienvenida

Vamos a Plantilla/Editar HTML

Después buscamos lo siguiente Presionamos Ctrl+F :

<body>

Si no la encuentras busca entonces este:

<body expr:class='"loading" + data:blog.mobileClass'>

Justo debajo añade lo siguiente:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id="fondointro"><div id="imagenintro"><img src="URL DE LA IMAGEN DE INTRO" style="position:fixed; top:10%; left:40%;"/></div>
<a href="javascript:void(0)" onclick="entrarblog()" style="text-decoration:none"><div id="botonintro" onmouseout="botonpulsado()" onmouseover="botonopulsado()"><span id="textoboton"><img src='URL DEL BOTON DE INTRO'/></span></div></a></div></b:if>
<script type='text/javascript'>
function entrarblog() {
document.getElementById('imagenintro').style.display="none";
document.getElementById('botonintro').style.display="none";
document.getElementById('fondointro').style.display="none";}
</script>
<script type='text/javascript'>
function botonopulsado() {
document.getElementById('botonintro').style.top="55.2%";
document.getElementById('botonintro').style.left="45.1%";
}
</script>
<script type='text/javascript'>
function botonpulsado() {
document.getElementById('botonintro').style.top="55%";
document.getElementById('botonintro').style.left="45%";
}
</script>

10%Posicion de la imagen si aumentas el numero bajara la imagen de intro mas abajito,en caso contrario que lo disminuyas ,subira mas ariba la imagen.

40%Posicion de la imagen si disminuyes se ira mas a la izquierda, y si aumentas el numero se ira mas a la derecha

Ahora añadimos los estilos, justo antes de ]]></b:skin>(Lo buscamos mas rápido presionando Ctrl+F)

#fondointro {
z-index:12000;
height:100%;
width:100%;
position: fixed;
top:0px;
left:0px;
background:url(Url del fondo);/* fondo del intro */
}
#botonintro {
z-index:1200;
height:40px; /* Altura del botón */
width:90px; /* Ancho del botón */
top:55%;
left:45%;
position: fixed;
}
#textoboton {
position:absolute;
top:10px;
left:20px;
}

Y listo

Cómo desaparecer la barra navegadora de blogger

Vamos con los pasos a seguir...

Primero entra a tu cuenta de blogger y anda a la parte de diseño del blog. Una vez ahí vas a apretar en una de las cajas "Agregar Gadget", dentro de las opciones encontrarás uno que dice HTML como se muestra en la siguiente captura.

Luego tienes que pegar dentro del Gadget el siguiente código y hacerle click en guardar.

------------------------------------------------------------------------


<style type="text/css">
#navbar {
display:inline;
width:100%;
position:absolute;
background-color:transparent;
top:-30px;
left:0px;
height:60px;
z-index:999999;
}
#navbar:hover{
top:0px;
height:30px;
}
</style>









-------------------------------------------------------

Ahora tendrás tu barra invisible y puedes editarla en "Diseño" "Editar Barra de Navegación" y elegir entre las opciones que se muestran a continuación, a mi me gusta la trasparente, así no ensucia tanto el diseño de tu blog.

Cómo cambiar los avatares anónimos y sin imagen en BLOGGER

1. Lo primero que tienes que hacer es ir al panel de configuración de tu blog. Estando ahí, vas a plantilla y luego entras a "Editar HTML".

2. Segundo, buscar en el código "</body>" y antes de este debes pegar el siguiente:

------------------------------------------------------------------

<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$("img[src='http://img1.blogblog.com/img/anon36.png']")
.attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGITy4W3Y2Z6xW3BzDfgUzYa_7KUo4EB7pllncAaNstgQe1FJMbjB5RPTaK6wycOcFeNHqL2oeTImLm-GVuBOuMjcipW7oSWVq-tRkTks1VaWUAH3cLcTERLGOMa1AI6qC_L42so-sarY/s1600/anonimo.png')
.ssyby('blank')
</script>

<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$("img[src='http://img2.blogblog.com/img/b36-rounded.png']")
.attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGITy4W3Y2Z6xW3BzDfgUzYa_7KUo4EB7pllncAaNstgQe1FJMbjB5RPTaK6wycOcFeNHqL2oeTImLm-GVuBOuMjcipW7oSWVq-tRkTks1VaWUAH3cLcTERLGOMa1AI6qC_L42so-sarY/s1600/anonimo.png')
.ssyby('blank')
</script>

-----------------------------------------------------------------

3. Explicación de los códigos

El primer código corresponde al del avatar de los comentarios anónimos y se debe reemplazar la dirección de url que está en rosa por la que deseas colocar en tu blog, esta debe ser de 37x37, así como la del original tan poco agradable.

El segundo código corresponde al de comentario sin imagen. Se debe colocar la nueva dirección en el código rojo, el de la imagen que se desea, igual que en el anterior.

Menú vertical desplegable para blogger

1.Vaya a Escritorio de Blogger > Plantilla > Editar HTML > buscamos </head>
2. Y antes de ello colocamos el script para desplegar con el código siguiente:

<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function()
{
$("#amor p.menu-inicio").click(function()
{
$(this).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings()
});
$("#secondpane p.menu-inicio").mouseover(function()
{
$(this).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
$(this).siblings()
});
});
//]]>
</script>

3. Ahora entra en Diseño | Añadir un gadget | HTML/Javascript, y ahí pegas el siguiente código:

<style type="text/css">
.menu-inicio {color: #fff;margin: 2px 0 0 0; padding: 0;margin-top: 10px; background: #057ED5; display: block; border-radius: 4px; transition: all 0.5s ease;font-size: 14px; padding: 20px 0 10px 10px; border-radius: 4px; }
.menu-inicio a{color: #fff;}
.menu_body {width:100%;display:none;}
.menu_body a{background: #7CC6FA; display: block; padding: 10px 0 10px 10px; font-size: 14px; outline: 0; transition: all 0.5s ease; border-radius: 4px; line-height: 28px;color: #fff;}
.menu_body a:hover{
background: #057ED5; color: #fff; transition: all 0.5s ease; display: block; border-radius: 4px;}
</style>
<div class='menu-amor' id='amor'>
<p class='menu-inicio'><a href='URL del enlace'>INICIO</a></p>
<p class='menu-inicio'>Pestaña 1</p>
<div class='menu_body'>
<a href='URL del enlace'>Sub pestaña 1</a>
<a href='URL del enlace'>Sub pestaña 2</a>
<a href='URL del enlace'>Sub pestaña 3</a>
</div>
<p class='menu-inicio'>Pestaña 2</p>
<div class='menu_body'>
<a href='URL del enlace'>Sub pestaña 1</a>
<a href='URL del enlace'>Sub pestaña 2</a>
<a href='URL del enlace'>Sub pestaña 3</a>
</div>
<p class='menu-inicio'>Pestaña 3</p>
<div class='menu_body'>
<a href='URL del enlace'>Sub pestaña 1</a>
<a href='URL del enlace'>Sub pestaña 2</a>
<a href='URL del enlace'>Sub pestaña 3</a>
</div>
<p class='menu-inicio'>Pestaña 4</p>
<div class='menu_body'>
<a href='URL del enlace'>Sub pestaña 1</a>
<a href='URL del enlace'>Sub pestaña 2</a>
<a href='URL del enlace'>Sub pestaña 3</a>
</div></div>

COMO AGREGAR UN MENU DESPLEGABLE.SIMPLES PASOS

Ahora vamos a insertar este menú desplegable en el Editor HTML de nuestra plantilla y lo ubicaremos arriba del encabezado principal de nuestro blog

1 Ir a Blogger

2 Un clic en “Editar HTML”

3 Busca este código

header1

PEGA DEJABO ESTE CODIGO:

<style>

#ayudadeblogger-Container {

font: normal 1em Arial, Helvetica, sans-serif;

width:100%; float:left;

}

a {

color: #333;

}

#ayudadeblogger {

margin: 0;

padding: 7px 6px 0;

background: #DF0101 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilUdMIYyBfgfiF59QKD9TYMouzVl2ArEXgH8pUHt1LKD5W-c_ALKukHJ2FHTKbe3SgM4jLu1phRYFb3RbzPvxpG5wuAOVRoPW_b3XR-EyyzmHzd1pDSCT5XgnGhglHtfVnnJ-wF9S8tFg/s1600/gradient.png) repeat-x 0 -110px;

line-height: 100%;

border-radius: 2em;

-webkit-border-radius: 2em;

-moz-border-radius: 2em;

-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);

-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);

}

#ayudadeblogger li {

margin: 0 5px;

padding: 0 0 8px;

float: left;

position: relative;

list-style: none; }

/* main level */

#ayudadeblogger a {

font-weight: bold;

color: #e7e5e5;

text-decoration: none;

display: block;

padding: 8px 20px;

margin: 0;

-webkit-border-radius: 1.6em;

-moz-border-radius: 1.6em;

text-shadow: 0 1px 1px rgba(0,0,0, .3);

}

#ayudadeblogger a:hover {

background: #000;

color: #fff;

}

/* main level hover */

#ayudadeblogger .current a, #ayudadeblogger li:hover > a {

background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilUdMIYyBfgfiF59QKD9TYMouzVl2ArEXgH8pUHt1LKD5W-c_ALKukHJ2FHTKbe3SgM4jLu1phRYFb3RbzPvxpG5wuAOVRoPW_b3XR-EyyzmHzd1pDSCT5XgnGhglHtfVnnJ-wF9S8tFg/s1600/gradient.png) repeat-x 0 -40px;

color: #444;

border-top: solid 1px #f8f8f8;

-webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);

-moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);

box-shadow: 0 1px 1px rgba(0,0,0, .2);

text-shadow: 0 1px 0 rgba(255,255,255, 1);

}

/* sub levels hover */

#ayudadeblogger ul li:hover a, #ayudadeblogger li:hover li a {

background: none;

border: none;

color: #666;

-webkit-box-shadow: none;

-moz-box-shadow: none;

}

#ayudadeblogger ul a:hover {

color: #fff !important;

text-align:left;

-webkit-border-radius: 0;

-moz-border-radius: 0;

text-shadow: 0 1px 1px rgba(0,0,0, .1);

}

/* dropdown */

#ayudadeblogger li:hover > ul {

display: block;

}

/* list 2 */

#ayudadeblogger ul {

display: none;

text-align:left;

margin: 0;

padding: 0;

width: 185px;

position: absolute;

top: 35px;

left: 0;

background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilUdMIYyBfgfiF59QKD9TYMouzVl2ArEXgH8pUHt1LKD5W-c_ALKukHJ2FHTKbe3SgM4jLu1phRYFb3RbzPvxpG5wuAOVRoPW_b3XR-EyyzmHzd1pDSCT5XgnGhglHtfVnnJ-wF9S8tFg/s1600/gradient.png) repeat-x 0 0;

border: solid 1px #b4b4b4;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);

-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);

box-shadow: 0 1px 3px rgba(0,0,0, .3);

}

#ayudadeblogger ul li {

float: none;

margin: 0;

padding: 0;

}

#ayudadeblogger ul a {

font-weight: normal;

text-shadow: 0 1px 0 #fff;

}

/* list */

#ayudadeblogger ul ul {

left: 181px;

top: -3px;

}

/* rounded corners of first and last link */

#ayudadeblogger ul li:first-child > a {

-webkit-border-top-left-radius: 9px;

-moz-border-radius-topleft: 9px;

-webkit-border-top-right-radius: 9px;

-moz-border-radius-topright: 9px;

}

#ayudadeblogger ul li:last-child > a {

-webkit-border-bottom-left-radius: 9px;

-moz-border-radius-bottomleft: 9px;

-webkit-border-bottom-right-radius: 9px;

-moz-border-radius-bottomright: 9px;

}

/* clearfix */

#ayudadeblogger:after {

content: ".";

display: block;

clear: both;

visibility: hidden;

line-height: 0;

height: 0;

}

#ayudadeblogger {

display: inline-block;

}

</style>

<li class="current"><a href="/">Inicio</a></li>

<li><a href="#">Noticias</a>

<ul>

</ul>

</li>

<li><a href="#">Espectaculos</a>

<ul>

</ul>

</li>

<li><a href="#">Deportes</a>

<ul>

</ul>

</li>

<li><a href="#">Entretenimiento</a>

<ul>

</ul>

</li>

<li><a href="#">Videos</a>

<ul>

</ul>

</li>

<li><a href="#">Musica</a>

<ul>

</ul>

</li>

<li><a href="#">Economía</a>

<ul>

</ul>

</li>

<li><a href="#">Contactos</a>

<ul>

</ul>

</li>

</ul></div>

<br/>