Cara Membuat Tabel Harga Responsive di Blogger Dengan Mudah

Pada kesempatan kali saya akan berbagi tutorial bagaimana Cara  Membuat Tabel Harga Responsive di Blogger dengan mudah, saat ini sangat banyak orang yang menggunakan website untuk membuat suatu toko online untuk menjualkan barang-barang. Tapi pada kesempatan kali ini saya akan membuatkan tutorial bagaimana cara membuat tabel harga di blogger/blogspot dikarenakan blogger merupakan pilihan gratis dan tidak kalah dalam urusan SEO.


Tabel yang saya bagikan kali ini hampir mirip dengan tabel yang sering kamu jumpai di web toko online, dan tabel ini sangat cocok untuk kamu penjual Paket hosting dan lainnya. Tabel yang sangat responsive ini cocok dilihat dari semua device, baik dari computer maupun handphone.


Cara  Membuat Tabel Harga Responsive di Blogger Dengan Mudah

1. Silahkan kamu login ke Blogger.com dengan menggunakan Gmail kamu.


2. Masuk ke menu TEMA > Edit HTML.
3. Silahkan cari kode ]]></b:skin> atau </style> (dengan menggunakan CTRL + F untuk mempermudah)
4. Masukkan kode dibawah ini tepat diatas kode tersebut, kode tersebut untuk menentukan style dari tabel yang Anda pasang Nanti di blog Anda.

* { 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; }
}

5. Selanjutnya silahkan copy kode HTML berikut ini, dan pasang sesuai selera kamu dan silahkan ganti sesuai selera kamu.

 <div class="pricing-wrapper clearfix">
  <h1 class="pricing-table-title">TABEL DAFTAR HARGA <a href="http://www.seocips.com" target="_blank" >Seocips.com</a></h1>
  <div class="pricing-table">
   <h3 class="pricing-title">Basic</h3>
   <div class="price">$60<sup>/ month</sup></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<sup>/ mes</sup></p>
<a href="http://www.seocips.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<sup>/ month</sup></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<sup>/ mes</sup></p>
    <a href="http://www.seocips.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<sup>/ month</sup></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<sup>/ mes</sup></p>
    <a href="http://www.seocips.com/" target="_blank" class="pricing-action">Get Started</a>
   </div>
  </div>
 </div>

6. Selanjutnya klik SIMPAN dan Selesai.

Gimana mudah bukan ? Cara Membuat Tabel Harga Responsive di Blogger Dengan Mudah untuk kamu yang error dalam kode / segala hal silahkan koment di kolom komentar dibawah ini atau kamu bisa kontak saya di Halaman kontak.
Tampilkan Komentar
Sembunyikan Komentar

0 Response to "Cara Membuat Tabel Harga Responsive di Blogger Dengan Mudah"

Post a Comment

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar semua.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel