Articulos Etiquetados en:

colocar

Como cambiar el favicon del blog desde Blogger

Como ya hace unas semanas, Blogger in Draft dio a conocer la forma más fácil de colocar el favicon en Blogger desde Elementos de la página, ya que hace tiempo en un post había mencionado como colocar el favicon desde Edición de HTML en la plantilla.

Pero bien, para cambiarlo tienes que acceder desde Blogger in Draft, luego te vas a Diseño > Elementos de la página y le das clic a la opción de “Editar” sobre el elemento o gadget llamado Favicon.

Luego hay que seleccionar el archivo del favicon que tendrá que ser en formato .ICO y que no sea mayor a 10kb, una vez cargado le damos en guardar y listo.

El favicon lo podrás visualizar para todos los navegadores incluyendo IE9. Si no sabes cómo convertir una imagen a formato .ICO checa este excelente convertidor online llamado Favicon.cc

Widget seguidores de Redes Sociales para Blogger

Hace unos días me llego un correo de un lector de V-Junker por medio de contáctanos y me pregunto sobre el widget que tengo del lado derecho en la sidebar, pero para Blogger ya que este widget es para WordPress.

Es por eso que les voy a dar los pasos a seguir para obtener este widget en su Blog en la plataforma Blogger :) para que chequen como se vería les dejo un ejemplo en este Blog de pruebas.

Primero nos vamos a Diseño > Edición de HTML > Expandimos los artilugios, y tenemos que buscar </b:skin> y justo antes de esta etiqueta pegamos el siguiente código:

