Senin, 11 September 2017

Cara Membuat Staff List Keren Seperti Animeindo.co

Hasil yang akan kalian buat
Biljabbaradnan's blog - Hallo guys bertemu lagi dengan saya biljabbar adnan yang sudah sangat jarang sekali muncul di permukaan perbloggeran :v eak..
wkwk ada beberapa alasan juga kenapa saya jarang ngeblog.. yah salah satunya males :v (jangan ditiru yah gan).

Loh terus apa sebabnya saya kembali ngeblog lagi??
Awalnya saya ngeblog lagi karena disuruh sama ketua eskul saya untuk buat blog khusus eskul pramuka dan rohis sekolah gua :3 yah mau gamau gua kerjain deh..

dan ternyata asik juga :v rasa ini lah yang sudah lama hilang dari diri ini :v sehingga saya memutuskan untuk kembali lagi menjadi kamenrider :3..

Maka dari itu izinkan saya disini untuk memulai langkah awal saya untuk menuliskan suatu tutorial Cara Membuat Staff List Keren Seperti Animeindo.co

Siapa sih yang gak kenal dengan website animeindo?
Mungkin sebagian orang sudah tidak asing lagi dengan animeindo, apalagi jika kalian adalah anime lovez seperti saya :v pasti sangat mengenalnya wkwkw..

yapz Animeindo adalah salah satu website streaming anime gratis yang memiliki banyak macam judul anime di dalamnya, saya sangat sering sekali menonton anime favorite saya disitu.

Tampilannya yang elegan beserta layout websitenya yang keren membuat saya jatuh hati dengan Animeindo :*

Salah satu tampilan animeindo yang membuat saya kagum adalah di bagian staff list nya ..
Karena disana staff listnya sangat terstruktur  mulai dari bigboss hingga sampai para moderatornya yang bertugas disana..

Sehingga saya berinisiatif membuat tutorial tentang
Cara Membuat Staff List Keren Seperti Animeindo.Co yang belum ada tutorialnya di google manapun.

Yok guys silahkan disimak.

Cara Membuat Staff List Keren Seperti Animeindo.co

1. Login ke blogger -> tema/template -> edit html

Tema - Edit Html

2. Cari kode <b:skin dengan ctrl+f

Search <b:skin

3. Copas kode css berikut ini setelah kode <b:skin atau sebelum </style



/*Staff List Animeindo*/
.grid4{float:left;width:13.33%;}
.stafflist{background:#eee;float:left;overflow:hidden;width:33%;margin:0px 0px 20px;position:relative;}
.coverstaff{height:170px;overflow:hidden;}
.coverstaff img{height:auto;width:100%;min-height:100%;}
.avastaff{position:absolute;margin:-50px 60px;height:90px;width:90px;overflow:hidden;border:3px solid #fff;border-radius:100px;background:#fff;}
.avastaff img{width:auto;height:150%;min-width:100%;}
.descstaff{padding:50px 10px 20px;height:150px;background:url('http://animeindo.co/wp-content/uploads/2015/11/staffbg1.jpg'); }
.descstaff h3{font-family:Ubuntu;text-align:center;color:#FF6347;margin-bottom:0px;font-size:18px;}
.descstaff h5{font-family:Calibri;text-align:center;color:#212a30;font-size:16px;padding-bottom:5px;}
.descstaff p{text-align:center;font-family:Ubuntu;font-size:12px;color:#555;font-style:italic;}
.staffsocial{position:absolute;bottom:0;left:0;padding:4px 10px;}
.staffsection{width:102%;display:inline-block;margin:0 -2% 0 0;}
.staffsocial a{display:inline-block;}
.staffsocial img{height:15px;width:auto;}'

4. Buat post baru di laman

Buat Laman Baru

5. Copas kode html berikut di laman baru, jangan lupa gunakan mode html sebelum ngepost




<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>


<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="staffsection"> <!--Pengatur Jarak-->
<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="staffsection"><!--Pengatur Jarak-->
<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

<div class="grid4">
<div class="stafflist boxs">
<div class="coverstaff">
<img src="Url Image Cover"/>
</div>
<a href="Link Profile Admin (bisa sosmed atau chatago)" ">
<div class="avastaff">
<img src="Url Foto Profile Admin" alt/>
</div>
</a>
<div class="descstaff">
<a href="Link Profile Admin (bisa sosmed atau chatago)" "><h3>Nama Admin</h3></a>
<h5>Admin/Tugas Admin</h5>
<p>"Moto Hidup/catatan dari Admin"</p>
</div>
<br>
<div class="staffsocial">
<a href="LINK FACEBOOK ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/fblogo.png"></a>
<a href="LINK CHATAGO ADMIN"><img border="”0?" src="http://animeindo.co/wp-content/themes/animeindoco/images/chatango.png"></a>
</div>
</div>
</div>

6. Simpan, jangan lupa di kasih judul

Selamat kalian sudah berhasil membuat Staff List yang seperti Animeindo :D

Silahkan klik Link di bawah ini untuk melihat hasil Demo

Ok saya kira cukup sekian dari saya..
Semoga tutorialnya dapat bermanfaat ..

Kalau ada pertanyaan silahkan komentar saja yah gan :) jangan ragu nanti akan saya jawab secepat mungkin :D



Keyword
Cara membuat staff list yang keren, cara membuat staff list simple & responsive, cara membuat staff list seperti animeindo,
cara membuat staff list part 2, 3, 4, 5, 6, 7, 8, 10, cara membuat staff list keren, staff list berwarna, terstruktur, cara membuat staff list seperti fanshare, fansub, seperti website streaming dan download anime,

Bagikan

Jangan lewatkan

Cara Membuat Staff List Keren Seperti Animeindo.co
4/ 5
Oleh

Subscribe via email

Suka dengan artikel di atas? Tambahkan email Anda untuk berlangganan.

1 komentar:

Tulis komentar
avatar
Anonim
10 Januari 2020 pukul 06.10

min ko saya jadinya begini ya? http://prntscr.com/qluijb

Reply

Jangan lupa tinggalkan komentar yah :)