Código, Web y SEO

viernes, 25 de noviembre de 2016

Blogger permite agregar emoticones - emojis en las entradas de nuestro blog

Blogger se actualiza y ahora desde hace un par de semanas quizá permite que de forma oficial podamos incorporar en las entradas o posts de nuestros blogs emojis - Emoticones, son muy agradables a la vista, y su incorporación es extremadamente fácil 😌.


¿COMO USARLOS EN TU BLOG? 

Es muy fácil la opción de emojis está puesta en el panel de herramientas de Blogger al escribir una entrada es el símbolo de la cara feliz:


Al abrirlo saldrá una imagen como la primera de arriba y listo allí tenemos múltiples opciones de figuras y demás: 


Úsalo en cualquier posición o palabra conjunta al escribir tus entradas ejemplo:

"💀💫😇😆😝😍😬😴🙊🙇🙋🔠🔖🔎♑🌈🌈🌍🌄🀫🀍♤🀑👡💲📕 "


¿Fácil no? Y tú que opinas sobre este cambio en las entradas de Blogger para publicar.

Hasta la próxima,

sábado, 19 de noviembre de 2016

Gadget posts - artículos recientes de una etiqueta específica en Blogger


Este Gadget es el mismo de aquí, sólo recuerda que es para una etiqueta específica
¡Un post más! Este post será breve, hace unos meses atrás publiqué un Gadget de artículos recientes muy pero muy elegante para el blog a tal punto que muchos quedaron enamorados de él. Bueno, decidé traer el mismo, pero, esta vez no aplicará para las entradas del blog en general, solamente FUNCIONA PARA UNA ETIQUETA ESPECÍFICA en tu blog de blogger.


UN DEMO PARA LA ETIQUETA BLOGGER DE BLOGGIN RED

Muy bien, como vemos el demo bastante bien su funcionamiento trabaja en función sólo de la etiqueta BLOGGER de mi blog, ahora bien vamos a ver como lo puedes implementar tú:

EXPLICACIÓN (MUCHA ATENCIÓN)

Como dije varias veces ya había hecho un post sobre este gadget de posts recientes pero que tomaba los artículos generales de cualquier etiqueta, ahora este post es tal y como lo plantea este lector del blog:


1. Lo primero a realizar será usar el código del gadget de artículos recientes del post original es decir lo siguiente:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
#post-gallery {width:100%; margin:0px auto;font:normal 11px Arial,Sans-Serif;color:##000000;padding:8px;}
#post-gallery .rp-item {float:left;display:inline;  position:relative;  margin:2px;  padding:0px 0px;  background: url('http://4.bp.blogspot.com/-0E2ZARxMyAo/UZwiR3XjlvI/AAAAAAAAKDc/3Z8WjltqbCQ/s1600/LOAD+(66).gif') no-repeat 50% 50%;  width:79px;  height:79px;}
#post-gallery .rp-item img {  width:69px;  height:69px;  border:none !important;  margin:0px 0px !important;  padding:0px 0px !important;  background:transparent !important;  display:none;}
#post-gallery .rp-item img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}
#post-gallery .rp-item .rp-child {  position:relative;  top:10%!important;  left:10%!important;  z-index:1000;  width:200px;  background-color:white;  border-bottom:5px solid #1BA1E2;  -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  padding:10px 15px;  overflow:hidden;  word-wrap:break-word;  display:none;  opacity: 0.9;}
#post-gallery .rp-item .rp-child h4 {  font-size:12px;  margin:0px 0px 5px;  color:#1BA1E2;}
#post-gallery .rp-item:hover .hidden {display:block;}</style>
<script type="text/javascript">
var rpTitle     = "Últimos artículos",       // Titulo del gadget
    numposts    = 14,      // Numero de posts a mostrar
    numchar     = 200,      // Numero de caracteres a mostrar
    rcFadeSpeed = 600,      // Velocidad
    pBlank      = "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",      // Defecto imagen si el post no tiene
    blogURL     = "http://tublogaqui.blogspot.com/";       // URL de tu blog
