La tabla comparativa se usa para ofrecer una comparación de productos o servicio al usuario, en que se podría beneficiar al adquirir cierto articulo. Es sin duda, una experiencia agradable al cliente cuando esta indeciso al seleccionar algún producto, con esto podría fijarse sobre lo más destacado que ofrece cada producto.
{getToc} $title={Tabla de Contenido}
Análisis de Tabla Comparativa
Blogger
WordPress
HTML
Responsive
Se adapta perfectamente a cualquier plantilla
Si
disponible en cualquier dispositivo
Automatico
Se debe colocar la información del producto manual
Extrae toda la info de amazon
Debes agregar manualmente la descripción
Utiliza API
No
Si
No
Lo bueno
Se puede pude implementar usando la hoja de estilo CSS
Se instala por un Plugin dejando el trabajo facíl
Se integra usando el CSS
Lo malo
Se debe reemplazar todo manualmente y en su versión movil.
Si no tienes un API de amazon no se puede usar.
Se debe reemplazar todo manualmente y en su versión movil.
Tutorial
Existe un paso a paso para integrarlo.
Es intuitivo al instalarlo y facíl de usar.
Disponible un video tutorial
Comprar
Blogger
Responsive
Se adapta perfectamente a cualquier pantalla
Automatico
Se debe colocar la información del producto manual
Utiliza API
No
Lo bueno
Se puede implementar usando la hoja de estilo CSS
Lo malo
Se debe reemplazar todo manualmente y en su versión movíl
Tutorial
Existe un paso a paso para integrarlo.
Comprar
Wordpress
Responsive
Si
Automatico
Extrae toda la info de amazon
Utiliza API
Si
Lo bueno
Se instala por un Plugin dejando el trabajo facíl
Lo malo
Si no tienes un API de amazon no se puede usar
Tutorial
Es intuitivo al instalarlo y facíl de usar
Comprar
HTML
Responsive
Disponible en cualquier dispositivo
Automatico
Debes agregar manualmente la descripción
Utiliza API
No
Lo bueno
Se integra usando el CSS
Lo malo
Se debe reemplazar todo manualmente y en su versión movíl.
Tutorial
Disponible un video titurial
Comprar
Video Explicativo: Agregar Tabla Comparativa
Hoja de Estilo CSS
Para darle forma a la tabla comparativa como el plugin AAWP, para esto debemos colocar el .CSS entre el tag <head> </head>
<link href='https://dl.dropboxusercontent.com/s/0abosmxjy76ojl6/aawp-estilo.css' id='aawp-css' media='all' rel='stylesheet' type='text/css'/>
Copia y Pega el DIV
Solo debes incluir el Div dentro de una entrada para agregar la tabla comparativa. Lo colocas en vista HTML y reemplazas toda la info manualmente hasta completar los artículos que pondrás a la vista.
<div class="aawp">
<div id="aawp-tb-2754">
<!-- Desktop -->
<div class="aawp-tb aawp-tb--desktop aawp-tb--cols-4">
<div class="aawp-tb__row" style="border: 3px black;">
<div class="aawp-tb__head" style="border: 1px black">
</div>
<div class="aawp-tb-product-0 aawp-tb__data aawp-tb__data--type-custom_text aawp-tb__data--highlight" style="background-color: orange;">
<div class="aawp-tb-product-data-custom_text" style="color: white; ">
Blogger
</div>
</div>
<div class="aawp-tb-product-1 aawp-tb__data aawp-tb__data--type-custom_text aawp-tb__data--highlight">
<div class="aawp-tb-product-data-custom_text">
WordPress
</div>
</div>
<div class="aawp-tb-product-2 aawp-tb__data aawp-tb__data--type-custom_text aawp-tb__data--highlight">
<div class="aawp-tb-product-data-custom_text">
HTML
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
</div>
<div class="aawp-tb-product-0 aawp-tb__data aawp-tb__data--type-thumb aawp-tb__data--highlight">
<div class="aawp-tb-product-data-thumb">
<span class="aawp-tb-thumb">
<img src="https://dl.dropboxusercontent.com/s/2efksa3nm5p03kt/Blogger-Logo-500x283.png" alt="Blogger">
</span>
</div>
</div>
<div class="aawp-tb-product-1 aawp-tb__data aawp-tb__data--type-thumb aawp-tb__data--highlight">
<div class="aawp-tb-product-data-thumb">
<span class="aawp-tb-thumb">
<img src="https://dl.dropboxusercontent.com/s/2b7zilevq0p5w24/WordPress-Logotipo-2008-presente-650x366.jpg" alt="Wordpress">
</span>
</div>
</div>
<div class="aawp-tb-product-2 aawp-tb__data aawp-tb__data--type-thumb aawp-tb__data--highlight">
<div class="aawp-tb-product-data-thumb">
<span class="aawp-tb-thumb"><img src="https://dl.dropboxusercontent.com/s/8norj486debox27/352-3529769_html5-course-training-content-details-logo-html-5.png" alt="HTML">
</span>
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Responsive
</div>
<div class="aawp-tb-product-0 aawp-tb__data aawp-tb__data--type-title aawp-tb__data--highlight">
<div class="aawp-tb-product-data-title">Se adapta perfectamente a cualquier plantilla
</div>
</div>
<div class="aawp-tb-product-1 aawp-tb__data aawp-tb__data--type-title aawp-tb__data--highlight">
<div class="aawp-tb-product-data-title">Si
</div>
</div>
<div class="aawp-tb-product-2 aawp-tb__data aawp-tb__data--type-title aawp-tb__data--highlight">
<div class="aawp-tb-product-data-title">disponible en cualquier dispositivo
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Automatico
</div>
<div class="aawp-tb-product-0 aawp-tb__data aawp-tb__data--type-custom_text aawp-tb__data--highlight">
<div class="aawp-tb-product-data-custom_text">
Se debe colocar la información del producto manual
</div>
</div>
<div class="aawp-tb-product-1 aawp-tb__data aawp-tb__data--type-custom_text aawp-tb__data--highlight">
<div class="aawp-tb-product-data-custom_text">
Extrae toda la info de amazon
</div>
</div>
<div class="aawp-tb-product-2 aawp-tb__data aawp-tb__data--type-custom_text aawp-tb__data--highlight">
<div class="aawp-tb-product-data-custom_text">
Debes agregar manualmente la descripción
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Utiliza API
</div>
<div class="aawp-tb-product-0 aawp-tb__data aawp-tb__data--type-price aawp-tb__data--highlight">
<div class="aawp-tb-product-data-price">
No
</div>
</div>
<div class="aawp-tb-product-1 aawp-tb__data aawp-tb__data--type-price aawp-tb__data--highlight">
<div class="aawp-tb-product-data-price">
Si
</div>
</div>
<div class="aawp-tb-product-2 aawp-tb__data aawp-tb__data--type-price aawp-tb__data--highlight">
<div class="aawp-tb-product-data-price">
No
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Lo bueno
</div>
<div class="aawp-tb-product-0 aawp-tb__data aawp-tb__data--type-custom_text aawp-tb__data--highlight">
<div class="aawp-tb-product-data-custom_text">
Se puede pude implementar usando la hoja de estilo CSS
</div>
</div>
<div class="aawp-tb-product-1 aawp-tb__data aawp-tb__data--type-custom_text aawp-tb__data--highlight">
<div class="aawp-tb-product-data-custom_text">
Se instala por un Plugin dejando el trabajo facíl
</div>
</div>
<div class="aawp-tb-product-2 aawp-tb__data aawp-tb__data--type-custom_text aawp-tb__data--highlight">
<div class="aawp-tb-product-data-custom_text">
Se integra usando el CSS
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Lo malo
</div>
<div class="aawp-tb-product-0 aawp-tb__data aawp-tb__data--type-custom_text aawp-tb__data--highlight">
<div class="aawp-tb-product-data-custom_text">
Se debe reemplazar todo manualmente y en su versión movil.
</div>
</div>
<div class="aawp-tb-product-1 aawp-tb__data aawp-tb__data--type-custom_text aawp-tb__data--highlight">
<div class="aawp-tb-product-data-custom_text">
Si no tienes un API de amazon no se puede usar.
</div>
</div>
<div class="aawp-tb-product-2 aawp-tb__data aawp-tb__data--type-custom_text aawp-tb__data--highlight">
<div class="aawp-tb-product-data-custom_text">
Se debe reemplazar todo manualmente y en su versión movil.
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Tutorial
</div>
<div class="aawp-tb-product-0 aawp-tb__data aawp-tb__data--type-custom_text aawp-tb__data--highlight">
<div class="aawp-tb-product-data-custom_text">
Existe un paso a paso para integrarlo.
</div>
</div>
<div class="aawp-tb-product-1 aawp-tb__data aawp-tb__data--type-custom_text aawp-tb__data--highlight">
<div class="aawp-tb-product-data-custom_text">
Es intuitivo al instalarlo y facíl de usar.
</div>
</div>
<div class="aawp-tb-product-2 aawp-tb__data aawp-tb__data--type-custom_text aawp-tb__data--highlight">
<div class="aawp-tb-product-data-custom_text">
Disponible un video tutorial
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Comprar
</div>
<div class="aawp-tb-product-0 aawp-tb__data aawp-tb__data--type-button aawp-tb__data--highlight">
<div class="aawp-tb-product-data-button">
<a class="aawp-button aawp-button--buy aawp-button aawp-button--amazon rounded shadow aawp-button--icon aawp-button--icon-black" href="URL-AFILIADO" title="Comprar en Amazon" target="_blank" rel="nofollow noopener sponsored">Consigue los Files
</a>
</div>
</div>
<div class="aawp-tb-product-1 aawp-tb__data aawp-tb__data--type-button aawp-tb__data--highlight">
<a class="aawp-button aawp-button--buy aawp-button aawp-button--amazon rounded shadow aawp-button--icon aawp-button--icon-black" href="URL-AFILIADO" title="Comprar en Amazon" target="_blank" rel="nofollow noopener sponsored">Comprar Web Oficial
</a>
</div>
<div class="aawp-tb-product-2 aawp-tb__data aawp-tb__data--type-button aawp-tb__data--highlight">
<div class="aawp-tb-product-data-button">
<a class="aawp-button aawp-button--buy aawp-button aawp-button--amazon rounded shadow aawp-button--icon aawp-button--icon-black" href="URL-AFILIADO" title="Comprar en Amazon" target="_blank" rel="nofollow noopener sponsored">Consigue los files
</a>
</div>
</div>
</div>
</div>
<!-- Mobile -->
<div class="aawp-tb aawp-tb--mobile">
<div class="aawp-tb__product aawp-tb-product-0 aawp-tb__product--highlight">
<div class="aawp-tb__row">
<div class="aawp-tb__head">
</div>
<div class="aawp-tb__data aawp-tb__data--type-custom_text">
<div class="aawp-tb-product-data-custom_text">
Blogger
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
</div>
<div class="aawp-tb__data aawp-tb__data--type-thumb">
<div class="aawp-tb-product-data-thumb">
<span class="aawp-tb-thumb">
<img src="https://dl.dropboxusercontent.com/s/2efksa3nm5p03kt/Blogger-Logo-500x283.png" alt="Blogger">
</span>
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Responsive
</div>
<div class="aawp-tb__data aawp-tb__data--type-title">
<div class="aawp-tb-product-data-title">
Se adapta perfectamente a cualquier pantalla
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Automatico
</div>
<div class="aawp-tb__data aawp-tb__data--type-custom_text">
<div class="aawp-tb-product-data-custom_text">
Se debe colocar la información del producto manual
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Utiliza API
</div>
<div class="aawp-tb__data aawp-tb__data--type-price">
<div class="aawp-tb-product-data-price">
No
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Lo bueno
</div>
<div class="aawp-tb__data aawp-tb__data--type-custom_text">
<div class="aawp-tb-product-data-custom_text">
Se puede implementar usando la hoja de estilo CSS
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Lo malo
</div>
<div class="aawp-tb__data aawp-tb__data--type-custom_text">
<div class="aawp-tb-product-data-custom_text">
Se debe reemplazar todo manualmente y en su versión movíl
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Tutorial
</div>
<div class="aawp-tb__data aawp-tb__data--type-custom_text">
<div class="aawp-tb-product-data-custom_text">
Existe un paso a paso para integrarlo.
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Comprar
</div>
<div class="aawp-tb__data aawp-tb__data--type-button">
<div class="aawp-tb-product-data-button">
<a class="aawp-button aawp-button--buy aawp-button aawp-button--amazon rounded shadow aawp-button--icon aawp-button--icon-black" href="URL-AFILIADO" title="Comprar en Amazon" target="_blank" rel="nofollow noopener sponsored">
Consigue los files
</a>
</div>
</div>
</div>
</div>
<div class="aawp-tb__product aawp-tb-product-1 aawp-tb__product--highlight">
<div class="aawp-tb__row">
<div class="aawp-tb__head">
</div>
<div class="aawp-tb__data aawp-tb__data--type-custom_text">
<div class="aawp-tb-product-data-custom_text">
Wordpress
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
</div>
<div class="aawp-tb__data aawp-tb__data--type-thumb">
<div class="aawp-tb-product-data-thumb">
<span class="aawp-tb-thumb">
<img src="https://dl.dropboxusercontent.com/s/2b7zilevq0p5w24/WordPress-Logotipo-2008-presente-650x366.jpg" alt="WordPress">
</span>
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Responsive
</div>
<div class="aawp-tb__data aawp-tb__data--type-title">
<div class="aawp-tb-product-data-title">
Si
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Automatico
</div>
<div class="aawp-tb__data aawp-tb__data--type-custom_text">
<div class="aawp-tb-product-data-custom_text">
Extrae toda la info de amazon
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Utiliza API
</div>
<div class="aawp-tb__data aawp-tb__data--type-price">
<div class="aawp-tb-product-data-price">
Si
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Lo bueno
</div>
<div class="aawp-tb__data aawp-tb__data--type-custom_text">
<div class="aawp-tb-product-data-custom_text">
Se instala por un Plugin dejando el trabajo facíl
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Lo malo
</div>
<div class="aawp-tb__data aawp-tb__data--type-custom_text">
<div class="aawp-tb-product-data-custom_text">
Si no tienes un API de amazon no se puede usar
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Tutorial
</div>
<div class="aawp-tb__data aawp-tb__data--type-custom_text">
<div class="aawp-tb-product-data-custom_text">
Es intuitivo al instalarlo y facíl de usar
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Comprar
</div>
<div class="aawp-tb__data aawp-tb__data--type-button">
<div class="aawp-tb-product-data-button">
<a class="aawp-button aawp-button--buy aawp-button aawp-button--amazon rounded shadow aawp-button--icon aawp-button--icon-black" href="https://getaawp.com/" title="Comprar" target="_blank" rel="nofollow noopener sponsored">
Comprar Web Oficial
</a>
</div>
</div>
</div>
</div>
<div class="aawp-tb__product aawp-tb-product-2 aawp-tb__product--highlight">
<div class="aawp-tb__row">
<div class="aawp-tb__head">
</div>
<div class="aawp-tb__data aawp-tb__data--type-custom_text">
<div class="aawp-tb-product-data-custom_text">
HTML
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
</div>
<div class="aawp-tb__data aawp-tb__data--type-thumb">
<div class="aawp-tb-product-data-thumb">
<span class="aawp-tb-thumb">
<img src="https://dl.dropboxusercontent.com/s/8norj486debox27/352-3529769_html5-course-training-content-details-logo-html-5.png" alt="HTML">
</span>
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Responsive
</div>
<div class="aawp-tb__data aawp-tb__data--type-title">
<div class="aawp-tb-product-data-title">
Disponible en cualquier dispositivo
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Automatico
</div>
<div class="aawp-tb__data aawp-tb__data--type-custom_text">
<div class="aawp-tb-product-data-custom_text">
Debes agregar manualmente la descripción
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Utiliza API
</div>
<div class="aawp-tb__data aawp-tb__data--type-price">
<div class="aawp-tb-product-data-price">
No
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Lo bueno
</div>
<div class="aawp-tb__data aawp-tb__data--type-custom_text">
<div class="aawp-tb-product-data-custom_text">
Se integra usando el CSS
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Lo malo
</div>
<div class="aawp-tb__data aawp-tb__data--type-custom_text">
<div class="aawp-tb-product-data-custom_text">
Se debe reemplazar todo manualmente y en su versión movíl.
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Tutorial
</div>
<div class="aawp-tb__data aawp-tb__data--type-custom_text">
<div class="aawp-tb-product-data-custom_text">
Disponible un video titurial
</div>
</div>
</div>
<div class="aawp-tb__row">
<div class="aawp-tb__head">
Comprar
</div>
<div class="aawp-tb__data aawp-tb__data--type-button">
<div class="aawp-tb-product-data-button">
<a class="aawp-button aawp-button--buy aawp-button aawp-button--amazon rounded shadow aawp-button--icon aawp-button--icon-black" href="URL-AFILIADO" title="Comprar en Amazon" target="_blank" rel="nofollow noopener sponsored">
Consigue los files
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Ventajas de una tabla comparativa
Si colocas una comparativa de productos puedes ofrecer lo más destacado de cada articulo, por ello, cuando se agrega esta tabla comparativa tiene una finalidad de mostrarle al usuario lo más revelante de dicho producto.
De otra forma, tiene otro proposito de usar una tabla comparativa, es de aumentar las posibilidades que el usuario haga clic en el boton de compra y llevarte la comision del producto afiliado.
Claro, que tiene su punto a favor que una tabla comparativa debe ser responsive, que se adapte perfectamente a cualquier pantalla sin perder presencia. Con esta versión, consigues una tabla que se ajuste a todos los tamaños de pantalla.
Etiqueta
tutoriales-blogger