12 Juni 2017

Cara Membuat Staff List Seperti Gantz ID

Cara Membuat Staff List Seperti Gantz ID - Staff List atau Daftar Staff adalah widget yang biasa digunakan oleh fansub atau fanshare agar pengunjung tahu siapa staff yang bekerja di fansub atau fanshare tersebut.

Cara Membuat Staff List Seperti Gantz ID, Tutorial Membuat Staff List Seperti Gantz ID, Widget Staff List Gantz ID, Cara Membuat Staff List Fansub, Tutorial Membuat Staff List Fansub, Cara Membuat Daftar Staff Fansub, Staff List Fansub, Staff List Fanshare, Staff List Website Anime, Daftar Admin Fansub, How To Make Staff List Fansub, Staff List Fansub Site, Cara Membuat Fansub, Cara Membuat Widget Fansub, Tutorial Fansub, Website Fansub, Aka321, Aka321.blogspot.com

Dalam suatu fansub biasanya ada lebih dari lima staff, dalam hal ini biasanya pekerjaan staff itu berbeda-beda contohnya, encoder, uploader, translator, dan masih banyak yang lainnya. Staff list dari Gantz ID ini sangat cocok untuk fansub yang memiliki banyak staff. Staff list ini juga cocok untuk fanshare yang mempunyai sedikit staff. Terlebih lagi Staff list ini sudah responsive yang artinya tampilannya tetap rapih saat dilihat di dalam smartphone atau handphone.

Sebelumnya saya memposting tentang pembuatan jadwal rilis yaitu Cara Membuat Jadwal Rilis Seperti Animeindo. Dan pada kesempatan kali ini saya ingin berbagi ilmu tentang Cara Membuat Staff List Seperti Gantz ID. Langsung saja mari ikuti langkah-langkah yang ada di bawah ini.

