Affiliate marketing is a great way to earn money from your blog.
By promoting products or services through affiliate links, you can earn a commission on sales that result from your referral.
One way to make your affiliate links more attractive and clickable is to create stylish affiliate boxes.
If you're unsure of how to paste CSS code into your Blogger site,
Customize Your Blogger Blog Look with CSS Designs
Learn how to give your Blogger blog a unique and professional look by customizing its CSS design with these simple steps.
please refer to this article for guidance before proceeding.
In this guide, I will explain how to create and paste a stylish affiliate box on your Blogger blog.
Example of affiliate box
CSS code for Affiliate Box
Click "Edit HTML" under "Themes" in the Blogger sidebar.
]]></b:skin>
Paste the following code before "]]></b:skin>".
*If you copy and paste (Ctrl+V) the code you want to find with Ctrl+F, you can easily find it. For Mac, Ctrl becomes "Command".
.affiliate-box {
border: 1px solid #ccc;
padding: 20px;
border-radius: 5px;
width: 400px;
margin: 0 auto;
text-align: center;
}
.affiliate-box__image {
display: block;
margin: 0 auto;
width: 200px;
height: auto;
margin-bottom: 20px;
}
.affiliate-box__heading {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
.affiliate-box__text {
font-size: 18px;
margin-bottom: 20px;
}
.affiliate-box__buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.affiliate-box__link {
display: inline-block;
background-color:#FF9900;
color: #fff;
padding: 10px 20px;
border-radius: 20px;
text-decoration: none;
margin-right: 10px;
margin-bottom: 10px;
}
.affiliate-box__link--primary {
background-color: #dc3545;
}
.affiliate-box__link:hover {
background-color: #FFB84D;
}
.affiliate-box__link--primary:hover {
background-color: #ff6464;
}
If the CSS code doesn't work when inserted inside "]]></b:skin>", it may be worth trying to insert the code immediately after <style> instead.
*In this Blogger blog, the CSS code is inserted after the <style> tag.
HTML code for Affiliate Box
Let's paste this code into the HTML editing of Blogger's post editing screen.
<div class="affiliate-box">
<img alt="Product Image" class="affiliate-box__image" src="https://example.com/product-image.jpg" />
<div class="affiliate-box__heading">Product Name</div>
<p class="affiliate-box__text">Product description goes here.</p>
<a class="affiliate-box__link" href="https://example.com/affiliate-link">Buy on Amazon</a>
<a class="affiliate-box__link affiliate-box__link--primary" href="https://example.com/review-link">Read Reviews</a>
Please note that in order for the affiliate links to work properly, you will need to replace "example.com" with your actual affiliate link URLs.
In addition, select the appropriate image for your product and replace the "https://example.com/product-image.jpg" part of the src attribute of the img tag with the URL of the affiliate product image or another image.
If you want to remove the red link box,
<a class="affiliate-box__link affiliate-box__link--primary" href="https://example.com/review-link">Read Reviews</a>
Please remove this code.
This HTML/CSS code this time was created by ChatGPT.
ChatGPT is a powerful language model developed by OpenAI that has the ability to generate a wide range of content.
One area where ChatGPT can be particularly useful is in designing creative assets like affiliate boxes.
When it comes to design, not every idea will be a winner, but with proper instruction, ChatGPT can help you create a unique and eye-catching design in a short amount of time.
If you're looking to create an affiliate box, you can provide ChatGPT with some general guidelines and ideas, and let the model take care of the rest.
If you're struggling to come up with creative designs for your website or marketing campaigns, don't hesitate to give ChatGPT a try!
You might be pleasantly surprised by the amazing designs it can generate for you.
Blogger - Tips and Tricks for Successful Blogging
Learn how to start and use a successful Blogger blog by following these essential steps, including designing your blog with SEO and analyzing data.
If you're looking to start a successful Blogger blog, you won't want to miss our complete guide!
From designing your blog with SEO in mind to using data analysis to create engaging content, we've got everything you need to succeed.
Check out our article now!