×

Author / Admin / Editor

     Jagoan Redesign    

Blog yang membahas Tutorial Blogger, Games, Template, Tips Adsense, SEO, Web Design dan Teknologi

Iklan Bawah Posting

Cara Membuat Tabel Harga keren di Blogger

Jagoanredesign - Kali ini saya  membagikan sebuah tutorial Cara Membuat Widget Tabel Harga di Blogger, tabel harga ini bisa anda gunakan untuk menampilkan harga barang atau jasa,dengan ini pelanggan mengetahui detail produk atau jasa yang spesifik.

Tabel widget harga seperti ini bisa anda temukan hampir di semua situs yang menyediakan produk atau jasa dan menggunakan tema Landing Page.

Pemasangan widget harga di blog atau website sangat disarankan apabila anda menjual jasa atau produk lainnya secara online. widget harga ini dibuat  menggunakan css dan html, tanpa javascript.

Cara Membuat Tabel Harga keren di Blogger

1. Silahkan Login ke Blogger.
2. Selanjutnya masuk ke menu TEMA > klik Edit HTML.
3. Kemudian cari kode berikut ini ]]></b:skin>  atau </style>dan pastekan kode css dibawah ini tepat DIATAS kode tersebut.

/* Tabel Harga by Jagoann Redesign */
.tabel-section{font-family:'Google Sans',Arial,sans-serif;position:relative;overflow:hidden;display:block;margin:15px 0;line-height:1.7}
.tabel-section .tabel-title{font-size:1.1rem;margin:1rem 0 0;font-weight:700}
.tabel-container{display:flex;max-width:1000px;margin:0 auto}
.tabel-tag{margin:.5rem 0 1rem;font-size:13px;display:inline-block;background:#333;color:#fff;padding:3px 15px;border-radius:20px}
a.jagoan-order-btn{font-size:14px;text-transform:uppercase;text-decoration:none;background:#333;color:#fff;display:inline-block;padding:7px 20px;border-radius:20px;transition:all .3s ease-in-out}
a.jagoan-order-btn:hover{transform:scale(1.1)}
.tabel-jagoan-column{background:#fff;padding:30px 15px;box-sizing:border-box;border-radius:10px;text-align:center;width:33%;margin:10px;box-shadow:0 7px 7px rgba(0,0,0,0.06);border:2px solid #fff;transition:all .3s ease-in-out}
.tabel-jagoan-column ul{list-style:none;padding:10px 0;margin:0;font-size:14px;line-height:2.2}
.tabel-jagoan-column img{width:50px}
.tabel-section i{font-size:3rem}
.jagoan-price{font-weight:700;font-size:22px}
.service-info{opacity:.7}
.jagoan-2-column .tabel-jagoan-column{width:50%}
.tabel-jagoan-column:nth-child(1) .jagoan-price,.tabel-jagoan-column:nth-child(1) i{color:#f87200} /* Change Color Code */
.tabel-jagoan-column:nth-child(2) .jagoan-price,.tabel-jagoan-column:nth-child(2) i{color:#ff5483} /* Change Color Code */
.tabel-jagoan-column:nth-child(3) .jagoan-price,.tabel-jagoan-column:nth-child(3) i{color:#2b73f6} /* Change Color Code */
.tabel-jagoan-column:nth-child(1):hover{border-color:#f87200} /* Change Color Code */
.tabel-jagoan-column:nth-child(2):hover{border-color:#ff5483} /* Change Color Code */
.tabel-jagoan-column:nth-child(3):hover{border-color:#2b73f6} /* Change Color Code */
.tabel-jagoan-column:nth-child(1) .tabel-tag,.tabel-jagoan-column:nth-child(1) a.jagoan-order-btn{background:#f87200} /* Change Color Code */
.tabel-jagoan-column:nth-child(2) .tabel-tag,.tabel-jagoan-column:nth-child(2) a.jagoan-order-btn{background:#ff5483} /* Change Color Code */
.tabel-jagoan-column:nth-child(3) .tabel-tag,.tabel-jagoan-column:nth-child(3) a.jagoan-order-btn{background:#2b73f6} /* Change Color Code */
@media screen and (max-width:580px){
.tabel-jagoan-column,.jagoan-2-column .tabel-jagoan-column{width:auto}
.tabel-container{display:block}
}

4. Selanjutnya anda SIMPAN TEMA

5. Masuk ke menu HALAMAN > Buat HALAMAN BARU, dan masukkan judul halaman tersebut "Harga" atau terserah anda.
6. Masuk ke menu HTML bukan COMPOSE, Pastekan kode dibawah ini di halaman HTML.

<div class="tabel-section">
<div class="tabel-container">
    <div class="tabel-jagoan-column">
        <img src='https://2.bp.blogspot.com/-HWl2PCk1T_g/XqqDylYxjCI/AAAAAAAAONY/h6Yr9fkzWhQ35ob37L9PnxiX7ExTmns1gCLcBGAsYHQ/s50/basic.png' alt='Basic'/>
        <div class="tabel-title">Basic</div>
        <div class="tabel-tag">20% off</div>
        <div class="jagoan-price">Rp 150.000</div>
        <div class="service-info">
        <ul>
        <li>Documentation</li>
        <li>Premium Template</li>
        <li>1 License</li>
        <li>Full Optimization</li>
        <li>1 Month Full Support</li>
        <li>Easy Customize</li>
        <li>-</li>
        </ul>
        </div>
        <a class="jagoan-order-btn" href="#" title="#" target="_blank">Order Now</a>
    </div>
    <div class="tabel-jagoan-column">
        <img src='https://2.bp.blogspot.com/-KVVFsnJlM9E/XqqD0Qo0KDI/AAAAAAAAONg/FIn1BXo4PU8xX12gCac755x9vXDHOfVvQCLcBGAsYHQ/s50/personal.png' alt='Personal'/>
        <div class="tabel-title">Personal</div>
        <div class="tabel-tag">Best Value</div>
        <div class="jagoan-price">Rp 220.000</div>
        <div class="service-info">
        <ul>
        <li>Documentation</li>
        <li>Premium Template</li>
        <li>3 License</li>
        <li>Full Optimization</li>
        <li>3 Month Full Support</li>
        <li>Easy Customize</li>
        <li>-</li>
        </ul>
        </div>
        <a class="jagoan-order-btn" href="#" title="#" target="_blank">Order Now</a>
    </div>
    <div class="tabel-jagoan-column">
        <img src='https://2.bp.blogspot.com/-QoGlZN-t_fQ/XqqDzmE276I/AAAAAAAAONc/AG5ZXRxQo9Q24-LVUtdg_Jf3Za0kZqacACLcBGAsYHQ/s50/developer.png' alt='Developer'/>
        <div class="tabel-title">Developer</div>
        <div class="tabel-tag">For Business</div>
        <div class="jagoan-price">Rp 999.000</div>
        <div class="service-info">
        <ul>
        <li>Documentation</li>
        <li>Premium Template</li>
        <li>Unlimited License</li>
        <li>Full Optimization</li>
        <li>6 Month Full Support</li>
        <li>Easy Customize</li>
        <li>1 Bonus Template</li>
        </ul>
        </div>
        <a class="jagoan-order-btn" href="#" title="#" target="_blank">Order Now</a>
    </div>
</div>
</div>
7. Silahkan anda SIMPAN TEMA dan Selesai.
Nah, itu adalah tutorial Cara Membuat Tabel Harga keren di Blogger semoga totorial bermanfaat bagi anda semua. jika ada yang ingin  anda tanyakan silakan berkomentar saja di bawah.
Previous
Next Post »
avatar
Penulis Blog dan redesigner template blogger.

Related Posts

Komentar
Tutup Komentar

0

Post a Comment

  • Berkomentarlah secara bijaksana dan bertanggung jawab.
  • Tidak diperbolehkan mempromosikan barang atau berjualan.
  • Tulis komentar Anda untuk hal yang masih berhubungan dengan posting pada halaman ini.
  • Dilarang memuat Link Aktif pada kolom komentar
  • Komentar dengan link aktif akan otomatis dihapus.
  • Jika ingin menulis kode silahkan anda parse terlebih dulu (terutama Javascript dan HTML)
  • Centang kotak Beri tahu saya untuk mendapatkan notifikasi via email jika ada yang membalas komentar.
  • Gunakan tag <i> dan diakhiri dengan kode </i> untuk menuliskan kode. Contoh:
    <i>#comments</i>
  • Gunakan tag <em> dan diakhiri dengan kode </em> untuk menuliskan kode yang lebih panjang atau URL. Contoh:
    <em>#comments {margin:0; padding:10px 15px}</em>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel