Mostrando entradas con la etiqueta tutoriales. Mostrar todas las entradas
Mostrando entradas con la etiqueta tutoriales. Mostrar todas las entradas
【Tutoriales】Buscador con imágen
¡Hola a todos y bienvenidos una vez más a mi blog! Siento no haber publicado desde hace muchos días pero he tenido muchos problemas personales de gran importancia y la verdad es que no he tenido ganas de nada. Pero bueno, lo importante es que ya estoy aquí y hoy os traigo un tutorial, y es para poner un buscador con imagen que tengo en mi gadget de "Welcome"

Diseño > Añadir un gadget > html

#B3A0D8: En este código podréis cambiar el color del botón de "buscar". En esta página encontraréis los códigos de los colores que queráis.

Url de la imagen: Aquí pegaréis el link de la imagen que queráis que esté encima del buscador. La medida de mi imagen es de 216x130.

Y nada, espero que os haya servido de utilidad este tutorial. Nos vemos en la próxima entrada :')

【Tutoriales】Buscador con imágen

7 comentarios
【Tutoriales】Menú con submenús para tu blog
¡Hola a todos y bienvenidos una vez más a mi blog! ( ͡° ͜ʖ ͡°) Como habéis leído en el titulo hoy os traigo un tutorial que os vendrá muy bien a todos los que estáis modificando plantillas y queréis un menú más "profesional" para que vuestro blog sea más accesible para vuestros seguidores.
Diseño > Añadir un gadget > HTML y pegáis esto:


Si queréis moverlo a alguna parte del blog lo que tenéis que hacer es copiar el código del menú y pegarlo aquí:
<div style="position: absolute; margin-top: -150px; right: 10px;">AQUÍ EL CÓDIGO DEL MENÚ</div>

-150: Si aumentas subira mas arriba el gadget y si disminuyes el numero bajara el gadget
10: Si aumentas se ira mas a la izquierda y si disminuyes se ira mas a la derecha

Y nada, espero que os haya servido de utilidad este tutorial. No olvidéis dar créditos si lo utilizáis ñwñ Dejadme en los comentarios que os parece, y si tenéis alguna duda también. O si os es más fácil al correo del blog: Attackonblog@gmail.com. ¡Hasta otra!

【Tutoriales】Menú con submenús para tu blog

12 comentarios
【Tutoriales】Como usar google fonts en blogger
¡Hola a todos y bienvenidos una vez más a mi blog! Este tutorial la verdad es que me parece súper útil y básico para blogger. Yo creo que los mejores blogs son aquellos que están personalizados a nuestro gusto y que estén exactamente como queremos y tenemos en mente. Y una de las cosas importantes son las fuentes que aplicamos, es decir, la letra y el tamaño de la letra de las entradas. ¿No os pasa que estáis cansados de tener siempre las mismas que nos da blogger? Pues con este tutorial en menos de 3 minutos tendréis una infinita variedad de letras que podéis poner en vuestro blog. ¡Empecemos!

Lo primero que haremos es ir a la página en cuestión, que es Google Fonts. Buscaremos una fuente que nos guste y haremos esto:
Después de darle click en "Add to collection" Nos saldrá una mini página abajo:

Una vez que hayamos ido a "Use" nos llevará a otra página donde lo importante está bajando hacia abajo. Es decir, los códigos:
Ahora, guardaremos esos dos códigos. Primero, iremos a...
Plantilla > HTML > Ctrl + F > Buscaremos <head>
Y debajo de <head> pegamos el primer código, (el código html).

Y por último, iremos a Plantilla > Personalizar > Avanzado > Añadir CSS
Y pegamos esto:
body { /* Para cambiar la letra de las entradas*/
  Aquí poner el segundo código (El código CSS)
}
Para que se vea la letra que habéis elegido tenéis que utilizar la fuente predeterminada en las entradas porque si no se verá cualquier de las otras.

Espero que os haya gustado y servido esta entrada. No os olvidéis de seguir el blog para más entradas :'D Un saludo y nos leemos en la próxima entrada, ¡Hasta pronto!

【Tutoriales】Como usar google fonts en blogger

9 comentarios
【Tutoriales】Editar bordes de las entradas
Hola a todos y bienvenidos a una nueva entrada :3 Hoy os traigo un tutorial súper útil que seguro que os interesará :'D 
Como todos sabréis, en las entradas por defecto en blogger solo te dejan editar una pequeña linea alrededor de la entrada y cambiarla el color. Pero... ¡Eso es aburrido! Seamos francos, eso llega a aburrir. Así que hoy os enseñare a como personalizar cada borde con ejemplos. ¡Empecemos!

