Mostrando entradas con la etiqueta Embelleciendo mi Blog. Mostrar todas las entradas
Mostrando entradas con la etiqueta Embelleciendo mi Blog. Mostrar todas las entradas

miércoles, 4 de diciembre de 2013

{ Tutoriales } ♥ Efecto Arco Iris en los links de tu blog



Que tal mis amadas, esta noche quiero compartirles un tuto muy mono! Este tuto lo he usado antes en mis blogs y lo vi por primera vez en Ciudad Blogger, y me encanto de una! Pues el mismo ayudara a que los links de tu blog (los enlaces) se vean multicolor como arco iris! Fantástico, no!

Este pequeño tutorial ya lo podemos encontrar en muchos blogs, y aunque siempre he usado el código de mi amigo El Potro, hoy les traigo esa misma idea pero del blog de El Mundo de Cherry.

Espero les guste y lo pongan en practica, y de ser asi no olviden comentar y dejar la url de su blog así les visitamos y vemos lo lindo que les quedo, vale!

Bueno Amiguis, Manos a la Obra!

Primero van a ir a: Blogger | Diseño | Agregar un gadget | HTML/JavaScript, una vez abierto el editor pegarán el siguiente código y luego le darán clic en Guardar, y listo! ..Tendrán todos los links de su blog en multi color arco iris!

Aquí el Código:

<script type='text/javascript'>
//<![CDATA[
var rate = 20;
if (document.getElementById)
window.onerror=new Function("return true")
var objActive; // The object which event occured in
var act = 0; // Flag during the action
var elmH = 0; // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg; // A color before the change
var TimerID; // Timer ID
if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}
function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
};
function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
}
if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
}
if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
}
}
}
function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
}
}
}
function ChangeColor()
{
objActive.style.color = makeColor();
}
function makeColor()
{
// Don't you think Color Gamut to look like Rainbow?
// HSVtoRGB
if (elmS == 0) {
elmR = elmV; elmG = elmV; elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;
if (elmH < 60) {
elmR = t1; elmB = t2; elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1; elmB = t2; elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1; elmR = t2; elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1; elmR = t2; elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1; elmG = t2; elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1; elmG = t2; elmB = t1 - t3;
}
else {
elmR = 0; elmG = 0; elmB = 0;
}
}
elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1) elmR = "0" + elmR;
if (elmG.length == 1) elmG = "0" + elmG;
if (elmB.length == 1) elmB = "0" + elmB;
elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;
return '#' + elmR + elmG + elmB;
}
//]]>
</script>


Bueno mis amadas, eso seria todo por este pequeño tuto! Recuerden que mi blog se alimentan de sus comentarios! Anímate y deja el tuyo! Bendiciones!
Gracias por estar aqui!

Kiss, MarG ♥



{ Tutoriales } ♥ Destellos MultiColor en tu Blog



Bueno hoy les quiero compartir unos lindos destellos para el blog. Estos destellos los vi por primera vez en el blog de Annyz, y quede enamorada de ellos.

Estos destellos son muy diferente a los destellos que comúnmente vemos siempre, los de estrellitas.
Y son diferente simplemente porque en lugar de ser estrellitas en un solo color, en este caso con estrellitas multi color! Unos lindos destellos muy coloridos que le darán vida a tu blog!

Espero te gusten y te animes a ponerlos en tu blog. De ser así te invito a dejarnos la url de tu blog para que podamos ir a ver como te quedaron, vale! ..Espero te anime!

C O M E N C E M O S

Primero van a ir a: Blogger > Diseño > Agregar un gadget, en la ventana que les aparezca elegirán la opción HTML/JavaScript, una vez abierto el editor pegarán el siguiente código { ..es largo el código.. }

