Ir al contenido principal

Agregar un botón de Cafecito a tu blog de Blogger

Recibí aportes de dinero a través de Cafecito si creás contenido en Blogger

Cafecito es una plataforma de crowdfunding que busca unir a creadores de contenido, ONGs o proyectos con gente que quiera aportar a lo que hacen.

Si tenés un blog en Blogger y te gustaría dar la posibilidad a tus lectores de apoyar tu contenido con pequeños aportes monetarios, entonces esta nueva plataforma argentina te va a ayudar mucho.

Crearte una cuenta en Cafecito es muy sencillo y es importante que vincules tu Mercado Pago para recibir por ahí los pagos. En unos segundos ya podés compartir el link de tu perfil con tus lectores.

También podés incluir un botón como éste en tus publicaciones o incluso insertarlo dentro de un gadget HTML/JavaScript.

Invitame un café en cafecito.app

Buscá el código HTML para insertar tu botón en Perfil 👉 Editar perfil 👉 Botones


Además, tenés varios colores para elegir el que mejor se adapte a la paleta de colores de tu blog.

Ahora, podemos modificar nuestra plantilla para incluir este botón en el pie de todas las publicaciones, justo antes de los comentarios. Así, las personas que lean tu post hasta el final van a tener la posibilidad de colaborar con vos.

En nuestro panel de Blogger, vamos a Temas 👉 Tres puntos al lado de Mi tema 👉 Editar HTML.

Con ayuda de Ctrl+F, buscamos la siguiente línea:

<b:include data='post' name='postBody'/>

Y justo después pegamos lo siguiente:

<div id='cafecito'>
    <h2 class='title'>
        ¿Te gusta el contenido de mi blog? Ayudame a seguir manteniéndolo
    </h2>
    <a href='https://cafecito.app/lucasmaidana' rel='noopener' target='_blank'><img alt='Invitame un café en cafecito.app' src='https://cdn.cafecito.app/imgs/buttons/button_1.png' srcset='https://cdn.cafecito.app/imgs/buttons/button_1.png 1x, https://cdn.cafecito.app/imgs/buttons/button_1_2x.png 2x, https://cdn.cafecito.app/imgs/buttons/button_1_3.75x.png 3.75x'/></a>
    <br/>
    <span style='font-style:italic;font-size:0.8em'>
        Por el momento, sólo podés invitar cafecitos si sos de Argentina.
    </span>
</div>

Te tiene que quedar así:


¡Guardá 💾 los cambios y listo! No te olvides de poner el link del perfil correcto y personalizar los textos a tu gusto.

Por último, podemos aplicar estilos si es necesario.

Justo antes de  ]]></b:skin>  agregá el siguiente CSS:

#cafecito {
    /* Estilos para el contenedor */
    padding: 1em 2em;
    margin:2em 0;
    text-align: center;
}
#cafecito h2 {
    /* Estilos para el título */
}

Ojalá te sirva este tutorial y empieces a recibir muchos cafecitos. ☕💗

Cualquier duda, dejala en los comentarios o buscame en Twitter. 🙋‍♂️

Invitame un café en cafecito.app

Comentarios

  1. Hola Lucas, ¿cómo estás?
    Te hago una pregunta, vos sabés que estoy queriendo agregar el botón tal como lo mencionás y llego hasta buscar el código " "
    pero no me aparece en mi html, sabrías decirme si estpy haciendo algo mal?
    Saludos y gracias por tu info del blog!

    ResponderEliminar
    Respuestas
    1. Hola Lisan. Recién leo tu comentario, disculpá la demora.
      Puede ocurrir que las plantillas difieren entre sí. Yo uso una de la última generación que agregaron desde Blogger, entonces puede ser que la estructura sea diferente para plantillas antiguas.
      Probá buscando esta línea:

      <b:include data='post' name='post'/>

      Ojalá puedas solucionarlo. ¡Gracias por dejar tu duda!

      Eliminar
    2. Muchas gracias Lucas! Me pongo manos a la obra con tu sugerencia.
      ¡Un saludo!

      Eliminar

Publicar un comentario

Más leído

Galería de Imágenes Simple, con Javascript y CSS

Recibí aportes de dinero a través de Cafecito si creás contenido en Blogger

¡Hola! Ya extrañaba escribir en mi blog. Vuelvo con esta genial galería de imágenes que es muy fácil de insertar y es súper simple. Sólo es necesario insertar el HTML, y decorarlo un poco con CSS, veamos: <div id="galeria"> <div id="galeria_imagen"> <img id="imgGaleria" src=" URL-IMAGEN-POR-DEFECTO " /></div> <div id="galeria_miniaturas"> <img class="miniatura" onclick="javascript:document.getElementById('imgGaleria').src=this.src;" src=" URL-IMAGEN-1 " /> <img class="miniatura" onclick="javascript:document.getElementById('imgGaleria').src=this.src;" src=" URL-IMAGEN-2 " /> <img class="miniatura" onclick="javascript:document.getElementById('imgGaleria').src=this.src;" src=" URL-IMAGEN-3 " /> <img class="miniatura" onclick="javascript:document.getEle

Ventana flotante con botón cerrar

Recibí aportes de dinero a través de Cafecito si creás contenido en Blogger

