Marie : febrero 2016

sábado, 13 de febrero de 2016

Cambia el color seleccionado de tu blog

¡Hola!

Esta vez vamos a cambiar color de texto seleccionado,en este caso es esto;

¿Te gustó? ¡Comencemos!

Primero nos vamos a diseño — Plantilla — Edicion HTML

Con ctrl + F buscas el siguiente codigo;

Y justo debajo pegamos esto;

/* Color texto seleccionado */
::selection {
background: #ccc;
}

::-moz-selection {
background: #ccc;
}

Rosa: Cambiarás el color que quieres el sombreado.

→ → → Pagina de generador de colores← ← ←

Centra el título, gadgets y fecha.

Algo que a muchos les interesa...¡Como centrar los titulos! ya sea el post, gadget o fecha.

¿Te interesa?

♠Pasos;

1- Diseño 2- Plantilla 3- Edicion de HTML

→ Con CTRL + F buscamos el siguiente codigo;

h3.post-title {

.post h3 {

h3.post-title, .comments h4 {

→ Ya encontrado pegan justo abajo del que buscaste;

text-align:center;

→ Para centrar ''Fecha'';

Con ctrl + F buscan;

h2 {

→ Justo abajo pegan;

text-align:center;

Edita / Añade tu propio reproductor de música para tu blog

Hey :D

Ps ahora les enseñare aunque ya muchos saben u.u como crear un reproductor pero esta vez en la pagina de SCMPLAYER y al mismo tiempo le incluyas skins♥

Breve ejemplo;

click para ver mejor n.n

♦Pasos;

Primero nos vamos a la pagina de http://scmplayer.net/ alli elegimos nuestro skin,si no te gustan los de defecto puedes dar click en donde dice '' 4000 skins'' y eliges uno que te guste.

Despues crea tu lista de canciones añadiendo la url de la cancion en donde puedes hacerlo en YOUTUBE y agregas el nombre de la cancion o titulo que opines.

Das next→ y entonces...

Si quieres que se autoproduzca,es decir automaticamente solo tienes que pincharle.

Repetir depende ya sea de la lista de canciones,o una cancion.

Si quieres tu reproductor abajo solo cambias por *down* y arriba por *top*

Ya después copias el codigo y lo pegas en un html/javascript.

¿Te gusta?

Agrega Fieldset a tu blog

Hey :]

Esta vez les enseñaré a hacer sus cuadritos de textos ''Fieldset'' en donde añadirán textos e imágenes a sus gustos.

Son muy usados para dar bienvenidas o avisos.

Aquí un ejemplo;

♣¿Comenzamos?♣

1- Abre diseño 2- añadir html/javascript 3- copia y pega este codigo:

♣Pasos;

URL de imagen; copia y pega el enlace de tu imagen. [Gifs] Tu texto; añade el texto e.e

¿Qué te pareció?

Brillitos de arcoiris en tu blog

¿Alguna vez no has deseado añadir algo colorido a tu blog? ¿No?

Intenta con brillitos de colores —rainbow— junto a tu cursor, mostrandole lo kawaii que puedes llegar a ser :)

☼ ☼ ☼

•Pasos

Diseño → Añadir HTML/Javascript → Copiar y pegar:

♥ ♥ ♥ ♥ ♥ ♥ ♥

// <![CDATA[

function initCursor() {

if (document.getElementById) {

var i, rats, rlef, rdow;

for (var i=0; i<sparkles; i++) {

var rats=createDiv(3, 3);

rats.style.visibility="hidden";

document.body.appendChild(tiny[i]=rats);

starv[i]=0;

tinyv[i]=0;

var rats=createDiv(5, 5);

rats.style.backgroundColor="transparent";

rats.style.visibility="hidden";

var rlef=createDiv(1, 5);

var rdow=createDiv(5, 1);

rats.appendChild(rlef);

rats.appendChild(rdow);

rlef.style.top="2px";

rlef.style.left="0px";

rdow.style.top="0px";

rdow.style.left="2px";

document.body.appendChild(star[i]=rats);

}

set_width();

sparkle();

}}

var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")

var r=1

var g=1

var b=1

var seq=1

var sparkles = 35;

var x=ox=400;

var y=oy=300;

var swide=800;

var shigh=600;

var sleft=sdown=0;

var tiny=new Array();

var star=new Array();

var starv=new Array();

var starx=new Array();

var stary=new Array();

var tinyx=new Array();

var tinyy=new Array();

var tinyv=new Array();

function sparkle() {

var c;

if (x!=ox || y!=oy) {

ox=x;

oy=y;

for (c=0; c<sparkles; c++) if (!starv[c]) {

star[c].style.left=(starx[c]=x)+"px";

star[c].style.top=(stary[c]=y)+"px";

star[c].style.clip="rect(0px, 5px, 5px, 0px)";

star[c].style.visibility="visible";

starv[c]=50;

break;

}

for (c=0; c<sparkles; c++) {

if (starv[c]) update_star(c);

if (tinyv[c]) update_tiny(c);

}

setTimeout("sparkle()", 40);

}

function update_star(i) {

if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";

if (starv[i]) {

stary[i]+=1+Math.random()*3;

if (stary[i]<shigh+sdown) {

star[i].style.top=stary[i]+"px";

starx[i]+=(i%5-2)/5;

star[i].style.left=starx[i]+"px";

}

else {

star[i].style.visibility="hidden";

starv[i]=0;

return;

}

else {

tinyv[i]=50;

tiny[i].style.top=(tinyy[i]=stary[i])+"px";

tiny[i].style.left=(tinyx[i]=starx[i])+"px";

tiny[i].style.width="2px";

tiny[i].style.height="2px";

star[i].style.visibility="hidden";

tiny[i].style.visibility="visible"

}

function update_tiny(i) {

if (--tinyv[i]==25) {

tiny[i].style.width="1px";

tiny[i].style.height="1px";

}

if (tinyv[i]) {

tinyy[i]+=1+Math.random()*3;

if (tinyy[i]<shigh+sdown) {

tiny[i].style.top=tinyy[i]+"px";

tinyx[i]+=(i%5-2)/5;

tiny[i].style.left=tinyx[i]+"px";

}

else {

tiny[i].style.visibility="hidden";

tinyv[i]=0;

return;

}

else tiny[i].style.visibility="hidden";

}

document.onmousemove=mouse;

function mouse(e) {

set_scroll();

y=(e)?e.pageY:event.y+sdown;

x=(e)?e.pageX:event.x+sleft;

}

function set_scroll() {

if (typeof(self.pageYOffset)=="number") {

sdown=self.pageYOffset;

sleft=self.pageXOffset;

}

else if (document.body.scrollTop || document.body.scrollLeft) {

sdown=document.body.scrollTop;

sleft=document.body.scrollLeft;

}

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

sleft=document.documentElement.scrollLeft;

sdown=document.documentElement.scrollTop;

}

else {

sdown=0;

sleft=0;

}

window.onresize=set_width;

function set_width() {

if (typeof(self.innerWidth)=="number") {

swide=self.innerWidth;

shigh=self.innerHeight;

}

else if (document.documentElement && document.documentElement.clientWidth) {

swide=document.documentElement.clientWidth;

shigh=document.documentElement.clientHeight;

}

else if (document.body.clientWidth) {

swide=document.body.clientWidth;

shigh=document.body.clientHeight;

}

function createDiv(height, width) {

var div=document.createElement("div");

rainbow="#"+hex[r]+hex[g]+hex[b]

if (seq==6){

b--

if (b==0)

seq=1

}

if (seq==5){

r++

if (r==12)

seq=6

}

if (seq==4){

g--

if (g==0)

seq=5

}

if (seq==3){

b++

if (b==12)

seq=4

}

if (seq==2){

r--

if (r==0)

seq=3

}

if (seq==1){

g++

if (g==12)

seq=2

}

div.style.position="absolute";

div.style.height=height+"px";

div.style.width=width+"px";

div.style.overflow="hidden";

div.style.zIndex="10";

div.style.backgroundColor=rainbow;

return (div);

}

window.onload=function()

{

initCursor()

initImage()

startTime()

}

function initImage() {

imageId = 'menu'

image = document.getElementById(imageId);

setOpacity(image, 0);

image.style.visibility = "visible";

fadeIn(imageId,0);

}

function fadeIn(objId,opacity) {

if (document.getElementById) {

obj = document.getElementById(objId);

if (opacity <= 100) {

setOpacity(obj, opacity);

opacity += 10;

window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 120);

}

function setOpacity(obj, opacity) {

opacity = (opacity == 100)?99.999:opacity;

// IE/Win

obj.style.filter = "alpha(opacity:"+opacity+")";

// Safari<1.2, Konqueror

obj.style.KHTMLOpacity = opacity/100;

// Older Mozilla and Firefox

obj.style.MozOpacity = opacity/100;

// Safari 1.2, newer Firefox and Mozilla, CSS3

obj.style.opacity = opacity/100;

}

function changeNav(id) {

document.getElementById('content').innerHTML=document.getElementById(id).innerHTML;

document.getElementById('main').innerHTML=document.getElementById('home').innerHTML;

document.getElementById('rabbit').style.top="275px"

document.getElementById('penguin').style.top="532px"

}

function hidestatus(){

window.status=""

return true

}

// ]]>

</script>

if (window.jstiming) window.jstiming.load.tick('headEnd');

</script>

function setAttributeOnload(object, attribute, val) {

if(window.addEventListener) {

window.addEventListener("load",

function(){ object[attribute] = val; }, false);

} else {

window.attachEvent('onload', function(){ object[attribute] = val; });

}

function showRelatedContent(args) {

var el = document.getElementById('related-iframe');

if (el.parentNode.style.display != 'none') {

el.parentNode.style.display = 'none';

document.onclick = showRelatedContent.prevOnClick;

return;

}

var match = /(?:^[?]|&)c=([0-9]+)(?:&|(?!.))/.exec(args);

if (match !== null) {

document.getElementById('related-loading').style.left = match[1] + 'px';

el.style.left = Math.max(0, match[1] - parseInt(el.width) / 2) + 'px';

}

// Hide related-content dropdown when clicking anywhere but on it.

document.onclick = function() {

var el = document.getElementById('related-iframe');

if (el.parentNode.style.display != 'none') {

el.parentNode.style.display = 'none';

}

document.onclick = showRelatedContent.prevOnClick;

};

}

</script></div>
</div>

♣ ♣ ♣

¿Los disfrutaste? :]

Botones redes sociales en tu blog

ah poco no u.u

¿Neesitas darle publicidad a tus redes sociales en tu blog? ¡Bien! Entonces aprende a como añadir botones en los que mostrarás tus redes sociales de forma mas ordenada y cómoda.

Ejemplo;

♦Pasos;

♣Diseño → Añadir HTML/ Javascript → Copia y pega;

♦Instrucciones;

Rojo; Dirección de tu red social.

Rosa; Dirección de tu imagen de la red social.

Celeste; Nota [pasa tu mouse sobre nuestro ejemplo a la derecha]

Si quieres recursos, o algunos botones. Puedes pulsar n la sección recursos.

Cambia tu cursor / Añade un cursor

¿Cómo están? ¿Bien?

○ ○ ○ ○ ○

Nuestro tutorial consta de cambiar / añadir un cursor a nuestro blog para hacerle notar un poco mas diferente y mas —¿A tu estilo?—.

Los pasos son los siguientes;

Diseño → Añadir HTML/ Javascript → Copias y pegas:

<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/others/oth-6/oth652.cur), progress !important;}</style>

Violeta; URL / Dirección de tu cursor.

○ ○ ○ ○ ○ ○

Puedes encontrar recursos para este tutorial en la sección; Recursos.

domingo, 7 de febrero de 2016

+ Traductor para tu blog

Un rápido tutorial, se trata de un traductor para tu blog por si de alguna forma tus visitores necesiten traducir el contenido de tu blog;

Pasos;

Diseño → Añadir HTML/Javascript → Copias y pegas;

¡Listo!

+ Elimina / Bloquea el click derecho en tu blog

^^ Hi ^^

Un corto tutorial sobre ¿Cómo bloquear o eliminar el click derecho de nuestro blog? sonará un poco molesto para los blogs en donde el ''Copia y Pega'' sea común entre los visitores pero deben tener en cuenta que con solo punchar ''CTRL + C'' es mas que suficiente para copiar los codigos u otro elemento copiable.

El primer paso será ir a → Diseño → Añadir HTML/Javascript ;

document.oncontextmenu = function(){return false;}

</script>}

Guardas y listo.

+ Añade favicon a tu blog

Esto es algo que todos conocen y algo que muchos ya saben —o no— hacer. Pero aquí os muestro como hacerlo —por si eres nuevo en esto—.

Existen dos formas de cambiar el favicon a tu blog, pero mayormente usamos la opción ''Fácil'' que es la que mostraré acontinuación;

Pasos:

Diseño → Favicon;

Pincha en ''Editar'' luego de abrirse el cuadro de diálogo;

Seleccionas el archivo o tu favicon teniendo en cuenta los requisitos y das click en guardar.

¡Listo!

Así de fácil.

*Nota; Puedes revisar la ecció de ''Recursos'' para encontrar gráficos de ayuda para decoración de tu blog :)

+ Texto en Movimiento

^{You should go and love yourself ♥}

El tutorial es bastante similar al de las imagenes, simplemente que estamos hablando de un; texto. Las indicaciones no son para nada difíciles y queda bastante cute en algun blog o página web.

Pasos;

Blogger → Diseño → Añadir Html/Javascript → Copia y pega este código;

<marquee behavior="alternate" direction="left" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="8" width="100%"> <img height="100" src="DIRECCION DE TU IMAGEN" width="110" /> <img src="DIRECCION DE TU IMAGEN" /> <img src="DIRECCION DE TU IMAGEN" /> <img src="DIRECCION DE TU IMAGEN" /> <img src="DIRECCION DE TU IMAGEN" /> <img src="DIRECCION DE TU IMAGEN" /></marquee></center><text>TEXTO AQUI<center></center></text>

rosa: de ahí dependerán de que lado quieres que giren las imagenes en mi caso es a la izquierda pero puedes usarlo a la derecha escribiendo Right.

violeta: de ahí dependerán el tamaño de la imagen a elegir en este caso la altura.

azul : aquí es el ancho.

café: ahí eligieras de que modo quieres el texto.

Ej; Normal → <text>TEXTO AQUI</text>

Pequeño → <smal>TEXTO AQUI</smal>

Cursiva: <i>TEXTO AQUI</i>

verde: elegirás de que alineación quieres el texto,en mi caso es centrado si lo quieres a la izquierda solo cambia center por left y derecha por right.

Muestra tu resultado :)

+ Imagenes en movimiento

¿Te gusta?

Bien. Primero sigue las siguientes indicaciones;

1-nos vamos a diseño → añadir html/javascript → copiamos y pegamos el siguiente codigo;

</marquee></center>

instrucciones;

naranja → de ahí dependerán de que lado quieres que giren las imagenes en mi caso es a la izquierda pero puedes usarlo a la derecha escribiendo Right.

violeta → de ahí dependerán el tamaño de la imagen a elegir en este caso la altura.

azul → aqui es el ancho.

morado → aquí elegirás la velocidad de tu marquee.

Nota: 50% equivale a 3 segundos si eliges 10% la velocidad sera bastante rápida.

+ Imagen en la esquina de tu blog

¡Nuevo Tutorial!

- - - - - - - -

Se preguntarán... ¿Cuál imagen? Pues es la que está en la esquina de nuestro blog;

Pues entonces... ¡Comencemos!

1- Abrimos nuestro blogger → diseño → añadir gadget html/javascript → pegarán este código;

<a style="display:scroll;

position:fixed;bottom:5px;right:5px;"

href="#" title="subir">

Instrucciones;

rojo → tamaño de como quieras la imagen ( ya sea bastante esquinado o poco)

azul→ aquí elegirás si quieres que la imagen este ya sea a la izquierda ( L E F T ) o a la derecha ( R I G H T)

violeta→ colocaras la URL de la imagen .

Nota: Puedes conseguir la url subiendo tu imagen de gusto ya sea en la siguiente pagina:

tinypic.com

*Puedes seleccionar ''Recursos'' del Menú para encontrar gráficos para tu blog :)

sábado, 13 de febrero de 2016

Cambia el color seleccionado de tu blog

Centra el título, gadgets y fecha.

Edita / Añade tu propio reproductor de música para tu blog

Agrega Fieldset a tu blog

Brillitos de arcoiris en tu blog

Botones redes sociales en tu blog

Cambia tu cursor / Añade un cursor

domingo, 7 de febrero de 2016

+ Traductor para tu blog

+ Elimina / Bloquea el click derecho en tu blog

+ Añade favicon a tu blog

+ Texto en Movimiento

+ Imagenes en movimiento

+ Imagen en la esquina de tu blog

Bienvenido/as

Newsletter

Social Sites

Busqueda

Navegación

¿Buscas tu idioma?

Archivo del blog

Popular Posts

Pages