Bienvenidos a Decora Shojo

Un blog con cositas muy bonitas, espero que sea de su agrado!. No olvides dejar tu comentario!! y si gustas puedes seguirnos!!

Bienvenidos a Decora Shojo

Un blog con cositas muy bonitas, espero que sea de su agrado!. No olvides dejar tu comentario!! y si gustas puedes seguirnos!!

Bienvenidos a Decora Shojo

Un blog con cositas muy bonitas, espero que sea de su agrado!. No olvides dejar tu comentario!! y si gustas puedes seguirnos!!

Bienvenidos a Decora Shojo

Un blog con cositas muy bonitas, espero que sea de su agrado!. No olvides dejar tu comentario!! y si gustas puedes seguirnos!!

Bienvenidos a Decora Shojo

Un blog con cositas muy bonitas, espero que sea de su agrado!. No olvides dejar tu comentario!! y si gustas puedes seguirnos!!

Mostrando entradas con la etiqueta Trucos Blog. Mostrar todas las entradas
Mostrando entradas con la etiqueta Trucos Blog. Mostrar todas las entradas

15 ago 2011

Texto que sigue al cursor en forma giratoria


Aquí un efecto bien bonito y novedoso para sus blog y muy fácil de hacer.

Ver Ejemplo en Blog de Prueba

Ingresa a Diseño-Edición de HTML y antes de </head> pegar lo siguiente:

<style type='text/css'>
/* Texto giratorio que sigue al cursor */
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: verdana, arial; /* Tipo de letra */
color: #000; /* Color del texto */

/* No editar esta area */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>
<script type='text/javascript'>
//<![CDATA[
/* Circling text trail- Tim Tilton
Website: http://www.tempermedia.com/
Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
Modified Here for more flexibility and modern browser support
Modifications as first seen in http://www.dynamicdrive.com/forums/
username:jscheuer1 - This notice must remain for legal use
*/

;(function(){

// Mensaje
var msg = "Bienvenido a Decora Shojo";

// Tamaño de la letra
var size = 22;

// Determina si es ovalado o circular, 1 es circular, 2 es ovalado
var circleY = 0.75; var circleX = 2;

// Espacio entre cada letra
var letter_spacing = 5;

// Diametro del circulo
var diameter = 10;

// Velocidad de rotacion
var rotation = 0.4;

// Velocidad de reaccion
var speed = 0.3;

////////////////////// No editar nada mas //////////////////////

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},

makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},

drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},

init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},

ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};

})();
//]]>
</script>


Lo que está en negrita puedes cambiarlo, pero puedes cambiar también el tamaño, la velocidad, etc.

Nota: Si no te resulta este efecto es porque en tu plantilla tienes tantos códigos que algunos se bloquean y quedan mal, por eso es importante tener una copiad e plantilla antes o realizar vista previa.

Saludos!

Créditos: Ciudad Blogger

Anuncio Flotante


Hola gente! Ahora haremos un truco de cómo colocar un anuncio flotante con opción de cerrar y además bajará junto con el scroll de la página.


Ver el Ejemplo en el Blog de Pruebas

Primero entra en Diseño-Edición de HTML, buscas con control+f </head> y justo antes de eso pega el siguiente código:


<style type='text/css'>
#anuncio {
position: absolute;
border: 0px;
padding: 2px;
width: 300px;
height: 80px;

visibility: hidden;
z-index: 200;
top: 27px;
left: 13px;
}
</style>


<script type='text/javascript'>
//<![CDATA[
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 30 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("anuncio").style.visibility="hidden"
}

function staticbar(){
barheight=document.getElementById("anuncio").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 10);
}
ftlObj = ml("anuncio");
stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
//]]>
</script>


Lo que está en negrita corresponde al ancho y a la altura del anuncio.
-width: 300px; por el ancho de la imagen
-height: 80px; por el alto de la imagen

Ahora Busca con Control+f </body> y justo antes de eso pega lo siguiente:

<div id='anuncio'>
<a href='Javascript:void' onClick='closebar(); return false'><img align='right' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWxz_m2kT-zdetZJtsHfPOue_Yqu3heef_iB5LstI67Y_YkALZaYklYVcb0u9OOZEJJkX7ThIBq3fMWhIKyyOPDVuZ-H5WPkotP_cZrzvuoyaoAqjntUjhxDFR_ayZBmZL5LRPVUu3Q7Y/s200/icono-cerrar.png'/></a><br />
<a href='URL del enlace'><img src='URL de la imagen'/></a>
</div>


Cambia donde se indica la URL de la imagen que será el aviso, al igual que la URL del enlace que es a donde llevará el vínculo cuando se haga click sobre el anuncio.

Si en vez de una imagen quisieras agregar un texto entonces usa este código en lugar del anterior:

