Tutoriales Sobre Blogger

Artículos que violan la política de Google AdSense

2019-10-10T15:31:00.001-07:00

Si usted es un blogger principiante que busca temas de artículos para registrar su blog en Google Adsense, primero debe conocer algunos artículos que están prohibidos o que no se pueden hacer porque violan la política de AdSense.

Para aquellos de ustedes que siempre son rechazados por Google Adsense, puede ser porque hacen artículos que violan las políticas. Por lo tanto, para aquellos de ustedes que son rechazados por violar políticas o desean saber qué artículos están prohibidos por AdSense, la siguiente es una breve explicación.

Artículos que violan las políticas de Google AdSense enumeradas:

1. Contenido ilegal

Lo que se entiende por contenido ilegal aquí es contenido que viola la ley, hace o se convierte en un proveedor de software ilegal, software malicioso, blogs descargables y artículos con derechos de autor que viola las políticas.

2. Contenido sexual

Tipos de contenido que contiene imágenes sexuales, videos y escritos, desnudos y excitación sexual.

3. Contenido terrible

Contiene escritos, videos o imágenes horribles, repugnantes y vulgares, como imágenes de sangre, partes internas del cuerpo, violencia y escritura inapropiada.

4. Drogas ilegales

Contiene contenido que comercializa drogas ilegales, productos que facilitan el uso de drogas ilegales y consejos y foros que discuten cómo usar drogas peligrosas como la cocaína, el cannabis o las drogas sintéticas

5. Juego en línea

Crear un sitio de apuestas o promocione / anuncie apuestas.

6. Armas y explosivos

Contiene contenido que promueve o anuncia sobre fabricación armas de fuego y otros explosivos en forma de tutoriales

7. Contenido engañoso

Contiene contenido engañoso, que contiene mentiras, engaños, fraudes y sitios web de PTC (Pago por click) con enlace de referidos

8. Contenido insultante

Contiene contenido que acosa e intimida a grupos e individuos. Instiga o discrimina para que haya debate o causar odio hacia alguien.

Ese fue un contenido que no debe crearse y viola las políticas del programa AdSense. Entonces, si desea registrar un blog en adsense, debe de ser un tema útil y positivo. Si sigue creando contenido inadecuado y violando la política, prepárese para ser rechazado.

Recuerda que si te gusto lo compartas con tus amigos, me ayudaría muchísimo

Cómo superar los blogs afectados por Google Sandbox

2019-09-15T13:02:00.000-07:00

Cómo superar los blogs afectados por Google Sandbox : en el mundo real hay reglas, así como en el mundo de Internet, hay tantas reglas escritas o no escritas que, si las viola, debe estar preparado para soportar las consecuencias.

En esta ocasión, compartiré con ustedes sobre una de las reglas que, por supuesto, puede ser muy perjudicial, es decir, eliminar artículos sobre SERP (Search Engine Results Page) y reducir las clasificaciones que generalmente los maestros llaman Google Sandbox, por supuesto, todavía hay muchas reglas como Google Pinguin, Google Panda etc. Esta vez quiero discutir solo uno que trata sobre Google Sandbox.

Google Sandbox es una advertencia dada por Google a los sitios web / blogs a eliminar artículos de los motores de búsqueda, los blogs que están infectados con Google Sandbox están definitivamente en desventaja debido a la pérdida de muchos visitantes.

Los bloggers como yo también estamos muy preocupados de que mi blog esté infectado con este Google Sandbox, una vez más digo que es muy dañino no solo un artículo que desaparecerá del SERP. Gradualmente uno por uno hasta que desaparecerá todo, uno de los obstáculos que seriamente si no se resuelve, antes de pasar a la traducción para superarlo primero sepa cuál es la causa del blog puede infectarse con Google Sandbox.

Causas Blogs pueden ser afectados por Google Sanbox

Los vínculos de retroceso: que no son de calidad, el significado de los vínculos de retroceso que no son de calidad aquí son vínculos de retroceso que provienen de sitios falsos o spam.
Los artículos de copypaste: los artículos de copypaste de otras personas causarán muchos problemas, incluidos no solo sanbox, tambien derechos de autor e incluso los blogs pueden ser prohibidos permanentemente por Google..
Hay muchos enlaces rotos en el blog.
No repita palabras clave o palabras clave que son demasiado excesivas.

Consecuncias de estar afectados por Google Sanbox

Los visitantes o visitantes disminuyeron drásticamente, lo que generalmente recibe en visitas diarias que pueden alcanzar 5000 por día se redujo drásticamente a 1000 por día, la posibilidad también puede ser inferior a 1000
La desaparición de artículos en motores de búsqueda, artículos previamente indexados en la página principal de google, desaparecerá gradualmente, los artículos probablemente tampoco se encontrarán en motores de búsqueda alternativas
Blog de SEO de calidad reducida.
Reducción de rango en Alexa.

Cómo verificar los blogs afectados por Sandbox

Hay dos formas de explicarlo, en realidad todavía hay otras formas de considerarlo, pero me baso en estas alternativas efectivas

Forma uno de detectar

Abra el motor de búsqueda genie
Coloque su URL de blog agregue una palabra clave de su blog
En la columna "Solve this", complete con números de acuerdo con la suma.
Haga clic en Enviar
Nota: Si esta afectado por Sanbox, el resultado será "Su sitio todavía está en el sandbox de google", si no "Su sitio no está en el sandbox de google"

Forma dos de detectar

Abrir google.com
Escriba en el campo de búsqueda: sitio: ejemplo.com, por ejemplo, sitio: tutoriales-blogger.com
Si no aparece es una alternativa de estar afectado por sanbox

Cómo superar Google Sandbox

Lo siguiente es lo que puedo explicar para superar este sandbox de Google que explicaré a continuación.

Puede verificar el plagio de artículos aquí
Siempre actualice los artículos regularmente.
Busque vínculos de retroceso de alta calidad

Durante la restauración de este sandbox también toma alrededor de 1 mes, así que mi amigo sea paciente y siempre actualice el artículo regularmente.

Bien, eso es todo lo que puedo explicar sobre cómo superar los blogs afectados por Google Sandbox. Gracias por visitarnos, espero que sea útil para todos ustedes.

Recuerda que si te gusto lo compartas con tus amigos, me ayudaría muchísimo

¿Qué tiene de bueno los Iconos Font Awesome 5 Duotone?

2019-09-15T12:10:00.000-07:00

Es muy importante tener en cuenta que los íconos de Duotone no son GRATUITOS en este momento, lo que significa que debe comprar el paquete Pro para usar sus íconos de lista.
Al leer esto, muchos de ustedes pueden estar un poco decepcionados, pero tengan la seguridad de que aquí no perderé dinero y aún tendré productos genuinos para usar
Entonces, ¿qué son los iconos Duotone? Simplemente se entiende como "2 iconos" combinados en uno para que podamos personalizar el color, la opacidad, ... en comparación con la personalización de un icono tradicional.

La demostración la encontraran a medidas que se vaya desarrollando

Comencemos:

La primera etapa sera agregar el código fuentes de Duotone para eso:

Vamos a Blogger>> Plantilla>> Edición HTML
Buscamos la siguiente linea (Ctrol + F) <head>
Justo debajo <head> de pegamos la siguiente linea

<link href="//cdn.jsdelivr.net/gh/hung1001/font-awesome@268ad89/css/all.css" rel="stylesheet" type="text/css" />

Guardamos los cambios

Como utilizar

Al igual que sus hermanos, Duotone Icons usa la clase de moda como prefijo. Puede visitar https://fontawesome.com/icons?d=gallery&s=duotone para obtener la lista de iconos y el código

Iconos Basicos

<div class="fa-3x">
  <i class="fad fa-camera"></i> <!-- un icono de cámara de estilo duotono -->
  <i class="fad fa-fire-alt"></i> <!-- un icono de fuego de estilo duotono -->
  <i class="fad fa-bus-alt"></i> <!-- un icono de bus de estilo duotono -->
  <i class="fad fa-fill-drip"></i> <!-- un icono de bote de estilo duotono -->
</div>

Intercambio de opacidad de capa

Puede revertir la opacidad utilizando la clase fa-swap-opacity

<div class="fa-3x">
  <i class="fad fa-camera"></i> <!-- un icono de cámara de estilo duotono -->
  <i class="fad fa-camera fa-swap-opacity"></i> <!-- un icono de cámara de estilo duotono con opacidad intercambiada -->

  <i class="fad fa-fire-alt"></i> <!-- un icono de fuego de estilo duotono -->
  <i class="fad fa-fire-alt fa-swap-opacity"></i> <!-- un icono de fuego de estilo duotono con opacidad intercambiada -->

  <i class="fad fa-bus-alt"></i> <!-- un icono de bus de estilo duotono -->
  <i class="fad fa-bus-alt fa-swap-opacity"></i> <!-- un icono de bus de estilo duotono con opacidad intercambiada -->
</div>

Opacidad cambiante

FA usa 2 variables --fa-primary-opacity (predeterminado 1) y --fa-secondary-opacity (4 alternativas) para los iconos de duotono. Puedes cambiarlos usando el siguiente estilo


<div class="fa-3x">
  <i class="fad fa-bus-alt" style="--fa-primary-opacity: 0.20"></i> <!--  opacidad de la capa primaria establecida en 20% -->
  <i class="fad fa-bus-alt" style="--fa-primary-opacity: 0.40"></i> <!--  opacidad de la capa primaria establecida en 40% -->
  <i class="fad fa-bus-alt" style="--fa-primary-opacity: 0.60"></i> <!--  opacidad de la capa primaria establecida en 60% -->
  <i class="fad fa-bus-alt" style="--fa-primary-opacity: 0.80"></i> <!--  opacidad de la capa primaria establecida en 80% -->
  <i class="fad fa-bus-alt" style="--fa-primary-opacity: 1.0"></i> <!--  opacidad de la capa primaria establecida en 100% -->
</div>

Colorear Iconos Duotono

De manera similar, FA usa 2 variables: fa-primary-color y --fa-secondary-color para asignar colores a 2 íconos, en caso de que desee personalizar, puede usar lo siguiente

<div class="fa-3x">
  <i class="fad fa-bus-alt" style="--fa-primary-color: gold;"></i>  <!--color de capa primaria definido -->
  <i class="fad fa-bus-alt" style="--fa-primary-color: orangered;"></i> <!-- color de capa primaria definido -->
  <i class="fad fa-fill-drip" style="--fa-secondary-color: limegreen;"></i>  <!-- color de capa secundaria definido -->
  <i class="fad fa-fill-drip" style="--fa-secondary-color: rebeccapurple;"></i> <!-- color de capa secundaria definido -->
  <i class="fad fa-battery-full" style="--fa-primary-color: limegreen; --fa-secondary-color: dimgray;"></i> <!-- color de capa secundaria + primario definido -->
  <i class="fad fa-battery-quarter" style="--fa-primary-color: orange; --fa-secondary-color: dimgray;"></i> <!-- color de capa secundaria + primario definido -->
