Cara Membuat Staff List [Part 2]

Kali ini ane akan membagikan tutorial cara membuat staff list part 2, staff list part 1 silahkan cek disini. Sama seperti part 1 tutorial ini sudah ane buat dengan simple, responsive, dan mudah diedit.

Staff list yang satu ini memiliki design Tinggi bukannya Lebar, jadi tidak dapat menambahkan text terlalu banyak, kalian juga bisa menambahkan background atau gambar sesuai keinginan.

Cara Membuat Staff List - Part 2

1. Buka Blogger > Halaman > Tambahkan Halaman Baru
2. Gunakan metode HTML bukan Compose, lalu simpan CSS dan HTML berikut dihalaman tersebut

<style>
/* Staff List Part 2 - Arlethdesign
  ================================== */
#axdz .stf-list{position:relative;float:left;margin:5px;padding:10px;background:#ff7e9d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-q1hzgxY3Z6Wj6kNw6X7ybS9r1IkJhpbvb5CAEcrHjkRtOqYL796mYsdsJsLzdGov2GyBrbOjFefmCadBIzn9D3ox2HO_if0SWSuT7BEBH6L7cxSzg1Nu28V7rymSKegBmASc4hngsIE/s1600/bg_repeat.png) center repeat-x;background-position:0 10px;color:#FFF;box-shadow:0 0 5px rgba(0,0,0,.5)}
#axdz .stf-list-imgs{height:150px;overflow:hidden;width:150px;border-radius:100%;position:relative;transition:all .3s}
#axdz .stf-list-imgs img{width:150px;height:150px;border:0;padding:0;background-color:#FFF;margin:0;transition:all .3s}
#axdz .stf-list-imgs:after{cursor:pointer;content:"";background:rgba(0,0,0,0.2);position:absolute;left:0;top:0;height:150px;width:150px;border-radius:100%;opacity:0;visibility:hidden;transition:all .3s}
#axdz .stf-list b{display:block;text-align:center;margin:15px auto 0;text-transform:uppercase;font-size:14px;letter-spacing:.3px;line-height:1.5;font-weight:bold;padding:0}
#axdz .stf-list i{text-align:center;display:block;font-style:normal}
#axdz .stf-list-info:after{content:"";width:25px;border-bottom:1px solid #ffffff;position:absolute;left:0;right:0;padding-top:7px;margin:auto}
#axdz .stf-list-imgs:hover:after{opacity:1;visibility:visible;transition:all .3s}
#axdz .stf-list-medsos{margin-top:16px;text-align:center}
#axdz .stf-list-medsos a{color:#222;font-size:14px;display:inline-block;padding:0 3px}
#axdz .stf-list-medsos a:hover{color:#FFF}
</style>

<div id='axdz'>
<div class="stf-list">
   <div class="stf-list-imgs">
      <img alt="NAMA ADMIN" src="LINK GAMBAR" title="NAMA ADMIN"/>
   </div>
   <div class="stf-list-info">
      <b>Admin1</b>
      <i>Translator</i>
   </div>
   <div class="stf-list-medsos">
      <a href="LINK Facebook"><i class="fa fa-facebook-square"></i></a>
      <a href="LINK GPlus"><i class="fa fa-google-plus-square"></i></a>
      <a href="LINK Twitter"><i class="fa fa-twitter-square"></i></a>
   </div>
</div>
<div class="stf-list">
   <div class="stf-list-imgs">
      <img alt="NAMA ADMIN 2" src="LINK GAMBAR" title="NAMA ADMIN 2"/>
   </div>
   <div class="stf-list-info">
      <b>Admin2</b>
      <i>Scanner</i>
   </div>
   <div class="stf-list-medsos">
      <a href="LINK Facebook"><i class="fa fa-facebook-square"></i></a>
      <a href="LINK GPlus"><i class="fa fa-google-plus-square"></i></a>
      <a href="LINK Twitter"><i class="fa fa-twitter-square"></i></a>
   </div>
</div>
</div>

3. Jika sudah Publikasikan.

Demo

Sekian Tutorial Cara Membuat Staff List Untuk blog Fanshare atau Fansub [Part 2], semoga bermanfaat dan sampai jumpa ditutorial berikutnya.