Cara Membuat Staff List [Part 1]

Cara Membuat Staff List Simple & Responsive - Tutorial sebelumnya saya sudah membagikan Cara Menambahkan Gambar Di Footer Dengan Css untuk kali ini saya akan membagikan tutorial cara membuat staff list yang simple dan responsive.

Staff list yang saya share ini sudah responsive dan simple, mudah untuk diedit karena staff list ini terdiri dari bagian CSS dan HTMLnya saja, kalian cukup mengubah bagian HTMLnya saja tanpa perlu mengubah yang lainnya, mudah bukan. Ok kita mulai saja tutorial kali ini.

Demo

Cara Membuat Staff List Simple & Responsive

1. Silahkan Buka Blogger > Tambahkan Page/Laman > lalu simpan CSS berikut dihalaman tersebut

<style>
/* CSS Staff List By Arlethdesign */
.admin{padding-bottom:10px}
.admin img{float:left;margin-right:5px;max-width:70px;max-height:70px}
.admin .info_admin{display:block;}
.admin .info_admin li{line-height:normal!important;margin:7px;list-style:none}
@media screen and (max-width:640px){.admin img{float:none;text-align:center;max-width:100%;max-height:100%;width: 100%;margin:auto;}.admin .info_admin{float:none;text-align:center;}}
</style>



2. Kemudian Letakkan HTML berikut dibawah CSS yang barusan kalian simpan dipage/laman

<!-- Admin 1 -->
<div class='admin'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9aUxKR0MrJomXp72ECDvMTKlRL6vrGZuA4P5RcgmdKxzy-4dHACKAN_XP2MAAnApbjMS9D-xG-_gG2lVRlsfH67haYoEojt9CbrnG7kgBqiBtK50c2iQn9UjrZRrYtclKThdCFEIhmS0p/s1600/nagato2.jpg'/>
<div class='info_admin'>
<li><b>Admin</b></li>
<li>Owner - Translator - Uploader - Encoder - Design web - Typesetter - Editor</li>
<li>Contact - Facebook - Instagram - Twitter</li>
</div>
</div>

<!-- Admin 2 -->
<div class='admin'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9z4_bBrTiXiYx1NkJTN0w4mSZsymXEc8qbo4VlncUdO6pQriI6G_QuAxpj4Dmqe2bK7F9z_tDZCA3PK-oOyYtTB4xY_u5Xpc-o_28curCf9DrFfHvBPhHxB_PNQffthuANA5pYqAFiqV2/s1600/uwah.png'/>
<div class='info_admin'>
<li><b>Admin</b></li>
<li>Owner - Translator - Uploader - Encoder - Design web - Typesetter - Editor</li>
<li>Contact - Facebook - Instagram - Twitter</li>
</div>
</div>

<!-- Admin 3 -->
<div class='admin'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVlWrCJAyCmVkx-mkJMmZv5RiNbds6v18hIrBsme8gGbiuSgXm1PZcpShtaESPwACUFo79fbPP2pXDP5ebZzMc1kUtaV0zr-yiD07pNDenMhnK3QRJLl0qQmb68qECj0k16MSASGOU8UTA/s1600/saber1.jpg'/>
<div class='info_admin'>
<li><b>Admin</b></li>
<li>Owner - Translator - Uploader - Encoder - Design web - Typesetter - Editor</li>
<li>Contact - Facebook - Instagram - Twitter</li>
</div>
</div>



3. Jika sudah jangan lupa untuk di edit pada bagian yang sudah ditandai.