Lo primero que tenemos que hacer es:
Editar html > Ctrl + f 
Y ahí pegaremos el siguiente código y daremos a buscar:
.date-outer {
Y por abajo encontraréis el siguiente código al que señalo: 
Ese código le borramos y le sustituiremos por alguno de los siguientes:
Por aquí os dejaré algunos modelos de bordes para que elijáis el que más os guste.

border: 4px solid #FDB4C1;/* Borde en todo*/
border-bottom: 4px solid  #FDB4C1;/* Borde inferior*/
border-top: 4px solid  #FDB4C1;/* Borde superior*/
border-right: 4px solid #FDB4C1;/*Borde en el lado derecho */
border-left: 4px solid #FDB4C1;/* Borde en el lado izquierdo*/
border-right: 4px solid #BEB4FD;/* Borde derecho */border-left: 4px solid #BEB4FD;/* Borde izquierdo*/border-bottom: 4px dashed #DBB4FD;/* Borde inferior*/border-top: 4px dashed #DBB4FD;/* Borde superior*/

Espero que os haya servido de gran utilidad esta entrada y nos leeremos en la próxima, ¡Adiós! 

【Tutoriales】Editar bordes de las entradas

6 comentarios
【Tutoriales】Efecto imágenes rotación

¡Hola a todos y bienvenidos a una nueva entrada! ^3^ Hoy os traigo un nuevo tutorial n_n 
Os enseñare como poner un efecto para las imágenes súper chulo :'D

Primero, lo que tenemos que hacer es ir a:
Plantilla > Editar Html > Ctrl + F > Buscamos ]]></b:skin>
Y pegamos antes de éste código el siguiente:
.post-body img {
border-radius: 0px;
-webkit-transition: all 1.2s ease;
-moz-transition: all 1.2s ease;
-o-transition: all 1.2s ease;
-ms-transition: all 1.2s ease;
transition: all 1.2s ease;
}
.post-body img:hover {
 border-radius: 0%;
 -webkit-filter: grayscale(0%);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
 -o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

Espero que os haya gustado mucho éste tutorial, y que os sirva de mucha utilidad. Nos vemos en la próxima entrada, ¡Adiós! 

【Tutoriales】Efecto imágenes rotación

8 comentarios
【Tutoriales】Personalizar subrayado del blog
¡Hola a todos y bienvenidos a una nueva entrada! Hoy os traigo un tutorial que personalmente me ha encantado, de hecho, ya le he aplicado al blog :'3
Y el tutorial consiste en personalizar el subrayado.

¿Como hacerlo? Es muy sencillo, lo único que tenéis que hacer es ir a:
Plantilla > Editar HTML > Ctrl + F 
Y buscamos este código: ]]></b:skin>

Y justo antes del mismo, pegamos éste otro código:
/* Color texto seleccionado */
/* webkit, opera, IE9 */
::selection { background:#FFFFFF; color:#A9F5D0; }
/* mozilla firefox */
::-moz-selection { background:#FFFFFF; color #A9F5D0; }

 El puesto los códigos de color que tenemos que editar para cambiarlo a nuestro gusto. Si no sabéis como obtener los códigos de color, id a ésta pagina

Y nada más por mi parte, espero que os haya gustado mucho éste tutorial que sobretodo os haya servido de utilidad. Nos vemos en la próxima entrada y, ¡Hasta otra! :D

【Tutoriales】Personalizar subrayado del blog

6 comentarios
【Tutoriales】Gadget comentarios recientes
Hola a todos y bienvenidos a una nueva entrada :'3 Hoy os traigo un tutorial de como poner un gadget de "Entradas recientes". ^3^ La verdad es que es un gadget que queda muy lindo y además, es súper útil, ya que puedes ver quien a comentado hahaha n_n
Sin más dilación, empecemos con el tutorial :'D

Os dejo aquí un ejemplo de como quedará n_n
1) Vamos a la página que nos proporciona el widget
2) Y rellenamos los campos. Vamos a verlos uno a uno
✎ En título podéis escribir el título que queráis o dejarlo en blanco si queréis poner un titulito como yo tengo y vemos en el Curso Uno para blogueras
✎ En blog URL pues la url de vuestro blog
✎ En number el número de caritas/comentarios que queráis que aparezcan
✎ En show avatar image le podemos poner que sí o que no, pero yo le dejo que sí porque ahí esta la gracia del asunto
✎ En size el tamaño del avatar/redondelito, que a mi 60px me parece un buen tamaño
✎ En Rounded? le dejamos que sí si quremos que salga redondo y no si queremos que nos salga cuadrado
✎ Número de caracteres a mostrar, pues eso, lo que queráis
✎ En el siguiente le tenemos que decir si sí o no queremos que muestre el texto "Mostrar más" tras los primeros caracteres del comentario
✎ En el siguiente podríamos personalizar ese texto (More Mostrar más o lo que sea)
✎ En el siguiente podemos poner una imagen para que salga cuando alguien no tiene foto. Ellos por defecto tienen una silueta blanca sobre fondo gris
✎ Y en el último podemos poner si queremos que se vea que ese gadget lo proporciona Way2Blogging, que me da mucha pena, pero no queda muy mono, así que ponemos que No.
Más abajo hay una opción de "Generate" (Para generar el código). Después de dar click, nos llevara a una página en la que habrá mucha publicidad, y en una parte, (en el medio) Está el botón pequeño que dice lo siguiente y es al que tenéis que dar:
Y nada, esto es todo por hoy, espero que os haya servido de gran utilidad y que lo apliquéis al blog porque en serio, lo digo, es un gadget que me encanta y que además es muy útil. Nos vemos en la próxima entrada, muchas gracias por acompañarme un día más y... ¡Adiós! <3

