Buy Now and Description box script, the benefit of the Buy Now stylish HTML script, How to create a buy now and description box on blogger,
If you are running an affiliate campaign on your blogger site then you should know how to add a buy now button to the blogger site. Simple and unique customization of your blogger can bring more sales to you. In this script, you will get a Description box also where you can your products or item description. So without further due let's jump into the method of how to add buy now and description box on blogger.
What is Buy Now and Description box script?
Buy now and the Description box script will show the details of your product and also the buy option in a single box. So that your customer can easily get about the products, price and also the link where he/she can buy the products.
What is the benefit of the Buy Now stylish HTML script?
The benefit of buy now and the description box HTML script are many I would like to tell you some points.
In this box, customers can see the details and price of the product.
Customers can directly buy from this box interlink.
All affiliate bloggers should have used this script.
A very simple script that's why your page speed won't down.
How to create a buy now and description box on blogger.
To create a description box and a buy now interlink button you have to follow some simple steps.
First-1: Goto your blogger Dashboard
First-2: Now from the left menu go to the theme option.
First-3: Then from the customization, drop the menu and click on EDIT HTML.
First-4: Now find ]]></b:skin> this code and copy the below script and past the script above the ]]></b:skin> tag.
/* Description Box CSS Codes by Tech Edu Byte */
.ttdesc{position:relative;display:inline-block;width:320px;margin:0 3px 30px;padding:20px; border:1px solid #eceff1; font-size:14px;line-height:1.8em;border-radius:15px;} .ttdesc h3, .ttdesc h4, .ttdesc b{font-size:13px;font-weight:400; margin:0;padding:2px 14px;background-color:#282828;border:1px solid #eceff1;border-radius:15px; position:absolute;top:-15.5px;left:20px;color:#fefefe;}
.drkM .asdesc b{background-color:#252526}
.ttbutton{display:inline-flex;align-items:center; margin:12px 12px 12px 0;padding:10px 15px;outline:0;border:2px; border-radius:50px;line-height:20px; color:#fefefe; background-color:#204ecf; font-size:13px;font-family:'Noto Sans', sans-serif; white-space:nowrap;overflow:hidden;max-width:100%}.ttbutton.outline{color:inherit; background-color:transparent; border:1px solid #eceff1} .ttbutton.outline:hover{border-color:#204ecf}
First-5: Now save the theme.
First-6: Then create a new post/page or go to any existing post/page where you need to create the box and open the post as HTML View.
First-7: Now copy the below script and past it where you want to see the box.
<!-- Description Box HTML Codes by Tech Edu Byte-->
<div class="ttdesc"><b>Premium Version</b>
<p>Your Text Here</p>
<a class="ttbutton outline" href="#"><svg class='line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g transform='translate(2.000000, 2.500000)'><path d='M0.7501,0.7499 L2.8301,1.1099 L3.7931,12.5829 C3.8701,13.5199 4.6531,14.2389 5.5931,14.2359094 L16.5021,14.2359094 C17.3991,14.2379 18.1601,13.5779 18.2871,12.6899 L19.2361,6.1319 C19.3421,5.3989 18.8331,4.7189 18.1011,4.6129 C18.0371,4.6039 3.1641,4.5989 3.1641,4.5989'></path><line x1='12.1251' y1='8.2948' x2='14.8981' y2='8.2948'></line><path d='M5.1544,17.7025 C5.4554,17.7025 5.6984,17.9465 5.6984,18.2465 C5.6984,18.5475 5.4554,18.7915 5.1544,18.7915 C4.8534,18.7915 4.6104,18.5475 4.6104,18.2465 C4.6104,17.9465 4.8534,17.7025 5.1544,17.7025 Z'></path><path d='M16.4347,17.7025 C16.7357,17.7025 16.9797,17.9465 16.9797,18.2465 C16.9797,18.5475 16.7357,18.7915 16.4347,18.7915 C16.1337,18.7915 15.8907,18.5475 15.8907,18.2465 C15.8907,17.9465 16.1337,17.7025 16.4347,17.7025 Z'></path></g></svg> Buy Now </a>
</div>
<div class="ttdesc"><b>Free Version</b>
<p>Your Text Here</p>
<a class="ttbutton outline" href="#"><svg data-name="Design Convert" id="Design_Convert" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"><defs></defs><title/><path class="cls-1" d="M50,52H14a7,7,0,0,1-7-7V41a1,1,0,0,1,2,0v4a5,5,0,0,0,5,5H50a5,5,0,0,0,5-5V41a1,1,0,0,1,2,0v4A7,7,0,0,1,50,52Z"/><path class="cls-1" d="M32,41a1,1,0,0,1-1-1V13a1,1,0,0,1,2,0V40A1,1,0,0,1,32,41Z"/><path class="cls-1" d="M32,42a1,1,0,0,1-.71-.29l-10-10a1,1,0,0,1,1.42-1.42L32,39.59l9.29-9.3a1,1,0,0,1,1.42,1.42l-10,10A1,1,0,0,1,32,42Z"/></svg> Download </a>
</div>
First-8:You completely created the product description box and Buy now button
How to customize the box?
See the yellow highlighted marked on the script you can easily edit this box script.
Conclusion:
In this article, I just show you how to create a simple product description HTML box with a buy now button. If you like the article please share the article with your affiliate blogger friends. If you have any trouble implementing the script please let us know in the comment section.
Thank you.
0 Comments