How to Make a Download Box Like an Anime Site

Download Box is usually used by fansub to make the website more similar to the others. Sometimes there are many fansub who don't know how to make a download box like this. So I will give a tutorial directly.

HOW TO MAKE DOWNLOAD BOX LIKE ANIME SITE

First, login to Blogger > select Theme and click Edit HTML > then add the CSS below above code </style> or ]]></b:skin>

/* Download Boxes Like Anime Sites By Sayem Tutorial*/
.download-box{font-size:15px;font-weight:500;background:#fff;padding:5px;margin:5px 0;}
.download-kotak{background:#f2f2f2;margin-bottom:3px;border-radius:3px;padding:10px;}
.download-kotak strong{background:#18a37e;color:#fff;border-radius:3px;float:left;padding:10px;margin:-10px;margin-right:10px;width:65px;}
.download-kotak a{font-size:12px;color:#000;}

Then click Save Theme . When finished add this code to your post in select HTML (not Compose )

<div class="download-box">
  <div class="download-kotak"> <strong>1080p</strong> 
   <a href="#" rel="nofollow" target="_blank">Server 1</a> | 
   <a href="#" rel="nofollow" target="_blank">Server 2</a> | 
   <a href="#" rel="nofollow" target="_blank">Server 3</a> | 
   <a href="#" rel="nofollow" target="_blank">Server 4</a> |
   <a href="#" rel="nofollow" target="_blank">Server 5</a>
  </div> 
  <div class="download-kotak"> <strong>720p</strong> 
   <a href="#" rel="nofollow" target="_blank">Server 1</a> | 
   <a href="#" rel="nofollow" target="_blank">Server 2</a> | 
   <a href="#" rel="nofollow" target="_blank">Server 3</a> | 
   <a href="#" rel="nofollow" target="_blank">Server 4</a> |
   <a href="#" rel="nofollow" target="_blank">Server 5</a>
  </div> 
  <div class="download-kotak"> <strong>360p</strong> 
   <a href="#" rel="nofollow" target="_blank">Server 1</a> | 
   <a href="#" rel="nofollow" target="_blank">Server 2</a> | 
   <a href="#" rel="nofollow" target="_blank">Server 3</a> | 
   <a href="#" rel="nofollow" target="_blank">Server 4</a> |
   <a href="#" rel="nofollow" target="_blank">Server 5</a>
  </div>
  <div class="download-kotak"> <strong>240p</strong> 
   <a href="#" rel="nofollow" target="_blank">Server 1</a> | 
   <a href="#" rel="nofollow" target="_blank">Server 2</a> | 
   <a href="#" rel="nofollow" target="_blank">Server 3</a> | 
   <a href="#" rel="nofollow" target="_blank">Server 4</a> |
   <a href="#" rel="nofollow" target="_blank">Server 5</a>
  </div> 
</div>

Click Publication and see how it results.
Result