Cara Membuat Link Download Seperti Otakudesu di Blogger

Jika Anda pernah mengunjungi situs seperti Otakudesu, pasti Anda sudah familiar dengan tampilan link download yang tertata rapi berdasarkan episode, kualitas video, dan pilihan server. Desain seperti ini bukan hanya enak dipandang, tetapi juga memudahkan pengunjung dalam memilih file yang ingin mereka unduh.

Pada artikel ini, saya akan buatkan bagaimana membuat tampilan link download yang serupa di Blogger, menggunakan HTML dan sedikit CSS agar tampilannya lebih menarik.

Contoh Tampilan yang Akan Dibuat

Nantinya, link download akan tersusun rapi seperti ini:

Langkah-Langkah Pemasangan Membuat Link Download Seperti Otakudesu

1. Login ke Blogger
2. Masuk ke Tema
3. Klik Edit Tema
4. Cari kebawah sampai menemukan Kode </b:skin> atau </b:template-skin>
5. Pastekan CSS ini tepat di atas Kode </b:skin> atau </b:template-skin> pada Tema kalian

6. .download2 {
       margin-bottom: 10px;
       font-size: 13px;
   }
   
   .download2 .batchlink {
       border: 1px solid #337ab7;
       background-color: #fff;
       border-radius: 4px;
   }
   
   .download2 .batchlink h4 {
       font-size: 13px;
       padding: 5px;
       background: #6e7aff;
       color: #fff;
       border-left: 5px solid #47516E;
       margin: 0;
   }
   
   h4 {
       font-size: 1rem;
       margin-block-start: 1.33em;
       margin-block-end: 1.33em;
   }
   
   .download2 .batchlink ul {
       list-style: none;
       margin: 5px 0;
       background: #f9f9f9;
       padding: 5px;
       border: 1px solid #e5e5e5;
   }
   
   ul {
       display: block;
       list-style-type: disc;
       margin-block-start: 1em;
       margin-block-end: 1em;
       padding-inline-start: 40px;
       unicode-bidi: isolate;
   }
   
   .download2 .batchlink ul li {
       margin-bottom: 3px;
       display: block;
   }
   
   .download2 .batchlink ul li strong {
       width: 40px;
       background: #5a5856;
       display: inline-block;
       padding: 5px 2px;
       text-align: center;
       color: #fff;
   }
   
   b,
   strong {
       font-weight: bold;
   }
   
   .download2 .batchlink ul li a {
       padding: 0 13px 0 10px;
       color: #2168B0;
       border-right: 1px dashed #377BC0;
   }
   
   .download2 .batchlink ul li i {
       width: 70px;
       display: inline-block;
       padding: 5px 2px;
       text-align: center;
       color: #fff;
       background: #5a5856;
   }
   
   i,
   em {
       font-style: italic;
   }
   

7. Save Tema

Buat Postingan

1. Buat Postingan Baru
2. Masuk ke dashboard Blogger Anda lalu buat entri baru.
3. Pastikan Anda berada di mode HTML (bukan Compose).
4. Masukkan Kode HTML berikut ke dalam Postingan Blog Anda

5. <div class="download2">
     <div class="batchlink">
       <h4>Shingeki no Kyojin Episode 2 Subtitle Inodnesia (Otakudesu)</h4>
       <ul>
         <li>
           <strong>MP4 360p</strong> 
           <a href="LINK_DOWNLOAD" target="_blank" rel="nofollow external noopener noreferrer">OtakuDrive</a>
           <a href="LINK_DOWNLOAD" target="_blank" rel="nofollow external noopener noreferrer">DesuDrive</a>
           <a href="LINK_DOWNLOAD" target="_blank" rel="nofollow external noopener noreferrer">PDrain</a>
           <a href="LINK_DOWNLOAD" target="_blank" rel="nofollow external noopener noreferrer">Mega</a>
           <a href="LINK_DOWNLOAD" target="_blank" rel="nofollow external noopener noreferrer">AceFile</a>
           <a href="LINK_DOWNLOAD" target="_blank" rel="nofollow external noopener noreferrer">Kraken</a>
           <a href="LINK_DOWNLOAD" target="_blank" rel="nofollow external noopener noreferrer">DesuFiles</a>
           <i>0.48 GB</i>
         </li>
         <li>
           <strong>MP4 480p</strong>
           <a href="LINK_DOWNLOAD" target="_blank" rel="nofollow external noopener noreferrer">OtakuDrive</a>
           <a href="LINK_DOWNLOAD" target="_blank" rel="nofollow external noopener noreferrer">DesuDrive</a>
           <a href="LINK_DOWNLOAD" target="_blank" rel="nofollow external noopener noreferrer">PDrain</a>
           <a href="LINK_DOWNLOAD" target="_blank" rel="nofollow external noopener noreferrer">Mega</a>
           <a href="LINK_DOWNLOAD" target="_blank" rel="nofollow external noopener noreferrer">AceFile</a>
           <a href="LINK_DOWNLOAD" target="_blank" rel="nofollow external noopener noreferrer">Kraken</a>
           <a href="LINK_DOWNLOAD" target="_blank" rel="nofollow external noopener noreferrer">DesuFiles</a>
           <i>0.89 GB</i>
         </li>
         <li>
           <strong>MP4 720p</strong>
           <a href="LINK_DOWNLOAD" target="_blank" rel="nofollow external noopener noreferrer">OtakuDrive</a>
           <a href="LINK_DOWNLOAD" target="_blank" rel="nofollow external noopener noreferrer">DesuDrive</a>
           <a href="LINK_DOWNLOAD" target="_blank" rel="nofollow external noopener noreferrer">PDrain</a>
           <a href="LINK_DOWNLOAD" target="_blank" rel="nofollow external noopener noreferrer">Mega</a>
           <a href="LINK_DOWNLOAD" target="_blank" rel="nofollow external noopener noreferrer">AceFile</a>
           <a href="LINK_DOWNLOAD" target="_blank" rel="nofollow external noopener noreferrer">Kraken</a>
           <a href="LINK_DOWNLOAD" target="_blank" rel="nofollow external noopener noreferrer">DesuFiles</a>
           <i>1.60 GB</i>
         </li>
       </ul>
     </div>
   </div>

   Silakan edit bagian yang ditandai sesuai kebutuhan kamu.
6. Publikasi Postingan

Demo di Codepen

Dengan mengikuti langkah-langkah di atas, Anda kini dapat membuat tampilan link download seperti di Otakudesu yang profesional dan memudahkan pengunjung. Desain seperti ini tidak hanya meningkatkan pengalaman pengguna, tetapi juga membuat blog Anda terlihat lebih terorganisir.