Cara Membuat Tombol Download Seperti Situs Anime - DIMS BLOG

Konten [Tampil]

Pada kali ini saya akan membagikan Cara membuat tombol download seperti situs anime responsive. Tombol download box yang akan saya bagikan ini sebenarnya mirip seperti situs samehadeku, jadi bagi kalian yang memiliki situs niche anime mungkin cocok untuk menggunakan tombol download seperti situs animefans ini.

Tanpa panjang lebar saya akan kasih tahu caranya berikut ini:

Cara memasang tombol download seperti situs anime

1. Login ke akun blogger
2. Pilih menu Tema > Edit HTML
3. Kemudian letakan kode berikut ini tepat diatas kode ]]></b:skin> atau </style>

/* Box Download Anime */
.ariefnime{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}
.ariefnime ul li{background:none repeat scroll 0% 0% #E4E4E4;margin-bottom:2px;line-height:26px;padding:0 5px;font-size:15px}
.ariefnime 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}

4. Selanjutnya Simpan Tema
5. Lalu untuk menerapkannya letakan kode berikut ini di postingan blogger anda pada mode HTML (bukan compose)

<div class="ariefnime">
<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>


Pratinjau Kode

Bagimana cukup mudah bukan, cara membuat tombol download seperti situs anime responsive. Semoga dapat bermanfaat, apabila memiliki pertanyaan silakan tuliskan pada kolom komentar dibawah, sekian terimakasih.

Related Posts