Post Code for price compression Affiliate marketing website

price compression

উপরের ছবির মতো বিভিন্ন মার্কেট প্লেসের সাথে কোনো একটি পন্যের দাম তুলনা করার জন্য আপনাকে অবশ্য Amazen Blogger Template ব্যবহার করতে হবে এবং নিচের কোড গুলো আপনার পোষ্টে ব্যবহার করতে হবে। কীভাবে ব্যবহার তা নিচের ভিডিওতে বলা আছে। 

Post code:

{getProduct} $price={690$} $sale={30%off} $button={Go} $style={1}

<div class="full">

<div class="columns">

  <ul class="price">

    <li class="header">Amazon</li>

    <li class="grey">$ 9.99 / year</li>

    <li class="grey"><a class="button" href="#">Buy</a></li>

  </ul>

</div>

<div class="columns">

  <ul class="price">

    <li class="header" style="background-color: #04aa6d;">Ebay</li>

    <li class="grey">$ 24.99 / year</li>

    <li class="grey"><a class="button" href="#">Buy</a></li>

  </ul>

</div>

<div class="columns">

  <ul class="price">

    <li class="header">Flipcart</li>

    <li class="grey">$ 49.99 / year</li>

    <li class="grey"><a class="button" href="#">Buy</a></li>

  </ul>

</div>

  <div class="columns">

  <ul class="price">

    <li class="header">Ali Express</li>

    <li class="grey">$ 49.99 / year</li>

    <li class="grey"><a class="button" href="#">Buy</a></li>

  </ul>

</div>

  <div class="columns">

  <ul class="price">

    <li class="header">Daraz</li>

    <li class="grey">$ 49.99 / year</li>

    <li class="grey"><a class="button" href="#">Buy</a></li>

  </ul>

</div>

    <div class="columns">

  <ul class="price">

    <li class="header">Daraz</li>

    <li class="grey">$ 49.99 / year</li>

    <li class="grey"><a class="button" href="#">Buy</a></li>

  </ul>

</div>

</div>

<style>

* {

  box-sizing: border-box;

}

.columns {

  float: left;

  width: 33.33%;

  padding: 3px;

  text-align:center;

  border-radius:3px;

}

.price {

  list-style-type: none;

  border: 1px solid #eee;

  margin: 0;

  padding: 0;

  -webkit-transition: 0.3s;

  transition: 0.3s;

}

.price:hover {

  box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)

}

.price .header {

  background-color: #111;

  color: white;

  font-size: 10px;

  border-radius:3px;

}

.price li {

  border-bottom: 1px solid #eee;

  padding: 5px;

  text-align: center;

  list-style-type: none;

  margin: 0;

  padding: 0;

}

.price .grey {

  background-color: #eee;

  font-size: 10px;

  font-weight: bold;

}

.full .button {

  background-color: #04AA6D;

  border: 1px solid #fff;

  color: white;

  padding: 2px;

  text-align: center;

  text-decoration: none;

  font-size: 10px;

  border-radius:3px;

}

@media only screen and (max-width: 600px) {

  .columns {

    width: 100%;

  }

}

</style>