Cara Memasang Tombol Download Responsive Seperti Situs Anime

AdityaTekno.com - Kali ini saya akan membagikan tutorial Cara Membuat dan Memasang Tombol Download Box Responsive di Blogger Seperti Situs Anime. Tombol Download Box seperti ini sebetulnya hampir mirip dengan situs-situs download anime / fansub seperti samehadaku, meownime, jadi jika anda membuat blog dengan niche download anime mungkin akan cocok membuat tombol download seperti situs anime / fansub ini.
Cara Memasang Download Box Responsive Seperti Situs Anime

Cara memasang tombol download seperti di situs anime samehadaku maupun meownime tidaklah terlalu sulit, karena anda bisa melakukan Inspect Element tema yang dipakai situs tersebut dan nantinya anda akan melihat semua kode-kode tersebut.

Namun, karena anda sudah mengunjungi postingan ini, jadi tidak perlu repot-repot meng-Inspect Element tema yang dipakai situs itu. Nanti anda tinggal ikuti tutorialnya dibawah.

Cara Memasang Tombol Download Responsive Mirip Situs Anime


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

Kemudian, letakkan kode CSS berikut 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}

Lalu Simpan Tema.

Langkah selanjutnya yaitu menerapkannya dalam postingan anda.

Baca Juga : Cara Membuat Tombol Demo dan Download versi Flat UI

Pertama, buat Postingan Baru >> kemudian letakkan kode ini pada menu tab HTML (bukan 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>

Kemudian jika telah selesai semua, tinggal Publikasikan.

Untuk melihat hasilnya seperti apa, bisa di cek dibawah:

Baca Juga : Cara Memasang Syntax Highlighter di Blogger

Demikian Cara Memasang Tombol Download Responsive Seperti Situs Anime. Semoga tutorial ini bisa bermanfaat dan membantu anda. Terima kasih sudah berkunjung dan Salam AdityaTekno.com