Cara Membuat Tombol Download Responsive Mirip Situs Anime

Arsipbiru.com - Di tutorial kali ini, saya akan membagikan bagaimana cara membuat tombol download responsive mirip situs anime. Sebelum menuju ke intinya, tentunya Anda tidak asing lagi dengan situs anime. Ya, di situs tersebut kita bisa streaming atau bahkan download anime yang kita suka. Terdapat banyak sekali situs yang menyediakan berbagai anime dari berbagai genre yang dapat kita download secara gratis, seperti Samehadaku maupun Meownime. Namun, pernahkah Anda memperhatikan tombol download anime yang ada di situs tersebut? Tentunya sangat keren dan enak dilihat serta tertata rapi. Jika Anda ingin membuat blog dengan konsep download anime, mungkin akan cocok membuat tombol download seperti situs anime / fansub tersebut.

Untuk pemasangan tombol download seperti di situs anime tersebut tidaklah terlalu sulit. Anda bisa melakukan Inspect Element tema yang dipakai situs tersebut. Nantinya Anda akan melihat semua kode-kode tersebut. Anda tinggal menyesuaikan sesuai dengan kebutuhan.

Namun, jika Anda merasa kesulitan, Anda bisa menyimak tutorial yang saya bagikan kali ini. Sehingga Anda tidak perlu repot-repot meng-Inspect Element tema yang dipakai situs tersebut.

Cara Membuat Tombol Download Responsive Mirip Situs Anime

1. Pertama, buka Blogger > pilih Tema > Edit HTML.

2. Kemudian, letakkan kode CSS berikut ini sebelum kode </head>.

/* Tombol Download Anime Responsive */
.anime-box{font-size:9px;font-weight:bold;background:none repeat scroll 0% 0% #F5F5F5;padding:10px;margin:10px 0}
.anime-box ul{margin:0;padding:0;list-style:outside none none}
.anime-box ul li{background:none repeat scroll 0% 0% #E4E4E4;margin-bottom:2px;line-height:26px;padding:0 5px;font-size:15px}
.anime-box ul li strong{background:#1b80e3;border-right:2px solid #F5F5F5;width:100px;display:block;float:left;margin-left:-5px;margin-right:2px;color:#FFF;padding:0 5px;text-align:left}

3. Lalu Simpan Tema.

4. Langkah selanjutnya yaitu menerapkannya dalam postingan anda.

Cara Memasang Tombol Download di Postingan Blog

Setelah meletakkan kode CSS tersebut di atas, langkah selanjutnya yaitu memasang tombol download di postingan blog. Berikut langkah-langkahnya.

1. Pertama, buat Postingan Baru.

2. Kemudian letakkan kode berikut ini pada kotak kerja dengan mode HTML (bukan mode Compose).

<div class="anime-box">
   <ul>
      <li style="text-align: center;">
         <strong>360p</strong>
         <a href="LINK-DOWNLOAD" target="_blank" rel="nofollow noopener">UF</a> |
         <a href="LINK-DOWNLOAD" target="_blank" rel="nofollow noopener">CU</a> |
         <a href="LINK-DOWNLOAD" target="_blank" rel="nofollow noopener">GD</a> |
         <a href="LINK-DOWNLOAD" target="_blank" rel="nofollow noopener">ZS</a> |
         <a href="LINK-DOWNLOAD" target="_blank" rel="nofollow noopener">ZS2</a>
      </li>
      <li style="text-align: center;">
         <strong>480p</strong>
         <a href="LINK-DOWNLOAD" target="_blank" rel="nofollow noopener">UF</a> |
         <a href="LINK-DOWNLOAD" target="_blank" rel="nofollow noopener">CU</a> |
         <a href="LINK-DOWNLOAD" target="_blank" rel="nofollow noopener">GD</a> |
         <a href="LINK-DOWNLOAD" target="_blank" rel="nofollow noopener">ZS</a> |
         <a href="LINK-DOWNLOAD" target="_blank" rel="nofollow noopener">ZS2</a>
      </li>
      <li style="text-align: center;">
         <strong>720p</strong>
         <a href="LINK-DOWNLOAD" target="_blank" rel="nofollow noopener">UF</a> |
         <a href="LINK-DOWNLOAD" target="_blank" rel="nofollow noopener">CU</a> |
         <a href="LINK-DOWNLOAD" target="_blank" rel="nofollow noopener">GD</a> |
         <a href="LINK-DOWNLOAD" target="_blank" rel="nofollow noopener">ZS</a> |
         <a href="LINK-DOWNLOAD" target="_blank" rel="nofollow noopener">ZS2</a>
      </li>
      <li style="text-align: center;">
         <strong>1080p</strong>
         <a href="LINK-DOWNLOAD" target="_blank" rel="nofollow noopener">UF</a> |
         <a href="LINK-DOWNLOAD" target="_blank" rel="nofollow noopener">CU</a> |
         <a href="LINK-DOWNLOAD" target="_blank" rel="nofollow noopener">GD</a> |
         <a href="LINK-DOWNLOAD" target="_blank" rel="nofollow noopener">ZS</a> |
         <a href="LINK-DOWNLOAD" target="_blank" rel="nofollow noopener">ZS2</a>
      </li>
   </ul>
</div>

3. Selanjutnya, jika semuanya telah selesai, langkah berikutnya adalah mempublikasikannya.

Berikut adalah contoh hasilnya jika semua langkah di atas dilakukan dengan cermat.

Demikian tutorial bagaimana cara membuat tombol download responsive mirip situs anime. Semoga bermanfaat.

Sumber:

AdityaTekno