domingo, 6 de enero de 2013

Gif que pasean en tu Blog


Este es un tuto muy sensillo y bello todo gracais a Estrellita y su bellisimo BLOG 

Ve a blogger / diseño / añadir un gadget /  
y copia este codigo en un html 



 <script type="text/javascript"> /****************************************** Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html) 
* Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code 
* Last updated Nov 9th, 05' by DD. This notice must stay intact for use 
******************************************/ 
//Configure below to change URL path to the snow image 
var snowsrc="URL DE TU GIF  O OTRA COSA" 
// Configure below to change number of snow to render 
var no = 10; 
// Configure whether snow should disappear after x seconds (0=never): 
var hidesnowtime = 0; 
// Configure how much snow should drop down before fading ("windowheight" or "pageheight") 
var snowdistance = "windowheight"; 
///////////Stop Config////////////////////////////////// 
var ie4up = (document.all) ? 1 : 0; 
var ns6up = (document.getElementById&&!document.all) ? 1 : 0; 
function iecompattest(){ 
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body 
} 
var dx, xp, yp; // coordinate and position variables 
var am, stx, sty; // amplitude and step variables 
var i, doc_width = 800, doc_height = 600; 
if (ns6up) { 
doc_width = self.innerWidth; 
doc_height = self.innerHeight; 
} else if (ie4up) { 
doc_width = iecompattest().clientWidth; 
doc_height = iecompattest().clientHeight; 
} 
dx = new Array(); 
xp = new Array(); 
yp = new Array(); 
am = new Array(); 
stx = new Array(); 
sty = new Array(); 
snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc 
for (i = 0; i < no; ++ i) { 
dx[i] = 0; // set coordinate variables 
xp[i] = Math.random()*(doc_width-50); // set position variables 
yp[i] = Math.random()*doc_height; 
am[i] = Math.random()*20; // set amplitude variables 
stx[i] = 0.02 + Math.random()/10; // set step variables 
sty[i] = 0.7 + Math.random(); // set step variables 
if (ie4up||ns6up) { 
if (i == 0) { 
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>"); 
} else { 
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>"); 
} 
} 
} 
function snowIE_NS6() { // IE and NS6 main animation function 
doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10; 
doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight; 
for (i = 0; i < no; ++ i) { // iterate for every dot 
yp[i] += sty[i]; 
if (yp[i] > doc_height-50) { 
xp[i] = Math.random()*(doc_width-am[i]-30); 
yp[i] = 0; 
stx[i] = 0.02 + Math.random()/10; 
sty[i] = 0.7 + Math.random(); 
} 
dx[i] += stx[i]; 
document.getElementById("dot"+i).style.top=yp[i]+"px"; 
document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px"; 
} 
snowtimer=setTimeout("snowIE_NS6()", 10); 
} 
function hidesnow(){ 
if (window.snowtimer) clearTimeout(snowtimer) 
for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden" 
} 
if (ie4up||ns6up){ 
snowIE_NS6(); 
if (hidesnowtime>0) 
setTimeout("hidesnow()", hidesnowtime*1000) 
} 
</script> 

url de tu gif o otra cosa: Aqui poner el url de lo que quieres que vuele en tu blog
var no = 10: Cambia el 10 Por cuantas veces quieres que caiga tu gif ( O otra cosa)


EN URL O OTRA COSA pones el url de la cosa que quieres poner (Todos estos gifs son de Estrellita)



Adiosssss

Menu Cute

Holisss te traje un bellisimo tuto de mi amiga Estrellita :D creidtos a ella por todito lo que ves aqui, bueno te enseñare a tener un menu extra cute empecemos: asi se veria:

Vamos a:
Diseño/Añadir un gadget/Html o javascript

Y Pegamos el siguiente código

<style>
a.yejuny{
background:url(Gif1);
background-repeat:no-repeat;
background-size:15px;
padding-left:25px;
color:#444;
margin-bottom:2px;
font:12px arial;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
color:#999;
display:block;
}