【Tutoriales】Gadget comentarios recientes

3 comentarios
【Tutoriales】Personaliza el gadget de "Entradas populares"
Hola a todos y bienvenidos a una nueva entrada :3 Bueno, hoy os traigo un tutorial de como personalizar la entrada del gadget "Entradas Populares". La verdad es que el que viene por defecto en blogger nunca me gustó y estaba harta de no ponerlo porque era demasiado feo :c Pero todo eso cambio desde que encontré este maravilloso tutorial (créditos) para hacer que se vea súper bonito :3
Os dejo por aquí un ejemplo de como quedará:
Bien, para ello lo primero que tenemos que hacer es añadir un gadget de "Popular post" y editarlo de tal manera:


Bien, una vez añadido este gadget, nos vamos a...
Editar Plantilla > Control + F > Y buscamos lo siguiente:
]]></b:skin>

Una vez que nos lleve a este código, pegamos justo antes del mismo lo siguiente:
/* Entradas Populares Sidebar
--------------------------------- */

#PopularPosts1 {
border: 1px solid #8FE1D8;
padding: 5px;
background: #ffffff;
}

#PopularPosts1 ul li img{
border: 1px solid #8FE1D8;
border-radius: 100px;
}

#PopularPosts1 ul li img:hover{
filter:alpha(opacity=60);
opacity:.6;
}


#PopularPosts1 .item-title a{
text-transform: uppercase;
font-family: 'Neucha', Neucha;
font-size: 15px;
color: #8FE1D8
}

He subrayado los colores que podéis cambiar a vuestro gusto, podéis ir a esta página que te dice los códigos de los colores (Click aquí)

Y nada más por mi parte, espero que os haya gustado mucho esta entrada y que os haya servido de utilidad. n_n ¡Adiós!

【Tutoriales】Personaliza el gadget de "Entradas populares"

7 comentarios
【Tutoriales】Como poner un botón Go to your blog
Hola a todos y bienvenidos a una nueva entrada :D Hoy os traigo un tutorial de como poner un botón en vuestro blog que os lleve a la página inicial de blogger. Me parece que es un tutorial súper útil.
Os dejo aquí un ejemplo para que veáis como queda:

Lo primero que tendréis que hacer es ir a:
Plantilla > Editar html > Ctrl+ f y pegamos </body>
<a href='http://blogspot.com/'><img src='Imagen de tu boton' style='position:fixed; bottom:20px; left:5px;' title='Go your blog'/></a>

Espero que os haya gustado mucho este tutorial y que os haya servido, de ser así no olvidéis dejarme un comentario que con mucho gusto responderé. Nada más por mi parte, y nos vemos la próxima entrada. ¡Adiós!

Créditos: x

【Tutoriales】Como poner un botón Go to your blog

5 comentarios
【Tutoriales】Menú kawaii rosa