<div id='anuncio'>
<a href='Javascript:void' onClick='closebar(); return false'><img align='right' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWxz_m2kT-zdetZJtsHfPOue_Yqu3heef_iB5LstI67Y_YkALZaYklYVcb0u9OOZEJJkX7ThIBq3fMWhIKyyOPDVuZ-H5WPkotP_cZrzvuoyaoAqjntUjhxDFR_ayZBmZL5LRPVUu3Q7Y/s200/icono-cerrar.png'/></a><br />
<a href='URL del enlace'><div style='background:#ccc;color:#FFF;border:3px solid #000;padding:5px;text-align:center;font-size:14px;'>Aquí va el mensaje del anuncio</div></a>
</div>


Puedes cambiar el color de fondo, tamaño de letra, etc. del anuncio a tu gusto...

Suerte!!

Créditos: Ciudad Blogger

14 ago 2011

Efecto de sacudido en enlaces


Aquí les tengo un truquito!...Hace Tiempo que no publicaba uno, espero q ayude a hermosear su blog! o incluso a sorprender a muchos.
Recuerden no sobrecargar el blog, eso tampoco es tan agradable a la vista!.
Bueno..comencemos!
El efecto de sacudido es un efecto que al hacer click sobre un enlace o elemento éste se sacude de un lado a otro.


Ver Ejemplo en el Blog de Prueba

Para poner este Efecto Se dirigen a Diseño, luego Edición de HTML y con Control+f buscan </head> y justo antes de eso colocan lo siguiente:

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>
<!-- Prototype y Scriptaculous-->
<script type='text/javascript'>

function ShakeEffect(element){
new Effect.Shake(element);
}

</script>


Colocar antes de guardar vista previa para verificar que no haya ocurrido ningún cambio desagradable en nuestro blog.
Luego solamente para utilizar este efecto en sus imágenes deben colocar el URL de ella junto con el URL de algún enlace en el siguiente código:

<a href="URL del enlace"onclick="ShakeEffect(this);"><img src="URL de la imagen" /></a>

Si lo desean colocar en un enlace de texto sería con este código:

<a href="URL del enlace" onclick="ShakeEffect(this);">Texto del enlace
</a>

Ahora si quieres que este efecto quede como el mio y se aplique sólo al pasar el cursor y no al hacer click inmediatamente sobre la imagen o texto, sólo debes cambiar dónde diga onclick por onmouseover.

Éxito!
Créditos: Ciudad Blogger

30 ene 2011

Subir y Compartir Archivos por 4Shared

Aquí respondiendo una duda de subir y compartir archivos mediante 4shared. Primero les cuento de qué se trata esta página!. Es una página web que almacena canciones, videos, fotos, etc (parecido a megaupload, rapishare, etc). Almacena los archivos de forma individual y en carpetas. Además esto lo puedes compartir mediante un enlace en tus otras páginas o para que descarguen cosas.

Pasos a Seguir:

Ingresar a 4Shared
Aquí tenemos 2 opciones subir archivos de forma gratuita sin resgistrarse, o la opción de registrarte y poder almacenar archivos en un espacio de 10 GB, y es la opción que yo recomiendo, porque a veces las cosas que suben se borran y en cambio si te registras tienes un respaldo de que verdaderamente se guardaron los archivos.
Colocas Registrar (en caso de que no desees hacerlo subes tu archivo dónde está el boton verde y listo) y luego ingresas los datos que te piden (mail y contraseña).
Para subir archivos te vas a la parte inferior de la página y verás que dice "subir archivos" y selecciona tu archivo, en el caso de que sean más archivos apretas "más" de lo contrario colocar "subir" y esperas unos minutos, luego te saldrá una "ventanita" y sale las siguientes opciones:
Enlaces simples: Se refiere al URL de la imagen (en mi caso) que cargaste, es decir, del archivo que cargaste.
Descripción
Etiquetas
Código HTML: es para poder publicarlo en un gadget Javascrip del blog.
Código Foro: En realidad no lo conosco mucho xD, Supongo que es para un foro xD

El más importante es el código simple porque a través de él bajas los archivos y compartes los documentos subidos por ti. A través de ese "link" lo puedes compartir y publicar en tu blog para bajar tus cosas.
Espero que haya servido esta mini explicación...Y ya saben más dudas me escriben en la entrada correspondiente!.Gracias.
Nota: Para ver las imaen en tamaño real,hacer click sobre ellas.

26 ene 2011

Colocar "Entradas Relacionadas"

Se han preguntado cómo colocar algunas entradas relacionadas abajo de sus entradas o post??. En algunos casos también suele salir "quizás esto también te interese".Bueno les traigo el truco bien sencillo de realizar y de manera online!.
Les explico:
Ingresar a *linkwithin*
Rellenar los datos que te piden ahí (mail,Blog,Platform,Width)
Luego de eso, colocar GET WIDGET!
Ahora te saldrá unas imágenes de cómo instalarlo (puede ser manual, es decir, pegar el código en un gadget o de manera automática que es la que aconsejo yo xD)
Luego lo acomodan a su plantilla y guala! quedará listo sus entradas relacionadas con sus respectivas imágenes.

15 ene 2011

Redondear Esquinas de las Imágenes