</div>

Combinando variables

También puedes usar una combinación de variables para personalizarlo como quieras

<div class="fa-3x">
  <i class="fad fa-book" style="--fa-primary-color: lightseagreen; --fa-secondary-color: linen; --fa-secondary-opacity: 1.0;"></i>
  <i class="fad fa-book-spells" style="--fa-primary-color: mediumpurple; --fa-secondary-color: linen; --fa-secondary-opacity: 1.0;"></i>
  <i class="fad fa-book-medical" style="--fa-primary-color: crimson; --fa-secondary-color: linen; --fa-secondary-opacity: 1.0;"></i>
  <i class="fad fa-book-user" style="--fa-primary-color: peru; --fa-secondary-color: linen; --fa-secondary-opacity: 1.0;"></i>

  <i class="fad fa-toggle-off" style="--fa-primary-color: white; --fa-secondary-color: gray; --fa-secondary-opacity: 1.0;"></i>
  <i class="fad fa-toggle-on" style="--fa-primary-color: dodgerblue; --fa-secondary-color: white; --fa-secondary-opacity: 1.0;"></i>

  <i class="fad fa-file-plus" style="--fa-primary-color: white; --fa-secondary-color: limegreen; --fa-secondary-opacity: 1.0;"></i>
  <i class="fad fa-file-exclamation" style="--fa-primary-color: white; --fa-secondary-color: gold; --fa-secondary-opacity: 1.0;"></i>
  <i class="fad fa-file-times" style="--fa-primary-color: white; --fa-secondary-color: tomato; --fa-secondary-opacity: 1.0;"></i>
</div>

Personalizado a través de CSS interno

Agregarle tu propio estilo css aunque pareciera un poco mas largo

<style>
  .theme-ravenclaw {
    --fa-secondary-opacity: 1.0;
    --fa-primary-color: rgb(4, 56, 161);
    --fa-secondary-color: rgb(108, 108, 108);
  }
</style>

<div class="fa-3x">
  <i class="fad fa-hat-wizard theme-ravenclaw"></i>
  <i class="fad fa-flask-potion theme-ravenclaw"></i>
  <i class="fad fa-wand-magic theme-ravenclaw"></i>
  <i class="fad fa-scarf theme-ravenclaw"></i>
  <i class="fad fa-book-spells theme-ravenclaw"></i>
</div>

Eso es todo En realidad, no hay nada sublime, ¿verdad? Te he mostrado un nuevo estilo de FA y cómo usarlo.

Recuerda que si te gusto lo compartas con tus amigos, me ayudaría muchísimo

Crear efecto de carga de página para Blogspot

2019-09-15T07:35:00.002-07:00

Para que el sitio sea más llamativo, cuando la página se carga lentamente en lugar de mostrar agujeros blancos en la web. mostraremos una animación en formato gif o svg.

Comencemos:

Vamos a Blogger>> Plantilla>> Edicion HTML
Buscamos la siguiente linea (Ctrol + F) </body>
Pegamos el siguiente script justo despues de </body>

<style type='text/css'>
.carga {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10000000;
background: url('https://loading.io/spinners/curve-bars/index.curved-bar-spinner.svg') center no-repeat #fff;
}
</style>
<div class='carga'></div>
<script>//<![CDATA[
$(window).on('load',function(){
$('.carga').fadeOut(1000);
})
//]]></script>

Guarda los cambios y pulsa F5 para ver los resultados

En el css hay una extensión .svg del enlace de animación, puedo reemplazarlo con gif. Pero las fotos deben tener un tamaño de 150x150 o menor.

.carga {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10000000;
background: url('URL de la imagen') center no-repeat #fff;
}

Aquí compartiré para una página con más de 100 imágenes .svg imágenes. Puede usar F12 para obtener enlaces de imágenes y usarlo para su web

Crea efecto de corazones coloridos al dar clics para Blogspot

2019-09-14T20:05:00.001-07:00

Hermoso efecto de corazones para Blogspot, cada vez que haga clic en la página de Blogspot, aparecerán imágenes en forma de corazón para los propietarios de blogs que tengan temas románticos u orientados al amor te vendrá genial

La demostración la encontraras en esta entrada dando clicks

Comencemos:

Dependiendo si lo quieres ver en una entrada en particular o en todo el blogg

Para todo el blog hacemos de la siguiente manera

Vamos a Blogger>> Plantilla>> Edicion HTML
Buscamos la siguiente linea (Ctrol + F) </body>
Pegamos el siguiente script justo despues de </body>

<script type='text/javascript'>
//<![CDATA[
! function(e, t, a) {
function n() {
c(".corazones{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.corazones:after,.corazones:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.corazones:after{top: -5px;}.corazones:before{left: -5px;}"), o(), r()
}

function r() {
for (var e = 0; e < d.length; e++) d[e].alpha <= 0 ? (t.body.removeChild(d[e].el), d.splice(e, 1)) : (d[e].y--, d[e].scale += .004, d[e].alpha -= .013, d[e].el.style.cssText = "left:" + d[e].x + "px;top:" + d[e].y + "px;opacity:" + d[e].alpha + ";transform:scale(" + d[e].scale + "," + d[e].scale + ") rotate(45deg);background:" + d[e].color + ";z-index:99999");
requestAnimationFrame(r)
}

function o() {
var t = "function" == typeof e.onclick && e.onclick;
e.onclick = function(e) {
t && t(), i(e)
}
}

function i(e) {
var a = t.createElement("div");
a.className = "corazones", d.push({
el: a,
x: e.clientX - 5,
y: e.clientY - 5,
scale: 1,
alpha: 1,
color: s()
}), t.body.appendChild(a)
}

function c(e) {
var a = t.createElement("style");
a.type = "text/css";
try {
a.appendChild(t.createTextNode(e))
} catch (t) {
a.styleSheet.cssText = e
}
t.getElementsByTagName("head")[0].appendChild(a)
}

function s() {
return "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"
}
var d = [];
e.requestAnimationFrame = function() {
return e.requestAnimationFrame || e.webkitRequestAnimationFrame || e.mozRequestAnimationFrame || e.oRequestAnimationFrame || e.msRequestAnimationFrame || function(e) {
setTimeout(e, 1e3 / 60)
}
}(), n()
}(window, document);
//]]>
</script>

Guardamos los cambios y a disfrutar los resultados

Recuerda que si te gusto lo compartas con tus amigos, me ayudaría muchísimo

Cómo elegir una buena plantilla de blog (Blogger)

2019-09-01T19:10:00.000-07:00

Para que nuestro blog se vea más profesional y también se vea bien, tenemos que crear un tema simple pero no menos interesante.
Antes de cambiar la plantilla (template), es bueno entender primero la explicación, para no elegir la plantilla incorrecta para su blog favorito.
CONSEJOS PARA ELEGIR UNA BUENA PLANTILLA DE BLOG

1. Responsive

Responsive es una plantilla que parece poder personalizar el dispositivo y el navegador que utilizamos para acceder a nuestro blog. Ejemplo: abrimos el blog usando un teléfono celular, tableta, computadora portátil y PC. Seguramente el tamaño de la pantalla en el dispositivo es diferente.

Ahora, si nuestra plantilla responde, la plantilla puede ajustar su plantilla en una pantalla diferente vamos por buen camino.

2. Simple, limpio y fácil de usar

A Google realmente le gustan las plantillas que son simples, limpias y ordenadas.
Entonces, si desea encontrar la atención de Señor Google, use simple.
Del mismo modo, los visitantes de nuestro blog se sentirán más cómodos al leer y comprender los artículos que hacemos.

3. Carga rápida

La velocidad del blog puede afectar el futuro de nuestro blog porque los blogs que se cargan lo suficiente harán que los usuarios de nuestro blog se molesten. Además, las plantillas de carga lenta también tienen un efecto negativo en el SEO.
Hay dos herramientas que uso a menudo para verificar la velocidad de carga del blog:
1. PageSpeed Insights
2. GT Maxtrix

4. Herramienta válida de validación de pruebas de Google

Esta es una herramienta que mostrará la estructura buena o mala de los datos contenidos en la plantilla del blog. Para verificar la estructura de datos puede hacerlo a través de las siguientes herramientas:
Google Structured Data

Bien , después de comprender los consejos anteriores, es hora de encontrar una plantilla simple, limpia y receptiva para nuestro blog favorito. Recomiendo varios lugares para descargar y comprar:
1. gooyaabitemplates.com
2. idntheme.com
3. themeindie.com

CONCLUSION

En general, una plantilla de blog buena y bien utilizada para nuestro blog es una plantilla que:

SEO Friendly (SEO Optimized) , como: optimización de Meta Tags y Heading Tags en la plantilla.

Fácil de usar , haciendo que los ojos de los visitantes sean cómodos, no desordenados y confusos.
Compatible con dispositivos móviles (receptivo), adaptativo, dinámico, o puede abrirse en una computadora portátil o PC y en una pantalla móvil (HP, SmartPhone, tableta).

Eso es todo, con suerte puede ser una guía al hacer o comprar plantillas para blogs.
No olvides compartir para que todos los amigos y amigos blogueros conozcan una buena plantilla para un blog.

Gracias por leer, Saludos

Cómo hacer un widget de testimonio en un blog

2019-09-01T18:51:00.001-07:00

Esta vez haré un widget testimonial simple con código html y css para instalar en su blog o sitio web.

Este widget es en realidad casi similar al widget de cuadro de autor , pero hay un pequeño diseño que lo hace un poco diferente del widget de perfil del autor. Aquí agrego citas o palabras pronunciadas por sus clientes para que este widget se nombre como un widget de tarjeta de testimonio . Si usted es un comerciante o vendedor en línea que confía en un sitio web personal o blog como un lugar para exhibir su mercancía, lo más importante debe estar en su sitio web son los testimonios de clientes que ya han comprado o utilizado los servicios. Al mostrar un widget testimonial en el blog o sitio web, por supuesto, aumentará la confianza de los posibles compradores hacia usted.

Antes de comenzar veremos una demostración en vivo

Demo

Solo debes saber donde quieras colocarlo ya sea en una entrada o en un gadget

Comencemos


