Analisyuki
  • Blogger
  • WordPress
  • AdSense
  • Tips SEO
  • Komputer
No Result
View All Result
Analisyuki
  • Blogger
  • WordPress
  • AdSense
  • Tips SEO
  • Komputer
No Result
View All Result
Analisyuki
No Result
View All Result

Cara Memasang Tombol Download Seperti Situs Anime Responsive

11 Maret 2019
in CSS, HTML, Tutorial Blogger
Share on FacebookShare on Twitter

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

DEMO

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.

Leave Comment

You might also like

Cara Setting Robots txt Blogger

Cara Setting Robots.txt di Blogger yang Benar untuk SEO

1 Januari 2021
Template Blogger Terbaik 2021

Template Blogger Terbaik Tahun 2021

1 Januari 2021
Cara Memasang Kode Google Analytics Wordpress

Cara Memasang Kode Google Analytics Terbaru di WordPress

15 Desember 2020
Cara Memasang Kode Google Analytics Terbaru

Cara Memasang Kode Google Analytics Terbaru di Blogger

13 Desember 2020
Cara Update Google Analytics ke Versi Terbaru

Cara Update Tampilan Google Analytics ke Versi Terbaru

13 Desember 2020
Matched Content

Memodifikasi Iklan Matched Content Menjadi Bentuk Grid

2 Desember 2020
  • Disclaimer
  • Sitemap
  • Privacy Policy
  • Contact
Call us: Contact From

© 2020 Analisyuki - All Right Reserved

No Result
View All Result
  • Blogger
  • WordPress
  • AdSense
  • Tips SEO
  • Komputer

© 2020 Analisyuki - All Right Reserved

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In