Cara Membuat Download Box Seperti Situs Anime

Cara Membuat Download Box Seperti Situs Anime - Download Box biasanya digunakan oleh para fansub agar websitenya lebih mirip dengan yang lainnya. Terkadang banyak fansub yang belum tau membuat download box seperti ini. Jadi saya akan memberikan tutorial langsung.

CARA MEMBUAT DOWNLOAD BOX SEPERTI SITUS ANIME

Pertama, login ke Blogger > pilih Tema dan klik Edit HTML > lalu tambahkan CSS di bawah ini diatas kode </style> atau ]]></b:skin>

/* Download Box Seperti Situs Anime */
.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;}

Kemudian klik Simpan Tema. Jika selesai tambahkan kode ini pada postingan kalian dalam pilih HTML (bukan 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>

Klik Publikasi dan lihat bagaimana hasilnya.

Result

Demikianlah tutorial tentang Cara membuat Download box seperti situs Anime, semoga artikel tersebut dapat bermanfaat.