Cara Menambahkan Tabel Harga di Blogger

Cara Mudah Menambahkan Tabel Harga di Blogger

Halo teman-teman! Selamat datang di blog Mahasiswa Mager. Jadi dalam artikel ini kita akan membahas tentang cara menambahkan Tabel Harga di Blogger. Bagaimana kita bisa menggunakannya? Jadi kita akan tahu semua hal ini di artikel ini. Jadi tetaplah dalam artikel ini dan ketahui lebih detail.

Apa itu Tabel Harga?

Jadi, jika Anda tidak tahu Harga ➤ Tabel Apa itu? Jadi izinkan saya memberi tahu Anda bahwa Tabel Harga adalah satu arah. Dengan bantuan yang kami dapat menulis semua jenis harga di tabel.

Jika Anda memiliki situs web apa pun yang menjual barang serupa. Anda pasti telah melihat bahwa bersama dengan daftar barang, Anda juga bisa melihat harganya.

Saat ini Tabel Harga ini sangat populer. Dan hampir semua orang menggunakannya di situs web mereka.

Tabel Harga di Blogger

Sekarang izinkan saya memberi tahu mengapa saya memberi tahu Tabel Harga ini di Blogger. Itulah sebabnya saya telah mengatakan bahwa fitur Tabel Harga ini hanya tersedia dan hanya di WordPress. Anda juga mendapatkan banyak plugin semacam itu di WordPress. Dengan bantuan yang Anda dapat dengan mudah membuat Tabel Harga.

Tetapi jika blog atau situs web Anda ➤ Blogger Aktif, Anda tidak dapat menggunakan plugin apa pun di Blogger. Tetapi izinkan saya memberi tahu Anda bahwa hari ini saya dapat dengan mudah menambahkan Tabel Harga ini ke blog Blogger saya melalui beberapa Pengodean.

Tambahkan Tabel Harga di Blogger Langkah Demi Langkah

Jadi sekarang saya sudah menjelaskan semua langkah di bawah ini. Anda harus mengikuti semua langkah ini dengan cara yang persis sama seperti yang disebutkan.

Langkah 1 – Anda harus masuk ke Dasbor Blogger.

Langkah 2 – Sekarang Anda harus pergi ke tema di bawah ini dan klik Edit HTML.

Langkah 3 – Sekarang Anda dengan ctrl + f Tekan ]]> </ b: skin> lalu enter

Langkah 4 – Di bawah ini Anda akan menemukan beberapa kode CSS, salin]]> </ b: skin> rekatkan dan klik Simpan.

.table {width:30%;margin:0 10px;background:#fff;text-align:center;float:left;}.table.standard {background:rgba(0,245,255,0.1);}.table h2 {color:#fff;margin:0;padding:5px 0;text-align:center;font:Bold 25px armata;cursor:pointer;z-index:999;position:relative;}.table.economic h2 {background:#4593e3;}.table.standard h2 {background:#16a085;}.table.premium h2 {background:#cd4436;}.table .price {font:15px Armata;color:#fff;padding:10px 25px;display:inline-block;border-radius:0px 0px 100% 100%;cursor:pointer;}.table.economic .price {background:#4593e3;}.table.standard .price {background:#16a085;}.table.premium .price {background:#cd4436;}.table:hover .price {border-radius:0;}.table ul {margin:9px 0;padding:0px;}.table ul li {list-style:none;font:15px Armata;padding:10px 5px;border:1px solid rgba(238,238,238,0.29);margin:2px 10px;}.table.economic ul li:hover {border-color:#4593e3;}.table.premium ul li:hover {border-color:#cd4436;}.table.standard ul li:hover {border-color:#16a085;}.table a {text-decoration:none;display:inline-block;overflow:hidden;color:#000;margin:1px 0 10px;text-transform:uppercase;}.table a:hover {color:#fff;}.table .button span {position:relative;display:inline-block;-webkit-transition:-webkit-transform 0.3s;-moz-transition:-moz-transform 0.3s;transition:transform 0.3s;padding:5px 35px;font:Bold 20px Armata;}.table .button span::before {position:absolute;top:100%;content:attr(data-hover);font-weight:700;-webkit-transform:translate3d(0,5px,10px);-moz-transform:translate3d(0,5px,10px):transform:translate3d(0,5px,10px):}.table .button:hover span,.table .button:focus span {-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);transform:translateY(-100%);}.table.economic a {border: 2px solid #4593e3;}.table.economic a:hover {background: #4593e3;}.table.standard a {border:2px solid #16a085;}.table.standard a:hover {background:#16a085;}.table.premium a {border:2px solid #cd4436;}.table.premium a:hover {background:#cd4436;}

Langkah 5 – Sekarang di bawah ini Anda akan mendapatkan kode HTML dari Tabel Harga. Salin itu.

<div class="table economic">
<h2>Economic</h2>
<span class="price">$10/year</span>
<ul>
  <li>20 GB space</li>
  <li>Unlimited Bandwidth</li>
  <li>15 Email Accounts</li>
  <li>10 MySQL Database</li>
  <li>24&#215;7 Online Support</li>
  <li>100% Money Back Guarantee</li>
</ul>
<a class="button" href="#"><span data-hover="Buy">Buy</span></a>
</div>
<div class="table standard">
<h2>Standard</h2>
<span class="price">$45/year</span>
<ul>
  <li>100 GB space</li>
  <li>Unlimited Bandwidth</li>
  <li>50 Email Accounts</li>
  <li>35 MySQL Database</li>
  <li>24&#215;7 Online Support</li>
  <li>100% Money Back Guarantee</li>
</ul>
<a class="button" href="#"><span data-hover="Buy">Buy</span></a>
</div>
<div class="table premium">
<h2>Premium</h2>
<span class="price">$99/year</span>
<ul>
  <li>Unlimited space</li>
  <li>Unlimited Bandwidth</li>
  <li>Unlimited Email Accounts</li>
  <li>Unlimited&nbsp;MySQL Database</li>
  <li>24&#215;7 Online Support</li>
  <li>100% Money Back Guarantee</li>
</ul>
<a class="button" href="#"><span data-hover="Buy">Buy</span></a>
</div>

Langkah 6 – Sekarang Anda harus menempelkan kode ini. Di mana dalam pos Anda ingin menampilkan Tabel Harga ini.

Langkah 7 – Sekarang selamatkan Anda, semua pekerjaan Anda selesai.

Jadi Anda dapat dengan mudah menambahkan Tabel Harga ke blog blogger Anda seperti ini.

Dan Hasilnya Seperti ini:

Kesimpulan – Dan bagaimana Anda menyukai artikel ini dari Tabel Tambahkan Harga di Blogger. Jadi, Anda harus memberi tahu dengan berkomentar di kotak komentar di bawah ini. Dan juga ingin memberikan semacam saran. Jadi, Anda dapat membagikan pendapat Anda dengan kami di kotak komentar di bawah ini.