Membuat Tabel Daftar Harga Responsive di Blog

Ok Halo gan! Udah lama blog ini gak aktif. Nih gua bagiin tutorial dari gua Cara Membuat Tabel Harga Responsive di Blog baiklah simak tutorialnya baik baik!

DEMO

✔ Membuat Tabel Daftar Harga Responsive di Blog

1. Buka Blogger DISINI
2. Masuk ke Template >> Edit HTML
3. Taruh Kode Dibawah ini Diatas ]]></b:skin>

* { margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
ul { list-style-type:none; }
a { color:#e95846; text-decoration:none; }
.pricing-table-title { text-transform:uppercase; font-weight:700; font-size:2.6em; color:#2db3cb; margin-top:15px; text-align:left; margin-bottom:25px; text-shadow:0 1px 1px rgba(0,0,0,0.4); }
.pricing-table-title a { font-size:0.6em; }
.clearfix:after { content:''; display:block; height:0; width:0; clear:both; }
.pricing-wrapper { width:960px; margin:40px auto 0; }
.pricing-table { margin:0 10px; text-align:center; width:300px; float:left; -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4); box-shadow:0 0 15px rgba(0,0,0,0.4); -webkit-transition:all 0.25s ease; -o-transition:all 0.25s ease; transition:all 0.25s ease; }
.pricing-table:hover { -webkit-transform:scale(1.06); -ms-transform:scale(1.06); -o-transform:scale(1.06); transform:scale(1.06); }
.pricing-title { color:#FFF; background:#e95846; padding:20px 0; font-size:2em; text-transform:uppercase; text-shadow:0 1px 1px rgba(0,0,0,0.4); }
.pricing-table.recommended .pricing-title { background:#2db3cb; }
.pricing-table.recommended .pricing-action { background:#2db3cb; }
.pricing-table .price { background:#403e3d; font-size:3.4em; font-weight:700; padding:20px 0; text-shadow:0 1px 1px rgba(0,0,0,0.4); }
.pricing-table .price sup { font-size:0.4em; position:relative; left:5px; }
.table-list { background:#FFF; color:#403d3a; }
.table-list li { font-size:1.4em; font-weight:700; padding:12px 8px; }
.table-list li:before { content:"f00c"; font-family:'FontAwesome'; color:#3fab91; display:inline-block; position:relative; right:5px; font-size:16px; }
.table-list li span { font-weight:400; }
.table-list li span.unlimited { color:#FFF; background:#e95846; font-size:0.9em; padding:5px 7px; display:inline-block; -webkit-border-radius:38px; -moz-border-radius:38px; border-radius:38px; }
.table-list li:nth-child(2n) { background:#F0F0F0; }
.table-buy { background:#FFF; padding:15px; text-align:left; overflow:hidden; }
.table-buy p { float:left; color:#37353a; font-weight:700; font-size:2.4em; }
.table-buy p sup { font-size:0.5em; position:relative; left:5px; }
.table-buy .pricing-action { float:right; color:#FFF; background:#e95846; padding:10px 16px; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; font-weight:700; font-size:1.4em; text-shadow:0 1px 1px rgba(0,0,0,0.4); -webkit-transition:all 0.25s ease; -o-transition:all 0.25s ease; transition:all 0.25s ease; }
.table-buy .pricing-action:hover { background:#cf4f3e; }
.recommended .table-buy .pricing-action:hover { background:#228799; }
@media only screen and (min-width:768px) and (max-width:959px) {
.pricing-wrapper { width:768px; } .pricing-table { width:236px; } .table-list li { font-size:1.3em; }
}
@media only screen and (max-width:767px) {
.pricing-wrapper { width:420px; } .pricing-table { display:block; float:none; margin:0 0 20px 0; width:100%; }
}
@media only screen and (max-width:479px) {
.pricing-wrapper { width:300px; }
}

 4. Masuk ke Pos/Laman >> Entri Baru/Laman Baru Lalu Pilih mode HTML Bukan Compose lalu masukkan kode dibawah ini

<div class="pricing-wrapper clearfix">
<h1 class="pricing-table-title">TABEL DAFTAR HARGA <a href="http://www.allgames-entals,blogspot.com" target="_blank" >Allgames Entalsewu</a></h1>
<div class="pricing-table">
<h3 class="pricing-title">Basic</h3>
<div class="price">$60^{/ month}</div>
<ul class="table-list">
<li>10 GB <span>De almacenamiento</span></li>
<li>1 Dominio <span>incluido</span></li>
<li>25 GB <span>De transferencia mensual</span></li>
<li>Base de datos <span class="unlimited">unlimited</span></li>
<li>Cuentas de correo <span class="unlimited">unlimited</span></li>
<li>CPanel <span>incluido</span></li>
</ul>
<div class="table-buy">
<p>$60^{/ mes}</p>
<a href="http://www.allgames-entals.blogspot.com/" target="_blank" class="pricing-action">Get Started</a>
</div>
</div>
<div class="pricing-table recommended">
<h3 class="pricing-title">Premium</h3>
<div class="price">$100^{/ month}</div>
<ul class="table-list">
<li>35 GB <span>De almacenamiento</span></li>
<li>5 Dominios <span>incluidos</span></li>
<li>100 GB <span>De transferencia mensual</span></li>
<li>Base de datos <span class="unlimited">unlimited</span></li>
<li>Cuentas de correo <span class="unlimited">unlimited</span></li>
<li>CPanel <span>incluido</span></li>
</ul>
<div class="table-buy">
<p>$100^{/ mes}</p>
<a href="http://www.allgames-entals.blogspot.com/" target="_blank" class="pricing-action">Get Started</a>
</div>
</div>
<div class="pricing-table">
<h3 class="pricing-title">Ultimate</h3>
<div class="price">$200^{/ month}</div>
<!-- Lista de Caracteristicas / Propiedades -->
<ul class="table-list">
<li>100 GB <span>De almacenamiento</span></li>
<li>8 Dominios <span>incluidos</span></li>
<li>200 GB <span>De transferencia mensual</span></li>
<li>Base de datos <span class="unlimited">unlimited</span></li>
<li>Cuentas de correo <span class="unlimited">unlimited</span></li>
<li>CPanel <span>incluido</span></li>
</ul>
<div class="table-buy">
<p>$200^{/ mes}</p>
<a href="http://www.allgames-entals.blogspot.com/" target="_blank" class="pricing-action">Get Started</a>
</div>
</div>
</div>

Note : Ganti Tulisan dengan sesuka hati anda!

Sekian tutorial dari saya jangan lupa untuk berlangganan lewat email 

Tulis Email kamu dibawah:

Dibuat Oleh ALLGAMES ENTALSEWU V2

Tweet