Cara Membuat Staff List Seperti Gantz ID


  1. Buka Blogger > Edit HTML > Salin dan Terapkan kode di bawah ini sebelum </b:skin> atau </style>.

  2. /* Staff List Gantz ID - Aka321 */
    .slgi321 ul{display: block;position: relative;overflow: hidden;margin: 0}
    .slgi321 ul li{width: 25%;padding: 15px;position: relative;float: left}
    .slgi321 ul li:hover .slgi-imgwrap img{filter: grayscale(100%);transform: scale(1.03);transition: all 0.2s ease}
    .slgi321 .slgi-imgwrap{position: relative}
    .slgi321 .slgi-imgwrap img{width: 100%}
    .slgi321 .slgi-name{position: absolute;right: 0;bottom: 0;padding: 0 10px;background: #444;color: #fff;margin: 0 10px 15px}
    .slgi321 .slgi-name span{margin: 0 !important;background: #00afd1;padding: 0px 10px !important;position: absolute !important}
    .slgi321 .slgi-skillswrap{margin: 10px 0}
    .slgi321 .slgi-label{font-size: 14px}
    .slgi321 .slgi-prog{height: 4px;border: 1px solid #eee;background: #fff;border-radius: 5px;margin: 0 0 6px;box-sizing: content-box}
    .slgi321 .slgi-prog .line{height: 100%;-webkit-animation: 400ms;border-radius: 5px;background-color: #00afd1}
    .slgi321 .slgi-social{text-align: center}
    .slgi321 .slgi-social a{padding: 2px 10px;border-radius: 3px;display: inline-block;color: #aaa}
    .slgi321 .slgi-social a.hide{display: none}
    .slgi321 .slgi-social a.facebook:hover{background: #3b5998;color: #fff}
    .slgi321 .slgi-social a.twitter:hover{background: #1da1f2;color: #fff}
    .slgi321 .slgi-social a.google:hover{background: #dc4e41;color: #fff}
    .slgi321 .slgi-social a.instagram:hover{background: #9b6954;color: #fff}
    .slgi321 .slgi-social a.youtube:hover{background: #cd201f;color: #fff}
    @media only screen and (max-width: 768px){.slgi321 ul li{width: 50%}}
    @media screen and (max-width:480px){.slgi321 ul li{width:100%}}

  3. Jika sudah, silahkan simpan template.
  4. Kemudian, buat postingan baru di halaman statis > Kemudian tambah kode di bawah ini pada Tab HTML (Bukan Compose).

  5. <div class='slgi321'>
    <ul>
     <li>
     <div class='slgi-wrap'>
      <div class='slgi-imgwrap'>
       <a><img title='Nama Staff' alt='Nama Staff' src='#IMG'></a>
       <div class='slgi-name'>Nama Staff
        <span>Jabatan</span>
       </div>
      </div>
      <div class='slgi-skillswrap'>
       <div class='slgi-label'>Skill 1</div>
       <div class='slgi-prog'>
        <div style='width: 100%;' class='line' data-progress-animation='100%' data-appear-animation-delay='400'></div>
       </div>
       <div class='slgi-label'>Skill 2</div>
       <div class='slgi-prog'>
        <div style='width: 100%;' class='line' data-progress-animation='100%' data-appear-animation-delay='400'></div>
       </div>
       <div class='slgi-label'>Skill 3</div>
       <div class='slgi-prog'>
        <div style='width: 100%;' class='line' data-progress-animation='100%' data-appear-animation-delay='400'></div>
       </div>
       <div class='slgi-label'>Skill 4</div>
       <div class='slgi-prog'>
        <div style='width: 100%;' class='line' data-progress-animation='100%' data-appear-animation-delay='400'></div>
       </div>
      </div>
      <div class='slgi-social'>
       <a href='#' target='_blank' class='facebook hide'><i class='fa fa-facebook' aria-hidden='true'></i></a>
       <a href='#' target='_blank' class='twitter hide'><i class='fa fa-twitter' aria-hidden='true'></i></a>
       <a href='#' target='_blank' class='youtube hide'><i class='fa fa-youtube' aria-hidden='true'></i></a>
       <a href='#' target='_blank' class='google hide'><i class='fa fa-google-plus' aria-hidden='true'></i></a>
       <a href='#' target='_blank' class='instagram hide'><i class='fa fa-instagram' aria-hidden='true'></i></a>
      </div>
     </div>
     </li>
    </ul>
    </div>

  6. Setelah itu, dibawah ini merupakan kode untuk menambah staff di staff list gantz id. Untuk menambahkan staff, silahkan salin dan terapkan kode dibawah ini di atas kode </ul>.

  7.  <li>
     <div class='slgi-wrap'>
      <div class='slgi-imgwrap'>
       <a><img title='Nama Staff' alt='Nama Staff' src='#IMG'></a>
       <div class='slgi-name'>Nama Staff
        <span>Jabatan</span>
       </div>
      </div>
      <div class='slgi-skillswrap'>
       <div class='slgi-label'>Skill 1</div>
       <div class='slgi-prog'>
        <div style='width: 100%;' class='line' data-progress-animation='100%' data-appear-animation-delay='400'></div>
       </div>
       <div class='slgi-label'>Skill 2</div>
       <div class='slgi-prog'>
        <div style='width: 100%;' class='line' data-progress-animation='100%' data-appear-animation-delay='400'></div>
       </div>
       <div class='slgi-label'>Skill 3</div>
       <div class='slgi-prog'>
        <div style='width: 100%;' class='line' data-progress-animation='100%' data-appear-animation-delay='400'></div>
       </div>
       <div class='slgi-label'>Skill 4</div>
       <div class='slgi-prog'>
        <div style='width: 100%;' class='line' data-progress-animation='100%' data-appear-animation-delay='400'></div>
       </div>
      </div>
      <div class='slgi-social'>
       <a href='#' target='_blank' class='facebook hide'><i class='fa fa-facebook' aria-hidden='true'></i></a>
       <a href='#' target='_blank' class='twitter hide'><i class='fa fa-twitter' aria-hidden='true'></i></a>
       <a href='#' target='_blank' class='youtube hide'><i class='fa fa-youtube' aria-hidden='true'></i></a>
       <a href='#' target='_blank' class='google hide'><i class='fa fa-google-plus' aria-hidden='true'></i></a>
       <a href='#' target='_blank' class='instagram hide'><i class='fa fa-instagram' aria-hidden='true'></i></a>
      </div>
     </div>
     </li>

  8. Jika sudah, silahkan kamu mengganti kode yang sudah ditandai sesuai keinginanmu, dan silahkan di publikasikan lalu lihat bagaimana hasilnya.

Kode Pengaturan
Nama Staff
Ganti dengan nama staff.
#IMG
Ganti dengan URL atau Link gambar yang ingin dipasang.
Jabatan
Ganti dengan jabatan yang sedang dipegang oleh staff tersebut.
Skill #
Ganti dengan skill yang dimiliki oleh staff tersebut.
100%
Ganti dengan seberapa besar skill yang sudah dicapai.
#
Ganti dengan URL atau Link anime yang akan dituju.
hide
Hapus jika ingin memunculkan sosial media tersebut.


Sekian postingan kali ini semoga bermanfaat untuk kalian, jangan lupa di bagikan ke teman-teman, dan jika ada yang ingin ditanyakan silahkan bertanya di kolom komentar. Sampai jumpa di tutorial berikutnya Terima kasih.

Artikel Terkait

2 komentar

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