<style>
.testimonio {
  font-family: 'Roboto', Arial, sans-serif;
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 1%;
  min-width: 230px;
  max-width: 315px;
  width: 100%;
  color: #ffffff;
  text-align: left;
  line-height: 1.4em;
  background-color: #d6dbff;
  padding-top: 120px;
  border-radius: 10px;
}
.testimonio * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.testimonio img {
  max-width: 100%;
  vertical-align: top;
  opacity: 0.85;
}
.testimonio .pic {
  width: 100%;
  background-color: #2961ff;
  padding: 25px;
  position: relative;
}
.testimonio .pic:before {
  position: absolute;
  content: '';
  bottom: 100%;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 55px 0 0 400px;
  border-color: transparent transparent transparent #2961ff;
}
.testimonio .profile {
  border-radius: 50%;
  position: absolute;
  bottom: 100%;
  left: 25px;
  z-index: 1;
  max-width: 90px;
  opacity: 1;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
.testimonio h3 {
  font-size: 1.3em;
  margin: 25px;
  font-weight: 300;
  position: absolute;
  top: 0;
  right: 0;
  text-align: right;
}
.testimonio h3 span {
  display: block;
  font-size: 0.65em;
  color: #2980b9;
}
.testimonio p {
  margin: 0 0 10px;
  padding: 0 0 30px;
  letter-spacing: 1px;
  font-style: italic;
  font-weight: 300;
}
.testimonio p:after {
  font-family: 'FontAwesome';
  content: "\201C";
  position: absolute;
  font-size: 180px;
  line-height: 1em;
  color: #3a40ff;
  font-style: normal;
  content: "\201D";
  right: 20px;
  bottom: -105px;
}
</style>
<div class="testimonio">
    <div class="pic"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN0s9z3WI0NbQj-6LWkw0GC7_tNnjYctb_3vnMK_2Fsp5HiKT4w8U4KkfimgDUxAh0x39VC2y1aipu2Bw9K_4LOt4pWPd3UdbsXsFaraH4u_4Q4015riql27ygrnU-a-6sqK5tuinSYY4/w140-h140-p/lipy.png" alt="Profile" title="Profile" class="profile" />
        <p>Soy un famoso bromista en Argentino. Apasionado sobre CSS, HTML y Blogger siempre buscando dar consejos a las personas en Blogger </p>
    </div>
    <h3>Fernando S.<span>Desarrollador web</span></h3>
</div>

Solo te queda editarlo con tus datos, imágenes, nombre y demás cosas
Si no tienes instalo iconos fuentes CSS para que se vean las comillas instala el siguiente código justo encima de </body>

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Recuerda que si te gusto lo compartas con tus amigos, me ayudaría muchísimo

Páginas importantes que deben estar en un blog

2019-09-01T11:09:00.000-07:00

Para aquellos de ustedes que están creando un nuevo blog o son nuevos en los blogs, deben preparar varias páginas importantes que deben estar en un blog

Esta página debe existir porque uno de ellos muestra la identidad del blog y las políticas del blog, etc. Si esta página no existe, se puede comparar con una habitación vacía sin contenido.

Una de sus funciones es cumplir con uno de los requisitos para registrar Google AdSense, es decir, su blog debe tener estas páginas importantes.

Para aquellos que tienen curiosidad acerca de qué páginas son importantes, considere la siguiente revisión.

Páginas importantes que debe tener un blog

Hay aproximadamente 6 páginas importantes que deben estar en un blog, aquí hay algunas páginas importantes.

Acerca de la página (Acerca de mí / nosotros)

La página Acerca mi debe de contener sus datos personales o su blog, para que pueda explicar a los visitantes quién es usted y cuáles son las visiones y misiones de su blog.

Un ejemplo es la página Acerca de mi de este blog. Si está confundido, le sugiero que visite sitios en Internet, especialmente blogs de perfil, debe haber una página acerca de que puede usar como referencia para crear una página acerca de un blog.

Página de contacto (Contacto / Nuestro contacto)

Como su nombre lo indica, esta página sirve para contactar o como medio de comunicación entre el usuario y el administrador de un blog.

Esta página generalmente tiene la forma de un formulario o una forma de contactar al administrador del blog. Un ejemplo es la página del formulario de contacto para este blog.

Pagina del Mapa (Sitempa o tabla de contenido)

Esta página sirve para mostrar todos los artículos en su blog.
En realidad, si utiliza la plataforma blogger, esta página ya existe automáticamente en su blog.

Para verificarlo puede ser con el comando https://www.urlblogsobat/sitemap.xml, pero su apariencia será difícil de entender por los visitantes.

Por lo tanto, debemos diseñarlo para que se vea ordenado, por ejemplo, como este blog Sitemap .

Página de descargo de responsabilidad

La página de descargo de responsabilidad es una página que contiene políticas y reglas o reglas relacionadas con el contenido de un blog que los visitantes deben entender.

Hacer una página de descargo de responsabilidad es muy fácil porque hay herramientas en línea que puede usar para crear un descargo de responsabilidad automáticamente, aquí está la herramienta en línea: Generador de descargo de responsabilidad .

Página de privacidad

Esta página no es muy diferente de la página de Descargo de responsabilidad, que es una página que contiene políticas y reglas o reglas en un blog.

A diferencia de la página de descargo de responsabilidad que está relacionada con el contenido, la página de privacidad está más dirigida a las reglas para la información del visitante. Por ejemplo, algunas reglas o políticas relacionadas con los datos del sitio web o blog.

Con esto, puede informar a los visitantes que su blog tiene derecho a acceder a la información del visitante, por ejemplo, cookies y similares.

Estas son las herramientas en línea para crear una Política de privacidad automáticamente: Generador de políticas de privacidad .

Términos de servicio (TOS)

Esta página contiene varias reglas relacionadas con algunas restricciones de los propietarios de blogs. La prohibición tiene el objetivo de que el contenido del blog no sea mal utilizado por los visitantes.

Por lo tanto, nunca está de más instalar la página de Términos de servicio (TOS), aunque las páginas de descargo de responsabilidad y política de privacidad tienen las mismas reglas, pero en cada página contienen reglas diferentes.

Las siguientes son herramientas que se pueden usar para crear Términos de servicio (TOS) automáticamente: Generador de Términos de servicio (TOS) .

Esas son algunas páginas importantes que deben existir en un blog, con suerte puede ser útil para todos. Gracias ...

Cómo agregar fondo aleatorio en Blogger

2019-09-01T10:56:00.002-07:00

Esta vez compartiré un tutorial sobre cómo hacer que un fondo de blog pueda cambiar automáticamente.
Para que no sea demasiado difícil, mi amigo solo agrega un script o código en la plantilla de blogger. Sin embargo, este script o código puede ralentizar la velocidad de carga del blog. La forma en que funciona este script o código es cambiar la imagen de fondo de la página del blog cada vez que se actualiza la página del blog. Por lo tanto, su blog tiene una visualización dinámica porque el fondo puede cambiar por sí solo cuando los visitantes abren una nueva página o actualizan la página.

Antes de comenzar veremos una demostración

Demostración

Comencemos:

Vamos a Blogger> Edición HTML>
Buscamos la siguiente lineaa </body>
Justo antes de </body> pegamos el siguiente codigo

<script type='text/javascript'>
//<![CDATA[
var Background=new Array;
Background[0]="#f5f5f5 url('ImagenURL') no-repeat top center fixed",
Background[1]="#f5f5f5 url('ImagenURL') no-repeat top center fixed",
Background[2]="#f5f5f5 url('ImagenURL') no-repeat top center fixed",
Background[3]="#f5f5f5 url('ImagenURL') no-repeat top center fixed",
Background[4]="#f5f5f5 url('ImagenURL') no-repeat top center fixed";
var random=Math.floor(5*Math.random());
document.write("<style>"),
document.write("body {"),
document.write("background: "+Background[random]+";"),
document.write("background-size:100%;"),document.write(" }"),
document.write("</style>");
//]]>
</script>

Solo debes de cambiar ImagenURL por tus imagenes, recuerda que tienen que ser nitidas y no borrosas para un buen rendimiento

Solo queda guardar y disfrutar. Recuerda que si te gusto lo compartas con tus amigos, me ayudaría muchísimo Recuerda si no tienes imagenes te dejare un enlace con imagenes hd de GOOGLE

¿Cómo disminuir la tasa de rebote de su sitio web o blogger?

2019-09-01T08:47:00.001-07:00

¿Qué es la tasa de rebote?

La tasa de rebote es una métrica que indica el porcentaje de personas que aterrizan en su página web y luego se van sin hacer clic en ningún otro lugar de su sitio web. La alta tasa de rebote indica que los visitantes no encontraron lo que estaban buscando o que la página no era fácil de usar. Por ejemplo, si la tasa de rebote según Google Analytics es del 60%, significa que el 60% de los usuarios de su sitio aterrizaron en una página en particular y se fueron sin tomar ninguna otra medida.

¿Cómo reducir la tasa de rebote?

Son diferentes maneras de disminuir la tasa de rebote de su blog. Aprenderemos desde todos los ángulos diferentes cómo podemos mejorar el rendimiento de nuestro blog.

Crea un sitio web fácil de usar

Si tiene un blog fácil de usar, realmente ayudará a reducir la tasa de rebote del sitio web. Por ejemplo, en Google Play Store, las aplicaciones móviles mejor calificadas son las que más se descargan. La razón muy común es la interfaz de usuario fácil de usar (interfaz de usuario) . La interfaz de usuario define la facilidad de uso de la aplicación móvil

Del mismo modo, si tenemos un blog fácil de usar, podemos ver fácilmente una disminución drástica en la tasa de rebote en el blog

Entrelaza tu publicación de blog

Si tiene una buena cantidad de publicaciones en tu blog, interrelacionelas. Esta es la mejor práctica para atraer a los visitantes de tu blog a tu blog. Si toma un ejemplo del sitio web wikipedia, puede ver un hipervínculo en cada línea, que proporciona información sobre el tema en particular.

Además, puede compartir enlaces desde otro sitio web que puede proporcionar información más útil relacionada con el tema de su blog. También debe aumentar su conexión con otros propietarios de blogs, para que la próxima vez compartan algunos enlaces de su sitio web en su blog. De esta forma, puede obtener algunos vínculos de retroceso de seguimiento o no seguimiento para su sitio web.

Usar sitio web amigable para dispositivos móviles

Si tiene un blog, utilice también la versión móvil de su blog. Dado que ahora los teléfonos móviles o los teléfonos inteligentes se han utilizado más que las computadoras de escritorio, será genial usar una versión móvil de su sitio web.

La aplicación móvil de su sitio web también puede ser útil para disminuir su tasa de rebote.

Use imágenes buenas y relacionadas para las publicaciones de su blog

Las imágenes equivalen a mil palabras, por lo tanto, es muy importante usar imágenes para su blog. Al compartir publicaciones de blog en sitios de redes sociales, las imágenes son las primeras en resaltarse. Las imágenes brindan mucha información sobre el tema en resumen y, por lo tanto, deben usarse en todas las publicaciones del blog. De esta manera, la tasa de rebote de tu blog disminuirá y también ayudará a atraer a tus visitantes.

Utilice los videos también para brindar más conocimiento

Los videos pueden contar una larga historia en pocas palabras. Muchos de nosotros no podremos leer un artículo de 1000 palabras y, por lo tanto, será genial usar los videos en ese escenario. Un video corto de 2-3 minutos puede ser muy útil para comprender toda la publicación del blog.

Las mejores alternativas de Google Adsense para bloggers y editores

2019-09-01T07:10:00.001-07:00

Todos sabemos que Google Adsense es importante para los bloggers. Yo mismo amo la cuenta de Google Adsense que me ha ayudado a ganar mi pan. Todavía digo que es la mejor y flexible cuenta para que los bloggers ganen dinero. Pero, a veces tenemos que estar preparados para el otro lado también. Sí, quiero decir, en el futuro puede haber una situación en la que su cuenta de AdSense será bloqueada o prohibida. Esto puede suceder si por errores viola las pautas de Google Adsense. Por lo tanto, debemos estar preparados con las mejores alternativas de google adsense para blogger presentes en los mercados. He pasado por esta situación y me ayudó a descubrir la alternativa de google adsense para ganar más dinero como blogger. Permítanos verificar cuáles son estas alternativas de Google AdSense que pueden cambiar su vida.

RevenueHits

La red publicitaria RevenueHits ofrece una buena variedad de tipos de anuncios, incluidos pancartas, ventanas emergentes, controles deslizantes, pancartas de estilo superior y de pie de página, botones e intersticiales. Ofrecen anuncios contextuales y orientados geográficamente. Son una red basada en el rendimiento (CPA), no una red CPC o CPM. Así que asegúrese de comprender que le pagan cuando un visitante de su sitio realiza acciones específicas en lugar de que le paguen cuando hacen clic en un anuncio. RevenueHits tiene una opción de pago flexible. RevenueHits ofrece pagos por PayPal y Payoneer. El pago mínimo actual es de $ 50. Por lo tanto, puede comenzar y unirse a los ingresos y ver el increíble resultado usted mismo. No tiene que preocuparse por el tráfico del blog, puede abrir fácilmente una cuenta de ingresos.

Infolinks

Infolinks es también una de las mejores alternativas de google adsense para bloggers. Asegúrese de que su blog tenga tráfico en aumento solicitar Infolinks. Esta alternativa de AdSense proporciona cuatro tipos diferentes de publicación de anuncios como intext, inframe, infold e intag. Los anuncios de texto e intag me han ayudado mucho a generar muchos ingresos. También puedes unirte a Infolinks y probar diferentes anuncios para tu blog. Entonces, adelante y solicite Infolinks si tiene suficiente tráfico a su blog. En el caso de Infolinks , el proceso de aprobación es muy rápido al igual que Google Adsense.

Media.net

Media.net es muy popular entre blogueros y editores. Esta alternativa de adsense de GOOGLE es bastante similar a Google Adsense, ya que proporciona anuncios relevantes según el contenido web presentado por usted. Media.net como adsense muestra anuncios relacionados con teléfonos inteligentes y aplicaciones relacionadas que ayudan a aumentar las posibilidades de clics en su sitio web. Media.net también es conocido por admitir diferentes tipos de formatos de anuncios como video, imágenes, texto y rich media. Ahora, esto garantiza que tenga la opción de optar por cualquiera de estos formatos según su contenido y presupuesto. Esta característica le ha dado a muchos vendedores basados en la web la flexibilidad de elegir su propio diseño junto con el esquema de color y el tamaño. Una de las mejores características en Media.net es la optimización dinámica.

Y eso es todo gente, díganme ustedes cuales usan si son de usar Google Adsense únicamente o con algún alternativa de estas siguiente paginas.
Dejanos un comentario para saber cual usas o cual te ha dado mas ingresos

Cómo hacer una marca de agua automática en imágenes en un blog

2019-08-31T17:56:00.000-07:00

La marca de agua es una señal que utilizamos para marcar una imagen o vídeo. La marca de agua generalmente se encuentra en imágenes y videos que están marcados con el texto y el logotipo de una empresa propietaria de los derechos de autor. Esta marca de agua se crea manualmente, sin embargo, en esta ocasión les diré cómo crear una marca de agua automáticamente.

Sin embargo, tenga en cuenta que este tutorial es solo para blogs y marcas de agua que no son AMP en este tutorial solo se verá si la imagen se ve a través de un blog, lo que significa que si descarga la imagen, no se verá la marca de agua.

La demostración esta en la imagen de inicio

Comencemos:

Vamos a Blogger>Edicion HTML
Buscamos la siguiente lineaa ]]></b:skin>
Justo por encima por encima pegamos el siguiente código CSS


