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.
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.
Cara Membuat Staff List Seperti Gantz ID
- Buka Blogger > Edit HTML > Salin dan Terapkan kode di bawah ini sebelum </b:skin> atau </style>.
/* 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%}}
- Jika sudah, silahkan simpan template.
- Kemudian, buat postingan baru di halaman statis > Kemudian tambah kode di bawah ini pada Tab HTML (Bukan Compose).
<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>
- 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>.
<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>
- 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.