Kali ini aku 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 kamu membuat blog dengan niche download anime mungkin akan cocok membuat tombol download seperti situs anime / fansub ini.
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 kamu sudah mengunjungi postingan ini, jadi tidak perlu repot-repot meng-Inspect Element tema yang dipakai situs itu. Nanti kamu 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.
Cara Penerapan Tombol Download di Postingan Blog
Pertama, buat Postingan Baru >> kemudian copas 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:
2 komentar