How to Make a Cool Buy Table on Blogger NQnia




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>&#10004; Responsive</li>
<li>&#10004; Fast Load</li>
<li>&#10004; SEO</li>
<li>&#10004; 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>&#10004; Responsive</li>
<li>&#10004; Fast Load</li>
<li>&#10004; SEO</li>
<li>&#10004; 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>&#10004; Responsive</li>
<li>&#10004; Fast Load</li>
<li>&#10004; SEO</li>
<li>&#10004; 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


About My name is Nguyen Manh Cuong. I was born in a poor village in Ba Vi district, HA NOI province - windy and sunny land. Currently. https://blog.cydiaguide.app/. Mr Cuong.
Newer Posts Newer Posts Older Posts Older Posts

Comments

Post a Comment