</script>
<script src="https://dl.dropboxusercontent.com/s/hcbnv2siy92dws4/recentpostetiqueta.js" type="text/javascript"></script>

2. Lo que está en naranja es donde irá la dirección de tu blog, No explicaré nada más respecto a la personalización ya que en el post anterior porfundicé en ello, ahora, lo que ves en el código en azul al final es el SCRIPT encargado de controlar todo, tendremos que modificarlo el código del script lo copiamos y es el siguiente:

// ESTO ES EL CÓDIGO JAVASCRIPT PARA QUE EL GADGET FUNCIONE
// By http://www.allbloggertricks.com and http://bloggersviet.blogspot.com

$(function() {
    $('div.rp-item img').hide();
    $('div.rp-child').removeClass('hidden');
   
    var winWidth = $(window).width(),
    winHeight     = $(window).height(),
    ttWidth         = $('div.rp-child').outerWidth(),
    ttHeight     = $('div.rp-child').outerHeight(),
    thumbWidth   = $('div.rp-item').outerWidth(),
    thumbHeight  = $('div.rp-item').outerHeight();


    $('div.rp-item').css('position', 'static').mouseenter(function() {
        $('div.rp-child', this).filter(':not(:animated)').fadeIn(rcFadeSpeed);
    }).mousemove(function(e) {   
        var top  = e.pageY+20,
            left = e.pageX+20;
           
            if (top + ttHeight > winHeight) {
                top = winHeight - ttHeight - 40;
            }           
            if (left + ttWidth > winWidth) {
                left = winWidth - ttWidth - 40;
            }   

        $('div.rp-child', this).css({top:top, left:left});

    }).mouseleave(function() {
        $('div.rp-child', this).hide();
    });
});

function showrecentposts(json) {
    var entry = json.feed.entry;
    for (var i = 0; i < numposts; i++) {
        var posturl; 
        for (var j=0; j < entry[i].link.length; j++) {
            if (entry[i].link[j].rel == 'alternate') {
                posturl = entry[i].link[j].href;
                break;
            }
        }
       
        if ("content" in entry[i]) {
            var postcontent = entry[i].content.$t;
        } else if ("summary" in entry[i]) {
            var postcontent = entry[i].summary.$t;
        } else {
            var postcontent = "";
        }

        var re = /<\S[^>]*>/g;
        postcontent = postcontent.replace(re, "");
        if (postcontent.length > numchar) {
            postcontent = postcontent.substring(0,numchar) + '...';
        }

        var poststitle = entry[i].title.$t;

            if ("media$thumbnail" in entry[i]) {
                postimg = entry[i].media$thumbnail.url
            } else {
                postimg = pBlank
            }
       
        document.write('<div class="rp-item"><a href="' + posturl + '"><img src="' + postimg + '" alt="thumb" /></a>');
        document.write('<div class="rp-child hidden"><h4>' + poststitle + '</h4>');
        document.write(postcontent + '</div>');
        document.write('</div>');
    }
}
document.write('<div id="post-gallery"><h2>' + rpTitle + '</h2><sc' + 'ript src="' + blogURL + '/feeds/posts/summary/-/NOMBREETIQUETA?max-results=' + numposts + '&orderby=published&alt=json-in-script&callback=showrecentposts"></sc' + 'ript><div style="clear:both;"></div></div>');

var i = 0, int=0;
$(window).bind("load", function() {
    var int = setInterval("doThis(i)",400);
});

function doThis() {
    var imgs = $('div.rp-item img').length;
    if (i >= imgs) {clearInterval(int);}
    $('div.rp-item img:hidden').eq(0).fadeIn(400);
    i++;
}

3. Una vez lo copiamos abrimos un bloc de notas de nuestro PC, pegamos el código, y si nos fijamos la parte con letras verdes fondo azul, donde dice "NOMBREETIQUETA" lo reemplazaremos justo por la etiqueta que queremos que salga solita en el gadget, no más, no le haremos nada más a ese código JavaScript.