Hola Personitas que visitan mi pequeño mundo xD.
He visto sus hermosos mensajes, y en general puedo decir que me encantannnn!!!!!xD. Es que recibí buenas críticas, y eso me tiene muy feliz feliz. Espero que sigan visitando el blog y nuestra creadora de este blog llega la próxima semana y nos traerá nuevas entradas...

Este tutorial y truco es muy sencillo, debido a que se realiza de forma online y listo!!. Asi de sencillo. Les explico de qué se trata:

Primero deben tener una imagen (obviamente que no tenga las esquinas redondeadas xD)
Luego visitar la siguiente página: Roundpic
En aquella página deberan subir su imagen que la tienen guardadas en su Pc o que tienen su URL. Colocan Round it! y listo
Aparece su imagen con las esquinas redondeadas, un diseño de imagen muy sencillo y elegante.
Incluso en la página pueden modificar el color de fondo de las esquinas y modificar el ancho y altura de ellas, todo va en el gusto de cada uno.
Éxitoo y que les resulte...xoxo!*

11 oct 2010

Brillo al pasar el cursor

Aquí respondiendo una consulta que nos hizo nuestra amiga que siempre nos visita Tomoyo *-* Han notado que al pasar el cursor sobre un link aparece un brillito??? como este por ejemplo http://i11.photobucket.com/albums/a168/evelynregly/minigifs/th_tres_brilhos.gif y en mi caso uso un background mas grande http://i31.tinypic.com/b67nyf.gif

Pues aquí les traigo la manera de hacerlo. Es muy fácil, sólo sigan estos pequeños pasos:

1.- Entrar al blog y entrar a Diseño y click en Editar HTML
2.- Control+F y buscan algo parecido a esto (cambia dependiendo de la plantilla, generalmente está casi al comienzo):
Nota: quiz{as no encuentren con control+F esto se debe porque los colores de mi blog son diferentes al suyo...les recomiendo buscarlo manualmente, es decir, bajando de a poco y poniendo mucho ojo!
a, a:visited {
color: #fc318a;

text-decoration: none;

}

a:hover {

color: #fc318a;

text-decoration: underline;


3.- Y luego le agregan lo siguiente (lo que está en rosado): a, a:visited {
color: #fc318a;
text-decoration: none;

}

a:hover {

color: #fc318a;

background: url(URL DE LA IMAGEN) repeat;

text-decoration: underline;

Dentro, donde dice URL DE LA IMAGEN, buscan algun gif,glitter, fondos, etc y lo colocan ahí, y listo! (antes de guardar recuerden ver en "vista previa")

4.- Pueden buscar brillos "googleando" la palabra "gif de brillos" y les saldrá unas cuantas páginas..que tengan éxito!!

Hacer Emoticones Online

Aqui Kony-chan!.Antes de comenzar a explicar de que se trata esta entrada, estuve conversando con Andy-chan, y me mostró los blog con el contenido copiado...Hay uno en específico que es totalmente textual!, hasta las palabras, son las mismas xD Creo que eso le moelstó a Andy-chan y por eso recurrió a los mensajes que vemos arriba de no copiar!. No se trata de que no queramos que compartan la información...se trata de que lean y por último pongan un poco de esfuerzo con sus propias palabras expliquen los trucos y tutoriales, porque son esas las cosas que copiaron textalmente!. Ninguna molestia con gif, avatares, etc pero si con los trucos!...Nosotras ponemos nuestro esfuerzo de hacerlo entender agregando un estilo propio...mínimo avisar que la fuente es de aqui...Si lo han notado siempre dejamos los créditos o la fuente de dónde lo sacamos y sin embargo nunca es igual a la fuente, porque lo explicamos a nuestra manera...Ojalá que la gente entienda esto, exigimos respeto por nuestro trabajo, aunque sea pequeño..Okiss!


Dejando de lado el tema, explorando google encontré unas cuantas páginas muy interesantes que las iré subiendo una por una! Hoy toca ¿Cómo hacer emoticones Online?



Pues encontré esta página muy genial y sencilla, sólo deben subir su imagen y luego te llevara a un editor y colocas los efectos que desees *-* Sii! cómo leyeron, así de fácil, yo aquí hice algunos de muestra:








Vamos que esperas...crea el tuyo haciendo Click Aqui

7 oct 2010

Galería de imágenes con efecto hover

Hola amigos y amigas! Aquí "Shugo Chara" les trae un truco bastante fácil de realizar y muy bonito para sus imágenes.
1.- Ingresa a tu blog y en diseño, busca Edición de HTML
2.- Presiona Control+F y busca el código ]]></b:skin> y justo después de eso colocar lo siguiente:



<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}
.hovergallery img:hover{
-webkit-transform:scale(1.1); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.1); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}
</style>

y Luego en una entrada o post colocar lo siguiente:




<div class="hovergallery">
<img src="url-imagen-1"/>
<img src="url-ímagen-2"/>
<img src="url-imagen-3"/>
<img src="url-imagen-4"/>
</div>


Y listo!!...les quedará como esto....Suerteee!! (Fuente: GemaBlog)






Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
ir arriba