Skip to main content

Cara Memasang Tombol Download Seperti Situs Anime Responsive

Cara memasang Tombol Download Seperti Situs Anime Responsive - Sebelumnya saya sudah pernah menjelaskan cara membuat tombol download anime, walaupun tidak berbeda dengan tutorial sebelumnya, namun kali ini saya akan memberikan dalam bentuk yang lebih responsive atau tidak berantakan saat dilihat pada tampilan versi mobile.

Tombol downlad dox ini sebenarnya hampir mirip dengan seperti situs s*meh*daku, jadi jika kalian membuat blog dengan niche download anime mungkin kalian akan cocok membuat tombol download seperti situs animefans/fansub ini. Tampa panjang lebar, mari kita simak tutorial berikut.

Cara Memasang Tombol Download Seperti Situs Anime Responsive

1. Login ke Blog anda > kemudian pilih Tema > Selanjutnya pilih Edit HTML

2. Selanjutnya Letakkan kode ini, diatas kode ]]></b:skin> atau </style>

/* Box 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:#f68383;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. Jika sudah, langsung saja Simpan Tema

4. Untuk menerapkannya dalam postingan anda > buat Postingan Baru > kemudian letakkan kode ini pada menu HTML (Bukan Compose)

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

3. Setelah itu pilih Publikasihkan

Cukup mudah kan dalam Membuat Tombol Download Seperti pada Situs Anime ini, semoga artikel ini dapat bermanfaat. Jika ada hal yang ingin ditanyakan langsung saja ke komentar, terimakasih.

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar