Cara Menciptakan Staff List [Part 2]

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

Staff list yang satu ini mempunyai design Tinggi bukannya Lebar, jadi tidak sanggup menambahkan text terlalu banyak, kalian juga sanggup 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, kemudian 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/AVvXsEiFJ7Po7E87pKOMd8lPjaYPZnGISdDuZzSeqFQLajjqbYFIdikang51ztM6G8VivBQGR5d_5q-EJ3GsCbk87VVhKV2awIoOXjoHJhsE3I8TFwF7I_qrui1SFaivGsWghnFGSl0tJhvpJFw/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=" tutorial ini sudah ane buat dengan simple Cara Membuat Staff List [Part 2]" src="LINK GAMBAR" title="Cara Membuat Staff List [Part 2]"/>    </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=" tutorial ini sudah ane buat dengan simple Cara Membuat Staff List [Part 2]" src="LINK GAMBAR" title="Cara Membuat Staff List [Part 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], biar bermanfaat dan hingga jumpa ditutorial berikutnya.

Bagikan Artikel ini