How to Make a Cool Buy Table on Blogger NQnia
This Time I Will Share Tutorials on How to Make Cool Buy Tables on Blogger .. This Table Has an Interesting CSS .. Not Only That This One Table Has Been Used For Various Types of Writing Or Specifications .. Just Go To The Tutorial
Enter Blogger
Templates >> Edit HTML
Enter the CSS below directly above ]]></b:skin> or above </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}
.nqnia_tap{border:1px solid #eee;list-style-type:none;margin:0;padding:0;transition:0.25s}
.nqnia_tap:hover{box-shadow:0 8px 12px 0 rgba(0,0,0,0.2);transform:scale(1.025)}
.nqnia_tap .nqnia_tap-judul{background-color:#333;color:#fff;font-size:1.5em}
.nqnia_tap .highlight{background-color:#29b6f6}
.nqnia_tap li{background-color:#fff;list-style-type:none;border-bottom:1px solid #eee;padding:1.2em;text-align:center}
.nqnia_tap .nqnia_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%}.nqnia_tap:hover{box-shadow:none;transform:none}button{padding:.75em 1.5em}}
Further more, Save Code Below is free to be everywhere, if I am under <body>
<div class='flex-container'>
<div class='flex-item'>
<ul class='nqnia_tap'>
<li class='nqnia_tap-judul'>TEMPLATE WORDPRESS</li>
<li class='nqnia_aaa'>150.000</li>
<li>✔ Responsive</li>
<li>✔ Fast Load</li>
<li>✔ SEO</li>
<li>✔ Fitur Premium</li>
<li class='nqnia_aaa'>
<a href='https://nqnia.blogspot.com/'> <button>Buy</button></a>
</li>
</ul>
</div>
<div class='flex-item'>
<ul class='nqnia_tap'>
<li class='nqnia_tap-judul highlight'>TEMPLATE BLOGGER</li>
<li class='nqnia_aaa'>250.000</li>
<li>✔ Responsive</li>
<li>✔ Fast Load</li>
<li>✔ SEO</li>
<li>✔ Fitur Premium</li>
<li class='nqnia_aaa'>
<a href='https://nqnia.blogspot.com/'> <button>Buy</button></a>
</li>
</ul>
</div>
<div class='flex-item'>
<ul class='nqnia_tap'>
<li class='nqnia_tap-judul'>TEMPLATE PHP</li>
<li class='nqnia_aaa'>350.000</li>
<li>✔ Responsive</li>
<li>✔ Fast Load</li>
<li>✔ SEO</li>
<li>✔ Fitur Premium</li>
<li class='nqnia_aaa'>
<a href='https://nqnia.blogspot.com/'> <button>Buy</button></a>
</li>
</ul>
</div>
</div>
Now then replace the Red code with your link ...
So This Tutorial Is hopefully Helpful
Please Don't Forget Follow me