Cara Menciptakan Staff List [Part 1]

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

Staff list yang aku share ini sudah responsive dan simple, gampang untuk diedit sebab staff list ini terdiri dari cuilan CSS dan HTMLnya saja, kalian cukup mengubah cuilan HTMLnya saja tanpa perlu mengubah yang lainnya, gampang bukan. Ok kita mulai saja tutorial kali ini.

Demo

Cara Membuat Staff List Simple & Responsive

1. Silahkan Buka Blogger > Tambahkan Page/Laman > kemudian 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/AVvXsEiGXv3gL8u8ejnCtf5l0PSSlvBqTwTssacmRLwhLYuGH-jhiy1HuXZbdWwWlXZT95zM0HAO3ERRFdXoHcgqeMuzF4iPy8WBm_OMLMgh27gosVwC6HbuwXXzF7v1aJcABg9mnn7mMxzA4eAf/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/AVvXsEgcW8-eEsTf7Pif1MqUo9DdFC6yeeqM5zxZcQ197j3TxuFxzS8qJBG0yKrdytgTSDvTULpUwPogSdbuP7cIxKMyEBnlePfPG-JWkSRTzBiC6P-ir5HEfxj6NEuoJlVzfo9z_S077-u2zdzB/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/AVvXsEjFIWRBGm5_EWFRGRIAv_STZ2muW2ezLQj8HBbVaE4nSpqpIOD8Ok7kJWuqV_z0udsqXDoh3-1cO1J5KFYIErSv89lZ9ROLF_MRKokUbaLyFeLu2MtG_evGWFhHYIBuWuTDvVmyRjQP7m4b/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 cuilan yang sudah ditandai.

Bagikan Artikel ini