¡Hola a todos y bienvenidos a una nueva entrada! Siento estar algo inactiva últimamente, pero así son los estudios u.u Bueno, el caso es que estoy muy contenta porque he encontrado un tutorial que os va a encantar (Me pareció tan... kawaii >///<)

Y es como aplicar este menú tan... precioso... (?)
Para ello tendréis que ir a: 
Añadir html/Javascript Y pegar el siguiente código:


Hasta aquí el tutorial de hoy, espero que os haya gustado mucho esta entrada y nos vemos en la próxima. No olvidéis dejarme un comentario que con gusto responderé. 
¡Hasta pronto!
Créditos: x 

【Tutoriales】Menú kawaii rosa

4 comentarios
【Tutoriales】Menú hover

¡Hola a todos y bienvenidos a una nueva entrada! ^3^ Hoy os traigo un menú muy chulo que seguro que os encantara. Os dejo aquí un ejemplo de como quedará:
¡Pasad el cursor y así apreciaréis el efecto!

TITLETITLETITLETITLETITLE
Para añadirlo a vuestro blog, lo único que tendréis que hacer es:
Añadir un gadget > html/javascript
Y pegámos este código:
<style>
@font-face {
font-family:tt;
src:url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');
}
.menul{ padding:3px;
width:65px;
margin-left: 5px;
margin-right: 5px;
font:8px tt;
color:#e1c9f3;
background:#fff;
text-align:center;
float:center;
-webkit-transition-duration: .50s;
display: inline-block;
padding:5px;
border:3px solid #e1c9f3;}
.menul:hover {
padding:3px;
height:auto; auto;
margin-left: 5px;
margin-right: 5px;
font:8px tt;
color:#fff;
background:#9C7FB4;
text-align:center;
-webkit-transform: scale(0.8) rotate(20deg);
border:3px solid #fff;
padding:5px;}
</style>
<center>
<a class="menul" href="LINK HERE">TITLE</a>
<a class="menul" href="LINK HERE">TITLE</a>
<a class="menul" href="LINK HERE">TITLE</a>
<a class="menul" href="LINK HERE">TITLE</a>
<a class="menul" href="LINK HERE">TITLE</a>
</center>
</div>

Espero que os haya gustado mucho :D No olvidéis dejar un comentario. Y nos vemos en la próxima entrada. ¡Adiós! ^3^
Por cierto, siento no haber publicado entrada desde hace unos días. Estaba muy ocupada :c Pero tranquilidad ya volvemos con nuevas entradas hahahaha n_n

【Tutoriales】Menú hover

5 comentarios
【Tutoriales】Efecto afiliados élite
¡Hola a todos y bienvenidos a un nuevo tutorial! ^3^ Hoy os enseñare a como poner un efecto de afiliados élite. Es así como quedará:

NOMBRE
NOMBRE
NOMBRE
NOMBRE
¿Lindo, verdad? Para ello lo único que tenéis que hacer es ir a:
Añadir gadget > html/javascript 
Y pegamos este código:


En este código tenéis también las instrucciones para pegar los links de las fotos... etc.
Espero que os haya gustado un montón y no olvidéis comentar si os a gustado.
Hasta la próxima entrada, ¡adiós! :D

【Tutoriales】Efecto afiliados élite

4 comentarios
【Tutoriales】Como personalizar cada gadget
¡Hola a todos y bienvenidos a una nueva entrada! Hoy os traigo un tutorial de como personalizar cada gadget. Así que ¡Empecemos!

Aquí os dejo un ejemplo (Créditos a Lunany-Kawaii) Os enseñare a como poner otro fondo, y como añadir bordes.


Lo primero que tenemos que hacer es ir a editar html. Y buscamos alguno de estos códigos (El que coincida con vuestro blog.
<b:section-contents id='sidebar-left-1'>
<b:section-contents id='sidebar-right-1'>
<b:widget id='HTML1'


Y buscamos el gadget que queremos cambiar. Por ejemplo:
 <b:widget id='HTML1' locked='false' title='Bienvenidos ♥' type='HTML'> 

Nos tenemos que quedar con lo que he subrayado. Tenemos que copiar el id.
Una vez encontrado el id del gadget que queremos editar, tenemos que ir al código 
]]></b:skin>

Y el id del gadget lo ponemos donde he subrayado en el siguiente código:
#HTML1  {
background: #EAF0D5 !important;/*color de Fondo */
color: # FFECEC  !important;/* color de Texto */
font-family: Imprima !important;/* Font del Texto */
font-size: 12 px  !important;/*Tamano del Texto */
border: 3px solid #F8B2B2  !important;/* Borde tamaño,tipo, color */
}

¡Y listo! Espero que os haya gustado este tutorial, como dije antes créditos a Lunany-Kawaii por este magnifico tutorial. Nos vemos en la próxima entrada y hasta entonces, ¡Adiós! 

【Tutoriales】Como personalizar cada gadget

12 comentarios
【Tutoriales】Como poner un Gadget de normas
¡Hola a todos y bienvenidos a una nueva entrada! Hoy os traigo un tutorial en el que explicare como poner un gadget de normas en vuestro blog. Os dejo aquí una foto de como quedara:


