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 Membuat Tombol Download Anime di Blog

18 Februari 2019
in CSS, HTML, Tutorial Blogger
Share on FacebookShare on Twitter

Cara Membuat Tombol Download Anime di Blog – Memasang tombol download (download box) seperti pada situs anime sebenarnya sangatlah mudah, tentunya lebih responsive dan tidak menambah beban dalam dalam memuat artikel anda.

Tombol link box ini biasanya di gunakan oleh fansub atau fanshare anime, agar tombol download mereka terlihat lebih bagus dan rapi. Jika anda pengguna blogger yang membuat link tentang video anime, tidak salahnya anda menggunakan kode css yang saya berikan ini, tentu saja agar blog anda terlihat lebih profesional seperti pembuat situs anime lainnya.

Cara Membuat Download Box Seperti Situs Anime

1. Buka Blogger > pilih menu Tema > kemudian pilih Edit HTML

2. Letakkan kode CSS ini dan letakkan di atas kode ]]></b:skin> atau </style>

/* CSS Link Download Anime */
.dld-eps1 {font-size: 16px;font-weight: bold;background: #F5F5F5;padding: 10px;margin: 10px 0;}
.dld-eps2 {margin: 0;padding: 0;list-style: none;}
.dld-eps3 {background: #E4E4E4;margin-bottom: 2px;line-height: 26px;padding: 0 5px;}
.dld-eps3 strong {background: #3392d0;border-right: 2px solid #F5F5F5;width: 110px;display:block;float: left;margin-left: -5px;margin-right: 5px;color: #FFF;padding: 0 5px;text-align: left;}
.dld-eps3 a {color: #666869;}
.dld-eps3 a:hover {color: #42a5e5;}

3. Jika sudah pilih Simpan Tema

4. Untuk memasangnya di artikel anda buat Postingan Baru di menu HTML (bukan compose) kemudian letakkan kode ini di dalamnnya.

<div class="dld-eps1">
<div class="dld-eps2">
<div class="dld-eps3">
<strong>360p</strong>
<a href="LINK-ANDA" rel="nofollow" target="_blank">Solidfiles</a> |
<a href="LINK-ANDA" rel="nofollow" target="_blank">Google Drive</a> |
<a href="LINK-ANDA" rel="nofollow" target="_blank">Zippyshare</a> |
<a href="LINK-ANDA" rel="nofollow" target="_blank">Acefile</a> |
<a href="LINK-ANDA" rel="nofollow" target="_blank">Mirror</a>
</div>
<div class="dld-eps3">
<strong>480p</strong>
<a href="LINK-ANDA" rel="nofollow" target="_blank">Solidfiles</a> |
<a href="LINK-ANDA" rel="nofollow" target="_blank">Google Drive</a> |
<a href="LINK-ANDA" rel="nofollow" target="_blank">Zippyshare</a> |
<a href="LINK-ANDA" rel="nofollow" target="_blank">Acefile</a> |
<a href="LINK-ANDA" rel="nofollow" target="_blank">Mirror</a>
</div>
<div class="dld-eps3">
<strong>720p</strong>
<a href="LINK-ANDA" rel="nofollow" target="_blank">Solidfiles</a> |
<a href="LINK-ANDA" rel="nofollow" target="_blank">Google Drive</a> |
<a href="LINK-ANDA" rel="nofollow" target="_blank">Zippyshare</a> |
<a href="LINK-ANDA" rel="nofollow" target="_blank">Acefile</a> |
<a href="LINK-ANDA" rel="nofollow" target="_blank">Mirror</a>
</div>
<div class="dld-eps3">
<strong>1080p</strong>
<a href="LINK-ANDA" rel="nofollow" target="_blank">Solidfiles</a> |
<a href="LINK-ANDA" rel="nofollow" target="_blank">Google Drive</a> |
<a href="LINK-ANDA" rel="nofollow" target="_blank">Zippyshare</a> |
<a href="LINK-ANDA" rel="nofollow" target="_blank">Acefile</a> |
<a href="LINK-ANDA" rel="nofollow" target="_blank">Mirror</a>
</div>
</div>
</div>

*keterangan : ubah tanda merah dengan alamat url anda

DEMO

Cukup sekian tutorial dari saya, semoga artikel ini dapat bermanfaat bagi kita semua, silahkan menuju kolom komentar jika ada hal yang ingin ditanyakan, 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