Esto será algo muy útil cuando debas dejar algún mensaje o aviso para tus lectores. Se trata de una ventanita, con apariencia similar a las de Windows, que es flotante y tiene la opción de cerrar con un efecto fade utilizando un botón. Insertarla es muy simple, sólo pega este código en un gadget HTML/Javascript y puedes cambiar algunos valores para personalizar la ventana a tu gusto. <div id='ventana-flotante'>    <a class='cerrar' href='javascript:void(0);' onclick='document.getElementById(&apos;ventana-flotante&apos;).className = &apos;oculto&apos;'>x</a>    <div id='contenedor'>        <div class='contenido'> Aquí va el mensaje.        </div>    </div> </div> <style> #ventana-flotante { width: 360px;   /* Ancho de la ventana */ height: 90px;   /* Alto de la ventana */ background: #ceffad;   /* Color de fondo */ position: fixed; top: 200 px; left: 50%;

Tabs, menú de contenidos con pestañas. Versión CSS

Recibí aportes de dinero a través de Cafecito si creás contenido en Blogger

Seguro conocerás este sistema de pestañas, que nos permite mostrar de manera alternativa distintos contenidos en un mismo espacio. Hay distintas versiones como con jQuery , o utilizando CSS, más específicamente la pseudoclase :target . Aquí veremos como obtener un resultado similar, pero utilizando la pseudoclase :checked. Comencemos con la estructura. <div id="contenedor">     <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />     <label for="tab-1" class="tab-label-1"> Pestaña1 </label>         <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />     <label for="tab-2" class="tab-label-2"> Pestaña2 </label>         <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />    

Efecto biselado con CSS

Recibí aportes de dinero a través de Cafecito si creás contenido en Blogger

Utilizando CSS, podemos crear un efecto de biselado para utilizar en botones, mensajes, contenedores o lo que se les ocurra. Veremos 2 formas de aplicar este efecto, una utilizando bordes y otra implementando la propiedad box-shadow . Con los bordes, encontraremos una forma más tradicional que nos permite que los bordes inferior y lateral derecho sean más oscuros simulando relieve. HTML <div class="biselado"> Texto </div> Hola, soy un cuadro con outset. .biselado { background: #2323ff ;   /* Fondo, debe ser más claro que el borde */ border: 5px outset #4444ff ;   /* Grosor del Borde */   /* Color del Borde */ color: white ;   /* Color del texto */ text-align: center ;   /* Alineación del texto */ text-shadow: -1px -1px rgba(0,0,0,.2); } O podemos lograr el efecto contrario, reemplazando la palabra outset que se encuentra antes del color del borde por inset . Hola, soy un cuadro con inset. Veamos ahora una manera más efectva de simul

Botón circular 3D realista con CSS

Recibí aportes de dinero a través de Cafecito si creás contenido en Blogger

El secreto está en la propiedad box-shadow . Luego border-radius para darle forma y ya lo obtenemos. See the Pen Botón tridimensional realista. by Lucas Maidana ( @LucasMaidana ) on CodePen . El HTML típico de un botón. <a class='boton' href='URL-DEL-BOTON'></a> Y el CSS. .boton {   background: url( http://www.ashleyjt.net/windows/images/Android.png )  /* Url de la imagen */  no-repeat center center, #62BC0F /* Color del botón */ ; background-size: 60%;  /* Tamaño de la imagen */   height: 200px;   /* Alto del botón */   width: 200px;   /* Ancho del botón */   display: table;   border-radius: 100%;   cursor: pointer;     box-shadow: /* Sombras externa */ inset 0 10px 15px rgba(255,255,255,.35), inset 0 -10px 15px rgba(0,0,0,.05), inset 10px 0 15px rgba(0,0,0,.05), inset -10px 0 15px rgba(0,0,0,.05), /* Sombra interna */ 0 5px 20px rgba(0,0,0,.1); } /* Al presionar */ .boton:active {   box-shadow: inset 0 5px 30px rgba(0,0,0,.2);  /* S

Texto con borde

Recibí aportes de dinero a través de Cafecito si creás contenido en Blogger

¿TEXTO CON BORDE? ¿Posible hacerlo sólo con CSS? SI ES POSIBLE NOTA : Esta propiedad no es compatible con todos los navegadores. Se recomienda Chrome o Firefox. Para lograrlo, debemos aplicar la propiedad text-shadow  para lograr muchas sombras del mismo color simulando un sólo borde. A <div class="texto1"> Texto </div> le aplicaremos: .texto1 { color:white;   /* Color del texto */ text-shadow: 1px 1px 0 blue ,                   -1px -1px blue ,                    1px -1px blue ,                   -1px 1px blue ,                    0 1px blue ,                    1px 0 blue ,                   -1px 0 blue ,                    0 -1px blue ; } Puedes cambiar blue por el color que desees. Aquí mas ejemplos. borde .texto2 { color:#AAFFB1; background:#AAFFB1; padding:20px 80px; text-shadow: 1px 1px 0 #2F7235, -1px -1px #2F7235, 1px -1px #2F7235, -1px 1px #2F7235, 0 1px #2F7235, 1px 0 #2F7235, -1px 0 #2F7235, 0 -1px #2F7235; } texto .