Cara Membuat Tombol Download Anime Box di Blogspot

Cara Membuat Tombol Download Anime Box di Blogspot

Diposting pada

Cara Membuat Tombol Download Anime Box di Blogspot – Contoh Tombol Download secara list seperti meownime, samehadaku, atau bahkan yang menggunakan blogspot juga bisa memasang seperti tombol yang mereka gunakan.

Tombol Tombol seperti pada blog anime atau film biasanya digunakan karena pilihan link untuk mendapatkan list anime tersebut sangatlah banyak dan dari berbagai server. Maka di kelompokkanlah tombol download tersebut oleh mereka.

Blog Mang Otep sebenarnya pernah beberapa kali share artikel mengenai tombol download yang bisa menjadi referensi anda lainnya, bisa check koleksi saya dibawah ini:

  1. Cara Membuat Kotak Download Ala Blog Film
  2. Cara Membuat Tombol Demo dan Download Di Sidebar
  3. Cara Membuat Tombol Download & Demo Simpel di Blog

Bukan dari beberapa server saja pilihannya, seperti yang anda tahu website anime seperti samehadaku, meownime atau yang lainnya mempunyai list download dengan kualitas video yang berbeda. Dari link download 360p, 480p, 720p, dan 1080p, karena itu mereka membuat tombol area download yang bisa mencakup semuanya.

Cara Membuat Tombol Download Anime Box di Blogspot

1. Siapkan cemilan kesukaan anda.

2. Login ke Blog anda > kemudian pilih Tema > Selanjutnya pilih Edit HTML

3. Selanjutnya Letakkan kode ini, diatas kode ]]</b:skin> atau </style>

/* CSS Link Download Anime */
.otepdl-box{Width:100%}
.otepdl-box{display:block;margin:10px auto;}
.otepdl-title{background:#e74c3c;padding:7px 3px;display:block;color:#fff;font-weight:700;font-size:16px;padding-left:12px;margin-bottom: 2px;position:relative}
.otepdl-title:before{content:"\f019";font-family:Fontawesome;position:absolute;right:15px;color:#fff;font-size:16px;}
.dld-eps  {font-size: 15px;font-weight: 700;background: #E4E4E4;margin-bottom: 2px;line-height: 26px}
.dld-eps strong {background: #3392d0;border-right: 2px solid #F5F5F5;width: 110px;display:block;float: left;margin-right: 5px;color: #FFF;text-align: center;}
.dld-eps a {color: #666869;}
.dld-eps a:hover {color: #42a5e5;}

@media only screen and (max-width:640px){
.dld-eps strong {position:relative;display:block;margin:0;width:100%} 
}
@media only screen and (max-width:480px){
.dld-eps strong {position:relative;display:block;margin:0;width:100%} 
}
@media only screen and (max-width:360px){
.dld-eps strong {position:relative;display:block;margin:0;width:100%} 
}

4. Yang perlu anda perhatikan pada CSS di atas adalah perubahan font-size, font-weight, padding, dan margin. Atur sesuai keperluan dan template anda.

5. Setelah selesai lalu simpan template anda.

6. Langkah selanjutnya adalah jika anda ingin memulai posting anda harus meletakkan kode HTML dibawah ini dalam postingan anda agar CSS diatas bisa bekerja dengan baik. Lihat kode HTML dibawah ini:

<div class="otepdl-box">
<span class="otepdl-title">Download Film Ant-man Sub Indonesia</span>
<div class="dld-eps">
<strong>360p</strong>
<a href="#" rel="nofollow" target="_blank">Solidfiles</a> |
<a href="#" rel="nofollow" target="_blank">Google Drive</a> |
<a href="#" rel="nofollow" target="_blank">Zippyshare</a> |
<a href="#" rel="nofollow" target="_blank">Acefile</a> |
<a href="#" rel="nofollow" target="_blank">Mirror</a>
</div>
<div class="dld-eps">
<strong>480p</strong>
<a href="#" rel="nofollow" target="_blank">Solidfiles</a> |
<a href="#" rel="nofollow" target="_blank">Google Drive</a> |
<a href="#" rel="nofollow" target="_blank">Zippyshare</a> |
<a href="#" rel="nofollow" target="_blank">Acefile</a> |
<a href="#" rel="nofollow" target="_blank">Mirror</a>
</div>
<div class="dld-eps">
<strong>720p</strong>
<a href="#" rel="nofollow" target="_blank">Solidfiles</a> |
<a href="#" rel="nofollow" target="_blank">Google Drive</a> |
<a href="#" rel="nofollow" target="_blank">Zippyshare</a> |
<a href="#" rel="nofollow" target="_blank">Acefile</a> |
<a href="#" rel="nofollow" target="_blank">Mirror</a>
</div>
<div class="dld-eps">
<strong>1080p</strong>
<a href="#" rel="nofollow" target="_blank">Solidfiles</a> |
<a href="#" rel="nofollow" target="_blank">Google Drive</a> |
<a href="#" rel="nofollow" target="_blank">Zippyshare</a> |
<a href="#" rel="nofollow" target="_blank">Acefile</a> |
<a href="#" rel="nofollow" target="_blank">Mirror</a>
</div>
</div>

7. Artikel yang anda inginkan sudah siap, jangan lupa untuk preview artikel anda sebelum anda publish.

Jika anda sudah menerapkan kode diatas dengan benar maka tombol download anda akan menjadi seperti live demo di bawah ini

Jika anda masih kesulitan untuk membuat anda bisa taroh komentar anda di bawah dan insyaallah saya akan membalas secepat mungkin, atau bisa anda hubungi melalui form Kontak di blog ini.

Demikian informasi tentang bagaimana Cara Membuat Tombol Download Anime Box di Blogspot, semoga bermanfaat untuk anda. Jangan lupa share artikel ini jika bermanfaat dan saya ucapkan terimakasih

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *