Customizable Download Buttons for Blogger: Increase Engagement

Modern Download Box for Blogger: Elegant and Responsive

Hello and welcome to NiaDzgn! Today, I'm excited to share with you a beautifully designed download box that's perfect for Bloggers. This modern download box is fully responsive, ensuring it looks great on all screens and devices.

Features of the Download Box

• - Modern Design: The download box boasts a sleek and modern design that will enhance the overall look of your blog.
• - Responsive: The box is fully responsive, which will adapt to different screen sizes and devices, ensuring a seamless user experience.
• - Customizable: You can easily customize the download box to fit your blog's color scheme and style.

How to Add the Download Box to Your Blogger Site

To add the download box to your Blogger site, simply follow these steps:

• First, we go to the Blogger control panel. From here
• Then we go to Appearance, then Edit, HTML then search for ]]></b:skin>
• Then paste the following code directly above it.

/* Download Counter Box by NiaDzgn.blogspot.com */
#btnx{cursor: pointer;
    padding: 10px 20px;
    border: 0;
    border-radius: 3px;
    background: #5468ff;
    color: #fff;
    float: left;
    font-size: 14px;
    font-family: unset;
    text-transform: capitalize;
    font-weight: 700;
	box-shadow: -1px 1px 5px 0px rgba(0, 0, 0, 0.3);
    transition: all 0.7s;}
	#btnx:hover,#downloadx:hover{background: #fc5ed7;
    color: #fff;
    outline: none;
    box-shadow: -1px 1px 5px 1px rgba(0, 0, 0, 0.4);}
	.batas-downx{display:block;margin:0 auto;border-radius:4px;box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.28);}
	.dalam-downx{background:#5468ff;color:#fff;padding:20px;display:block;border-top-left-radius:3px;border-top-right-radius:3px}
.file-info{color:#fff;display:inline-block;font-size:1.2em;line-height:38px;text-align:right}
.catatan-downx{padding:20px;background:#fff;border-bottom-left-radius:3px;border-bottom-right-radius:3px;color:#555;font-size:14px}#downloadx{float:left}#downloadx{padding:10px 20px;border-radius:3px;background:#fff;color:#5468ff;float:left;text-align:center;font-size:14px;text-transform:capitalize}.bungkus-info span{display:inline-block;line-height:38px;float:left}.file-deskripsi{display:block}.file-deskripsi span{margin-left:5px}
@media screen and (max-width:640px){.batas-downx{float:none;width:100%}}
@media screen and (max-width:320px){.file-info{display:block;text-align:center}#btnx, #downloadx{width:100%;margin-bottom:10px}.bungkus-info span{float:none;width:100%;text-align:center}.file-deskripsi{text-align:center}}

• Then go to any post you want to put the download box in.
• Then put the code that you must change the words in the box.

<div class="batas-downx">
<div class="dalam-downx">
<div class="bungkus-info">
<div class="file-info">
You must type the file name.
   </div>
<a href="https://niadzgn.blogspot.com/"><button id="btnx" onclick="generate()"><i aria-hidden="true" class="fa fa-cloud-download"></i> Download </button>
</a></div>
</div>
<div class="catatan-downx">
In this box you can write a description of the download.
</div>
</div>