How to Make Floating Ui Download Card for Blogger

How to Make Stylish Download Or Buy Card

Hello Guys and welcome to Wolv Themes we will talk now about How to Make Floating Ui Download Card for Blogger.

Demo

Let's Start

How to Make Floating Ui Download Card for Blogger?

To add the Floating Ui Download Card you can add it by 2 methods

The first method and it is the best and the second method and it is the easier. 

Step 1 :- Go to Blogger's dashboard and click theme.
Step 2 :- Click the arrow down icon next to the 'customize' button.
Step 3 :- Click Edit Html.
Step 4 :- Click on any word then Press CTRL+ F and type in the search form ]]></b:skin>.
Step 5 :- Copy the provided below code and paste it just before ]]></b:skin>.
  /* Payment */
.payment{display:flex;justify-content:center;margin-top:60px;font-size:15px;line-height:1.8em;font-family:'Noto Sans', sans-serif}
.payment > *:not(:last-child){margin-right:20px}
.payment > *{position:relative;display:block;text-align:center;background-color:#fefefe;color:#08102b;padding:0 0 77px;border-radius:2px;box-shadow:0 10px 8px -8px rgba(0,0,0,.12);transition:all .15s ease;-webkit-transition:all .15s ease;overflow:hidden}
.payment > *:hover{-webkit-transform:scale(1.05,1.05);transform:scale(1.05,1.05)}
.payment > .discount:before{content:'-30%';font-weight:700;display:flex;align-items:center;justify-content:flex-end;width:80px;height:45px;background-color:#fdd929;position:absolute;top:0;right:0;padding-right:10px; border-radius:0 0 0 80px;}
.payment > .dis-40:before{content:'-40%'}
.payMe .payHeader{padding:20px 15px 15px}
.payMe .payPrice{font-size:50px;line-height:normal;color:#482dff}
.payMe .payPrice span{font-size:18px}
.payMe .payPrice i.strike{display:block;font-size:14px;font-style:normal;text-decoration:line-through;color:rgba(0,0,0,.7)}
.payMe .payBundle{list-style:none;padding:0 40px;font-size:14px;line-height:1.8em;margin:40px 0}
.payMe .payBundle span{font-size:80%}
.payMe .payButton{position:absolute;bottom:30px;left:0;right:0}
.payMe .payButton .button{margin:0}
   .payment {position:relative;display:flex;flex-wrap:wrap;}
  .payment > *{position:relative;display:block;border-radius:10px;margin:0 16px 20px;}
  .payMe{box-shadow: 0 0 16px 1px rgb(0 0 0 / 8%);}
  .payment > .Free:before{content:'Free!';font-weight:700;color:#fff;display:flex;align-items:center;justify-content:flex-end;width:80px;height:45px;background-color:#482dff;position:absolute;top:0;right:0;padding-right:10px; border-radius:0 0 0 80px;}
  .payment li{text-align:left;}
  .payment .tickred{color:#b75501;}
  .payment .tickgreen{color:#27ae60;}
  .darkMode .payMe{color:#fefefe;background-color:#1e1e1e}
.payPrice {font-weight:bold;font-family:'Noto Sans', sans-serif}

Step 2. Copy and paste the following HTML codes in the post or the page you want.

<div class="payment">
      <!--[ payment option 1 ]-->
      <div class="payMe">
            <div class="payHeader">PREMIUM VERSION</div>
            <div class="payPrice"><span>$</span>0.00</div>
            <ul class="payBundle">
                  <li><span class="tickgreen">&#10004;</span> One Time Payment</li>
                  <li><span class="tickgreen">&#10004;</span> No Encrypted Scripts</li>
                  <li><span class="tickgreen">&#10004;</span> Remove Footer Credits</li>
                  <li><span class="tickgreen">&#10004;</span> For unlimited domains</li>
                  <li><span class="tickgreen">&#10004;</span> Lifetime Template Updates</li>
                  <li><span class="tickgreen">&#10004;</span> Lifetime Premium Support</li>
            </ul>
            <div class="payButton">
                  <!--[ Download link (change href='...' atribute to add link download) ]-->
                  <a class="button fileLink" onclick="generate()" id="button"><i class="icon download"></i>Download</a>
                  <a id="download" href="https://wolvthemes.eu.org/2021/08/how-to-make-stylish-download-or-buy-card.html" style="display: none;"></a>
            </div>
      </div>
      <!--[ payment option 2 with discount ]-->
      <div class="payMe Free">
            <div class="payHeader">FREE VERSION</div>
            <div class="payPrice"><span>$</span>0.00</div>
            <ul class="payBundle">
                  <li><span class="tickred">&#10008;</span> One Time Payment</li>
                  <li><span class="tickred">&#10008;</span> No Encrypted Scripts</li>
                  <li><span class="tickred">&#10008;</span> Remove Footer Credits</li>
                  <li><span class="tickred">&#10008;</span> For unlimited domains</li>
                  <li><span class="tickred">&#10008;</span> Lifetime Template Updates</li>
                  <li><span class="tickred">&#10008;</span> Lifetime Premium Support</li>
            </ul>
            <div class="payButton">
                  <a class="button" href="https://wolvthemes.eu.org/2021/08/how-to-make-stylish-download-or-buy-card.html" id="download"><i class="icon download"></i> Download </a>
            </div>
      </div>
</div>

Feature1,2,3,4,5,6 in the code above are the the features of the bundle that wou will sell, you can change it to be less than 6 or more. You can also customize the card Header text by changing the 'Your_title_here','0.00'.

Another Method.

This is the second method and it is the easiest method.
<style>  /* Payment */
.payment{display:flex;justify-content:center;margin-top:60px;font-size:15px;line-height:1.8em;font-family:'Noto Sans', sans-serif}
.payment > *:not(:last-child){margin-right:20px}
.payment > *{position:relative;display:block;text-align:center;background-color:#fefefe;color:#08102b;padding:0 0 77px;border-radius:2px;box-shadow:0 10px 8px -8px rgba(0,0,0,.12);transition:all .15s ease;-webkit-transition:all .15s ease;overflow:hidden}
.payment > *:hover{-webkit-transform:scale(1.05,1.05);transform:scale(1.05,1.05)}
.payment > .discount:before{content:'-30%';font-weight:700;display:flex;align-items:center;justify-content:flex-end;width:80px;height:45px;background-color:#fdd929;position:absolute;top:0;right:0;padding-right:10px; border-radius:0 0 0 80px;}
.payment > .dis-40:before{content:'-40%'}
.payMe .payHeader{padding:20px 15px 15px}
.payMe .payPrice{font-size:50px;line-height:normal;color:#482dff}
.payMe .payPrice span{font-size:18px}
.payMe .payPrice i.strike{display:block;font-size:14px;font-style:normal;text-decoration:line-through;color:rgba(0,0,0,.7)}
.payMe .payBundle{list-style:none;padding:0 40px;font-size:14px;line-height:1.8em;margin:40px 0}
.payMe .payBundle span{font-size:80%}
.payMe .payButton{position:absolute;bottom:30px;left:0;right:0}
.payMe .payButton .button{margin:0}
   .payment {position:relative;display:flex;flex-wrap:wrap;}
  .payment > *{position:relative;display:block;border-radius:10px;margin:0 16px 20px;}
  .payMe{box-shadow: 0 0 16px 1px rgb(0 0 0 / 8%);}
  .payment > .Free:before{content:'Free!';font-weight:700;color:#fff;display:flex;align-items:center;justify-content:flex-end;width:80px;height:45px;background-color:#482dff;position:absolute;top:0;right:0;padding-right:10px; border-radius:0 0 0 80px;}
  .payment li{text-align:left;}
  .payment .tickred{color:#b75501;}
  .payment .tickgreen{color:#27ae60;}
  .darkMode .payMe{color:#fefefe;background-color:#1e1e1e}
.payPrice {font-weight:bold;font-family:'Noto Sans', sans-serif} </style>
<div class="payment">
           <!--[ payment option 1 ]-->
           <div class="payMe">
             <div class="payHeader">PREMIUM VERSION</div>
             <div class="payPrice"><span>$</span>0.00</div>            <ul class="payBundle">
               <li><span class="tickgreen">&#10004;</span> One Time Payment</li>
               <li><span class="tickgreen">&#10004;</span> No Encrypted Scripts</li>
               <li><span class="tickgreen">&#10004;</span> Remove Footer Credits</li>
               <li><span class="tickgreen">&#10004;</span> For unlimited domains</li>
               <li><span class="tickgreen">&#10004;</span> Lifetime Template Updates</li>
               <li><span class="tickgreen">&#10004;</span> Lifetime Premium Support</li>
             </ul>
             <div class="payButton">
                            <!--[ Download link (change href='...' atribute to add link download) ]-->   <a class='button fileLink' onclick="generate()" id="button"><i class="icon download"></i>Download</a>   <a id="download" href="https://wolvthemes.eu.org/2021/08/how-to-make-stylish-download-or-buy-card.html" style="display:none"></a>
             </div>
           </div>            <!--[ payment option 2 with discount ]-->
           <div class="payMe Free">             <div class="payHeader">FREE VERSION</div>
             <div class="payPrice"><span>$</span>0.00</div>            <ul class="payBundle">
               <li><span class="tickred">&#10008;</span> One Time Payment</li>
               <li><span class="tickred">&#10008;</span> No Encrypted Scripts</li>
               <li><span class="tickred">&#10008;</span> Remove Footer Credits</li>
               <li><span class="tickred">&#10008;</span> For unlimited domains</li>
               <li><span class="tickred">&#10008;</span> Lifetime Template Updates</li>
               <li><span class="tickred">&#10008;</span> Lifetime Premium Support</li>
             </ul>
             <div class="payButton"> <a class="button" href="https://wolvthemes.eu.org/2021/08/how-to-make-stylish-download-or-buy-card.html" id="download"><i class="icon download"></i> Download </a>
             </div>
   </div>
         </div> 
Also See the YouTube Tutorial

Rate this article

Frontend Developer and UX Designer

Post a Comment