Assalamualaikum sahabat >💗>Modetorial<💗<
Apa kabar teman-teman, kali ini saya akan memberikan tutorial bagimana cara membuat daftar harga di halaman blogspot ya, atau biasa dikenala dengan cara membuat "Flat Pricing Table Responsive" di halaman blogspot tentunya. mengapa pakai tabel ini? karena dengan menggunakan tabel ini akan memudahkan pengunjung untuk memilih harga berdasarkan kebutuhanya dan yang pasti agar blog terlihat lebih profesional.

setelah pencarian saya kesana kemari sampai berhari-hari, akhirnya saya nemuin yang cocok nih untuk dipasang diblog dari websitenya dibalikseo.com, Buat pemilik website maaf ya karena gak komen disana, karena websitenya terbuat dari besi baja, Ehhh salah terbuat dari Diskus yang saya gak punya akunya sehingga gak jadi komen... hheheeeee

Baik, langsung saja ya akan saya ajarkan kepada kalian semua.
Pertama-tama siapkan keyakinan bahwa kalian bisa membuat,, hahaa
Oke lanjut:

1. Buka Blogspot kamu dan pergi jauh kepada >>> Edit Template
tanpa diberi tahu langsung klik edit template ya:

2. Kemudian Cari kode "]]></b:skin> atau </style> Menggunakan pencarian CTRL+F biar mudah

3. Masukan skrip dibawah ini tepat Diatas Kode tersebut diatas

*{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;margin:0;padding:0}
.flex-container{display:flex;padding:.5em}
.flex-item{flex:1;margin-right:1em;width:0}
.flex-item:last-child{margin-right:0}
.harga{border:1px solid #eee;list-style-type:none;margin:0;padding:0;transition:0.25s}
.harga:hover{box-shadow:0 8px 12px 0 rgba(0,0,0,0.2);transform:scale(1.025)}
.harga .harga-judul{background-color:#333;color:#fff;font-size:1.5em}
.harga .highlight{background-color:#29b6f6}
.harga li{background-color:#fff;list-style-type:none;border-bottom:1px solid #eee;padding:1.2em;text-align:center}
.harga .wira{background-color:#eee;font-size:1.25em}
button{background-color:#29b6f6;border:none;border-radius:.15em;color:#fff;cursor:pointer;padding:.75em 1.5em;font-size:1em}
@media only screen and (max-width:700px){button{padding:.75em}}
@media only screen and (max-width:600px){.flex-container{flex-wrap:wrap}.flex-item{flex:0 0 100%;margin-bottom:1em;width:100%}.harga:hover{box-shadow:none;transform:none}button{padding:.75em 1.5em}}

4. Kalu udah langsung menuju ke Postingan dan pasti Mode HTML tentunya, karena akan memasukan bahasa skrip nya disana..

5. Nah bahasa skrip nya beneran ada kan?? Dibawah ini ya:

<div class="flex-container">

  <div class="flex-item">

    <ul class="harga">

      <li class="harga-judul">Paket Makan 1</li>

      <li class="wira">Rp. 50.000,-</li>

      <li>Nasi Putih</li>

      <li>Empal Daging</li>

      <li>Lalapan</li>

      <li>Sayur Asem</li>

      <li class="wira">

        <button>Pesan Sekarang</button>

      </li>

    </ul>

  </div>

  <div class="flex-item">

    <ul class="harga">

      <li class="harga-judul highlight">Paket Makan 2</li> 

      <li class="wira">Rp. 25.000,-</li>

      <li>Nasi Uduk</li>

      <li>Telor Balado</li>

      <li>Ayam Goreng</li>

      <li>Kerupuk Udang</li>

      <li class="wira">

        <button>Pesan Sekarang</button>

      </li>

    </ul>

  </div>

  <div class="flex-item">

   <ul class="harga">

      <li class="harga-judul">Paket Makan 3</li>

      <li class="wira">Rp. 30.000,-</li>

      <li>Nasi Putih</li>

      <li>Ayam Goreng</li>

      <li>Tempe Tahu Goreng</li>

      <li>Sayur Lodeh</li>

      <li class="wira">

        <button>Pesan Sekarang</button>

      </li>

    </ul>

  </div>

</div>

Dan Nan ti hasilnya akan seperti ini Cuuy...
  • Paket Makan 1
  • Rp. 50.000,-
  • Nasi Putih
  • Empal Daging
  • Lalapan
  • Sayur Asem
  • Paket Makan 2
  • Rp. 25.000,-
  • Nasi Uduk
  • Telor Balado
  • Ayam Goreng
  • Kerupuk Udang
  • Paket Makan 3
  • Rp. 30.000,-
  • Nasi Putih
  • Ayam Goreng
  • Tempe Tahu Goreng
  • Sayur Lodeh
Dan yang terakhir selesai,,
Mudah banget kan cara nya? Kirain gimanaa gitu caranya.
Okelah kalau gitu silahkan dipraktekan sendiri dan rasakan mudahnya membuat Tabel Penawaran Harga dihalaman blogspot dengan mudah

MUDAH-MUDAHAN BERMANFAAT DAN BISA DI PRAKTEKAN
TERIMAKASIH

Tentang ModeTorial
Modetorial adalah website untuk belajar dan menghasilkan uang dari internet
 
Top