Cara Membuat Staff List

Di kesempatan kali ini saya akan membagikan panduan Cara Membuat Staff List yang sanag mudah sederhana dan Responsive sanagt cepat dalam menampilkanya. Maksud membuat starff list di itu biasanya penanggung jawab dalam artian web site terkadang tidak di klola hanya satu orang saja namuan beberapa nah bila ada postingan pastinya juga berpengaruh di penulisnya pasti ada nama pembuatnya atau bila kalian mempunyai problem pastinya kalian di tujukan untuk memlih admin untuk mecontak dalam pemberitahuaan permasalhanya.

Panduan yang saya buat ini sudah work sudah saya coba di blog saya ini, bila kalian melakukan dengan tahapan benar maka akan berhasil. Nah sekarang kalian sudah taukan apa manfaat staff list itu. Oky langsung saja ke panduanya ya, ikuti langkah - langkah berikut ini.

Cara Membuat Staff List :
  • Buka Halaman pada blogger.
  • Ubah halaman ke mode HTML.
  • Copy kode di bawah ini lalau paste.
<style>
/* Staff List Part 2 - Arlethdesign
================================== */
#axdz .stf-list{position:relative;float:left;margin:5px;padding:10px;background:#ff7e9d url(https://1.bp.blogspot.com/-qMYC7h6BRXM/WiblBM2l8II/AAAAAAAAAcQ/pcEmPj0-ZPEXrNJV-KoeLFy6pb2-IrSCgCPcBGAYYCw/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>
  • Save. Lihat Hasilnya.

NB. Tulisan yang berwarna merah kalian ubah menuruh keterangan ya.
Bagimana sangat mudah sekali kan dalam pembuatanya, semoga artikel yang saya buat ini bisa bermanfaat buat kalian dan jangan lupa untuk di bagikan kepada temen - temen kalian agar bermanfaat juga ya.
Posting Komentar (0)
Lebih baru Lebih lama