Ads 720 x 90

Motivasi Menulis
Home » Penelusuran Staff List

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%}}

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

    4. <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>

  4. 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>.

    5.  <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>

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

KodePengaturan
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.

Live Preview

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.

Cara Membuat Staff List Seperti Langit Anime

Cara Membuat Staff List Seperti Langit Anime - Staff List atau Daftar Staff biasa digunakan oleh fansub atau fanshare untuk memberi tahu pengunjungnya informasi tentang staff di fansub atau fanshare tersebut.

Cara Membuat Staff List Seperti Langit Anime, Cara Membuat Staff List Seperti Fansub, Cara Membuat Staff List Fansub, Cara Membuat Fansub, Cara Membuat Seperti Langit Anime, Aka321, Aka321.blogspot.com, Tutorial Fansub, Cara Membuat Fansub

Ini merupakan kesempatan pertama saya untuk berbagi ilmu tentang pembuatan staff list. Dan pada kesempatan kali ini saya akan berbagi ilmu tentang Cara Membuat Staff List Seperti Langit Anime. Langsung saja mari ikuti langkah-langkah yang ada di bawah ini.

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

/* Staff List Langit Anime - Aka321 */
.slla321 .owner-wrap{display: inline-block}
.slla321 .owner-item{position: relative;float: left;margin: 0px 2%;margin-bottom: 20px;width: 46%}
.slla321 .owner-item .img-wrap img{width: 80%;height: 220px}
.slla321 .staff-wrap{display: inline-block}
.slla321 .title{margin: 31px 0px;overflow:hidden;display: block}
.slla321 .title h2{line-height: 0.2 !important;display: inline-block;position: relative;font-size: 24px;margin: 10px 0px;font-family: 'Verdana, Geneva, sans-serif';font-weight: bold}
.slla321 .title h2:after{content: "";position: absolute;height: 6px;border-bottom: 1px solid #e0dede;border-top: 1px solid #e0dede;top: 0;width: 1040px;overflow: hidden}
.slla321 .title h2:after{left: 100%;margin-left: 8px}
.slla321 .staff-item{position: relative;float: left;margin: 0px 2%;margin-bottom: 20px;width: 29.3%}
.slla321 .img-wrap{text-align: center}
.slla321 .staff-item .img-wrap img{width: 70%;height: 185px}
.slla321 .desc-wrap{margin-top: 25px}
.slla321 .desc-wrap0{display: table;width: 100%}
.slla321 .person-wrap{display: table-cell;vertical-align: middle}
.slla321 .nickname, .slla321 .name{font-size: 13px;color: #7d7d7d;font-weight: 400;line-height: 1.5;display: block;font-family: serif}
.slla321 .social-wrap{display: table-cell;vertical-align: middle;text-align: right}
.slla321 .social{color: #bebdbd !important;background-color: #e8e8e8;border-radius: 4px;text-align: center;padding: 9px 8px;vertical-align: middle;position:relative}
.slla321 .social.hide{display: none}
.slla321 .social:hover{opacity: 0.8}
.slla321 .social::before{font-size:11px;line-height:11px;font-family:Arial,sans-serif;text-transform:none;padding:8px 12px;top:-34px;display: table;transition:.3s ease-out;background:#000000;color:#d1d1d2;border-radius:5px;position:absolute;opacity:0;visibility:hidden}
.slla321 .social.facebook::before{content: "Facebook";right: 22px}
.slla321 .social.twitter::before{content: "Twitter";right: 12px}
.slla321 .social.youtube::before{content: "Youtube";right: 17px}
.slla321 .social.google::before{content: "Google Plus";right: 25px}
.slla321 .social.instagram::before{content: "Instagram";right: 20px}
.slla321 .social::after{content:" ";width:0;height:0;right:10px;top:-7px;transition:.3s ease-out;border-color:#000000 transparent transparent;border-style:solid;border-width:6px 6px 0;position:absolute;opacity:0;visibility:hidden}
.slla321 .social:hover::before, .slla321 .social:hover::after{opacity:100;visibility:visible}
.slla321 .social i{font-size: 16px;width: 18px}
.slla321 .content-wrap{margin-top: 25px;text-align: left;font-size: 15px;font-family: sans-serif}
@media only screen and (max-width: 785px){.slla321 .owner-item, .slla321 .staff-item {width: 100% !important;}}

  • 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="slla321">
<div class="owner-wrap">
<div class="owner-item">
<div class="img-wrap">
<img src="Link Gambar" alt="Nama Owner">
</div>
<div class="desc-wrap">
<div class="desc-wrap0">
<div class="person-wrap">
<span class="nickname">Nickname Owner</span>
<span class="name">Nama Owner</span>
</div>
<div class="social-wrap">
<a class="social hide facebook" href="Link Tujuan" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a class="social hide twitter" href="Link Tujuan" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a class="social hide youtube" href="Link Tujuan" target="_blank"><i class="fa fa-youtube-play" aria-hidden="true"></i></a>
<a class="social hide google" href="Link Tujuan" target="_blank"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
<a class="social hide instagram" href="Link Tujuan" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
</div>
</div>
<div class="content-wrap">Deskripsi Owner</div>
</div>
<div class="fusion-clearfix"></div>
</div>
</div>
<div class="staff-wrap">
<div class="title">
<h2>Posisi Staff</h2>
</div>
<div class="staff-item">
<div class="img-wrap">
<img src="Link Gambar" alt="Nama Staff">
</div>
<div class="desc-wrap">
<div class="desc-wrap0">
<div class="person-wrap">
<span class="nickname">Nickname Staff</span>
<span class="name">Nama Staff</span>
</div>
<div class="social-wrap">
<a class="social hide facebook" href="Link Tujuan" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a class="social hide twitter" href="Link Tujuan" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a class="social hide youtube" href="Link Tujuan" target="_blank"><i class="fa fa-youtube-play" aria-hidden="true"></i></a>
<a class="social hide google" href="Link Tujuan" target="_blank"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
<a class="social hide instagram" href="Link Tujuan" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>
</div>
</div>
<div class="content-wrap">Deskripsi Staff</div>
</div>
<div class="fusion-clearfix"></div>
</div>
</div> 
</div>

Jika ingin memunculkan tombol social media kalian hanya tinggal menghapus tulisan hide yang sudah ditandai dengan warna Oranye.

  • Jika sudah, silahkan kamu ganti kode yang sudah ditandai sesuai dengan tanda kode tersebut. Lalu, publikasikan dan lihat bagaimana hasilnya.


Sekian ilmu yang saya bagikan hari ini. Semoga bermanfaat. Terima kasih.
Back To Top