Como crear un botón de pago con enlace a PayPal bastante sencillo y funcional para las paginas creadas en blogger que venden productos digitales en internet como archivos, libros, música, juegos, aplicaciones, templates, programas, música, etc. Crear un botón de pago Paypal para Blogger en la actualidad es mas sencillo de lo que se imagina.
Para crear un botón de pago paypal en blogger seguiremos los siguientes pasos:
1º Accede a tu cuenta de PayPal: Inicia sesión en tu cuenta de PayPal. Si no tienes una, deberás crear una cuenta paypal.
2º Genera el botón de pago: En el menú principal, busca la opción de "Herramientas" y selecciona "Todos los herramientas". Encuentra y selecciona "Botones de PayPal" en la sección de haz clic en "Enlaces y botones de pago".
3º Configura el botón de pago: Elige el tipo de botón que deseas en este caso elegir enlace de botones de pago. Completa la información necesaria, como el nombre del producto, el precio, la moneda, etc. Puedes personalizar el botón con opciones adicionales, como agregar un un enlace de direccionamiento cuando se termine de completar el pago.
4º Obtener el código: Una vez que hayas configurado el botón, haz clic en actualizar o Crear botón. PayPal se generará un código de enlace para el botón. Copia este enlace url.
5º Inserta el botón en tu blog: Pega el código de enlace url de pago paypal generado en el lugar donde deseas que aparezca el botón de pago del sitio web.
6º Prueba el botón: Es recomendable probar el botón para asegurarte de que funciona correctamente antes de compartirlo con tus clientes. También podemos volver a la edición del botón en paypal y modificarlo ya sea el precio o agregar alguna opción adicional.
Y eso es todo. ¡Ya tienes tu botón de pago con enlace de PayPal listo para usar en tu blog! Este botón se puede implementar en botones en diferentes opciones como imágenes, letras, botones prediseñados, etc.
1º Botones predeterminados
Implementar cualquiera de estos códigos de botones en la sección Vista HTML de la edición de entradas en blogger, reemplazar la palabra ENLACE por en enlace url que deseamos enviar. También podemos renombrar los títulos de cada botón.
<a class="button btn" href="ENLACE" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Botón predeterminado</font></font></a><a class="button btn preview" href="ENLACE" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Avance</font></font></a><a class="button btn download" href="ENLACE" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Descargar</font></font></a><a class="button btn link" href="ENLACE" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Visita un enlace</font></font></a><a class="button btn cart" href="ENLACE" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Comprar ahora</font></font></a><a class="button btn share" href="ENLACE" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Compartir</font></font></a><a class="button btn contact" href="ENLACE" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Contáctenos</font></font></a><a class="button btn info" href="ENLACE" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Más información</font></font></a>2º Botones de colores
Implementar cualquiera de estos códigos de botones de colores en la sección Vista HTML de la edición de entradas en blogger, reemplazar la palabra ENLACE por en enlace url que deseamos enviar. También podemos renombrar los títulos de cada botón.
<a class="button btn color" href="ENLACE" style="background: rgb(22, 160, 133);" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Botón de color</font></font></a><a class="button btn preview color" href="ENLACE" style="background: rgb(39, 174, 96);" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Avance</font></font></a><a class="button btn download color" href="ENLACE" style="background: rgb(41, 128, 185);" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Descargar</font></font></a><a class="button btn link color" href="ENLACE" style="background: rgb(142, 68, 173);" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Visita un enlace</font></font></a><a class="button btn cart color" href="ENLACE" style="background: rgb(243, 156, 18);" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Comprar ahora</font></font></a><a class="button btn share color" href="ENLACE" style="background: rgb(231, 76, 60);" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Compartir</font></font></a><a class="button btn contact color" href="ENLACE" style="background: rgb(241, 196, 15);" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Contáctenos</font></font></a><a class="button btn info color" href="ENLACE" style="background: rgb(52, 73, 94);" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Más información</font></font></a>3º Botón de descarga y Compra
Implementar estos códigos de botones descarga y compra en la sección Vista HTML de la edición de entradas en blogger, reemplazar la palabra ENLACE por en enlace url que deseamos enviar. También podemos cambiar la letras 2 MB y $25 por lo que deseamos renombrar en el boton.
<a class="button btn x2 download" href="ENLACE" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Descargar</font></font><span class="btn-info"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">2 MB</font></font></span></a><a class="button btn x2 cart" href="ENLACE" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Comprar ahora</font></font><span class="btn-info"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">$25</font></font></span></a>Si por algun motivo no funciona estos botones agregar Código de Estilo CSS en la sección HTML de su plantilla Arriba de <style> o ]]></b:skin>
.button{
background-color:#2c3e50;
float:left;
padding:5px 12px;
margin:5px;
color:#fff;
text-align:center;
border:0;
cursor:pointer;
border-radius:3px;
display:block;
text-decoration:none;
font-weight:400;
transition:all .3s ease-out !important;
-webkit-transition:all .3s ease-out !important
}
a.button{
color:#fff
}
.button:hover{
background-color:#27ae60;
color:#fff
}
.button.small{
font-size:12px;
padding:5px 12px
}
.button.medium{
font-size:16px;
padding:6px 15px
}
.button.large{
font-size:18px;
padding:8px 18px
}
.small-button{
width:100%;
overflow:hidden;
clear:both
}
.medium-button{
width:100%;
overflow:hidden;
clear:both
}
.large-button{
width:100%;
overflow:hidden;
clear:both
}
.demo:before{
content:"
\f06e"
;
margin-right:5px;
display:inline-block;
font-family:FontAwesome;
font-style:normal;
font-weight:400;
line-height:normal;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
}
.download:before{
content:"
\f019"
;
margin-right:5px;
display:inline-block;
font-family:FontAwesome;
font-style:normal;
font-weight:400;
line-height:normal;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
}
.buy:before{
content:"
\f09d"
;
margin-right:5px;
display:inline-block;
font-family:FontAwesome;
font-style:normal;
font-weight:400;
line-height:normal;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
}
.visit:before{
content:"
\f14c"
;
margin-right:5px;
display:inline-block;
font-family:FontAwesome;
font-style:normal;
font-weight:400;
line-height:normal;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
}