.separator{position:relative}.separator::before{content:"TB(tutorialesBlogger)";color:#fff;font-size:12px;font-weight:bold;position:absolute;right:0px;bottom:8px;border:1px solid #3a3a3a;border-top-left-radius: 10px;;background-color:#3a3a3a;padding:4px;opacity:.8;height:14px;line-height:14px}

Cambia TB(tutorialesblogger) por tu ID o marca de agua
Guardamos los cambios y ahora cada ves que agreguemos una imagen solo tendremos que agregar

<div class="separator" style="clear: both; text-align: center;">
<href bp.blogspot.com="" btkker700igcqewa_auufsuqrxa5dip6gclcbgas="" gylxtvwrqc="" https:="" imageanchor="1" in="" s1600="" szy9n3u4i="" t="" tulo-1.png=""><img border="0" data-original-height="400" data-original-width="750" src="URL DE LA IMAGEN" /></href></div>

Solo debes de cambiar tu URL por tu imagen

Resaltar Syntax usando PRISM y Javascript

2019-08-12T06:44:00.000-07:00

En tutorial veremos como darle estilo a nuestro marco Syntax ademas con un botón "copiar" en el portapapeles, le presenté muchos articulos de darle estylo, pero la mayoría de ellas usan jQuery. Entonces, ¿hay alguna forma disponible con JS puro (JavaScript)? La respuesta estará en este artículo.
La ventaja de Prismjs es que su tamaño compacto es inferior a 20 KB, al integrarse con un solo archivo js sin configuración, admite muchos idiomas y muchos estilos para que usted elija.

La demostración la encontraras al final del blog

Comencemos

Vamos a Blogger> Tema> Edición HTML
Buscamos la siguiente linea en nuestra plantilla ]]></b:skin>a
Justo encima pegamos el siguiente código CSS


.code-header {
    text-align: right;
    background: #f8f8f8;
    border: 1px solid #e5e5e5;
    font-family: Helvetica, Arial, sans-serif;
    box-sizing: border-box
}

.code-header a {
    font-size: 15px;
    display: inline-block;
    cursor: pointer;
    border-left: 1px solid #e5e5e5;
    box-sizing: border-box;
    padding: 6px 13px
}

.code-header a:hover {
    background: #f3f3f3;
    transition: all 0.1s linear
}

.msg-alert {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: #333;
    z-index: 1000;
    color: #fff;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 15px;
    padding: 8px 12px;
    border-radius: 4px
}

/* Prism JS */
code[class*="language-"],
pre[class*="language-"] {
    font-size: 14px;
    letter-spacing: .02rem;
    line-height: 1.4;
    color: black;
    background: none;
    text-shadow: 0 1px white;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none
}

pre[class*="language-"]::-moz-selection,
pre[class*="language-"]::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"]::-moz-selection {
    text-shadow: none;
    background: #b3d4fc
}

pre[class*="language-"]::selection,
pre[class*="language-"]::selection,
code[class*="language-"]::selection,
code[class*="language-"]::selection {
    text-shadow: none;
    background: #b3d4fc
}

@media print {
    code[class*="language-"],
    pre[class*="language-"] {
        text-shadow: none
    }
}

pre[class*="language-"] {
    padding: 1em;
    margin: 0;
    overflow: auto;
    border: 1px solid #e5e5e5;
    border-top: 0;
    box-sizing: border-box
}

:not(pre)>code[class*="language-"],
pre[class*="language-"] {
    background: #f8f8f8
}

:not(pre)>code[class*="language-"] {
    padding: .1em;
    border-radius: .3em;
    white-space: normal
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: slategray
}

.token.punctuation {
    color: #999
}

.namespace {
    opacity: .7
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
    color: #905
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
    color: #690
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
    color: #9a6e3a
}

.token.atrule,
.token.attr-value,
.token.keyword {
    color: #07a
}

.token.function,
.token.class-name {
    color: #DD4A68
}

.token.regex,
.token.important,
.token.variable {
    color: #e90
}

.token.important,
.token.bold {
    font-weight: bold
}

.token.italic {
    font-style: italic
}

.token.entity {
    cursor: help
}

Todavía en la plantilla buscamos la siguiente linea </body>
Justo por encima pegamos el siguiente codigo Javascript


<b:if cond='data:view.isSingleItem'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js'/>
<script>//<![CDATA[
function forEachElement(selector, fn) {
  var elements = document.querySelectorAll(selector);
  for (var i = 0; i < elements.length; i++)
    fn(elements[i], i);
}

forEachElement("pre>code[class*='language-']", function(el, i) {
  el.parentNode.insertAdjacentHTML("beforebegin", "<div class='code-header'><a class='copy-code'>Copy</a></div>");
});

forEachElement(".copy-code", function(el, i) {
  el.addEventListener("click", function() {
    var body = document.getElementsByTagName("body")[0];

    var txt = document.createElement("textarea");
    txt.setAttribute("id", "txt-cpy");
    txt.style.position = "absolute";
    txt.style.left = "-9999em";
    txt.value = el.parentNode.nextElementSibling.textContent;
    body.appendChild(txt);

    document.getElementById("txt-cpy").select();

    var div = document.createElement("div");
    div.setAttribute("class", "msg-alert");
    try {
      var successful = document.execCommand('copy');
      successful ? div.innerHTML = "Copiado con éxito al portapapeles" : div.innerHTML = "¡Fallo al copiar al portapapeles!";
      body.appendChild(div);
    } catch (err) {
      console.log('Oops, unable to copy');
    }

    body.removeChild(txt);
    setTimeout(function() {
      body.removeChild(div);
    }, 2000)
  })
});
//]]>
</script>
</b:if>

Guardamos los cambios en nuestra plantilla
Solo queda agregar nuestro código HTMLen nuestra entrada o donde queramos mostrar nuestro condigo Syntax con PRISM

