Cara Buat Staff List Seperti iMoechan

Share lagi... Tutorial "Cara Buat Staff List Seperti iMoechan"

1. Login Blogger dulu
2. Masuk Template -> Edit HTML
3. Lalu cari kode </style>  atau </b:skin>  (untuk memudahkan pencarian tekan CTRL + F) terapkan kode CSS ini tepat diatas kode </style>  atau </b:skin> 

/* Staff List iMoechan - Nukodezign*/
.fslist {
   margin:-8px;}
.imgfslist {
  float: left;
margin-right: 10px;
margin: -12px 10px;
}
.imgfslist img {
    width: 50px;
    height: 50px;
    border: 1px solid #DDD;
    border-radius: 5px;
    padding: 1px;
}
.infofslist {border-bottom:1px solid dashed #ccc;}

.infofslist h2 {
    font-size: 12px;
    margin: 0px;
    text-transform: none;
    border: 0px none;
    padding: 0px;
    font-weight: bold;
} 

Lalu buat laman statis dan terapkan kode ini di HTML bukan di Compose

<div class="fslist">
<div class="imgfslist">
<img src="http://3.bp.blogspot.com/-pBHqdcrsy9s/VKqlBD6jxnI/AAAAAAAACCg/bmU607rccVA/s1600/ReiKazuya.png" /></div>
<div class="infofslist">
<h2>
Rei Kazuya</h2>
Translator<br />
Contact Admin : &gt;<a href="https://www.facebook.com/Agecuk" target="_blank">Facebook</a>&lt;</div>
<br />
<div class="clear">
</div>
</div>
<div class="fslist">
<div class="imgfslist">
<img src="URL Gambar" /></div>
<div class="infofslist">
<h2>
Nama</h2>
TLC<br />
Contact Admin : &gt;Facebook&lt;</div>
<br />
<div class="clear">
</div>
</div>
<div class="fslist">
<div class="imgfslist">
<img src="URL Gambar" /></div>
<div class="infofslist">
<h2>
Nama</h2>
Encoder + Uploader<br />
Contact Admin : &gt;Facebook&lt;</div>
<br />
<div class="clear">
</div>
</div>

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn