Cara Membuat Download Box di Blogger
Dezign Desu - Yahooo ada post baru nih.. topik kali ini adalah seputar tutorial lagi :) wahahaha.
Untuk kedua kalinya saya membuat posting tentang Download Box. Karena style semacam ini sering di pake di berbagai web anime, saya tidak akan menyebutkan secara spesifik web mana saja yang menggunakan style Download Box Show Hide semacam ini (karena uda kek style pasaran, terlalu banyak yang web memakainya) berbeda dari posting download box yang sebelumnya.
Saya tau kalian yang datang mengunjungi postingan saya tidak akan membaca paragraf paling atas & langsung menuju angka tahap - tahap tutorialnya karena saya juga menyadari paragraf pertama hanyalah tulisan yang gak penting. Dah lah :v
Tutorial Membuat Download Box Ala - ala Web Anime :
- Login pada akun blogspot kalian (ini wajib).
- Setelah masuk pada dashbord blogger, klik bagian TEMA.
- Edit HTML.
- Cari kode ]]></b:skin>, kalau gak ketemu silahkan pakai ctrl + f pada keyboard.
- Tempeklan kode ini di atas ]]></b:skin>
.mctnx {font-size: 14px;line-height: 1.2em;margin-bottom: 20p}
.mctnx .dlclass .content,.dlclass {overflow: hidde}
.mctnx .content {max-height: 0;overflow: hidden;transition: max-height .2s ease-out;padding: 0}
.dlclass {margin-bottom: 5px}
.dlclass .dlttl {padding: 9px 10px;background: #0c70de;border-radius: 2px;cursor: pointer;line-height: 0}
.dlclass .dlttl:after {content: '';display: inline-block;min-width: 1.2em;min-height: 1.2em;vertical-align: middle;float: right;background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='%23fff'/%3E%3C/svg%3E") center/24px no-repeat}
.dlclass .dlttl h3 {margin: 0;font-size: inherit;display: inline-block;max-width: 70%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;line-height: 1.2em;color: #fff;font-weight: 600}
.dlclass .dlttl.collapsible.active {background: #333}
.dlclass .dlttl.collapsible.active:after {background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' fill='%23fff'/%3E%3C/svg%3E") center/24px no-repeat}
.dlclass .dlurl {padding: 4px 0;border-bottom: 1px solid #ebebeb}
.dlclass .dlurl a {display: inline-block;background: #f0f2f3;padding: 4px 7px;border-radius: 3px;margin: 2px;font-size: 13px;color: #555;}
.dlclass .dlurl a:hover {background: #444 !important;color: #fff;text-decoration: none;}
.dlclass.dlone .dlurl {display: flex;flex-wrap: wrap}
.dlclass.dlone .dlurl .res {-webkit-box-flex: 0;-ms-flex: 0 0 16.66667%;flex: 0 0 auto;max-height: 27px;padding: 4px 7px;background: #0c70de;color: #fff;font-weight: 500;font-size: 13px;text-align: center;border-radius: 3px;margin: 2px 4px 2px 0}
.dlclass.dlone .dlurl .slink {flex-basis: 0;-webkit-box-flex: 1;flex-grow: 1;max-width: 100%;padding-left: 0;padding-right: 15px} - Jangan di close dulu, belum selesai.
- Selanjutnya cari </body>
- Tempeklan kode ini di atas </body>
<script>
/*<![CDATA[*/
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
} /*]]>*/
</script> - Jika sudah, silahkan klik Simpan / Save (Gausah sok inggris jirr :v)
- Tahap terakhir (Cara pakai), silahkan buat postingan download - download yang kalian inginkan. Jangan lupa di kasih code di bawah ini!!, Tapi editnya menggunakan tampilan HTML jangan yang tampilan Menulis.
<div class="mctnx">
<div class="dlclass dlone">
<div class="dlttl collapsible">
<h3>Jujutsu Kaisen Episode 01</h3>
</div>
<div class="content">
<div class="dlurl">
<div class="res">360p</div>
<div class="slink">
<a href="https://google.com" target="_blank" rel="nofollow noopener noreferrer">Google Drive</a>
<a href="https://uptobox.com" target="_blank" rel="nofollow noopener noreferrer">Uptobox</a>
<a href="https://zippyshare.com" target="_blank" rel="nofollow noopener noreferrer">Zippyshare</a>
</div>
</div>
<div class="dlurl">
<div class="res">480p</div>
<div class="slink">
<a href="https://google.com" target="_blank" rel="nofollow noopener noreferrer">Google Drive</a>
<a href="https://uptobox.com" target="_blank" rel="nofollow noopener noreferrer">Uptobox</a>
<a href="https://zippyshare.com" target="_blank" rel="nofollow noopener noreferrer">Zippyshare</a>
</div>
</div>
<div class="dlurl">
<div class="res">720p</div>
<div class="slink">
<a href="https://google.com" target="_blank" rel="nofollow noopener noreferrer">Google Drive</a>
<a href="https://uptobox.com" target="_blank" rel="nofollow noopener noreferrer">Uptobox</a>
<a href="https://zippyshare.com" target="_blank" rel="nofollow noopener noreferrer">Zippyshare</a>
</div>
</div>
</div>
</div>
</div> - https://google.com (Google Drive), https://uptobox.com (Uptobox), https://zippyshare.com (Zippyshare)
Silahkan di ganti dengan nama file hosting & link download kalian. - Jika semua sudah beres, silahkan di publish Postingnya. Selesai
Bagaimana? Blog/Webnya sudah kek Fenser & Fensub kan?
Sekian tentang tutorial kali ini "Cara Membuat Download Box di Blogger". Bagi yang belum paham, kolom komentar terbuka lebar. Silahkan tulis saja disitu, admin akan berusaha bantu sebisa mungkin. Cara membuat download box anime, Download box fansub, Script download box, Download box simple, Cara membuat blog download, Cara membuat download box show hide, Template download, Download box wordpress.
Posting Komentar untuk "Cara Membuat Download Box di Blogger"