<pre><code class="language-xxx">

<!-- Codigo Syntax a resaltar -->

</code></pre>

solo debes de cambiar -xxx por el leguaje que quieras que resalte obtén la lista en https://prismjs.com/#languages-list
Recuerda que si te gusto lo compartas con tus amigos, me ayudaría muchísimo

Publicaciones aleatorias al dar clic

2019-08-11T17:45:00.000-07:00

En este tutorial veremos como agregar publicaciones aleatorias, es un buen truco para ayudar a los usuarios a acceder a más artículos sin cambiar de página muchas veces, y los datos también se cargan después de que los usuarios hacen clic, por lo que no afecta la velocidad en absoluto cuando se carga la página. Cada ves que los usuarios den clic este se actualizara ya que el algoritmo aleatorio no se duplicara.

Comencemos

Vamos a Blogger> Tema> Editar HTML.
Buscamos la siguiente linea (Ctrol + F)

]]></b:skin>

Justo encima de ]]></b:skin> pegamos el código CSS


.tb-random {
  outline: 0;
  background: #fff;
  border: 1px solid #eee;
  padding: 6px 12px 7px;
  -webkit-border-radius: 100px;
     -moz-border-radius: 100px;
          border-radius: 100px;
  cursor: pointer;
  -webkit-transition: background 0.3s;
  -o-transition: background 0.3s;
  -moz-transition: background 0.3s;
  transition: background 0.3s;
}
.tb:hover {
  background: #f8f8f8;
}
.random-posts {
  margin: 20px 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -ms-flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
}
.random-posts .item {
  width: 32%;
  margin-right: 2%;
  margin-bottom: 20px;
}
.random-posts .item:nth-of-type(3n) {
  margin-right: 0;
}
.random-posts .item .thumb {
  overflow: hidden;
  height: 160px;
}
.random-posts .item .thumb img {
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
       box-sizing: border-box;
  border: 1px solid #f6f6f6;
}
.random-posts .item .thumb img:hover {
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  -o-transition: transform 0.3s ease;
  -o-transition: -o-transform 0.3s ease;
  -moz-transition: transform 0.3s ease, -moz-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease, -moz-transform 0.3s ease, -o-transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  -webkit-transform: scale(1.1) rotate(-1.3deg);
      -ms-transform: scale(1.1) rotate(-1.3deg);
          -moz-transform: scale(1.1) rotate(-1.3deg);
            -o-transform: scale(1.1) rotate(-1.3deg);
       transform: scale(1.1) rotate(-1.3deg);
}
.random-posts .item .content {
  margin-top: 10px;
}
.random-posts .item .content a {
  color: #333;
  font-weight: 600;
  font-size: 16px;
}
.random-posts .item .content a:hover {
  text-decoration: underline;
}

Todavia en la plantilla HTML buscamos la siguiente linea (Ctrol + F)

</body>

Justo por encima de </body> pegamos el código Javascript


<b:if cond='data:view.isPost'>
<script type='text/javascript'>//<![CDATA[
document.getElementsByClassName("tb-random")[0].addEventListener("click", e => {
  document.getElementsByClassName("random-posts")[0].innerHTML = "";
  fetch(`/feeds/posts/summary?alt=json&max-results=0`).then(response => response.json()).then(data => {
    let totalPost = data.feed.openSearch$totalResults.$t;
    let nums = [],
      gen_nums = [];
    for (let x = 0; x < totalPost; x++) {
      nums.push(x + 1)
    };
    var in_array = (array, el) => {
      for (let i = 0; i < array.length; i++)
        if (array[i] == el) return true;
      return false;
    }
    var get_rand = array => {
      let rand = array[Math.floor(Math.random() * array.length)];
      if (!in_array(gen_nums, rand)) {
        gen_nums.push(rand);
        return rand;
      }
      return get_rand(array);
    }
    for (var v = 0; v < 6; v++) {
      for (var w = 1; w <= 1; w++) {
        fetch(`/feeds/posts/summary?alt=json&max-results=1&start-index=${get_rand(nums)}`).then(res => res.json()).then(json => {
          let title, href, thumb;
          for (let n = 0; n < json.feed.entry.length; n++) {
            for (let s = 0; s < json.feed.entry[n].link.length; s++) {
              if (json.feed.entry[n].link[s].rel === "alternate") {
                href = json.feed.entry[n].link[s].href;
                break;
              }
            }
            title = json.feed.entry[n].title.$t;
            if ("media$thumbnail" in json.feed.entry[n]) {
              thumb = json.feed.entry[n].media$thumbnail.url.replace("s72-c", "s260");
            } else {
              thumb = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin_cGEgZL0NB2jbCbSUDYoG5TrYbDFUBbp4t-mYK1sxZLWphn2f-DCNN4fhjYW-0AxT4VmzY25OaStZt-YlZLQ4EqFhWyPp905vg0p-Yhp_iRTct-aEhBryeG0wX71U6yVqAt45gC1c9s/s1600-r/nth.png"
            }
            document.getElementsByClassName("random-posts")[0].innerHTML += `<div class="item"><div class="thumb"><a href="${href}"><img src="${thumb}"/></a></div><div class="content"><a href="${href}">${title}</a></div></div>`;
          }
        }).catch(e => console.error(e))
      }
    }
  }).catch(error => console.error(error))
  e.currentTarget.innerHTML = "Continuar encontrando mas entradas";
}, {
  once: false
});
//]]></script>
</b:if>

Solo queda agregar nuestro codigo HTML donde nosotros queramos ya sea en una entrada, en una pagina o dentro de nuestra plantilla


<b:if cond='data:view.isPost'>
<center><button class='tb-random' type='button'>Encuentra mas entradas</button></center>
<div class='random-posts'/>
</b:if>

Solo queda guardar y disfrutar. A continuación te dejare una demostración Recuerda que si te gusto lo compartas con tus amigos, me ayudaría muchísimo

Tablas para descargas simple y rapido.

2019-08-10T19:52:00.001-07:00

En este tutorial veremos como crear unas tablas para tus descargas si tienes un blog de descargas.
Hace unos años antes que me retirara por un tiempo cree unas tablas para un seguidor del blog que me pidió vía mi FANPAGE
@TutorialesBlogger
Este es la entada antigua
Antes de comenzar veremos una demostración

LINKS DE DESCARGA

Formato: WinRAR | Peso: 43.0 MB
uploadboy SetUP Uploadboy Serial Dailyuploads setup DailyUPLoads Serial

Si algún link se encuentra caido, por favor hazno lo saber para poder volver a re-subirlo

Comencemos

Vamos a Blogger> Entradas> Nueva Entrada

Dentro de la entradas seguramente va a estar en modo Redactar cambiamos a HTML. Pegamos el siguiente código HTML

