[Tutoriales] Status blogger

Holiii!!! Hoy os traigo un tutorial que me pidió Vivi-chan. Que es el status del blog, que tengo aquí al ladito. El tutorial original es de Lunnay Kawaii, pero no pongo la url porque, no entiendo por qué, no me sale su página. Pero bueno, me he ayudado un poco con un tutorial de Annyz-kawaii para ponerlo bien del todo ^^ Además, en su página podrán encontrar unos gifs geniales para el status. El efecto de la imagen también es de Lunnay Kawaii.

Bueno, empecemos. Primero, vamos a Platilla>Editar HTML y buscamos (Ctrl+F) ]]></b:skin> y justo antes de eso, pegamos los siguientes codigos justo antes. Son los estilos de las listas:
Esta es la primera lista:

.list1 {
background:#E6E6E6;/*Fondo*/
color:#2e2e2e;/*Color de la letra*/
margin:3px 5px 3px 5px;
font-size:12px;
font-family:Arial;
padding:2px 5px 2px 5px;
text-algin:center; /*posición de el texto*/
box-shadow: inset 0 0 5px #BDBDBD;/*Color de la sombra*/
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
border-left:5px solid #FE2E2E;/*borde*/
}
.list1:hover{
background:#F5A9A9;/*Fondo al pasar el ratón*/
color:#B40404;/*Color de las letras al pasar el ratón*/
margin:3px 5px 3px 5px;
font-size:12px;
font-family:Arial;
padding:2px 5px 2px 5px;
box-shadow: inset 0 0 5px #F78181;/*Color de la sombra al pasar el ratón*/
transition: all 0.5s ease-out;
border-left:5px solid #FF0000;/*Borde al pasar el ratón*/
text-decoration:none;
}

Esta es la segunda lista:

.list2 {
background:#F5A9A9;/*Fondo*/
color:#2e2e2e;/*Color de la letra*/
margin:3px 5px 3px 5px;
font-size:12px;
font-family:Arial;
padding:2px 5px 2px 5px;
text-algin:center;/*Posición del texto*/
box-shadow: inset 0 0 5px #F78181;/*Color de la sombra*/
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
border-right:5px solid #FF0000;/*Borde*/
}
.list2:hover{
background:#E6E6E6;/*Fondo al pasar el ratón*/
color:#B40404;/*Color de las letras al pasar el ratón*/
margin:3px 5px 3px 5px;
font-size:12px;
font-family:Arial;
padding:2px 5px 2px 5px;
box-shadow: inset 0 0 5px #BDBDBD;/*Color de la sombra al pasar el ratón*/
transition: all 0.5s ease-out;
border-right:5px solid #FE2E2E;/*Borde al pasar el ratón*/
text-decoration:none;
}

Y los últimos códigos es para si quieres ponerle el efecto que yo tengo a la imagen del gadget de bienvenida, que es de Lunnay-Kawaii:

.mor {
border-radius: 2px;
border:1px double #ffaeae; /*Borde de la imagen*/
margin:1px;
cursor:pointer;
}
.mor:hover {
-webkit-animation: mor .95s alternate infinite linear;
border-radius:2px;
-webkit-transition: -webkit-transform 1s ease-in-out;
}

Ahora solo tenéis que editar los códigos a vuestro gusto, y poner en un gadget html el siguiente código:

<center><img class="mor" src="URL_DE_TU_IMAGEN" / /><br />TEXTO_DE_BIENVENIDA<br /><div class="list1"><b>Nombre: </b>NOMBRE_DE_TU_BLOG</div><div class="list2"><b>Meta: </b>X seguidores</div><div class="list1"><b>Post: </b><script>function numberOfPosts(json) {document.write('<i>' + json.feed.openSearch$totalResults.$t + '</i><br />');}</script><script src="URL_DE_TU_BLOG/feeds/posts/default?alt=json-in-script&amp;callback=numberOfPosts"></script></div><div class="list2"><b>Comentarios: </b><script>function numberOfComments(json) {document.write('<i>' + json.feed.openSearch$totalResults.$t + '</i><br />');}</script><script src="URL_DE_TU_BLOG/feeds/comments/default?alt=json-in-script&amp;callback=numberOfComments"></script></div><div class="list1">Has venido <script src="http://fastwebcounter.com/secure.php?s=URL_DE_TU_BLOG"></script> veces </div><p></p><span style="text-align: center;font-size:100%;">DESPEDIDA(Si la quieres poner xD)</span><br /></center>

Y listo. Si no quieres poner la imagen, borra lo que está en rojo, si no quieres poner un texto después de la info del blog, borra lo que está en verde, y ahora solo cambia la información que tengas que cambiar.

Además, si lo quieres poner con iconos antes de cada frase, es el mismo código casi, solo que añadiendo un par de cositas, sin embargooo:

<center><img class="mor" src="URL_DE_TU_IMAGEN" / /><br />TEXTO_DE_BIENVENIDA<br /><div class="list1">
<img src="URL_DE_TU_ICONO"/><b>Nombre: </b>NOMBRE_DE_TU_BLOG</div><div class="list2">
<img src="URL_DE_TU_ICONO"/><b>Meta: </b>X seguidores</div><div class="list1">
<img src="URL_DE_TU_ICONO"/><b>Post: </b><script>function numberOfPosts(json) {document.write('<i>' + json.feed.openSearch$totalResults.$t + '</i><br />');}</script><script src="URL_DE_TU_BLOG/feeds/posts/default?alt=json-in-script&amp;callback=numberOfPosts"></script></div><div class="list2">
<img src="URL_DE_TU_ICONO"/><b>Comentarios: </b><script>function numberOfComments(json) {document.write('<i>' + json.feed.openSearch$totalResults.$t + '</i><br />');}</script><script src="URL_DE_TU_BLOG/feeds/comments/default?alt=json-in-script&amp;callback=numberOfComments"></script></div>
<img src="URL_DE_TU_ICONO"/><div class="list1">Has venido <script src="http://fastwebcounter.com/secure.php?s=URL_DE_TU_BLOG"></script> veces </div><p></p><span style="text-align: center;font-size:100%;">DESPEDIDA(Si la quieres poner xD)</span><br /></center>

También puedes añadirle cosas como quién es la administradora, para ello, tienes dos opciones, o lo pones este código después de </script> veces </div>:

 <div class="list2"><b>Administradora:</b>TU_NOMBRE</div>

Que es lo más fácil. O puedes ponerlo antes de los de post y comentarios y eso, para que quedé más ordenado, el problema con eso es que tendrías que poner después de <div class="list1"><b>Nombre: </b>NOMBRE_DE_TU_BLOG</div> el mismo código de arriba, pero luego, tendrías que ir cambiando los <div class="list1">/<div class="list2"> e ir poniéndolos intercalados para que fueran diferentes.


Bueno, beshus y hasta mañana!!