4. Una vez lo hemos hecho guardamos el código como "recentetiqueta.js" importante al guardarlo debemos ponerle la extensión .js para que lo detecte como un código de JavaScript algo así: 


Para verificar que todo quedó bien ve al lugar donde guardaste el archivo y debe salirte algo así:

  
5. ¡Listo! sólo queda subirlo a un servidor o nube que nos lo ponga como una Url de Javascript para trabajarlo como código, usaremos dropbox para subir nuestro .js creado en este post (click aquí) explico en detalle como hacerlo, no te preocupes que noes complejo para nada. 

Al final debe quedarte una URL similar a esta:
https://dl.dropboxusercontent.com/s/hcbnv2siy92dws4/recentpostetiqueta.js 

6. Una vez obtienes la URL de tu script que tiene la orden de que etiqueta debe filtrar únicamente, vamos al primer código el del paso 1 ¿Lo recuerdas? más arriba, ahí justo al final el fragmento en azul reemplaza todo ese link (.js) de ese script por el tuyo, cuando lo hagas copialo en donde desees en tu blog guarda los cambios y mira la magia.

Por fin, un buen gadget que te filtra por una etiqueta lo que muestra. 

Es todo en este post,

Hasta la próxima BloggeRs, 

miércoles, 16 de noviembre de 2016

Comprar seguidores de Instagram es un engaño - Te digo la verdad

Un post más, he visto que gran parte de lo que tenga que ver con Instagram en el blog llama la atención bastante para la gran mayoría de lectores es por ello que vengo a hablar desde mi criterio personal el tema de "Comprar seguidores para tu cuenta de instagram" vamos a ellos.


¡DE ESO TAN BUENO NO DAN TANTO!

¿Se puede comprar seguidores? claro que sí nadie niega tal hecho, es real y la mayoría que los vende te los da, pero, no te engañes de por sí quién te vende los seguidores no te engaña, después de todo te dan los seguidores que tu pagues sin problema alguno, la cuestión viene con los siguientes puntos cuando decides comprar seguidores:

1. Cuántos de esos seguidores comprados son adquiridos de forma natural

Casi ninguno, sería la respuesta, no incluyendo a los que ya tenías antes de comprar los demás que ahora llegan en miles, el flujo natural en todo sistema sea de vida hasta informático es necesario para un buen desarrollo piénsalo de esta forma, aunque tengas 52000 seguidores y naturales sólo tenías 1000 tendrás una actividad real y de interés de algunos de esos 1000 dichos, pero, de los 52000 que pagaste creeme no recibirás nada y sólo serán un número más que servirá para verse bonito cuando vean tu cuenta, veamos un ejemplo ya que no hablo por hablar:

Para el ejemplo decidí buscar una cuenta cualquiera con muchísimos seguidores que yo quedé como 😨 :

Esta cuenta tiene 27k seguidores (27000) increíble, digo yo, muchos un número grande para mi:

  
 SOSPECHAS DE SEGUIDORES COMPRADOS:

- Inicia por sus publicaciones si abro la última publicación de la cuenta la cantidad de seguidores no es coherente con los pocos "me gusta" para ser preciso 89 seguidores o personas dieron "me gusta" a esa publicación de 27000 posibles veamos: 


Es ilógico ¿no? y casi todas sus publicaciones no superan los "150 me gusta" de usuarios y seguidores, de 27k posibles digo yo.

Una cuenta natural como la de mi equipo de fútbol "Club Deportes Tolima" con apenas 7124 seguidores veamos: 

En su última publicación tiene algo estándar y lógico más o menos "245 me gusta" en una publicación que no tienes descripción y hashtags. Veamos:


Una prueba más que obvia y sencilla, y así podría comparar cientos de cuentas pero es un breve abrebocas de este primer punto seguidores comprados VS seguidores naturales.
MORALEJA 1: Aunque compres seguidores y tengas 50k de ellos, si tu competencia tiene 6000 (6k) adquiridos de forma natural, creeme es más factible que vendan e interactúen más ellos que tu cuenta 😀 ¡Aprende a ganartelos naturalmente!.



2. La mayoría de seguidores comprados son bots ¡Nada de reales!

Así es, muchos de aquellos que dicen vender seguidores te re contra juran que son naturales o reales (Que es lo mismo) los seguidores que estás comprando, pero, vamos hay que ser muy ingenuo para caer en ese cuento, analicemos, entonces de la nada un simple mortal (el vendedor) ordena a las masas del mundo de instagram seguir tu cuenta porque le pagaste X cantidad de dinero ¡Que poder! más poder que el del gobierno ruso, lo que realmente pasa es lo siguiente:

- Digamos que compraste 20k seguidores, tal vez de esos 20k un 5% o menos son cuentas reales y naturales, y tal vez menos del 2% de esas cuentas reales son personas interesadas en tu negocio o cuenta ¿Qué hiciste ahí? Nada claramente. 

-  Para la informática no existe imposibles, existen muchas formas, métodos, scripts, "trucos" con los cuales si te dan tus seguidores a la velocidad de la luz, pero, todo automatizado la gran mayoría son sistemas con unas cuentas "Falsas" ya, a las que ordenan seguir tu cuenta porque tu estás pagando por ello. ¡Ojo ahí coherencia!

MORALEJA 2: Pagues lo que pagues los seguidores que compras sean cientos o miles, serán seguidores en su gran mayoría falsos, que no harán interacción con tus publicaciones, fotos, vídeos o privados.



3. Aunque compres 1 millón de seguidores tu popularidad será igual

Voy a desmentir algo y es que si compras seguidores así mismo la popularidad de tu cuenta ¿sube?, pues no, lamento decir que no, como dije en el punto 1, en el ejemplo mostrado te das cuenta de las cosas como son y siendo así de que sirve?, por más seguidores que compres de nuevo digo jamás dichos seguidores querrán interactuar con tus publicacione, aunque estos fueran reales, a lo mejor sean de otros países, idioma etc y otros factores.

Morajela 3: De que sirve tener tanto inero si en estás en medio de la selva ¿Se entiende?


4. Pones en riesgo tu cuenta Instagram tarde o temprano te pilla

Es obvio no?, Instagram es dueño de su App "Instagram" es claro y obvio, ellos monitorean diariamente los millones de cuentas que hay en todo el mundo (aunque no lo parezca), algo que para nadie tendrá lógica es que de la noche a la mañana una cuenta empiece a adquirir seguidores como si no hubiera un mañana, entonces, ayer tenías 100 seguidores y mañana resultas con 130k, Instagram sospechará y a lo mejor tarde o temprano si continúas con esta práctica pierdas tu cuenta de instagram junto con tu dinero pagado por la compra de dichos seguidores.


EN CONCLUSIÓN....

¿Para que arriesgarse? no vale la pena si tienes en mente comprar seguidores no lo recomiendo no es una buena práctica sólo ganarás un número más grande en tu cuenta cuando otros usuarios la vean, así no te expones a perder el dinero de compra y tu cuenta.

Es todo en este artículo,

Hasta la próxima,

sábado, 12 de noviembre de 2016

Los mejores fondos en CSS patterns para tu blog de blogger [Parte 1]

Un post más en ¡Bloggin Red! hoy traigo a ustedes unos interesantes fondos en CSS se trata de patrones o patterns, como dije realizados al 100% en CSS, son fondos que pdrás usar en tu blog directamente como fondo o cualquier otra utilidad que desees darle a estos patterns, veamos:




¿Cómo ponerlo de fondo en mi blog de blogger?

Es muy fácil, simplemente vamos a la plantilla allí buscamos el siguiente fragmento body{ y lo que esté dentro como CSS lo reemplazas por completo por el que te guste ;). 

Ahora sí vamos a los fondos:

Microbial Mat


background:
radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px) 0px 10px,
radial-gradient(at 100% 100%,      rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px),
#8a3;
background-size:20px 20px;


Stairs