.subscribe_icons {
width:286px;
height:auto;
margin:0px auto;
}
.subscribe_icons li {
display:inline;
float:left;
margin:0px 2px 5px 2px;
width:52px;
text-align:center;
font-size:11px;
}
.subscribe_icons a {
display:block;
padding:40px 0px 2px;
-webkit-transition:all .2s ease-out;
-moz-transition:all .2s ease-out;
color:#444 !important;
}
.subscribe_icons a:hover {
color:#369 !important;
text-decoration:none;
-moz-box-shadow:0px 2px 4px hsla(0,0%,0%,.35);
-webkit-box-shadow:0px 2px 4px hsla(0,0%,0%,.35);
}
.subscribe_icons .subscribe_buzz a {
background:url(http://i1205.photobucket.com/albums/bb440/VJunkercom/iconbuzzrvjunker.png) center top no-repeat;
}
.subscribe_icons .subscribe_twitter a {
background:url(http://i1205.photobucket.com/albums/bb440/VJunkercom/icontwittervjunker.png) center top no-repeat;
}
.subscribe_icons .subscribe_facebook a {
background:url(http://i1205.photobucket.com/albums/bb440/VJunkercom/iconfacebookvjunker.png) center top no-repeat;
}
.subscribe_icons .subscribe_rss a {
background:url(http://i1205.photobucket.com/albums/bb440/VJunkercom/iconrssvjunker.png) center top no-repeat;
}
.subscribe_icons .subscribe_email a {
background:url(http://i1205.photobucket.com/albums/bb440/VJunkercom/iconmailvjunker1.png) center top no-repeat;
}

Guardamos la plantilla y nos vamos a Diseño > Elementos de la página y agregamos un nuevo gadget HTML/Javascript donde tenemos que pegar lo siguiente:

<div>
<ul class="subscribe_icons">
<li class="subscribe_buzz"><a href="USUARIO BUZZ" rel="nofollow" target="_blank">Buzz</a></li>
<li class="subscribe_twitter"><a href="ENLACE DE TWITTER" rel="nofollow" target="_blank">Twitter</a></li>
<li class="subscribe_facebook"><a href="ENLACE DE FACEBOOK" rel="nofollow" target="_blank">Facebook</a></li>
<li class="subscribe_rss"><a href="ENLACE DE FEED" rel="nofollow" target="_blank">Feed</a></li>
<li class="subscribe_email"><a href="ENLACE DE CORREO/CONTACTO O FEEDBURNER MAIL" rel="nofollow" target="_blank">Contacto</a></li>
</ul>
</div>

Por último y antes de guardar, tenemos que modificar algunos aspectos como: USUARIO BUZZ, ENLACE DE TWITTER, ENLACE DE FACEBOOK, ENLACE DE FEED y ENLACE DE CORREO/CONTACTO O FEEDBURNER MAIL, ahora si guardamos el gadget y listo tendrán su widget como lo tengo yo :)

Colocar efecto multi-color en los enlaces en Blogger

Hace un tiempo que ya no publicaba sobre Blogger, y este es el caso que me encontré este excelente script, que da efecto en los enlaces (links, vínculos) se vean tipo arcoíris (multi-color) al pasar el mouse por encima de ellos, no es nada del otro mundo, es tan fácil colocarlo.

Para que se den una idea de como quedaría, chequen este Blog de pruebas :)

Primero nos vamos a Diseño > Edición de HTML y buscamos el siguiente código:

</head>

Una vez localizado, justo antes de </head> pegamos lo siguiente:

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

Antes de guardar podemos modificar var rate = 20 es para asignarle la velocidad de los cambios de color en los enlaces. Si no entiendes bien que es, no importa así como esta se ve de lujo.

Ahora solamente le damos a guardar plantilla y listo.

Como crear un formulario de contacto con Email Me Form para tu Blog



Un lector de V-Junker nos mando un correo mediante contáctanos, preguntando cómo crear un formulario como el que tenemos, y la verdad es que es muy fácil.

Vamos a utilizar la herramienta online llamada Email Me Form, primero tenemos que registrarnos es gratis, una vez hecho esto iniciamos sesión y nos dirigirá a nuestro panel, ahí mismo le damos clic a la opción de Templates.
Ahora nos darán un formulario pre-hecho con los requisitos esenciales como Nombre, email, asunto y comentario, viendo esto, arriba le damos clic al botón Customize.

EmailMeFormVJ
*Dale clic a la imagen para ampliar.


Después en la opción de Opciones del formulario (Form Settings) podemos cambiar varias opciones como Titulo del formulario (ejemplo Contacto TuBlog), en opciones de confirmación (Confirmation options) ya sea que seleccionemos si cuando envíen el comentario aparezca un mensaje de confirmación o cuando envíen el comentario los re direccione al sitio de nuevo, lado de las celdas, nombre del botón (Enviar) así como la posición del botón, Anti-spam on/off.

EmailMeFormVJ5-1
*Dale clic a la imagen para ampliar.


También podemos seleccionar cada celda del formulario para cambiar el nombre de ingles a español (ejemplo Message por Mensaje), indicar si es requerido o no lo que nos pide, y cambiar el tamaño de la celda si es necesario, pero yo que ustedes lo dejaría como esta.

EmailMeFormVJ1
*Dale clic a la imagen para ampliar.


Una vez terminado nuestro formulario le damos a la opción de Save Form, y nos mandara de nuevo a nuestro panel, ahora para agregar el formulario en nuestro Blog, en las opciones de nuestro formulario le damos clic en donde dice Code y ese será nuestro código para colocarlo en nuestro Blog.

EmailMeFormVJ2
*Dale clic a la imagen para ampliar.


EmailMeFormVJ3
*Dale clic a la imagen para ampliar.


Para colocarlo en tu Blog de Blogger, tendremos que crear una nueva entrada y pegar ahí el código, para que en esa entrada no halla comentarios no deseados, le desactivamos la opción de Comentarios de los lectores y para que la entrada no se vea en los primeros lugares del Blog, le damos una fecha antigua (por ejemplo una fecha anterior a la de nuestro primer post) y publicamos.

EmailMeFormVJ4
*Dale clic a la imagen para ampliar.


Y para WordPress es distinto, en este caso no sería agregar nueva entrada, tendrán que agregar una nueva página.



Espero que les haya servido este tutorial para crear un formulario para tu Blog, si tienen más dudas no duden en comentarme :)

Enlace | Email Me Form