{ Tutorial } Menú

Jelou bue hoy les traigo un menú muy lindo y pues nada,si utilizas algo del blog recuerda dar créditos,arigato n.n

PLANTILLAS BLOGGER

About Home Tutorials Credits

No es nada fuera de lo común para variar,parece bastante darks pero ya va cambiando la cosa cuando le cambias el color xdd.
Ponemos este código antes de ]]></b:skin>
Plantilla  Editar HtmlPresiona CTR+F y busca ]]></b:skin>

} .navigator { position:fixed; top:109px; left:625px; font-size:5px; text-align:center; } .navi { padding:2px; font-size:10px; -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; background:#000000; display: inline-block; -webkit-transition:0.5s; transition:0.5s; } .navi:hover, .navi_active { background:#FFF; color:#FF97CB; -webkit-transition:0.5s; transition:0.5s;

Editamos:

Color de fondo del menú.
Color de fondo del menú al pasar el cursor.
Color del link al pasar el cursor.

 Y este código en html/javascript.

Diseño  Añadir un gadgetHTML/JAVASCRIPT

<center> <a class="navi" href="https://www.blogger.com/null" onclick="document.getElementById('content').innerHTML=document.getElementById('').innerHTML" title="About">About</a> <a class="navi" href="https://www.blogger.com/null" onclick="document.getElementById('content').innerHTML=document.getElementById('').innerHTML" title="Posts">Home</a> <a class="navi" href="https://www.blogger.com/null" onclick="document.getElementById('content').innerHTML=document.getElementById('').innerHTML" title="Linkies">Tutorials</a> <a class="navi" href="https://www.blogger.com/null" onclick="document.getElementById('content').innerHTML=document.getElementById('').innerHTML" title="Credits">Credits</a></center>

Url de la página
Nombre de menú
Nombre tooltip

Eso es todo por hoy,nos vemos en la próxima entrada,bai

Barra Flotante (・∀・ )

Konbanwa! Después de tanto tiempo TuT pues la verdad he estado bastante ocupada con el tema de la escuela y pues mas difícil aún ya que asisto a una nueva escuela así que me llevará tiempo tomar confianza, en fin , disculpen por mi ausencia en el blog como les dije he estado ocupada tengo trabajos para exponer y más, trataré de publicar este fin de semana y pues la próxima semana definitivamente publicaré ya que hay dos días feriados por cual me parece excelente  ⊙ω⊙.
Vayamos con el tema, pues verán hoy les traigo un tutorial de una barra flotante que se vería así:

LIVE PREVIEW

Es una barra que se queda estática mientras deslizas el mouse por el todo el blog n.n , así que si te interesa vamos con el tutorial:3

PLANTILLAS BLOGGER

Nos dirigimos a :

Diseño > Añadir un gadget > HTML/JAVASCRIPT

Añadimos este código:

<div style="background-image: url('http://www.cenefasinfantiles.com/playdate/pag_68.jpg'); border-bottom: 1px solid; border-bottom: 3px solid #FFFFFF; border-top: 3px solid #FFFFFF; color: #FFFFFF; font-family: freestyle script; font-size: 40px; height: 50px; left: 0px; letter-spacing: 1px; overflow-x: hidden; overflow-y: hidden; padding: 9px; position: fixed; text-shadow: 4px 4px 5px #FFFFFF; top: 10px; width: 100%; z-index: 100;"><center>Be Free!</center></div>

Color de borde de la parte superior e inferior.

Url del fondo.

Color del texto.

Color del borde.

El texto que desees.

Espero el tutorial les haya servido n.n , si tienen alguna duda no olviden preguntar, pues nada hasta aquí hoy, nos vemos en un próximo post,bai :3

PD:

Espero poder publicar más seguido,so.

 

{ Tutorial } Menú Redes Sociales

Konnichiwa (*^ω^*)ハcomo les dije anteriormente estaré más activa y eso hago (? asdkjas equis,

hoy les traigo un menú de redes sociales (*~∇~*)ノ tiene un efecto en el cual da un giro de 360g. 

Live Preview

PLANTILLAS BLOGGER

Nos dirigimos a :

Diseño  Añadir un gadgetHTML/JAVASCRIPT

Añadimos este código:

<style>
a.navi{
text-transform:uppercase;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}
a.navi:hover{
background-color: #FFDBB9;
-webkit-transform: rotate(360deg) ;
-moz-transform: rotate(360deg) ;
-o-transform: rotate(360deg) ;
-ms-transform: rotate(360deg) ;
border-radius:10px;text-shadow:0px 0px 0px ;
}
</style>
<center>
<a class="navi" href="linkredsocial"title="Facebook">FB</a>
<a class="navi" href="linkredsocial"title="Twitter">Tw</a>
<a class="navi" href="linkredsocial"title="Tumblr">Tu</a>
<a class="navi" href="linkredsocial"title="Deviantart">Da</a></center><br />
<style>
a.navi{
text-decoration:none;
background-color: #DFDBFF;
display:inline-block;
padding-left: 2px;padding-right: 2px; padding-top:10px;
text-align: center;
color:#fff;width:30px;height:22px;
border-radius:50px;box-shadow:0px 0px 3px 2px #eee;
border:3px solid #ffffff;
text-transform:uppercase;
-webkit-transition: all 0.4s ease-out;
-moz-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}</style>

Url de la página.
Color de fondo del menú.
Color de fondo del menú al pasar el cursor.
Nombre de la página{ Como son redes sociales es recomendable
poner solo dos letras como FB ,TW,si pones más el menú podria 
parecer otra cosa sakjda xdd}
Nombre que deseas que aparezcan{ Me explico; al pasar el cursor
nos aparece una pequeña ventanita indicando que es }

{ Normalmente }



{ Para los que usamos Tooltip personalizado }

Color de borde
Tipo de borde
Color de letra
Color de sombra

Si usas plantilla blogskin peguen el código en el lugar deseado.
Hasta aquí,nos vemos en la próxima entradaヽ( ´ ▽ ` )ノ