Cara Membuat Status Rilis Seperti Tiramisub

Cara Membuat Status Rilis Seperti Tiramisub - Status Rilis biasa digunakan Fansub agar pengunjung mudah mengetahui apa yang sedang dilakukan Fansub  kepada animenya.

Pada kesempatan kali ini saya ingin berbagi tentang Cara Membuat Status Rilis Seperti Tiramisu Fansub. Jika ingin membuatnya bisa kamu ikuti langkah-langkah di bawah ini.

• Pertama, Buka Blogger > Edit HTML > Salin, Terapkan dan Simpan Kode di bawah ini sebelum </b:skin> atau </style>

/* CSS Status Rilis Rilis Tiramisub - Aka321 */
.statusrilis {font-size: 19px;text-align: center;background: #82aac3;margin-top: 10px;margin-bottom: 0;padding: 10px;color: white;}
.titleA{width: auto;margin-bottom: -32px;margin-left: 2px;margin-top: -20px}
.titleB{width: auto;margin-bottom: -23px;margin-left: 2px;margin-top: -20px}
p.title1{font-family: 'Fresca';font-size: 20px;line-height: 130%;margin-bottom: 36px}
p.title2{font-family: 'Fresca';font-size: 15px}
.arrow{position: relative;width: 100%;height: 2px;background: rgba(58, 166, 208, 0.2)}
.arrow-status{text-align: right;padding-right: .5em;padding-left: .5em;background-color: #82aac3;border-color: white;width: 0%;color: white;height: 100%;line-height: 1.2em;-webkit-animation: width .5s ease-in;font-family: 'Fresca';white-space: nowrap;font-size: 16px}
.arrow-pointer2{background-color: white;display: inline-block;width: 1em;height: 3em;position: relative;left: 100%;top: -1em;margin-left: -2em;margin-bottom: -2em;border-radius: 0 5px 5px 0}
span.persen{background: #82aac3;padding: 3px;border-radius: 5px;color: white}

• Jika sudah, Masuk ke Tata Letak > Buat widget HTML/Javascript > Kemudian salin kode di bawah ini dan terapkan di dalamnya.

<p class="statusrilis">Kang Juned</p>
<div id="statusrilis">
    <div id="status">
        <div class="titleA">
            <p class="title1">
                <span class="persen">100%</span> JUDUL ANIME DISINI
            </p>
        </div>
        <div class="titleB">
            <p class="title2">
    Encode: 100%, Retiming: 100%, Translate: 100%, Upload: 100%
  </p>
        </div>
        <div class="arrow">
            <div class="arrow-status" style="width: 100%;">
                <span class="arrow-pointer"></span>
            </div>
        </div>
    </div>
    <div id="status">
        <div class="titleA">
            <p class="title1">
                <span class="persen">50%</span> JUDUL ANIME DISINI
            </p>
        </div>
        <div class="titleB">
            <p class="title2">
    Encode: 50%, Retiming: 50%, Translate: 50%, Upload: 50%
  </p>
        </div>
        <div class="arrow">
            <div class="arrow-status" style="width: 50%;">
                <span class="arrow-pointer"></span>
            </div>
        </div>
    </div>
</div>

• Setelah itu, Ganti Kode yang sudah di tandai sesuai keinginanmu. Simpan Widget dan lihat hasilnya.

• Demo

Sekian ilmu yang dapat saya bagikan hari ini. Semoga bermanfaat. Terima kasih