<style scoped="" type="text/css">
.table-links-container {
text-align: center;
width: 472px;
}
.table-links-container .tech-title {
background: #56C8BE;
font-weight: bold;
color: white;
padding: 4px;
}
.table-links-container .tech-data {
background: #DEDEDE;
padding: 4px;
line-height: 1.7em;
}
.table-links-container .tech-a {
background: #3DA1D1;
margin-bottom: 15px;
padding: 2px 13px;
text-transform: uppercase;
font-family: 'Open Sans Condensed',Arial,sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 1.7em;
text-align: center;
letter-spacing: -1px;
color: #fff !important;
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
transition: none !important;
}
.table-links-container .tech-a:hover {
color: #fff !important;
cursor: pointer;
transition: none !important;
}
.box-advertencia {
color: #D4413E;
background-color: #fdd;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG7jcgZF6T-km8r2IqpOixgyb9MC7vuciOEKUdnvIM45LJzCHyxNjfoD2sRFv2NUQBwY_DGaSHusqm-G7tSpJm5D2rWH71uuAiKLR5qyup2SMTU8VkrV24tIuqPc7Kigxvi-V8IuItnmF9/');
border: 1px solid #ffbfbf;
background-position: 9px 2px;
background-repeat: no-repeat;
font-style: normal;
text-shadow: 0 1px 0px #fff;
margin-bottom: 10px;
margin-left: 0;
margin-top: 10px;
text-align: left;
line-height: 115%;
padding: 10px 10px 10px 50px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
</style>
<center>
<br />
<div class="table-links-container">
<div class="tech-title">
LINKS DE DESCARGA</div>
<div class="tech-data">
<b>Formato:</b> WinRAR | <b>Peso:</b>&nbsp;43.0 MB<br />
&nbsp;
<a class="tech-a" href="URL 1" target="_blank">uploadboy SetUP</a> <a class="tech-a" href="URL1" target="_blank">Uploadboy Serial</a>
<a class="tech-a" href="URL2" target="_blank">Dailyuploads setup</a> <a class="tech-a" href="URL2" target="_blank">DailyUPLoads Serial</a>
<br />
<div class="box-advertencia">
Si algún link se encuentra caido, por favor hazno lo saber para poder volver a re-subirlo</div>
</div>
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
</center>

Recomendaciones

Solo debes de cambiar lo que estan en rojo por las url de tus enlaces
Si quieres agregas mas enlaces solo debes de agregar

<b><a class="tech-a" href="URL1" target="_blank">Mega Setup</a> <a class="tech-a" href="http:URL1" target="_blank"> Mega Serial</a></br

Truco para mostrar los detalles del enlace al pasar el cursor por CSS para Blogspot

2019-08-04T17:42:00.001-07:00

Este va a hacer uno de los pocos tutoriales donde no le daré mucha intro. Se trata de un estilo tooltip que únicamente mostrara cuando pasemos el cursor sobre un enlace este nos revelara la URL

Demostración:

Solo debes de agregar el siguiente código en la entrada.

No tendrás que hacer nada mas. disfruta el nuevo tooltip para tus enlaces y fotos

<style type="text/css">
.post-body a::before {
 content: attr(href);
 float: none;
 clear: both;
 font-size: 22px;
 font-family: "Roboto", sans-serif;
 font-weight: 300;
 text-transform: none;
 padding: 15px 0;
 background: #fff;
 color: #55579e;
 border-radius: 0;
 position: fixed;
 opacity: 0;
 left: 0;
 top: 0;
 visibility: hidden;
 transform: scaleY(0);
 text-overflow: ellipsis;
 overflow: hidden;
 white-space: nowrap;
 text-align: center;
 width: 100%;
 transition: .3s ease-in-out;
 z-index: 999;
 margin: 0 auto;
}

.post-body a:hover::before {
 opacity: 1;
 visibility: visible;
 transform: scaleY(1)
}
</style>

Ya esta solo queda disfrutar de tus enlaces en tus entradas

Cómo cambiar la visualización de los comentarios de Blogger a la última versión

2019-08-04T11:55:00.000-07:00

Cuando Blogger lanzó una nueva versión de plantilla 3, hubo una cosa que fue suficiente para llamar la atención de muchas personas, a saber, la aparición de los comentarios que cambiaron. Como cambiar los comentarios de blogspot a la nueva versión

Esta nueva versión es más minimalista y parece moderna. Mucha gente quiere probar la nueva versión de Blogger del cuadro de comentarios, pero se encuentra con un gran problema: tiene que cambiar la plantilla. Esto se debe a que el formulario de comentarios solo está disponible en las últimas plantillas v3, como Contempo, Soho, Emporio y Notable.

No te preocupes Porque este tutorial explicará cómo instalar la versión de Blogger del nuevo cuadro de comentarios sin tener que cambiar la plantilla en su conjunto.

Busca la siguiente linea <![CDATA[ justo debajo pega la siguien linea

<Group description="Komentar Baru Blogger (Contempo, Soho, Emporio, Notable)">
 <Variable name="body.background" description="Body Background" type="background" color="#dddfe2" default="#dddfe2 none repeat scroll top left" value="#dddfe2 none repeat scroll top left"/>
 <Variable name="body.font" description="Font" type="font" default="normal 400 14px Roboto, Arial, sans-serif" value="normal 400 14px Arial,sans-serif"/>
 <Variable name="body.text.color" description="Text Color" type="color" default="#1d2129" value="#1d2129"/>
 <Variable name="body.text.font" description="1"
  type="font"
  default="$(body.font)" value="normal 400 14px Roboto,Arial,sans-serif"/>
 <Variable name="posts.background.color" description="2"
  type="color"
  default="#fff" value="#ffffff"/>
 <Variable name="body.link.color" description="3"
  type="color"
  default="#008c5f" value="#008c5f"/>
 <Variable name="body.link.visited.color" description="4"
  type="color"
  default="#008c5f" value="#008c5f"/>
 <Variable name="body.link.hover.color" description="5"
  type="color"
  default="#1d2129" value="#1d2129"/>
 <Variable name="blog.title.font" description="6"
  type="font"
  default="$(body.text.font)" value="normal 400 14px Roboto, Arial, sans-serif"/>
 <Variable name="blog.title.color" description="7"
  type="color"
  default="#fff" value="#ffffff"/>
 <Variable name="header.icons.color" description="8"
  type="color"
  default="#fff" value="#ffffff"/>
 <Variable name="tabs.font" description="9"
  type="font"
  default="$(body.text.font)" value="normal 400 14px Arial,sans-serif"/>
 <Variable name="tabs.color" description="10"
  type="color"
  default="#ccc" value="#cccccc"/>
 <Variable name="tabs.selected.color" description="11"
  type="color"
  default="#fff" value="#ffffff"/>
 <Variable name="tabs.overflow.background.color" description="12"
  type="color"
  default="#fff" value="#ffffff"/>
 <Variable name="tabs.overflow.color" description="13"
  type="color"
  default="$(body.text.color)" value="#1d2129"/>
 <Variable name="tabs.overflow.selected.color" description="14"
  type="color"
  default="$(body.text.color)" value="#1d2129"/>
 <Variable name="posts.title.color" description="15"
  type="color"
  default="$(body.text.color)" value="#1d2129"/>
 <Variable name="posts.title.font" description="16"
  type="font"
  default="$(body.text.font)" value="normal 400 14px Arial,sans-serif"/>
 <Variable name="posts.text.font" description="17"
  type="font"
  default="$(body.text.font)" value="normal 400 14px Arial,sans-serif"/>
 <Variable name="posts.text.color" description="18"
  type="color"
  default="$(body.text.color)" value="#1d2129"/>
 <Variable name="posts.icons.color" description="19"
  type="color"
  default="$(body.text.color)" value="#6c6f74"/>
 <Variable name="labels.background.color" description="20"
  type="color"
  default="#008c5f" value="#008c5f"/>
</Group>

2 Una ves guardado busque la siguiente linea data:post.commentFormIframeSr remplaza todas por la siguiente linea

 data:post.commentFormIframeSrc appendParams {skin: "contempo"}

Guarda los cambios realizados en su plantilla recuerda crear una copia de seguridad de su plantilla para no tener problemas a futuro

La demostración la encontraras en nuestro blog

Modificar perfil de Google para Blogger

2014-09-13T15:24:00.001-07:00

En este tutorial veremos como modificar el perfil de Google para Blogger, como bien sabemos que nuestro perfil de Google se encuentra el la parte superior derecha donde se muestra nuestra imagen de perfil en un circulo, hoy veremos como modificarlo para Blogger no sera igual pero trataremos de
darle un aspecto parecido.

Antes de comezar veremos una demostración
*la demostración la encontraras en nuestro blog.
Comencemos:

Paso 1: Vamos a Blogger>> Plantilla>> Edicion HTML>>
Paso 2: Buscamos la siguiente linea (Ctrol + F)

]]></b:skin>

Paso 3: Justo por encima de ]></b:skin> pegamos la siguiente linea CSS.

.perfil-google{
background-size: 32px 32px;
border-radius: 50%;
display: block;
height: 32px;
width: 32px;
position:fixed;
top:10px;
right:25px;
z-index:10000;
}
.perfil-google img{
border-radius: 50%;
}
.perfil-img {
float : left;
margin : 0 15px 0 0;
}
.perfil-data {
margin : 0;
}
.perfil-datablock {
margin : 0 0 20px;
}
.perfil-nombre-link {
background : left top no-repeat;
display : inline-block;
min-height : 20px;
padding-left : 20px;
}
.perfil-textoblock {
margin : 0.5em 0;
}

#perfilcaja{
background:#fff;
border:1px solid #ccc;
color:#333;
font-size:14px;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
line-height:1.2em;
top:60px;
right:-300px;
padding:15px;
position:fixed;
width:250px;
height:110px;
box-shadow: 0 2px 10px rgba(0,0,0,.2);
z-index:10000;
}
#perfilcaja:before{
content:"";
width:0;
height:0;
position:absolute;
top:-22px;
right:14px;
border:11px solid transparent;
border-color:transparent transparent #ccc;
}
#perfilcaja:after{
content:"";
width:0;
height:0;
position:absolute;
top:-19px;
right:15px;
border:10px solid transparent;
border-color: transparent transparent #fff;
}
.cerrarcaja{
background:none;
border:none;
position:absolute;
top:0px;
right:0px;
cursor:pointer;
font-size:18px;
font-weight:700;
color:#888;
}
.cerrarcaja:focus{
outline:none
}
  border-color: #0d78b6 #0d78b6 #0b689e;
  background-image: -webkit-linear-gradient(top, #25a5f0, #1097e6 66%, #0f8ad3);
  background-image: -moz-linear-gradient(top, #25a5f0, #1097e6 66%, #0f8ad3);
  background-image: -o-linear-gradient(top, #25a5f0, #1097e6 66%, #0f8ad3);
  background-image: linear-gradient(to bottom, #25a5f0, #1097e6 66%, #0f8ad3);
}

Paso 4: Todavía en la plantilla buscamos la siguiente linea (Ctrol + F)

</body>

Paso 5: Justo por encima de </body> pegamos la siguiente linea HTML.

<div class='perfil-google' onclick='document.getElementById(&apos;perfilcaja&apos;).style.right=&apos;15px&apos;;'>
<img alt='Foto Fernando' class='perfil-img' height='32' src='https://lh6.googleusercontent.com/-Gv6QdRn02z4/AAAAAAAAAAI/AAAAAAAAA-s/LfOIAj5Fa7A/s120-c/photo.jpg' title='Click me!' width='32'/>
</div>

<div id='perfilcaja'>
<a href='https://plus.google.com/102309934171768207604' target='_blank' title='Mi perfil'><img alt='Mi Foto' class='perfil-img' height='80' src='https://lh6.googleusercontent.com/-Gv6QdRn02z4/AAAAAAAAAAI/AAAAAAAAA-s/LfOIAj5Fa7A/s120-c/photo.jpg' title='Mi Perfil' width='80'/></a>
<div class='perfil-datablock'>
<div class='perfil-data'>
<a class='perfil-nombre-link g-profile' href='https://plus.google.com/102309934171768207604' rel='author' style='background-image: url(//www.google.com/images/icons/ui/gprofile_button-16.png);' target='_blank' title='Fernando Salas'>
Fernando Salas
</a>
<br/>
<div class='g-follow' data-annotation='bubble' data-height='20' data-href='https://plus.google.com/102309934171768207604'/>
</div>
</div>

<a class='profile-link' href='https://plus.google.com/102309934171768207604' rel='author' target='_blank' title='Mira mi Perfil'>Mira mi Perfil</a>
    <input class='cerrarcaja' onclick='document.getElementById(&apos;perfilcaja&apos;).style.right=&apos;-300px&apos;;' title='Close this' type='button' value='×'/></div>

Paso 6: Solo tendrás que guardas los cambios.

Solo debes de cambiar lo que esta en ROJO por la URL de tu imagen de perfil

Solo debes de cambiar lo que esta en ROJ por la URL de Google+

Entradas con mas comentariosa, estilo Entradas Populares para Blogger

2014-09-09T17:57:00.001-07:00

En este tutorial veremos como agregar un gadget con entradas con mas comentarios, con un estilo de las Entradas Populares que ya hemos visto en un tutorial realizado hace unos meses atrás. Esto permitirá a tus usuarios ver que entrada es mas popular a la hora de ver sus comentarios.

Entradas Populares Tutorial original
Antes de comenzar veremos una demostracion:
Demo
Comencemos:

Paso 1: Vamos a Blogger>>Plantilla>>Edicion HTML>>
Paso 2: Buscamos la siguiente linea (Ctrol + F)

</Group>

Paso 3: Justo debajo de </Group> pegamos la siguientes lineas

<Group description="Most Commented" selector=".tb-comentarios">
<Variable name="most.commented.background1" description="background color1" type="color" default="#fa4242" value="#ee377a"/>
<Variable name="most.commented.background2" description="background color2" type="color" default="#ee6107" value="#fcad37"/>
<Variable name="most.commented.background3" description="background color3" type="color" default="#f0f" value="#f8e000"/>
<Variable name="most.commented.background4" description="background color4" type="color" default="#ff0" value="#c7e93d"/>
<Variable name="most.commented.background5" description="background color5" type="color" default="#0ff" value="#5ebded"/>
</Group>

Paso 4: Todavia en la plantilla buscamos la siguiente linea (Ctrol + F)

]]></b:skin>

Paso 5. Justo encima de ]]></b:skin> pegamos la siguiente linea CSS

 .tblogger-comentarios {
    padding: 3px 10px;
    background: #fff;
    color: #000;
    font-size: 10px;
    float: right;
}