<script type="text/javascript"> // <![CDATA[ var colour="random"; var sparkles=100;
 /**************************** *  Tinkerbell Magic Sparkle * *(c)2005-12 mf2fm web-design* *  http://www.mf2fm.com/rv  * * DON'T EDIT BELOW THIS BOX * ****************************/ 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"; rats.style.zIndex="999";     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"; rats.style.zIndex="999";     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].childNodes[0].style.backgroundColor=star[c].childNodes[1].style.backgroundColor=(colour=="random")?newColour():colour;       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;     starx[i]+=(i%5-2)/5;     if (stary[i]<shigh+sdown) {       star[i].style.top=stary[i]+"px";       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";     tiny[i].style.backgroundColor=star[i].childNodes[0].style.backgroundColor;     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;     tinyx[i]+=(i%5-2)/5;     if (tinyy[i]<shigh+sdown) {       tiny[i].style.top=tinyy[i]+"px";       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) {   if (e) {     y=e.pageY;     x=e.pageX;   }   else {     set_scroll();     y=event.y+sdown;     x=event.x+sleft;   } }
 window.onscroll=set_scroll; function set_scroll() {   if (typeof(self.pageYOffset)=='number') {     sdown=self.pageYOffset;     sleft=self.pageXOffset;   }   else if (document.body && (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() {   var sw_min=999999;   var sh_min=999999;   if (document.documentElement && document.documentElement.clientWidth) {     if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;     if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;   }   if (typeof(self.innerWidth)=='number' && self.innerWidth) {     if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;     if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;   }   if (document.body.clientWidth) {     if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;     if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;   }   if (sw_min==999999 || sh_min==999999) {     sw_min=800;     sh_min=600;   }   swide=sw_min;   shigh=sh_min; }
 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";   return (div); }
 function newColour() {   var c=new Array();   c[0]=255;   c[1]=Math.floor(Math.random()*256);   c[2]=Math.floor(Math.random()*(256-c[1]/2));   c.sort(function(){return (0.5 - Math.random());});   return ("rgb("+c[0]+", "+c[1]+", "+c[2]+")"); } // ]]> </script>



Si tienes cualquier duda, no temas en preguntar. Y si tomas este código recuerda dar los créditos a Annyz que fue de donde lo vi hace ya bastante tiempo! Saludos a ti mi querida Annyz, Dios te bendiga!
Bendiciones a ustedes también! Besos!


martes, 3 de diciembre de 2013

{Blockquote} ♥ Añadiendo estilo a los textos citados



Holy mis amores, que tal si platicamos un poquillo sobre los Blockquote! ..Les parece bien? ..Bueno pues comencemos!!!

Los blockquote no son mas que textos citados en Blogger, son aquellos que van entre las etiquetas <blockquote></blockquote> y que se ven de un modo diferente al resto del texto.

Y hoy quiero compartirles un estilo de blockquote que muy posiblemente les va a gustar. Personalmente a mi me gusta mucho, por su simpleza y estilo.

Aquí les dejo un ejemplo del mismo, espero le guste:





La primera imagen es como te quedara, la segunda imagen es como se visualiza al poner el cursor por encima. El color gris que esta alrededor es solo que al tomar la captura salio así, pero no te quedara así al usarlo en tu blog, lo que si tendrá es el color purple en los bordes, con la imagen de fondo en tonos purple.

Si te ha gusto este blockquote, te invito a seguir las siguientes instrucciones...

Para agregar este blockquote  ve a "Diseño | Edición HTML" y allí busca la siguiente línea: 

]]></b:skin>

Para buscar la etiqueta anterior solo tienes que presionar en tu teclado: { F3 ó Ctrl + F }
Una vez la encuentres, copia el siguiente renglón de código y pegalo justo encima de ]]></b:skin>

.post blockquote {
max-height: 400px;
width:450px;
margin-top:10px;
margin-bottom:10px;
margin-left:35px;
border-left:5px solid #f75970;
border-top:1px dashed #f75970;
border-bottom:1px dashed #f75970;
border-right:1px dashed #f75970;
border-radius: 15px 15px 15px 15px;
overflow:auto;
background:#fff url(http://3.bp.blogspot.com/-eOEn-fzPsWs/Up5PPzJvPgI/AAAAAAAABVY/cU0mZctCcs4/s1600/bgpolkadothearts.gif) repeat;
padding:10px 10px 10px 15px;
}
.post blockquote:hover {
border-left:5px solid #e0bcd2;
border-top:1px dashed #e0bcd2;
border-bottom:1px dashed #e0bcd2;
border-right:1px dashed #e0bcd2;
border-radius: 15px 15px 15px 15px;
overflow:auto;
background:#fff url(http://3.bp.blogspot.com/-xUQOZgyQjuo/Up5PPVpfgGI/AAAAAAAABVQ/5-vy4woRgHg/s1600/bgcrosspurp.gif) repeat;
padding:10px 10px 10px 15px;
}



Todo lo que esta en este color resaltado  es lo que ustedes pueden modificar a su gusto. Arriba en el código, donde dice 400 allí esta indicando el máximo de altura que tendrá tu blockquote. Si lo quisieras mas grande solo tienes cambiar el numero por un valor mas alto.Y listo! 

Ya tendras un hermoso blockquote en tu blog! 
Espero te hayas gustado, y de ser así te invito a comentarnos y compartirnos la url de tu blog para que podamos ver como te quedo. Cualquier duda que tengas no temas en preguntar, estamos para ayudarte y a la mayor brevedad posible te responderemos!
Dios te bendiga y gracias por estar aquí!

Kiss, MarG  


lunes, 2 de diciembre de 2013

{ Tutoriales } ๑•♥ Fonts para agregar en tu seidebar y post


Hello cute girls!!

Hoy les traigo algunos ejemplos de fonts y cada ejemplo con su respectivo codigo para que lo puedas agregar a sus blogs ♥

Para usar copie el código mas abajo ubicado en el ejemplo de texto que te haya gustado. Luego busca en tu Plantilla la siguiente linea de código:
]]></b:skin>

Y justamente encima de esa linea de código anterior colocas el código que hayas seleccionado.


El css elegido cambiará el tipo de letra de los títulos de tu blog (titulo de tu post, del seidebar, etc ...) y sólo tendrá que ajustar el tamaño, el cual se ajusta en cada código, buscando esta linea de código:
font:normal 25px


