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 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
1
2
3
4
5
6
|
/* 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.
Cara Penerapan Tombol Download di Postingan Blog
Pertama, buat Postingan Baru » kemudian letakkan kode ini pada menu tab HTML (bukan Compose).
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<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:
akhir kata
Sekian Tutorial membuat box download aniem, semoga bermanfaat
