Vida es Belleza: blogger

Mostrando entradas con la etiqueta blogger. Mostrar todas las entradas

martes, 2 de septiembre de 2014

Insertar la insignia de Google+ en nuestro sitio web o blog. – Hipotecario – World – cancer – php

Parainsertar lainsignia de Google+ en nuestro sitio webo blog lo que haremos será ingresar al siguiente enlace:
https://developers.google.com/+/web/badge/?hl=es

Debemos haber ingresado con nuestra cuenta de google+ y nos aparecerá una página mostrándonos del lado izquierdo la configuración de la insignia, y del lado derecho una vista previa de la insignia que insertaremos en nuestro sitio web o blog junto al códigohtml que necesitaremos para ello.

Lo primero que haremos será configurar la insignia a nuestro gusto y dependiendo del diseño de nuestro sitio web.

Entre las opciones tenemos:

Usuario de Google+ en mi caso+Francisco Velasquez
Funciones, para esta ocasión elegiremos insignia.
Diseño,se cuenta con dos tipos de diseño: retrato y paisaje. Para retrato nos muestra nuestra imagen de perfil junto a la foto de portada, nuestro nombre y el botón de seguir. Para paisaje nos muestra lo anteriormente mencionado sin la foto de portada.
Temas de color,claro y oscuro (color blanco y gris oscuro).
Sí elegimos la opción retratopodemos quitar la foto de portada deshabilitándole.
A su vez podemos deshabilitar el eslogan.
Por último el idioma.

Una vez configurada la insigniacopiaremos el código html y lo insertaremos en el lugar que deseemos dentro de la plantilla del sitio web.

Para agregar nuestra insignia a nuestro blog deblogger tenemos la opción de ir adiseño.

Una vez allí hacemos clic enañadir un gadget.

Añadiremos la insignia de Google+.

Luego, configuraremos nuestra insignia y hacemos clic enguardar para añadirla a nuestro blog.

También te podría interesar:
Pop-up caja de me gusta facebook para blogger
Bloquear el acceso a sitios web utilizando archivo hosts
Solución - No puedo ver los anuncios de adsense desde mi computadora

domingo, 22 de junio de 2014

Pop-up caja de me gusta facebook para blogger – School – Hard drive – Accident – Dominios

Una buena idea para mantenernos en contacto con nuestros lectores es mediante las redes sociales, con facebook podemos crear páginas de fans de nuestro sitio web y compartir constantemente nuestras entradas. Una buena forma de asegurarnos de que los que visitan nuestro blog hagan clic en "me gusta" es con un pop-up que se abra cuando visitan nuestro blog.

Para agregar este pop-up a nuestro blog lo que haremos será ir al panel de administración de blogger y entramos en diseño.

Una vez allí hacemos click en añadir un gadget

Agregaremos un gadget del tipo HTML/Javascript

Nos abrirá una nueva ventana en la que pegaremos el siguiente código

script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/script
style
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#JasperRoberts {
background:white;
width:420px;
height:270px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#TheBlogWidgets {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicJuHHjQWbQG_vR4Nv1DD-nj-pONUG6VmHqi3Eo-3geiBJqI5MCkXJS3bH5BFBIjXJR1YguRGHblkxipY59-PvlpE8Lm9qmNj_I9HpsaiD13o7dlkZI_Bvo2J8TaTUB45xPHVPoLb_BJs3/s1600/TheBlogWidgets.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
#linkit,#linkit a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}
/style


script type='text/javascript'
//![CDATA[
jQuery.cookie = function (key, value, options) {

// key and at least value given, set cookie...
if (arguments.length  1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);

if (value === null || value === undefined) {
options.expires = -1;
}

if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}

value = String(value);

return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}

// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//
/script
script type='text/javascript'
jQuery(document).ready(function($){
if($.cookie('popup_user_login') != 'yes'){
$('#fanback').delay(20000).fadeIn('medium');
$('#TheBlogWidgets, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
/script

div id='fanback'
div id='fan-exit'
/div
div id='JasperRoberts'
div id='TheBlogWidgets'
/div
div class='remove-borda'
/div
iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?

href=http://www.facebook.com/BlogUnEstudiantedeInformatica&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'

style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'/iframecenter
span style="color:#a8a8a8;font-size:8px;" id="linkit"Powered by a rel="nofollow" style="color:#a8a8a8;font-size:8px;" href="http://jasperroberts.com"Jasper Roberts Consulting/a - a style="color:#a8a8a8;font-size:8px;" href="http://www.theblogwidgets.com"Widget/a/span/center
/div
/div

Copiamos y pegamos el código anterior como se muestra en esta imagen. Además buscamos la línea que contiene el enlacehttp://www.facebook.com/BlogUnEstudiantedeInformatica y la cambiamos por el enlace de nuestra página de facebook.Finalmente hacemos click en guardar.

Es importante resaltar que este pop-up solo se mostrará una vez a cada visitante, a menos que este borre las cookies. El pop-up se mostrará luego de 20 segundos, sí queremos aumentar o disminuir este tiempo buscamos la línea$('#fanback').delay(20000).fadeIn('medium'); yeditamos el delay que es el tiempo en milisegundos que tarda en mostrarse el pop-up. Es decir, sí son 20000 milisegundos correspondería a 20 segundos. Y sí queremos que se muestre en 10 segundos entonces cambiaríamos 20000 por 10000.

Agregar dos FanPages al pop-up:

En los comentarios de esta entradaAnaTuron preguntaba sí es posible agregar más de una página de fans al pop-up. Si, es posible.

Sí poseemos mas de una página de fans en facebook una buena opción podría ser agregar al menos dos de estas al pop-up, esto lo haremos insertando un nuevo iframe de la caja de facebook cambiando para este el enlace de la fanpage. También hacer un cambio en el css en cuanto a la altura del gadget. El código html para poder agregar dos fanpage es el siguiente:

script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/script
style
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#JasperRoberts {
background:white;
width:420px;
height:540px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#TheBlogWidgets {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicJuHHjQWbQG_vR4Nv1DD-nj-pONUG6VmHqi3Eo-3geiBJqI5MCkXJS3bH5BFBIjXJR1YguRGHblkxipY59-PvlpE8Lm9qmNj_I9HpsaiD13o7dlkZI_Bvo2J8TaTUB45xPHVPoLb_BJs3/s1600/TheBlogWidgets.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
height:1px;
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
#linkit,#linkit a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}
/style


script type='text/javascript'
//![CDATA[
jQuery.cookie = function (key, value, options) {

// key and at least value given, set cookie...
if (arguments.length  1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);

if (value === null || value === undefined) {
options.expires = -1;
}

if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}

value = String(value);

return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}

// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//
/script
script type='text/javascript'
jQuery(document).ready(function($){
if($.cookie('popup_user_login') != 'yes'){
$('#fanback').delay(20000).fadeIn('medium');
$('#TheBlogWidgets, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
/script

div id='fanback'
div id='fan-exit'
/div
div id='JasperRoberts'
div id='TheBlogWidgets'
/div
div class='remove-borda'
/div
piframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?

href=http://www.facebook.com/NombreDeLaPrimeraFanPage&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'

style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'/iframe/p
piframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?

href=http://www.facebook.com/NombreDelaSegundaFanPage&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'

style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'/iframe/pcenter
span style="color:#a8a8a8;font-size:8px;" id="linkit"Powered by a rel="nofollow" style="color:#a8a8a8;font-size:8px;" href="http://jasperroberts.com"Jasper Roberts Consulting/a - a style="color:#a8a8a8;font-size:8px;" href="http://www.theblogwidgets.com"Widget/a/span/center
/div
/div

IMPORTANTE
Solo debemos editar el enlace de nuestras páginas de fans de facebook donde dice:

http://www.facebook.com/NombreDeLaPrimeraFanPage
http://www.facebook.com/NombreDelaSegundaFanPage

Una vez agregado el gadget nuestro pop-up con dos páginas de fans se vería de la siguiente manera:

También te podría interesar:
Slider automático de últimas entradas para blogger
Iconos sociales color azul para blogger
Crear formulario de contacto para blogger
Colocar código en entradas de blog

martes, 10 de junio de 2014

Agregando nuestro sitio web a los buscadores google y bing – Texas – Habitaciones – Record

Cuando creamos un sitio web una de las primeras cosas que debemos hacer esagregarlo a buscadores comogoogle ybing para generar mayor cantidad de visitas.

Para agregar nuestro sitio web al buscador degoogle iremos al siguiente enlace:

https://www.google.com/webmasters/tools/submit-url . Ingresaremos la url de nuestro sitio web, el codigocaptcha y hacemos click enenviar solicitud, una vez hecho esto nos aparecerá un breve mensaje indicando que nuestrasolicitud ha sido recibida y será procesada. Por lo general debemos esperar algunas horas para que nuestro sitio web aparezca en el buscador de google, debido a que deben comprobar que nuestro sitio web sea confiable y no se dedique alphishing o crear spam a través de internet.

Para comprobar que nuestro sitio web aparece en google ingresamos en el buscador nuestra url antecedido porsite:. Esto sería:site:http://www.tusitioweb.com/.

Sí fuese el caso de querer buscar y ver todas las páginas y enlaces indexados a este blog lo haríamos así:site:http://unestudiantedeinformatica.blogspot.com/

Recomiendo agregar nuestro sitio web a las herramientas para webmasters de googlehttps://www.google.com/webmasters/tools/home?hl=esesto nos ayudará a que nuestro sitio web esté optimizado al máximo y sea compatible con Google.

Para agregar nuestro sitio aBingingresamos ahttp://www.bing.com/toolbox/submit-site-url completamos el formulario y hacemos click en enviar.

Una vez hecho estos pasos ya nuestro sitio web aparecerá en los resultados de búsqueda de google y bing.

En cuanto a google, he notado que sí compartimos nuestras entradas en la red social google+ ya sea en nuestro perfil o en comunidades, mientras mayor cantidad de+1reciben las entradas, mejor es la posición de esta en los resultados de búsqueda.

domingo, 4 de mayo de 2014

Slider automático de últimas entradas para blogger – Shipping – coche – PHD

Este era un slider que tenía en la anterior plantilla de mi blog en la barra lateral derecha para mostrar las últimas entradas. Sí quieres agregarlo a tu blog sigue estos pasos:

Abrimos elpanel de administración de blogger y hacemos clic enDiseño, luego enañadir un gadgetHTML/Javascript . En esta ventana pegaremos el siguiente código.

style scoped="" type="text/css"
/*
Made by AllBloggerTricks.com with lot of hardwork please keep the comment intact
*/
ul.abt-sidebar-slider *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
ul.abt-sidebar-slider{font:normal normal 11px Verdana,Geneva,sans-serif}
ul.abt-sidebar-slider,ul.abt-sidebar-slider li{margin:0;padding:0;list-style:none;position:relative}
ul.abt-sidebar-slider{width:100%;height:500px}
ul.abt-sidebar-slider li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}
ul.abt-sidebar-slider li:nth-child(1),ul.abt-sidebar-slider li:nth-child(2),ul.abt-sidebar-slider li:nth-child(3),ul.abt-sidebar-slider li:nth-child(4){display:block}
ul.abt-sidebar-slider img{border:0;width:100%;height:100%}
ul.abt-sidebar-slider li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}
ul.abt-sidebar-slider li:nth-child(2){left:0;top:50%}
ul.abt-sidebar-slider li:nth-child(3){left:50.5%;top:50%}
ul.abt-sidebar-slider li:nth-child(4){width:100%;left:0;top:75%}
ul.abt-sidebar-slider  .overlayx,ul.abt-sidebar-slider li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
ul.abt-sidebar-slider .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEbCtJYpkGgD62Qu87D9Grc77sTXN__hMUPd3Obu1p9hOQPgVu9_eMeKP5OwiH-2CsUNYIE41mdvNAUn_Py-BSicSmBDCQc1T3wP2pEuacrLBn4sy64iHif-792kzrmrQusWGPizZGmp0/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}
ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider img{border:4px solid #2E8DCE;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
ul.abt-sidebar-slider li:nth-child(1) .overlayx{background-position:50% 25%}
ul.abt-sidebar-slider .overlayx:hover{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
ul.abt-sidebar-slider h4{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:Georgia,Times,"Times New Roman";font-weight:normal}
ul.abt-sidebar-slider li:nth-child(1) h4,ul.abt-sidebar-slider li:nth-child(4) h4{font-size:150%}
ul.abt-sidebar-slider .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%}
ul.abt-sidebar-slider li:nth-child(2) .autname,ul.abt-sidebar-slider li:nth-child(3) .autname{display:none}
.buttons{margin:5px 0 0}
.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
/style
div id="featuredpostside"/div
script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"/script
script src="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-sidebar-slider.js" type="text/javascript"/script
script type='text/javascript'
//![CDATA[
FeaturedPostSide({
blogURL:"http://unestudiantedeinformatica.blogspot.com/",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//
/script

Lo mas importante. Debemos ubicar la siguiente línea:

blogURL:"http://unestudiantedeinformatica.blogspot.com/",

Y reemplazarhttp://unestudiantedeinformatica.blogspot.com/por laurl de tu blog.

También sí queremos podemos editar el número de post a mostrar, el intervalo de la transición, y las medidas en pixeles del slider.

MaxPost:8,

Se mostrarán las últimas 8 entradas.

interval:5000,

El intervalo de la transición son 5000 milisegundos (5 segundos).

ul.abt-sidebar-slider{width:100%;height:500px}

El ancho del slider se reducirá o aumentará en cuanto a un porcentaje y el alto en pixeles.

Demo del slider:

También te podría interesar:
Pop-up caja de me gusta facebook para blogger
Agregando nuestro sitio web a los buscadores google y bing
Iconos sociales color azul para blogger
Crear formulario de contacto para blogger

viernes, 2 de mayo de 2014

Iconos sociales color azul para blogger – coche – Arquitectura – Motor

Siempre es conveniente en nuestro blog brindar a nuestros lectores la posibilidad de seguirnos a través de nuestras redes sociales. Con este gadget lo podremos hacer.

Solo debemos ir al panel de administración de blogger e ir a Diseño, luego añadiremos un gadgetHTML/Javascript y copiamos y pegamos el siguiente código:

div id="social"
a href="Url de tu facebook aqui" target="_blank"img alt="Facebook" src="https://lh3.googleusercontent.com/-_4ujPAYWbU8/UeRfaCHu-iI/AAAAAAAAC7M/wjY638xdElI/s64-no/thumbs_097124-3d-glossy-blue-orb-icon-social-media-logos-facebook-logo.png" title="Siguenos en Facebook" //a
a href="Url de tu google+ aqui" target="_blank"img alt="Google+" src="https://lh3.googleusercontent.com/-5C7SzkGX9tc/UeRfaESu1yI/AAAAAAAAC7Q/4eCcybcy8w8/s64-no/thumbs_097137-3d-glossy-blue-orb-icon-social-media-logos-google-g-logo.png" title="Siguenos en Google Plus" //a
a href="Url de tu twitter aqui" target="_blank"img alt="Twitter" src="https://lh4.googleusercontent.com/-fOt5yY2ZkCU/UeRfalwBeyI/AAAAAAAAC7Y/JrrKrPMeU7I/s64-no/thumbs_097196-3d-glossy-blue-orb-icon-social-media-logos-twitter.png" title="Siguenos en Twitter" //a
a href="Url de tu feed aqui" target="_blank"img alt="RSS" src="https://lh6.googleusercontent.com/-c_XseTDLW0o/UeRfaGKtGXI/AAAAAAAAC7I/d7xquGdcnB8/s64-no/thumbs_097172-3d-glossy-blue-orb-icon-social-media-logos-rss-basic.png" title="Suscribete a nuestro RSS" //a/div
br /
br /
br /

Debemos remplazarUrl de tu facebook aquipor la url o enlace de tu facebook o fan page,Url de tu google+ aquipor la url o enlace de tu google+. Haremos similarmente con los otros botones.

Crear formulario de contacto para blogger – Shipping – Texas – Dominios

Siempre es una buena idea contar con un formulario de contacto en nuestro blog para que nuestros lectores puedan contactarnos rápidamente a través de nuestro correo electrónico. Para crear este formulario de contacto vamos a hacer uso defoxyform.

Abrimos el enlacehttp://es.foxyform.com/ y procedemos a crear nuestro formulario.

Inicialmente seleccionamos los campos que queremos que tenga nuestro formulario, en mi caso seleccionaré E-mail, asunto y sitio web, colocando el E-mail como obligatorio y el resto opcional.