Allí solo cambiaremos justamente el numero 25 que esta en color rojo. 
Si sabes trabajar los códigos, pues podras hacer algunas cosas mas modificando esta base de código como por ejemplo: Cambiar la Fuente por otra que prefieras. Este código es solo lo básico, ustedes pueden rejugar a su gusto con el conforme sea su necesidad.
No estaré podre ayudarle a cambiar el código por otro tipo de fuente, esto porque el código hay que trabajarlo completo para ello, e ir a google fonts para cambiar la linea de código de google-fonts.
Sorry chicas, pero solo invento con mis blogs ya que si algo sale mal no tengo que dar cuentas.. y como no soy experta no me atrevo hacerlo para otro blog que no sea el mio.
Yo personalmente utilizo este codigo en mi blog, para la fuente del seidebar y titulo del las entradas..

Por ultimo, cabe mencionar que el color de fondo que muestra cada ejemplo de texto no te saladra a ti cuando agregues la base de código a tu blog, ya que eso es solo una linea de código que se ha agregado en este caso (el post de esta entrada) para que ustedes puedan distinguir con facilidad una fuente de la otra. oKiisz?  ..Okiizs!

Aquí les presento los ejemplos fonts, espero alguno les guste. Bendiciones!

"Enxugue as lágrimas. Entenda que todo mundo cai um dia, todo mundo tropeça, todo mundo se machuca. Levante-se, sacode a poeira e segue em frente. A felicidade é como água, se você não tomar cuidado, ela te escapa por entre os dedos."
h1,h2,h3,h4{
font:normal 25px 'Rochester' !important;
}
@font-face {font-family:'Rochester';src:local('Rochester'),local('Rochester-Regular'),url('http://themes.googleusercontent.com/static/fonts/rochester/v3/nE50b4-SbQ54pks-8vOplz8E0i7KZn-EPnyo3HZu7kw.woff') format('woff')}



h1,h2,h3,h4{
font:normal 25px 'Cookie' !important;
}
@font-face {font-family:'Cookie';src:local('Cookie-Regular'),url('http://themes.googleusercontent.com/static/fonts/cookie/v4/Tvkve1y-JrkMx2S9u2OW1g.woff') format('woff')}




h1,h2,h3,h4{
font:normal 25px 'Comfortaa' !important;
}
@font-face {font-family:'Comfortaa';src:local('Comfortaa'),url('http://themes.googleusercontent.com/static/fonts/comfortaa/v3/qLBu5CQmSMt1H43OiWJ77T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff')}





h1,h2,h3,h4{
font:normal 25px 'Yellowtail' !important;
}
@font-face {font-family:'Yellowtail';src:local('Yellowtail'),url('http://themes.googleusercontent.com/static/fonts/yellowtail/v3/GcIHC9QEwVkrA19LJU1qlBsxEYwM7FgeyaSgU71cLG0.woff') format('woff')}




h1,h2,h3,h4{
font:normal 25px 'Gochi Hand' !important;
}
@font-face {font-family:'Gochi Hand';src:local('Gochi Hand'),local('GochiHand-Regular'),url('http://themes.googleusercontent.com/static/fonts/gochihand/v4/ZZzTGmufF-Wq8IS3fkpBuxsxEYwM7FgeyaSgU71cLG0.woff') format('woff')}





h1,h2,h3,h4{
font:normal 25px 'Arvo' !important;
}
@font-face {font-family:'Arvo';src:local('Arvo'),url('http://themes.googleusercontent.com/static/fonts/arvo/v5/WJ6D195CfbTRlIs49IbkFw.woff') format('woff')}




h1,h2,h3,h4{
font:normal 25px 'Leckerli One' !important;
}
@font-face {font-family:'Leckerli One';src:local('LeckerliOne'),url('http://themes.googleusercontent.com/static/fonts/leckerlione/v3/S2Y_iLrItTu8kIJTkS7DrHhCUOGz7vYGh680lGh-uXM.woff') format('woff')}





h1,h2,h3,h4{
font:normal 25px 'Delius' !important;
}
@font-face {font-family:'Delius';font-weight:400;src:local('Delius-Regular'), url('http://themes.googleusercontent.com/static/fonts/delius/v3/7WQiMJKp1Jo3CiUw302zGA.woff') format('woff')}




h1,h2,h3,h4{
font:normal 25px 'Dancing Script' !important;
}
@font-face {font-family:'Dancing Script';src:local('Dancing Script'),local('DancingScript'), url('http://themes.googleusercontent.com/static/fonts/dancingscript/v3/DK0eTGXiZjN6yA8zAEyM2VhlQWQpSCpzb2Peu3I-Q34.woff') format('woff')}



h1,h2,h3,h4{ 
font:normal 25px 'Handlee' !important;
color:#000;
text-shadow:0 1px #fff
}
@font-face {font-family:'Handlee';src:local('Handlee Regular'),local('Handlee-Regular'),url('http://themes.googleusercontent.com/static/fonts/handlee/v2/6AfIXNH5pZ1Jj_pfExPOWQ.woff') format('woff')}


Si te gusto no te olvides comentar, es la forma mas fácil de decir gracias! Besito!

Post Thanks To: Htm-Fr