TUTORIALES DE BLOGGER: 2016

Efecto de sacudido en enlaces

El efecto de sacudido es un efecto que al hacer click sobre un enlace o elemento éste se sacude de un lado a otro.

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:


<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.0.3");
google.load("scriptaculous", "1.8.2");
</script>

<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!

Espero que les ayude!! CREDITOS shojodecora.blogspot.com
Créditos: Ciudad Blogger

Cursor con Brillo

Cómo poner el efecto en el cursor de Brillo cayendo.
Esto es muy simple,

sólo deben colocar este código en la plantilla,

entre<head></head>

o después de ]]></b:skin> y listo!!

Nota: Para cambiar el color lo deben realizar en la parte de color rojo, donde dice var colour="coloca aquí el color que desees",

puse el color predeterminado como rosado claro, como el que tengo puesto en el blog. Espero que les sirva!

<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>

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.

Espero que les ayude!! CREDITOS shojodecora.blogspot.com

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

y en mi caso uso un background mas grande

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: quizas o 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!!

Espero que les ayude!! CREDITOS shojodecora.blogspot.com

Anuncio Flotante

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.

BIENVENIDOS A TUTORIALES DE BLOGGER

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/AVvXsEibNE6aWkv5D1iaOYdEe75fMo0NwuQ0DeSO1AKxKRCnQg97mJ1aPTlLD7gzCVTc4MZhFkp_IlluLM8rbiphfPSHFPYyTzalzKzgsJNTw4IJoa0vq1mhaeyxlCJKG0CPEUd7gowNAe_sEFA/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/AVvXsEibNE6aWkv5D1iaOYdEe75fMo0NwuQ0DeSO1AKxKRCnQg97mJ1aPTlLD7gzCVTc4MZhFkp_IlluLM8rbiphfPSHFPYyTzalzKzgsJNTw4IJoa0vq1mhaeyxlCJKG0CPEUd7gowNAe_sEFA/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

BOTONCITOS

----------------------------------------------------

Espero que les ayude!! CREDITOS shojodecora.blogspot.com