How To Make A Download Box on Blogger

How To Make A Download Box on Blogger - This download box is certainly very suitable when used by download blogs, such as film blogs, anime blogs, software / application blogs, game blogs, and so on.

The types of download blogs that I mentioned above certainly require a download button widget that supports it, so that visitors can easily accuse or download the movie or application they want.

For this reason I made a download box that is very supportive for your download blog.

This download box has a responsive design and is quite cool even though the design is simple.

I intentionally did not add other designs such as awesome fonts or other icons so as not to affect the speed of loading your blog.
How To Make A Download Box on Blogger
This download box supports the titles of movies or application names, video quality such as 480p, 720p, 1080p, part files, and also the source or download server.

If you have the ability to process a blog, you might be able to design it again to your liking, but with this design, I think it's enough.

It's good just right, if you are interested in making a download box on blogger, please follow the steps below.

How to Make a Download Box Button on Blogger
1. Log in to Blogger.com
2. Click Theme> Edit HTML
3. Then place the following css code above the code]]> </ b: skin> or </ style>
 /* CSS Download Box by elbongultom.com */
.dbox-title {
    padding: 8px 10px;
    margin: 8px 0 3px;
    color: #FFF;
    background: #3498db;
}
.dbox-wrap {
font-size: 11px;
font-weight: bold;
background: #F5F5F5;
padding: 10px;
margin: 10px 0;
}
.dbox {
margin: 0;
padding: 0;
list-style: none;
}
.dbox-list {
background: #E4E4E4;
margin-bottom: 2px;
line-height: 26px;
padding: 0 5px;
}
.dbox-list strong {
background: #3498db;
border-right: 2px solid #F5F5F5;
width: 65px;
display: block;
float: left;
margin-left: -5px;
margin-right: 5px;
color: #FFF;
padding: 0 5px;
text-align: center;
}
.dbox-list a {
color: #6d6d6d;
}
.dbox-list a:hover {
color: #222;
}
@media only screen and (max-width: 360px) {
  .dbox-list strong {width:100%}
  .dbox-title {text-align:center}
}
4. Then enter the following code in the HTML Tab section when posting the article
<div class="dbox-wrap">
<div class="dbox">
<div class="dbox-title">Judul Film</div>
<div class="dbox-list">
<strong>480p</strong>
<a href="#" rel="nofollow" target="_blank" title="Server 1">Server 1</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 2">Server 2</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 3">Server 3</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 4">Server 4</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 5">Server 5</a>
</div>
<div class="dbox-list">
<strong>720p</strong>
<a href="#" rel="nofollow" target="_blank" title="Server 1">Server 1</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 2">Server 2</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 3">Server 3</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 4">Server 4</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 5">Server 5</a>
</div>
<div class="dbox-list">
<strong>1080p</strong>
<a href="#" rel="nofollow" target="_blank" title="Server 1">Server 1</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 2">Server 2</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 3">Server 3</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 4">Server 4</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 5">Server 5</a>
</div>
</div>
<div class="dbox">
<div class="dbox-title">Nama Software</div>
<div class="dbox-list">
<strong>Part1</strong>
<a href="#" rel="nofollow" target="_blank" title="Server 1">Server 1</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 2">Server 2</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 3">Server 3</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 4">Server 4</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 5">Server 5</a>
</div>
<div class="dbox-list">
<strong>Part2</strong>
<a href="#" rel="nofollow" target="_blank" title="Server 1">Server 1</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 2">Server 2</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 3">Server 3</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 4">Server 4</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 5">Server 5</a>
</div>
<div class="dbox-list">
<strong>Part3</strong>
<a href="#" rel="nofollow" target="_blank" title="Server 1">Server 1</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 2">Server 2</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 3">Server 3</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 4">Server 4</a> |
<a href="#" rel="nofollow" target="_blank" title="Server 5">Server 5</a>
</div>
</div>
</div>
5. Please edit according to your wishes, then click Publish or Update article

That's an article about how to make a download box on blogger, if you are still confused about applying it on your blog please contact us through the existing contact page or by commenting on this post. May be useful.

Post a Comment

0 Comments