Bien, para empezar tenemos que ir a:
Añadir gadget > HTML/Javascript 
Y pegar este código allí
<center><img src="URL DE LA FOTO PRINCIPAL"/></center>

<center><img src="URL DEL ICONO" />TU NORMA
<br /><img src="URL DEL ICONO" />TU NORMA
<br /><img src="URL DEL ICONO" />TU NORMA
<br /><img src="URL DEL ICONO" />TU NORMA</center> 

Espero que os haya servido y no olvidéis dejar un comentario. Nos vemos en la próxima entrada, ¡adiós!

【Tutoriales】Como poner un Gadget de normas

5 comentarios
【Tutorial blogger】Chatbox en tu blog

Hola a todos y bienvenidos a una nueva entrada, hoy os traigo un tutorial de como poner una Cbox en vuestros blogs, he de decir que he probado muchas paginas para crear cbox, pero la que más me ha servido y gustado es Chatango! 


Ahora, empecemos. Lo primero que tenemos que hacer es Registrar. Una vez que hayáis creado una cuenta, tendréis que darle a Make a new group. Allí, podremos empezar a crear nuestro Cbox paso a paso!


Os van a salir tres opciones; Box, Ticker y Tab. Recomiendo con diferencia Box, porque la puedes aplicar en un gadget y no está tan escondido como las otras opciones. No os recomiendo tenerlo escondido, porque los lectores de vuestro blog no lo encontraran.
Una vez hecho esto, podremos empezar a personalizarlo a nuestro gusto. Aquí os dejo la guía que he creado para que os resulte más fácil hacerlo:
Espero que os haya servido este tutorial, si tenéis cualquier duda sobre ello no olvidéis dejar un comentario. Nos vemos en la próxima entrada, hasta entonces, ¡Adiós!

【Tutorial blogger】Chatbox en tu blog

4 comentarios
【Tutorial blogger】Menu flotante
¡Hola a todos y bienvenidos a una nueva entrada! Hoy os traigo un menú flotante súper bonito, espero que os guste un montón. ¡Empecemos! (Créditos aquí)

Añadir gadget > html
Y pegáis este código, pero antes, editadlo y poned los links.


Como veis es precioso, si tenéis cualquier duda dejad un comentario y yo lo contestare encantada. Nos vemos en la próxima entrada, ¡Adiós!

【Tutorial blogger】Menu flotante

6 comentarios
【Tutorial blogger】Blockquote #1

¡Hola a todos y bienvenidos a una nueva entrada! Hoy os traigo un tutorial, en el os enseñare a aplicar al blog un blockquote súper bonito. Espero que os guste un montón, y ¡empecemos!
Lo primero que tenemos que hacer es lo siguiente:
Plantilla > Editar html > y buscamos el siguiente código: 
]]></b:skin>
Y pegamos antes de este código lo siguiente:
blockquote {
margin-top: 9px;
background-color: #A9E2C7;/*Color de fondo*/
padding: 8px;
font-size: 11px;/*Tamaño de la Letra*/
color: #FC7C7C;/*Color de la letra*/
text-shadow: 1px 1px 0px #B5F7D7;/*Color de la sombra de la Letra*/
text-align: center;
outline-style: dashed;/*Tipo de la linea de adentro*/
outline-width: 1px;
outline-color: #fff;/*Color de la linea de adentro*/
outline-offset: -3px;
-webkit-transition-duration: .50s;
}
blockquote:hover {
background-color: #dccfb9;/*Color de fondo al pasar el cursor*/
}

Después para ponerlo en una entrada tendréis que dar al botón de "cita" y escribir. 
Y esto es todo, espero que os haya servido está entrada y nos vemos en la siguiente, adiós!

【Tutorial blogger】Blockquote #1

8 comentarios
【Tutorial blogger】Como poner una cortina en tu blog
¡Hola a todos y bienvenidos a una nueva entrada entrada! Hoy os enseñare a como poner una cortina kawaii en vuestro blog, para decorarlo y que se vea mucho más lindo. También os dejare unas cortinas que podéis aplicar. Créditos al blog Lunany-Kawaii
créditos de la imagen a Lunany-Kawaii

Si quieres la cortina en la parte de arriba, añadid un gadget HTML y pegad lo siguiente:
<div style=" background-image: url('Url de la cortina'); top: 0px; left: 0px; width: 100%; height:38px; z-index: 100;position: fixed;"></div>










 Espero que os haya servido este tutorial, no olvidéis que este blog se alimenta de vuestros comentarios. Nos vemos en la próxima entrada. Y felices fiestas, ¡Ya solo quedan 4 días para navidad!

【Tutorial blogger】Como poner una cortina en tu blog

2 comentarios