Cara Membuat Download Box Seperti Situs Anime

Cara Membuat Download Box Seperti Situs Anime

RENDIANSYAH - Cara Membuat Download Box Seperti Situs Anime - Download Box biasanya banyak digunakan para blogger untuk tempat unduhan yang memiliki beberapa pilihan link. Download box hanya akan digunakan pada situs seperti anime dan film. Tapi tidak hanya situs tersebut saja, sekarang juga ada yang memakainya pada blog biasa untuk tempat multi unduhan. Mungkin tidak usah saya jelaskan lagi mengenai download box. Baiklah, langsung saja ke caranya.

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>

Terakhir, tinggal klik tulisan Publikasi dan lihat bagaimana hasilnya. Untuk demonya ada dibawah ini.


Mungkin cukup disini saja artikel Cara membuat download box seperti situs anime. Jika memang ada pertanyaan bisa berkomentar atau bisa juga lewat halaman kontak. Terimakasih sudah berkunjung 🙏

Post a Comment

Previous Post Next Post