Andando en la web me encontré con este peculiar gadget el cual muestra una pequeña cámara de vigilancia en la parte superior del blog, a mi modo de ver simula muy bien una verdadera cámara, la cámara se ve la siguiente manera, espero les guste.

Esta camara de vigilancia la verdad me parece muy buena como un accesorio más a tener, ya que si bien en realidad su única función es moverse, es divertido tener un gadget de este tipo a la hora de que los visitantes circulen por nuestro sitio web. Esperamos que les haya gustado esta cámara de vigilancia de alta tecnologia que les dejamos aquí mismo.

Lo bueno de la misma, es que practicamente no consume nada y de hecho si tienes un sitio web como el nuevo, en blogger, es muy simple de colocar. Para agregar este gadget no tienes que hacer muchos pasos, es muy simple, y a continuación te explicamos cómo se hace. Solo vamos a Diseño, Elementos de pagina, Añadir gadget, HTML Javascript y pegas el siguiente código.}

<br /> <div style="text-align: center;"><a href="http://miltrucosblogger.blogspot.com/2011/07/poner-una-camara-de-vigilancia-en-tu.html" _fcksavedurl="" style="right: 0px; position: fixed; top: 0px;"><img src="http://1.bp.blogspot.com/-MVAyxEb1Gk0/ThtUzuB5AkI/AAAAAAAADU4/RcEFHCFFvXA/s1600/camaras01pe3.gif" _fcksavedurl="http://1.bp.blogspot.com/-MVAyxEb1Gk0/ThtUzuB5AkI/AAAAAAAADU4/RcEFHCFFvXA/s1600/camaras01pe3.gif" alt="" /></a></div>

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! 

Menú Vertical Sencillo

Hola!Aquí les voy a explicar como hacer un Menú Vertical muy sencillo y entretenido. Encontré varios códigos, pero este es uno de los que más me gustan!.
 Para hacer esto deben seguir los siguientes pasos y verán que no es difícil!, sólo tengan paciencia y ánimo...!
 Entra a Diseño, a Edición de HTML
 Presionas Ctrl+f y colocar en el "cuadradito" de búsqueda ]]></b:skin> (o antesde </head>) y te saldrá marcadito y justo ANTES de eso pega lo siguiente:

/* Menú Vertical
----------------------------------------------- */
#menuvert ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 200px; /* ancho del menú */
font-size: 11pt;
}
#menuvert ul li {
background-color: #B0CBDD; /* color de fondo del menú */
padding: 0px;
}
#menuvert ul li a {
color: #000; /* color de las letras */
text-decoration: none;
display: block;
padding: 10px 10px 10px 20px;
}
#menuvert ul li a:hover {
background: #336699; /* color del botón al pasar el cursor */
border-left: 10px solid #000066; /* color del rectángulo junto al título */
color: #FFFFFF; /* color de las letras al pasar el cursor */
}

 Este código tiene explicado el contenido, asi que será sencillo de realizar y de entender.
 Luego de esto se dirigen a Diseño en Elementos de la página y añaden un gadget,y selecciona HTML/Javascript y pega ahí esto:

<div id="menuvert">
<ul>
<li><a href="URL del enlace">Título 1</a></li>
<li><a href="URL del enlace">Título 2</a></li>
<li><a href="URL del enlace">Título 3</a></li>
<li><a href="URL del enlace">Título 4</a></li>
</ul>
</div>

Luego podrán ver que les kedará algo asi:

 

Vista Normal / Vista pasar el cursor

*Nota: Se pueden cambiar los colores

 Ahora para Aquellas personas que quieren decorar de manera diferente su Menú colocándoles algunos gif, les explico ahora como se hace:

 A partir del segundo código que les proporcioné agregarán el siguiente código de esta manera:

 Código para agregar: < img src="URL DE LA IMAGEN"/>

 Ejemplo con el título 1

<div id="menuvert">
<ul>
<li><a href="URL del enlace">Título 1</a><img src="URL DE LA IMAGEN"/></li>
</ul>
</div>

Ojalá les haya gustado!...éxitoo!! y recuerden dejar sus comentarios y seguirnos!!.

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 es de decora shojo el blog de prueba

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/AVvXsEginbqECfvZNgRtcmykRI6jINloXYLDmC5n04R3oKA_UBDHfYafxiWclis4c4tgfqrEcjJmlMMTrfbxaDcNhu6pMx1NabsvjgbAHkXFSWn84d-1ZYLw2arTM4xG0S6AwxZb7cF1LsoMCxI/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/AVvXsEginbqECfvZNgRtcmykRI6jINloXYLDmC5n04R3oKA_UBDHfYafxiWclis4c4tgfqrEcjJmlMMTrfbxaDcNhu6pMx1NabsvjgbAHkXFSWn84d-1ZYLw2arTM4xG0S6AwxZb7cF1LsoMCxI/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!! 

Cursor con Brillo

Cómo poner el efecto en el cursor de Brillo cayendo.
Esto es muy simple, sólo deben colocar el siguiente codigo que esta en el cuadro abajo y pegarlo En un HTML/jascript

