25 November 2016

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.

Artikel Terkait

3 komentar

sedang di perbaiki gan, ganti urlnya dari testtds321 menjadi preview321.blogspot.com

demonya gk ada contohnya

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