.tb-comentarios ul {
    padding: 0px !important;
    font-family: Century Gothic, sans-serif;
}

.tb-comentarios ul li {
    list-style-type: none;
    padding: 10px;
    color: #555;
    margin-top: -10px;
}

.tb-comentarios ul li a {
    color: #444;
    font-weight: bold;
    text-decoration: none;
    font-size: 11px;
}

.tb-comentarios ul li img {
    float: left;
    margin: 0px 5px 0px 0px;
    width: 60px;
    height: 60px;
}

.tb-comentarios:nth-child(3n+0) {
    background: $(most.commented.background1);
    width: 100%;
}

.tb-comentarios:nth-child(4n+0) {
    background: $(most.commented.background2);
    width: 95%;
}

.tb-comentarios:nth-child(5n+0) {
    background: $(most.commented.background3);
    width: 90%;
}

.tb-comentarios:nth-child(6n+0) {
    background: $(most.commented.background4);
    width: 85%;
}

.tb-comentarios:nth-child(7n+0) {
    background: $(most.commented.background5);
    width: 80%;
}

Paso 6: Guardamos los cambios realizados en nuestra plantilla.

Ahora agregaremos nuestro gadget que mostrara las entradas con mas comentarios

Paso 7: Vamos a Blogger>>Diseño>>Añadir un Gadget>>HTML/Javascript
Paso 8: Dentro de nuestro Gadget HTML/Javascript pegamos el siguiente código Javascript

Agregar Entradas con mas Comentarios Simples

<script type="text/javascript">
function stripTags(s,n)
    {
    return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
}
function mostcommented(feed) {
 var i;
 for (i = 0; i < feed.count ; i++)
 {
var postURL = "'" + feed.value.items[i].link + "'";
var postTitle = feed.value.items[i].title;
var postComments = feed.value.items[i].commentcount;
var postList = '<div class="tb-comentarios"><ul><li style="margin-bottom: 10px"><div class="tblogger-comentarios">' + postComments + " Comentarios" +"</div>" + "<a href="+ postURL + '">' + postTitle + "</a>"  + '</li></ul></div>';
 document.write(postList);
 }
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
 AddUrlHere=http://tutorialesblogger.blogspot.com
&NumberofPosts=5
&_id=2cb5eb603ed55a6264ee1484e5fdd45c
&_callback=mostcommented
&_render=json"
type="text/javascript"></script>
<span style="font-size: 80%; float:left;"><a href="http://tutoriales-blogger.info">Añadir Gadget!!</a></span>

Agregar Entradas con mas Comentarios con Imagen y un Resumen

<script type="text/javascript">
function stripTags(s,n)
    {
    return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
}
function mostcommented(feed) {
 var i;
 for (i = 0; i < feed.count ; i++)
 {
var postURL = "'" + feed.value.items[i].link + "'";
var postTitle = feed.value.items[i].title;
var postComments = feed.value.items[i].commentcount;
var postList = '<div class="tb-comentarios"><ul><li style="margin-bottom: 10px"><div class="tblogger-comentarios">' + postComments + " Comentarios" +"</div>" + "<a href="+ postURL + '">' + postTitle + "</a>"  + '</li></ul></div>';
 document.write(postList);
 }
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
 AddUrlHere=http://tutorialesblogger.blogspot.com
&NumberofPosts=5
&_id=2cb5eb603ed55a6264ee1484e5fdd45c
&_callback=mostcommented
&_render=json"
type="text/javascript"></script>
<span style="font-size: 80%; float:left;"><a href="http://tutoriales-blogger.info">Añadir Gadget!!</a></span>

Solo debes cambiar la URL de htpp//:Tutorialesblogger.blogspot.com por la URL de tu blog
y NumberofPosts=5 por las entradas que quieras mostrar

Entradas relacionadas para Blogger (Tutorial a pedido) Parte n°1

2014-09-07T10:42:00.002-07:00

Hola amigos de Bloggers!! estoy medio abrumado con los tutoriales, hay momentos en los que no se que puedo escribir y no se me viene nada a la cabeza... ahora que me puse a chusmiar mi blog, veo un tutorial a pedido que eh pasado por alto.... y ya que no se me venia una idea a la cabeza, aremos unos
tutoriales sobre migas de pan o Breadcrumbs (Como quieran llamarlo) y comentarios realizados agregándole un poco de CSS... Espero que les guste.

Antes de comenzar veremos una demostración:

La demostración la encontraras en mi blog

Comencemos:

Paso 1: Vamos a Blogger>> Plantilla>> HTML>>

Paso 2: Buscamos la siguiente linea (Ctrol + F)

</head>

Paso 3: Justo por encima de </head> pegamos la siguiente linea

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

Paso 4: Ahora buscamos la siguiente linea (Ctrol + F)

]]></b:skin>

Paso 5: Justo por encima de ]]></b:skin> pegamos el siguiente código CSS

.related-post {
 margin:2em auto 0;
 font-size:13px;
 background:#fff;
 border-radius:4px;
}
.related-post h1{
 font-size:14px;
 margin:0 0 .5em;
 background:#9dcb63;
 color:#fff;
 padding:14px 20px 14px 75px;
 font-weight:normal;
 border-radius:4px 4px 4px 4px
 position:relative;
    font-family:Oswald,Arial, Sans-Serif;
    text-transform:uppercase;
}
.related-post h1:before {
 content: "\f074";
 font-family:fontAwesome;
 font-size:22px;
 font-style: normal;
 background-color:#8db857;
 color:#fff;
 border-radius:4px 0 0 0;
 top:0;
 left:0;
 padding:8px 20px;
 position:absolute;
}
ul.related-post-style-1 {
padding-left:0 !important;
    margin-top:-12px;
}
.related-post-style-1 li {
 list-style:none;
 padding:15px 20px;
 border-top:1px solid #eceef5;
}
.related-post-style-1 li a{
 color:#79798d;
 text-decoration:none;
}
  .related-post-style-1 li a:hover{
 color:#33aea5;
 text-decoration:none;
}
.related-post-style-1 li:before {
 content: "\f08e";
 font-family:fontAwesome;
 color:#c7cbd4;
 font-style: normal;
 top:0;
 left:0;
 margin-right:13px;
}

Paso 6: Todavía en la plantilla buscamos la siguiente linea (Ctrol+ F)

<data:post.body/>

Paso 7: Justo debajo de <data:post.body/> pegamos el siguiente código HTML

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='related-post' id='related-post'/>
  <script type='text/javascript'>
  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop></b:if>];
  var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h1&gt;Entradas Relacionadas:&lt;/h1&gt;&quot;,
      numPosts: 5,
      summaryLength: 370,
      titleLength: &quot;auto&quot;,
      thumbnailSize: 80,
      noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      moreText: &quot;Read More&quot;,
      widgetStyle: 1,
      callBack: function() {}
  };
  </script>
  <script src='http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js' type='text/javascript'/>
</b:if>

Paso 8: Guardamos los cambios relacionados y listo. A disfrutar de nuestras entradas relacionadas

Encabezado con titulo en movimiento con CSS: Parte 2

2014-08-24T07:58:00.001-07:00

OK Amigos continuando con los tutoriales de encabezado con movimiento, en esta segunda parte vamos con algo aun mas atractivo a nuestro blog. Pondremos un titulo en el encabezado con movimiento solo con
CSS. Espero que sea de su agrado..

Parte 1

Encabezado de nubes en movimientos con CSS: Parte 1

Antes de comenzar veremos una demostración:

Demo

Comencemos:

Paso 1: Vamos a Blogger>> Plantilla>> Edicion HTML>>
Paso 2: Buscamos la siguiente linea (Ctrol + F)

]]></b:skin>

Paso 3: Justo por encima de ]]></b:skin> pegamos la siguiente linea CSS

TBlogger {
  cursor: default;
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  bottom: 1;
  height: 0px;
  margin: auto;
  display: block;
  
  -webkit-animation: bounce .3s ease infinite alternate;
  
  font-family: 'Titan One', cursive;
  font-size: 80px;
  color: #FFF;
  text-align: center;
  line-height: 100px;
  text-shadow: 0 1px 0 #CCC,
               0 2px 0 #CCC,
               0 3px 0 #CCC,
               0 4px 0 #CCC,
               0 5px 0 #CCC,
               0 6px 0 transparent,
               0 7px 0 transparent,
               0 8px 0 transparent,
               0 9px 0 transparent,
               0 10px 10px rgba(0, 0, 0, .6);
}
/* ANIMATION */
@-webkit-keyframes bounce {
  100% {
    top: -30px;
    
    text-shadow: 0 1px 0 #CCC,
                 0 2px 0 #CCC,
                 0 3px 0 #CCC,
                 0 4px 0 #CCC,
                 0 5px 0 #CCC,
                 0 6px 0 #CCC,
                 0 7px 0 #CCC,
                 0 8px 0 #CCC,
                 0 9px 0 #CCC,
                 0 30px 30px rgba(0, 0, 0, .3);
  }
}

Recuerden en la primera parte de estos tutoriales buscamos la etiqueta </head> y justo debajo de ella pegamos el código HTML siguiente

<div id="nubes">
<h1>
.. Tutoriales Blogger ..
</h1>
<h3>
Nube de encabezado</h3>
</div>

Paso 4: Elimina lo que se encuentra entre <div id="nubes"> y su etiqueta de cierre </div>
Paso 5: Y agrega la siguiente linea HTML

<TBlogger>Tutoriales Blogger</TBlogger>

Paso 6: Guardamos los cambios realizados en nuestra plantilla

Recuerda que no estas hobligado a seguir la parte N°1 de este tutorial, solo puedes seguir este tutorial

Encabezado de nubes en movimientos con CSS: Parte 1

2014-08-24T06:56:00.000-07:00

Hola amigos!! Hoy volvemos con mas tutoriales para su agrado. En este tutorial veremos con agregar un encabezado con nubes en movimientos, ustedes podrán cambiar la URL de la imagen por la que ustedes
quieran. Ya que podremos agregar un titulo y una descripción a nuestro encabezado en movimiento.

Antes de comenzar veremos una demostracion:

Demo

Comencemos:

Paso 1: Vamos a Blogger>> Plantilla>> Edicion HTML>>
Paso 2: Buscamos la siguiente linea (Ctrol + F)

]]></b:skin>

Paso 3: Justo por encima de ]]></b:skin> pegamos la siguiente linea CSS