<script type='text/javascript'>
// <![CDATA[
var colour="#FBBDDB";
var sparkles=40;

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();
window.onload=function() { 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();
}}
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");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

Music Box Efecto deslizante By Annyz Blog

Esto Lo Copie De Mi Amiga Annys La Mejor.

Hace tiempo que vi este efecto pero solo era para plantillas blogskin trate de hacer mi version para blog con plantillas normales y no me salia x_x paso un ratito hasta que por fin lo logre =D *aplausos* hahahah, y bueno como siempre me piden el nombre de las canciones que pongo en el reproductor *v* tambien le adicione un marque para el titulo de la cancion xD

espero les guste este efecto:

nos vamos a Diseno >> Edicion de html >> Editar plantilla ok?

Pulsamos ctrl + F y buscamos ]]></b:skin>

Copiamos este codigo y lo pegamos justo arriba de ]]></b:skin>

#music {
border-radius: 8px;
margin-bottom: 8px;
width: 210px;
text-align: center;
font-size: 10px;
background: url(URL DEL FONDO);
border: 1px solid #eee;
}
#here {
position:fixed;
left: 0px;
top:-80px;
text-align: center;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
z-index:999;
}
#here:hover {
top:8px;
}

Da clic en guardar y luego ve a Diseno >> Elementos de pagina >> Anadir gadget html/Javascript

Y pegas este codigo:

<div id="here">
<div id="music">
<div style="border:1px solid #eee; width:210px;height:65px;overflow:auto; "><br />
<center><center><object type="application/x-shockwave-flash" data="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" height="20" width="200">
<param name="movie" value="http://flash-mp3-player.net/medias/player_mp3_maxi.swf" />
<param name="bgcolor" value="#ffffff" />
<param name="FlashVars" value="mp3=URL DE TU MP3&width=240&loop=1&autoplay=1&showloading=always&sliderwidth=7&sliderheight=7&volumewidth=10&volumeheight=10&loadingcolor=ffe3e3&bgcolor1=fdfdfd&bgcolor2=ffffff&slidercolor1=ffafbe&slidercolor2=ffafbe&sliderovercolor=ffafbe&buttoncolor=ffafbe&buttonovercolor=ffafbe" /></object></center><marquee behavior="scroll" direction="left">AQUI EL NOMBRE DE TU CANCION</marquee><center>
<br />
</center></center></div></div>
<img src="URL DE TU GIF O IMAGEN"/></div>

** Para editar el Pequeno reproductor visita este tutorial **

cute-mp3-player

y Aqui algunas imagenes:

http://sl.glitter-graphics.net/pub/738/738304r69e6gwna9.gif


http://sl.glitter-graphics.net/pub/776/776330gvfhqvip6d.gif

http://sl.glitter-graphics.net/pub/819/819969k0mjuqhbad.gif


http://sl.glitter-graphics.net/pub/1595/1595964muboxz6znj.gif


http://sl.glitter-graphics.net/pub/1626/1626857owzkk2y6eh.gif

No copiar tutorial :)

+ efectos kawaii [vocaloid, sanrio, twin star, varios]

holaa mis blogueritas ^^ como ven les traigo nuevos efectos son de la giffy.me como anteriormente les habia mostrado en otros post perooooooooooooo estos son efectos diferentes y trae muchisimas cosas mas para decorar el blog.. como relojes, reproductores de video, jueguitos (rompecabezas, memoria..etc) porta marcos, colgantes muy lindo, efectos para los cursores y muchas decoraciones mas.. todos muuuy cutes ^^

la pagina esta en japones - haha que raro verdad - pero no se preocupen aqui les pondre unas imagenes guia para que se les haga facilito facilito n.n okis bueno empezemos:

para verlo en grande da clic sobre la imagen
les traduci las categorias okis

al darle clic al cuadrito anaranjado te lleva aqui

y es todo =D ves te dije que estaba facilito ^.^
recuerda pegar el codigo que esta en el recuadro azul en un gadget html/javascript

ejemplos de las cositas que encontraras:

Relojitos, marcos/fotos (en la esquina),cursor y los moñitos saliendo debajo del blog

para verlos da clic AQUI en mi blog de pruebas

Aqui otros efectos que me encantaron:

osito con helado
Da clic a la imagen para ir a la pagina de muestra

Miku tirando estrellitas y volando por tu pagina
Da clic a la imagen para ir a la pagina de muestra

cinnamonroll flotando en tu pantalla

da clic para ir a la pagina de muestra

 

ositos y flores
Da clic a la imagen para ir a la pagina de muestra


cursor rin y len
Da clic a la imagen para ir a la pagina de muestra


Moñitos de colores
Da clic a la imagen para ir a la pagina de muestra



melody
Da clic a la imagen para ir a la pagina de muestra

personajes sanrio por tu pantalla tambien

Da clic a la imagen para ir a la pagina de muestra

para mas efectos y accesorios visita