Esta es una tabla comparativa responsive para blogger en acción ir al ejemplo
Tabla Comparativa Responsive para blogger similar a AAWP
Código para implementar la tabla comparativa responsive en blogspot (solo sirve para 3 productos)
Estilos CSS del plugins Tabla Comparativa Responsive Para Blogger
/*!
* TCR BLOGGER
* by tutorialbloggerorg.blogspot.com
* Insertar los estilos CSS antes de ]]></b:skin>
*/
.input, .label, .tabs{
display: none;}
.normal-table td:nth-child(3) {
background-color: rgba(217,4,4,.2);
box-shadow: inset 0px 0px 1px white;}
.normal-table{
font-family: arial;
font-size: .8rem !important;
vertical-align: middle;
border-collapse: collapse;
width: 100%;
margin:auto;}
.normal-table th{
text-transform: uppercase;
font-size: .7rem !important;
border: .5px solid #ebebeb;
width: 25%;
padding: 0 1rem;
text-align: left;}
.normal-table td{
padding: 10px 10px;
text-align: center;
border: .5px solid #ebebeb;}
.normal-table .tag1,.normal-table .tag2,.normal-table .tag3{
width: 25%;
padding:0 5px !important;
text-align: center;
text-transform: uppercase;
font-size: .7rem !important;
font-weight: bold;
color: white;
height: 2.5rem !important;}
.normal-table .tag1{
background-color: #595959!important;}
.normal-table .tag2{
background-color: #D90404 !important;}
.normal-table .tag3{
background-color: #393939!important;}
.normal-table .prodimg{
margin-bottom: 5px;
max-height: 100px !important;}
.normal-table .filaimagen{
vertical-align: text-top !important;}
.normal-table .nomproduct{
text-transform: uppercase;
font-weight: 700;
margin: 1rem 0;
font-size: .9rem;}
.normal-table .linkprod{
background-color: gold;
font-size: .7rem;
padding: .35rem .7rem;
border:.09rem solid #555555;
border-radius: 5px;
color: black;
text-decoration: none;
box-shadow: inset 0px 0px .5px #555555;}
/* ===================== MOBILE VERSION =====================*/
@media screen and (max-width: 624px){
.normal-table{
display: unset;
display: none;}
.mobile-table{
display: inline-table;}
.mobile-table h4{
font-size: .8rem;
text-transform: uppercase;}
.mobile-table,.mobile-table td{
width: 100%;
font-size: .8rem;
text-align:center;
padding: 0 .8rem;
border-collapse: collapse;
border: .5px solid #b8b8b8;
border-top: none;}
.mobile-table th{
border: .5px solid #b8b8b8;
border-collapse: collapse;
background-color: #D90404;
color: #fff;
text-align: left;
padding: .8rem 1rem;
width: 50%;
font-size: .7rem;
font-weight: 300;
text-transform: uppercase;}
.mobile-table .prodimg2{
max-height: 75px !important;}
.mobile-table .fila-mobile{
padding: 1.5rem 0 0 0;}
.mobile-table .nomproduct2{
margin: .8rem 0 .8rem 0;}
.mobile-table .linkprod2{
background-color: gold;
font-size: .9rem;
font-weight: 700;
padding: .35rem .5rem;
border:.09rem solid #555555;
border-radius: 5px;
color: black;
text-decoration: none;
box-shadow: inset 0px 0px .5px #555555;}
.tabs-table{
position:relative;
display: unset;
font-family: arial;
box-sizing: border-box;}
.tabs {
width: 100%;
display: inline-flex;
flex-wrap: wrap;}
.input {
display: unset;
left: 0%;
top:0%;
position: absolute;
opacity: 0;}
.label {
display: unset;
border: .5px solid #b8b8b8;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
width: 33.1%;
padding: 1rem 0;
text-align: center;
background-color: #fff;
cursor: pointer;
text-transform: uppercase;
font-weight: bold;
font-size: .75rem;
color: #7f7f7f;
box-shadow: inset 0px -3px 8px #B5B5B5;
transition: background 0.1s, color 0.1s;}
.input:focus + .label {
z-index: 1;}
.input:checked + .label {
width: 33.1%;
border-bottom: none;
border-top:.3rem solid #d90404;
background: #fff;
box-shadow: inset 0px 0px 0px #878787;
color: #000;}
.panel {
display: none;
margin: 0 auto;
width: 100%;
background: #fff;
order: 99;}
.input:checked + .label + .panel {
display: block;}}
Código HTML del plugins Tabla Comparativa Responsive Para Blogger. Selecciona la Tabla Comparativa Responsive y coloca donde quieres que aparezca en tu post o articulo
<!-- Plugins TCR Para Blogger | tutorialbloggerorg.blogspot.com -->
<article class="tabs-table"><div class="tabs-table"><table class="normal-table"><tr><td></td><td class="tag1">Mas Comprado</td><td class="tag2">Recomendado</td><td class="tag3">Barato</td></tr><tr><th>Imagen</th><td class="filaimagen"><img src="https://images-na.ssl-images-amazon.com/images/I/61%2BfbdrjtCL._AC_SL1500_.jpg" alt="Apple iPhone 7 (4,7pulg)" class="prodimg"><br><h4 class="nomproduct">Apple iPhone 7 (4,7")</h4></td><td class="filaimagen"><img src="https://images-na.ssl-images-amazon.com/images/I/810Pw0xxs1L._AC_SL1500_.jpg" alt="Samsung S8 (5,8pulg)" class="prodimg"><br><h4 class="nomproduct">Samsung S8 (5,8")</h4></td><td class="filaimagen"><img src="https://images-na.ssl-images-amazon.com/images/I/41N4yknhSTL._AC_.jpg" alt="Motorola Moto G5 Plus (5,2pulg)" class="prodimg"><br><h4 class="nomproduct">Motorola Moto G5 Plus (5,2")</h4></td></tr><tr><th>Pantalla</th><td>Pantalla 4,7 pulg Retina HD</td><td>5,8 pulg dual edge Super AMOLED-Display</td><td>5,2 pulg Corning® Gorilla® Glass</td></tr><tr><th>Camara</th><td>12 Megapixel (F1.8)</td><td>12 Megapixel (Dual Pixel) (F1.7)</td><td>12 Megapixel Camera (F2.0)</td></tr><tr><th>Capacidad de almacenamiento</th><td>128 GB</td><td>64 GB</td><td>32 GB</td></tr><tr><th>Ranura para memoria externa</th><td>NO</td><td>NO</td><td>SI</td></tr><tr><th>Sistema operativo</th><td>iOs</td><td>Android</td><td>Android</td></tr><tr><th>Precio</th><td>desde $549.99</td><td>desde $409.00</td><td>desde $204.99</td></tr><tr><th>Ver precio en Amazon</th><td><a rel="nofollow noreferrer noopener" target="_blank" href="https://www.amazon.es/Apple-iPhone-Smartphone-DC-HSDPA-TD-SCDMA/dp/B01LVXZRG9" class="linkprod">Compra en Amazon</a></td><td><a rel="nofollow noreferrer noopener" target="_blank" href="https://www.amazon.com/-/es/Samsung-desbloqueado-versi%C3%B3n-Versi%C3%B3n-Internacional/dp/B0786PRKBP" class="linkprod">Compra en Amazon</a></td><td><a rel="nofollow noreferrer noopener" target="_blank" href="https://www.amazon.es/Motorola-Moto-Plus-Doble-32GB/dp/B06XDLXN28" class="linkprod">Compra en Amazon</a></td></tr></table></div><div class="tabs"><input class="input" name="tabs" type="radio" id="tab-1" checked="checked"><label class="label" for="tab-1">Mas Comprado</label><div class="panel"><table class="mobile-table"><tr><td colspan="2" class="fila-mobile"><img src="https://images-na.ssl-images-amazon.com/images/I/61%2BfbdrjtCL._AC_SL1500_.jpg" alt="Apple iPhone 7 (4,7pulg)" class="prodimg2"><br><h4 class="nomproduct2">Apple iPhone 7 (4,7")</h4></td></tr><tr><th>Pantalla</th><td>Pantalla 4,7 pulg Retina HD</td></tr><tr><th>Camara</th><td>12 Megapixel (F1.8)</td></tr><tr><th>Capacidad de almacenamiento</th><td>128 GB</td></tr><tr><th>Ranura para memoria externa</th><td>NO</td></tr><tr><th>Sistema operativo</th><td>iOs</td></tr><tr><th>Precio</th><td>desde $549.99</td></tr><tr><th>Ver precio en Amazon</th><td><a rel="nofollow noreferrer noopener" target="_blank" href="https://www.amazon.es/Apple-iPhone-Smartphone-DC-HSDPA-TD-SCDMA/dp/B01LVXZRG9" class="linkprod2">Compra en Amazon</a></td></tr></table></div><input class="input" name="tabs" type="radio" id="tab-2"><label class="label" for="tab-2">Recomendado</label><div class="panel"><table class="mobile-table"><tr><td colspan="2" class="fila-mobile"><img src="https://images-na.ssl-images-amazon.com/images/I/810Pw0xxs1L._AC_SL1500_.jpg" alt="Samsung S8 (5,8pulg)" class="prodimg2"><br><h4 class="nomproduct2">Samsung S8 (5,8")</h4></td></tr><tr><th>Pantalla</th><td>5,8 pulg dual edge Super AMOLED-Display</td></tr><tr><th>Camara</th><td>12 Megapixel (Dual Pixel) (F1.7)</td></tr><tr><th>Capacidad de almacenamiento</th><td>64 GB</td></tr><tr><th>Ranura para memoria externa</th><td>NO</td></tr><tr><th>Sistema operativo</th><td>Android</td></tr><tr><th>Precio</th><td>desde $409.00</td></tr><tr><th>Ver precio en Amazon</th><td><a rel="nofollow noreferrer noopener" target="_blank" href="https://www.amazon.com/-/es/Samsung-desbloqueado-versi%C3%B3n-Versi%C3%B3n-Internacional/dp/B0786PRKBP" class="linkprod2">Compra en Amazon</a></td></tr></table></div><input class="input" name="tabs" type="radio" id="tab-3"><label class="label" for="tab-3">Barato</label><div class="panel"><table class="mobile-table"><tr><td colspan="2" class="fila-mobile"><img src="https://images-na.ssl-images-amazon.com/images/I/41N4yknhSTL._AC_.jpg" alt="Motorola Moto G5 Plus (5,2pulg)" class="prodimg2"><br><h4 class="nomproduct2">Motorola Moto G5 Plus (5,2")</h4></td></tr><tr><th>Pantalla</th><td>5,2 pulg Corning® Gorilla® Glass</td></tr><tr><th>Camara</th><td>12 Megapixel Camera (F2.0)</td></tr><tr><th>Capacidad de almacenamiento</th><td>32 GB</td></tr><tr><th>Ranura para memoria externa</th><td>SI</td></tr><tr><th>Sistema operativo</th><td>Android</td></tr><tr><th>Precio</th><td>desde $204.99</td></tr><tr><th>Ver precio en Amazon</th><td><a rel="nofollow noreferrer noopener" target="_blank" href="https://www.amazon.es/Motorola-Moto-Plus-Doble-32GB/dp/B06XDLXN28" class="linkprod2">Compra en Amazon</a></td></tr></table></div></div></article>Código Html Tablas Comparativas para blogger (AAWP Blogger)
Archivo excel modificable para crear el código html de las tablas comparativas para blogger en un dos por tres. Plantilla tablas responsive Descargar Aquí
Video explicativo por parte del autor, sobre como modificar el archivo excel y obtener el código html que pegaremos en nuestra entrada de blogger Ver en Youtube
¿No logras hacer funcionar este plugins en tu blog?
Cuenta conmigo para implementar este plugins en tu blogger. Si quieres que lo haga yo por ti, porque no tienes tiempo ni ganas de hacerlo, solo debes:
¡Contrátame Aquí!