background:
linear-gradient(63deg, #999 23%, transparent 23%) 7px 0,
linear-gradient(63deg, transparent 74%, #999 78%),
linear-gradient(63deg, transparent 34%, #999 38%, #999 58%, transparent 62%),
#444;
background-size: 16px 48px;


Half Rombes


background: #36c;
background:
linear-gradient(115deg, transparent 75%, rgba(255,255,255,.8) 75%) 0 0,
linear-gradient(245deg, transparent 75%, rgba(255,255,255,.8) 75%) 0 0,
linear-gradient(115deg, transparent 75%, rgba(255,255,255,.8) 75%) 7px -15px,
linear-gradient(245deg, transparent 75%, rgba(255,255,255,.8) 75%) 7px -15px,
#36c;
background-size: 15px 30px


Arrows


background:
linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,
linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),
linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px);
background-color:#e1ebbd;
background-size: 128px 128px;


Zig-Zag


background:
linear-gradient(135deg, #ECEDDC 25%, transparent 25%) -50px 0,
linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -50px 0,
linear-gradient(315deg, #ECEDDC 25%, transparent 25%),
linear-gradient(45deg, #ECEDDC 25%, transparent 25%);   
background-size: 100px 100px;
background-color: #EC173A;


Weave


background:
linear-gradient(135deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px),
linear-gradient(225deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px)0 64px;
background-color:#708090;
background-size: 64px 128px


 Upholstery


background:
radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0,
radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px,
radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0,
radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px,
radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0,
radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px,
radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0,
radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px,
linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0,
linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0;
background-color: #300;
background-size: 100px 100px;


Marrakesh


background-color:white;
background-image:
radial-gradient(midnightblue 9px, transparent 10px),       
repeating-radial-gradient(midnightblue 0, midnightblue 4px, transparent 5px, transparent 20px, midnightblue 21px, midnightblue 25px, transparent 26px, transparent 50px);   
background-size: 30px 30px, 90px 90px;
background-position: 0 0;


Carbon


background:
linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-color: #131313;
background-size: 20px 20px;


Carbon Fibre


background:
radial-gradient(black 15%, transparent 16%) 0 0,
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
background-color:#282828;
background-size:16px 16px;

Es todo en la primera parte con estos fondos en puro CSS aclaro que los fondos no los he diseñado pertenecen a distintos autores tomados del sitio (click aquí).

Hasta la próxima BloggeRs,

viernes, 4 de noviembre de 2016

Sorbet - Plantilla responsive tipo tumblr para blogger en español

¿No sabes como se instala una plantilla de blogger? click aquí 
Sorbet es una plantilla para blogger gratuita diseñada inicialmente por NBthemes doy todos los créditos correspondientes a ellos, lo especial de la plantilla es que viene modificada con gran parte del contenido al español, no me tomó mucho tiempo hacer tal cosa y unas que otras mejoras pequeñas estéticas escritas más abajo:
 

 DEMO    |    DESCARGAR

Características principales: 

- Palabras principales y de defecto traducidas al español.
- Algunos comentarios en el código en español.
- Colores modificados.
- Plantilla 100% adaptable a móviles (responsive)
- Slider integrado.


CONFIGURACIÓN DE LA PLANTILLA:

Configuración slider:
NOTA: Si quieres la plantilla sin Slider al descargar el archivo viene una versión con Slider y sin ella usa la que desees ;)
He integrado un slider bastante sencillo al cuál le podrás modificar las imágenes y textos, para ir a la configuración del slider ve al código de la plantilla presiona (ctrl + f) y busca lo siguiente "parametros slider", luego, cambia los textos y links de imágenes ¡Es fácil!:



Configuración Botones redes sociales:


Es fácil, ve al código de la plantilla presiona (ctrl + f) y buscamos lo siguiente "INICIO REDES" allí nos saldrá

 
Es todo en la configuración de los elementos más relevantes espero les guste aclaro de nuevo que la plantilla no ha sido mi creación y simplemente le he hecho algunas modificaciones respecto a la versión original.

Hasta la próxima BloggeRs,

SÍGUENOS EN: