14 Mei 2016

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.

Cara Membuat Status Rilis Tiramisub, Cara Membuat Status Rilis, Cara Membuat Widget Persen Anime, Cara Membuat Persentase Proses Anime.

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.


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

Artikel Terkait

Seorang Blogger yang mengharapkan recehan dari blog kecilnya.

2 komentar

gan gk bisa di tes ya ? link rusak

Lihat di note blognya gan, ganti link jadi preview321

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.
EmoticonEmoticon