Membuat Halaman Daftar Harga Flat (Flat Pricing Table) Di Blogger
MQR. Pada postingan kali ini akan membahas Membuat Halaman Daftar Harga Flat di Blogger atau lebih sering dikenal Flat Pricing Table, yang kami dapatkan di beberapa Blog yang membahasnya. Flat Pricing Table ini sangat cocok untuk dipakai untuk Blog Rumah Makan, jadi pelanggan sanggup melihat jenis hidangan dan harga makanannya melalui Flat Pricing Table di Blog resmi rumah makan tersebut.
Cara menciptakan halaman tersebut sangatlah mudah, kami berterima kasih ilmu gres bagi kami dari blogger lainnya yang sanggup kami terapkan, tentunya akan bermanfaat bagi yang membutuhkannya.
Cara membuatnya cukup gampang kok !, yang nantinya sanggup anda modifikasi sesuai dengan kebutuhan.
Masuk Ke Blogger anda
Template > Edit Html
Template > Edit Html
Masukan css di bawah ini sempurna diatas ]]></b:skin> atau di atas </style>
*{box-sizing:border-box;font-family:neo;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}
.abdou_tap{border:1px solid #eee;list-style-type:none;margin:0;padding:0;transition:0.25s}
.abdou_tap:hover{box-shadow:0 8px 12px 0 rgba(0,0,0,0.2);transform:scale(1.025)}
.abdou_tap .abdou_tap-judul{background-color:#333;color:#fff;font-size:1.5em}
.abdou_tap .highlight{background-color:#29b6f6}
.abdou_tap li{background-color:#fff;list-style-type:none;border-bottom:1px solid #eee;padding:1.2em;text-align:center}
.abdou_tap .abdou_aaa{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%}.abdou_tap:hover{box-shadow:none;transform:none}button{padding:.75em 1.5em}}
Selanjutnya Simpan Kode Di bawah ini diposisi mana yang anda inginkan tinggal menyesuaikan saja contoh : pada bawah <body> (ingat menyesuaikan di template anda).
<div class='flex-container'>
<div class='flex-item'>
<ul class='abdou_tap'>
<li class='abdou_tap-judul'>BLOG WEB PERSONAL</li>
<li class='abdou_aaa'>150.000</li>
<li>✔ Responsive</li>
<li>✔ Fast Load</li>
<li>✔ SEO</li>
<li>✔ Fitur Premium</li>
<li class='abdou_aaa'>
<a href=' https://artikelforexidn.blogspot.com'> <button>BELI</button></a>
</li>
</ul>
</div>
<div class='flex-item'>
<ul class='abdou_tap'>
<li class='abdou_tap-judul highlight'> BLOG WEB PORTOFOLIO </li>
<li class='abdou_aaa'>250.000</li>
<li>✔ Responsive</li>
<li>✔ Fast Load</li>
<li>✔ SEO</li>
<li>✔ Fitur Premium</li>
<li class='abdou_aaa'>
<a href=' https://artikelforexidn.blogspot.com'> <button>BELI</button></a>
</li>
</ul>
</div>
<div class='flex-item'>
<ul class='abdou_tap'>
<li class='abdou_tap-judul'> BLOG WEB TOKO ONLINE</li>
<li class='abdou_aaa'>350.000</li>
<li>✔ Responsive</li>
<li>✔ Fast Load</li>
<li>✔ SEO</li>
<li>✔ Fitur Premium</li>
<li class='abdou_aaa'>
<a href=' https://artikelforexidn.blogspot.com'> <button>BELI</button></a>
</li>
</ul>
</div>
</div>
Perhatian :
Simpan Tema dan lihat karenanya pada halaman yang sudah anda buat tadi.