a.yejuny:hover{
background:url(Gif2);
background-repeat:no-repeat;
background-size:15px;
}
</style>
<a class="yejuny" href="LINK" >Titulo :  </a>
<a class="yejuny" href="LINK" >Titulo :  </a>
<a class="yejuny" href="LINK" >Titulo :  </a>
<a class="yejuny" href="LINK" >Titulo :  </a>
<a class="yejuny" href="LINK" >Titulo :  </a>

Adios! espero que le halla servido, a mi me encanto lo usare prontito! muchos besos.



                                                                                                Lo viste en la casita de los kawaii
Wanaseoby
Creditos bellos a:  La Casita de los Kawaii de ella es todoo, es una chica genial y contiene muchisimos recursos y tutoriales  visitenla y haganse miembroo beshitos

Pon Bienvenida Kawaii en tu Blog


Holis te traje otro tuto de Estrellita no puedo dejar de subir sus tutos es genial, vistenla, bueno digamos que asi se veria (imagen de estrellita)...
Les gustaria tenerlo? sigan paso a paso cada regla y veran...
  • Ve a Diseño . Añadir un gadget. html javascript. Edicion de html
cOpia este codigo y pegalo en el gadget 
  
  • <div style="background:url(El URL DEL FONDITO); width:400px; overflow-x:hidden; overflow-y:scroll;padding:10px; height:100px; ">TU TEXTOP^^</div>
Espero que te hlla gustado n.n

FUENTE: http://lacasitadeloskawaii.blogspot.com.ar/2012/11/bienvenida-en-el-blog-tuto.html
Creditos bellos a:  La Casita de los Kawaii de ella es todoo, es una chica genial y contiene muchisimos recursos y tutoriales  visitenla y haganse miembroo beshitos...

Pon una cortinita en la parte superior de tu Blog

Hola hermosa! aui te traigo un tuto de Estrellita neuvamente y bueno pues te enseñare a poner una cortinita en la parte superior de tu bloguu aremos esto:

diseño  añadir un gadget  html javascript

Pegas este codigooo bello:

<div style=" background-image: url('linkdelacortina'); top: 0px; left: 0px; width: 100%; HEIGHT: 50px; z-index: 100; position: fixed;"> </ div>
aqui hay algunas de muestra todo graicas a Estrellita...






Creditos a Estrellita y su bello BLOG porque todo lo que viste en este post es completamente de ella asi que miles de creditos a ella!



Blockquote (cuadrito con los códigos)

Em hola >.<
Me pidieron un Tuto de como poner el cuadritO con Fondo que yO uso para los Códigos >w<
seguro se preguntarán mejOr, como es, o que es esO'!

Eso es blockquote~ Blablabla >.< 
Para poner el Blockquote en nuestras entradas
tenemos que presionar este iconitO


Nos vamos a
Plantilla > Edición de HTML> Continuar
buscamos este cÓdigo:
]]></b:skin>

pegamos este codigo justo debajo de eso:
-Moz-border-radius-bottomleft: 15px;
-moz-border-radius-bottomright: 15px; -Moz-border-radius-bottomRight: 15px;
-moz-border-radius-topleft: 15px; -Moz-border-radius-TopLeft: 15px;
-moz-border-radius-topright: 15px; -Moz-border-radius-topright: 15px;
color:#666666; color: # 666666;
border: 3px dotted rgb(255, 148, 245); frontera: 3px puntos rgb (255, 148, 245);
background: #ffffff url(URL DEL FONDITO); fondo: # FFFFFF url (URL DEL FONDITO);
background-position:top left; background-position: arriba a la izquierda;
background-repeat:repeat; background-repeat: repeat;
margin: 4px 4px 4px 4px; margin: 4px 4px 4px 4px;
padding: 6px 6px 6px 6px; padding: 6px 6px 6px 6px;
font-size: 14px; font-size: 14px;
line-height:1.4em; line-height: 1.4em;
}

espero que el tuto les haya servido >o<
ChaiitO! <3



Cbox que se desliza


Holis hermosa :guii como estas? espero que bienn..
pues bueno traigo este tuto porque muuuchas personas me lo han pedido y se lo hare facil, el tuto es para tener el cbox igualito que le mio, es tener una imagen del lado izquierdo en la parte superior que la apretas y en el medio aparece tu Cbox deslisandoce muyyy bello, TU SOLO TENDRAS QUE CAMBIARLE LAS IMAGENES para que no me copien amii :D
TE MOSTRARE EL GRAFICOS COMO SE VERIA
1:
2:



 Bueno ahora lo que haras sera:

Ir a:  Diseño  Añadir Gadget  HTML javascript
 y pegaras el siguiente codigo:
<div style='display:scroll; position:fixed; top:0px; left:10px;'>
<a href="javascript:void(0);"onclick="showHideAT()"/><img class= width="220" height="220"src="URL DE U IMAGEN PARA ABRIR TU KAWAIIOSO CBOX"/></a></div>
<style type="text/css">
#at{
position:fixed;
top:0;
;
}
* html #at{position:relative;}
.attab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.atcontent{
float:right;
background:url(URL DEL FONDO DE TU BELLO CBOX) no-repeat 0 0 transparent;
width:800px;
height:460px;center scroll ;
padding:56px 0 20px 5px;
}
</style>
<script type="text/javascript">
function showHideAT(){
var at = document.getElementById("at");
var w = at.offsetWidth;
at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
at.opened = !at.opened;
}
function moveAT(x0, xf){
var at = document.getElementById("at");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
at.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
}
</script>
<div id="at">
<div class="attab" onclick="showHideAT()"> </div>
<div class="atcontent">
<div align="center">
<div style="background:url() no-repeat;">
<br /><br /><br /><br /><br /><br />
CODIGO DE TU BELLO CBOX
<br />
<center><div id="author"><a href="javascript:void(0);" onclick="showHideAT()"><input style="color: #bbb; background: #fff; border: 2px dashed #fcc; cursor: nw-resize;" type="button" value="Close" class="close" />
</a></div>
</center></div>
</div>
<script type="text/javascript">
var at = document.getElementById("at");
at.style.top = (-200-at.offsetWidth).toString() + "px";
</script></div></div>

Ahora a editar!
Donde dice Url de tu imagen para abrir el Cbox: tu pondras la url de la imagen que queiras que este para cuendo le des clik se habra tu cbox. (NO COPIES MI IMAGEN)
Donde dice Url de el fondo para tu cbox: Pondras la imagen que estara detras de tu cbox.
Donde dice: Codigo de tu cbox: Pues pondras el codigo completo de tu cbox
y ya guardalo y tienes muy kawaii tu cbox: :goo
Ahora te dejo algunas imagenes para abrir el cbox:




 bueno las diseñe yo no le quites mi firma si la usas! plis
si sabes diseñar y queires diseñar el fondo para tu cbox te dejo las medidas:
387 x 381 :D
para que tu cbox entre en el fondo tiene que medir:
20 x 20
eso es todo espero que te halla servido el tuto besitossssssss sabor a miel :D
:fiu

By: AnitaWorld

sábado, 5 de enero de 2013

Header Rotante

Holiss te traigo un super tuto para que tu cabecera quede muy original y cute antes que nada creditos a Annyz por el tutooo ok..

empezemos:


ve a :

diseno -> Elementos de Pagina -> Edicion HTLM -> Editar Plantilla

y busca este codigo:

#header h1 {

o

h1.title {





Borralo y pega el siguiente codigo:

#header:hover{
-webkit-transition-duration: 2s;
-moz-transform: rotate(6deg);
-webkit-transform: rotate(6deg);
}


Da vista previa o guarda y pasa tu cursor por tu cabecera (header) y veras que se mueve :D

Desactiva tu boton derecho del mouse

Bueno chicas hoy les traigo un nuevo tuto ^^ y es el de desactivar el boton derecho pero con una imagen. Creo que hay muchos blog que tiene este bello truco pero solo muestra un texto y no queda muy lindo :P pero yo te enseñare a hacer con una bella imagen :D



sigue los siguientes pasitos para ponerlo en tu blog:

Entra a tu blog ve a:

Diseño >> Edicion htlm y busca:

</head>


Pega justo arriba de </head> el siguiente codigo

<script type='text/javascript'>
// http://loseasi.blogspot.com/
// Creado por Vku para Yeli.
function mostraryeli() {
with(document.getElementById('yeli')) {
style.display = '';
}
return false
}

function cerraryeli() {
document.getElementById('yeli')
.style.display = 'none';
}
document.oncontextmenu=mostraryeli;
document.onclick=cerraryeli;
</script>
<style>
.yeli-vku{
position:fixed;
left:45%; /* Posición desde la derecha */
top:190px; /* Posición desde la arriba */
z-index:8888888;
background: #f9f; /* Color del fondo */
border:5px solid #f09; /* Ancho y color del borde */
padding:0 10px; /* Separación del borde */
color:#f09; /* Color del texto */
text-align:center; /* Texto centrado */
}
</style>


Para personalizar solo cambia los valores que indica lo de color azul (es opcional)Despues busca </body> y pega este otro codigo justo arriba de el

<div class='yeli-vku' id='yeli' style='display:none'>
<p align="center"><img src="http://img59.imageshack.us/img59/8990/74308955.gif" border="0" width="70" height="70"/></p>
<p>Por favor,<br/>no click derecho...</p>
</div>
En lo morado puedes cambiar esa imagen que esta por otra de tu preferencia.
en lo rosita puedes ponerle otro mensaje diferente.!!


Fuente: http://annyzkawaiiworld.blogspot.com.ar

Aviso!

Holaaa aqui traigo un anuncioo para promocionar mi blog :D

viernes, 4 de enero de 2013

Pon Marquee en tu blog

Holisss aqui traigo un tuto de como colocar un marquee en tu blog, si te preguntas que es el marque pues bueno es la cajita de texto que puedes colocar como un gadget en tu blog, que va pasando el texto que tu quieras, es mas o menos como el que tengo yo en la entrada :D.
Hoy te enseñare a colocarlo y a editarlo empecemos:

Vamos a:  Diseño  Añadir Gadget HTML y pegan el siguiente codigo:


<div style="Background-image:url(http://www.google.com.ar/imgres?q=fondos+rosas+pastel&hl=es-419&biw=1024&bih=537&tbm=isch&tbnid=6bkc9y0jXr2H0M:&imgrefurl=URL DE TU IMAGEN=199&dur=1451&hovh=225&hovw=225&tx=113&ty=151&sig=112749516545401327060&page=1&tbnh=141&tbnw=163&start=0&ndsp=15&ved=1t:429,r:5,s:0,i:78); repeat; padding: 5px;-moz-box-shadow: 0 0 15px 5px #FFD9EC;-webkit-box-shadow: 0 0 15px 5px #FFD9EC;
-moz-border-radius: 5px;border-radius: 5px;border: solid #ffaad5; filter:alpha(opacity=150);"><center><marquee behavior="scroll" direction="left" loop="infinite" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()">TU TEXTO</marquee></center></div>

Ahora Editemos:

Donde dice: URL DE TU IMAGEN:
alli pondras la url de la imagen que quieres que tenga de fondo el marquee.
Donde dice: TU TEXTO:
alli colocaras el texto que quieras que pase en el marquee

Y ya luego lo guardas y listoo ya esta tu bello marquee
Espero que te alla servido el tuto, 100% hecho por miii, no me copies, solo para embelleser tu blog :D