#nubes {
background-color:#C0DEED;
background: url(https://abs.twimg.com/images/themes/theme1/bg.png) center top repeat-x;
padding-top:100px;
padding-bottom:10px;
  width: 100%;      Ancho del Banner
  height: 135px;    Alto del Banner
  animation: awan-animasi 10s linear infinite;   Velocidad de 10 segundos
  -ms-animation: awan-animasi 10s linear infinite; Velocidad de 10 segundos
  -moz-animation: awan-animasi 10s linear infinite; velocidad de 10 segundos
  -webkit-animation: awan-animasi 10s linear infinite; velocidad de 10 segundos 
}
@keyframes awan-animasi {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 100% 0;
  };
}

@-webkit-keyframes awan-animasi {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 100% 0;
  };
}

@-ms-keyframes awan-animasi {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  };
}
@-moz-keyframes awan-animasi {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100% 0;
  };
}

Paso 4: Todabia en la plantilla Buscamos la siguiente linea (Ctrol + F)

</head>

Paso 5: Justo por debajo pegamos la siguiente linea HTML.

<div id="nubes">
  <h1>
.. Tutoriales Blogger ..
  </h1>
  <h3>
  Nube de encabezado</h3>
</div>

Paso 6: Guardamos los cambios realizados en nuestra plantilla Recuerda puedes cambiar la URL de la imagen por la que tu desees

Contador de descargas para blogger

2014-07-06T18:03:00.000-07:00

Si amigos, otra ves de regreso con ustedes para continuar aprendiendo con nuestros simples tutoriales.
Ya a pasado algo mas de medio año desde mi ultima entrada. Y como mi ultima entrada, es solo un asta pronto y aquí estamos nuevamente.

Para todos los bloggers que no les he contestados sus comentarios espero que sepan entender el retraso para cada uno de ellos

Basta de tanto habladurías y empecemos con nuestros tutoriales.

Hoy veremos como agregar un contador de descargas para nuestro blog.
Este contador no sera un contador de cuantas descarga tiene nuestro enlace, mas bien sera como los sitios de descargas, una ves dado en descargar tendremos que esperar unos segundos para poder descargar nuestra descarga.

Pero para blogger.

Ok vamos con una demostración

Demo

Comencemos

Paso 1: Vamos a Blogger>>Plantilla>>Edicion HTML
Paso 2: Buscamos la siguiente linea (Ctrol + F)

]]></b:skin>

Paso 3: Justo por encima de ]]></b:skin>

#wrap {margin-top: 50px;text-align: center;width:300px;margin:0 auto;
    height: 220px;
    border:1px solid #d1d5d8;
    background: #f8f8f8;
    background: linear-gradient(top, #fff 0%,#f1f1f1 100%);
    background: -webkit-linear-gradient(top, #fff 0%,#f1f1f1 100%);
    background: -moz-linear-gradient(top, #fff 0%,   #f1f1f1 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#f1f1f1));
    background: -o-linear-gradient(top, #fff 0%,#f1f1f1 100%);
    background: -ms-linear-gradient(top, #fff 0%,#f1f1f1 100%);
    position: relative;border-radius:4px;
}
#TutoBlogger {
position: relative; 
margin: 0 auto; 
width: 250px;height: 20px;  
text-align: left;
font-weight: bold;
}
#TutoBlogger P {
margin: 0; 
width: 250px; 
text-align: center;
}
.tunggu{font: 54px Tahoma, Arial, sans-serif;
color:#d1d5d8;text-shadow:0 -1px 1px #b2b5b8;margin:10px;text-align:center;}
#TutoBlogger #TutorialesBlogger {
position: relative;
font: 54px Tahoma, Arial, sans-serif;
color:#d1d5d8;
text-shadow:0 -1px 1px #b2b5b8;
margin:0 auto;
}
#TutoBlogger #TutorialesBlogger2 {
position: relative; 
width: 0; height: 100%;
overflow: hidden; 
display:none;
}
.BotonBlogger{position:absolute;bottom:0;right:0;left:0;cursor:pointer;padding:0.6em 1.2em 0.6em 1.2em;white-space:nowrap;color:#E8F5FF !important;text-align:center;text-shadow:0 -1px 0 rgba(0,0,0,.2);background-color:#5498C9;border-color:#508EBC;border-bottom-color:#4679A0;-webkit-box-shadow:1px 1px 1px rgba(0,0,0,.2);-moz-box-shadow:1px 1px 1px rgba(0,0,0,.2);box-shadow:1px 1px 1px rgba(0,0,0,.2);text-decoration:none;}
.BotonBlogger:hover{background-color:#468BC1;border-color:#4B81AA #4B81AA #396486;color:white !important;}

Ahora agregaremos nuestro contador de descarga en una entrada para ello seguimos estos simples pasos

Paso 1: Vamos a Blogger>> Nueva entrada>> Redactar en HTML
Paso 2: En HTML pegamos el siguiente codigo HTML y Javascript

<script>
var time = 10000; // 10 segundos
var steps = 50; // 
var step = 1;
function progress() {
var bar = document.getElementById( "TutoBlogger");
var aStep = (bar.offsetWidth -2) /steps;// 2px border removed from width
var x = Math.round( aStep *step);
var outer = document.getElementById( "TutorialesBlogger");
var inner = document.getElementById( "TutorialesBlogger2");


var secs = (( time /1000) -Math.floor( ( step /steps) *10));
inner.style.width = x +"px";
step++;
outer.firstChild.innerHTML = ( secs? secs +" ": "0");
inner.firstChild.innerHTML = outer.firstChild.innerHTML;

if( step > steps) redir();
else setTimeout( "progress();", time /steps);
}
function redir() {
setTimeout("location.href = 'www.tutoriales-blogger.info';",1500);
}
function de5aincom() {
document.getElementById('tutoblog').style.display='none';
}
</script>
<div id='wrap'>
<div style='font: 20px Tahoma, Arial, sans-serif;color:#900;'>Regular
</div><br />
Espere por Favor:
<br>
<br />
<div id='tutoblog'><span class='tunggu'>10</span></div>
<div id='TutoBlogger'>
<div id='TutorialesBlogger'><p></p></div>
<div id='TutorialesBlogger2'><p></p></div>
</div>
<div style='position:absolute;bottom:50px;right:0;left:0;padding:5px;font-size:15px;color:#000;'>
Segundos
</div>
<br>
<div style='width:100%;margin:0 auto;padding:5px;'>
<a class='BotonBlogger' href='javascript:void(0)' onClick='progress();;de5aincom()'>Descarga Gratuita</a>
</div>
</div>

Paso 4: Creamos nuestra entrada y listo a disfrutar

Nota:- Cambia el Valor ROJO por los segundos que quieras que dure
Nota:- Cambia la URL ROJA por la URL donde quieras que sea redirigida

Enlaces tipo Anclaje con efecto deslizante (Tutorial Pedido)

2013-12-25T17:53:00.002-08:00

OK! Bloggers hoy venimos con un tutorial a pedido del usuario LORD DARHAKEXGE

Este usuario me pidió un tutorial sobre enlaces anclas, ahí varios tutoriales por la red sobre esto, aunque este
usuario me pidió que sea desplazable, la mayoría de los tutoriales que se encuentran en Internet son bastantes abruptos, ¿Que quiere decir abruptos? que no se desplazan si no que bajan directamente hacia los enlaces tipo ancla, en este tutorial le daremos un poco mas de delicadeza.

Para los que no saben los Enlaces Anclas se utilizan mayormente en sitios donde su contenido es bastante extensos y para no crear otra pagina para continuar con el contenido y que el usuario no se arte de de andar deslizandoce por la entrada se utiliza los enlaces anclas. O también son utilizados para mostrar un contenido en particular

Antes de comenzar veremos una demostración:

Demo

OK! como vemos ahí dos tipo de anclajes uno para la caja de comentarios y otro en un texto.

Comencemos explicando el anclaje en el texto

Paso 1: Primero que tendremos que crear nuestro enlace

Para ello pegamos la siguiente linea <a href="#Anclaje">Este sera el enlace tipo anclaje </a>
Una ves ello esto pegaremos o redactaremos nuestro texto. Ya redactado nuestro texto buscamos la linea que queramos que se desplace nuestro enlace ancla.

Ejemplo.

......An harum equidem maiestatis nec. <div id="ancla">....At has veri feugait placerat, in semper offendit praesent his. Omnium imp....</div>....at vidisse dolores ocurreret nam.....

Solo debemos de agregar la etiqueta <div id="Anclaje"> y su etiqueta de cierre </div>

En la demo vera mejor lo que quiero decir

Si queremos que se desplace por un sector del blog, como la caja de comentarios buscaremos la div de nuestra caja de comentarios
¿Como hacemos eso?
Fácil
En una entrada damos clic derecho, inspeccionar elementos, clic en la lupa: selector de elementos, y buscamos el elemento a que queramos que sea un enlace anclaje, en mi caso sera la caja de comentarios.

Ejemplo seria:

<a href="#commentsHolder">Agrega un comentario</a>

Eso seria todo ya que la Id de commentHolder se encuentra en nuestra plantilla y no tenemos que agregar

Por ultimo agregaremos el código JQuery que hará que esto se desplace delicadamente

Paso 1: Vamos a Blogger>> Plantilla>> Edicion HTML>>
Paso 2: Buscamos la siguiente linea (Ctrol + F)

</body>

Paso 3: Justo por encima de </body> pegamos el código JQuery

<script type='text/javascript'>
 $(function() {
      $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') &amp;&amp; location.hostname == this.hostname) {

          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
          if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top
            }, 1000);
            return false;
          }
        }
      });
    });
    </script>

Paso 4: Guardamos los cambios realizados y listo a disfrutar

Recuerda que si no entiendes, para algo esta la caja de comentarios

Personalizar efecto cursiva en Blogger

2013-12-25T13:18:00.000-08:00

OK! bloggers otra entrada para poder modificar nuestro panel de entradas en blogger, en el tutorial anterior vimos como modificar el efecto negrita intensiva con css. Ahora veremos como modificar el estilo efecto cursiva con solo CSS.

Antes de comenzar veremos una demostración en vivo:

Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an.
Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores.

Comencemos

Paso 1: Vamos a Blogger>> Plantilla>> Edición HTML>>
Paso 2: Buscamos la siguiente linea (Ctrol + F)

]]></b:skin>

Paso 3: Justo por encima de ]]></b:skin> pegamos el siguiente código CSS

i{
  padding: 1px 4px 2px;
  font-size: 12px;
  font-weight: italic;
  line-height: 11px;
  color: #ffffff;
  vertical-align: italic;
  white-space: nowrap;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #999999;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
i:hover {
  color: #ffffff;
  text-decoration: none;
}
i {
  background-color: #3a87ad;
}

Paso 4: Guardamos los cambios realizados en la plantilla