Cara Membuat Staff List Tonansub

Dengan Staff List Pengunjung dapat melihat Siapasaja yang berkaitan dengan Blog tersebut atau Fansub tersebut, biasanya tercantum Jabatan dan Pekerjaan di Fansub tersebut. Kalo menurut saya, ini sangat penting sekali untuk di cantumkan dalam Blog kalian... hehe. OK, langsung aja kita ke tutorial nya. ikuti baik-baik yah!. Kali ini Agak berbeda dari sebelumnya...

Mungkin Tutorial kali ini cukup mudah dan sederhana karena pengunaan CSS yang tidak begitu rumit.

Pertama masuk ke blogger --> Template --> Edit HTML
Letakkan CSS berikut di bawah <b:skin> atau di atas </b:skin>

/* CSS Founded by Fansublogger */
.col-md-3 {
    width: 25%;
}
.thumbnail {
    display: block;
    height: auto;
    max-width: 100%;
    padding: 4px;
    margin-bottom: 20px;
    line-height: 1.42857;
    background-color: #FFF;
    border: 1px solid #DDD;
    border-radius: 4px;
    transition: all 0.2s ease-in-out 0s;
}
.thumbnail > img {
    display: block;
    height: 75px;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
}
.thumbnail .caption {
    padding: 9px;
    color: #333;
}
.thumbnail .caption p {
    margin: 0px 0px 10px;
}
.thumbnail .caption hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border-right: 0px none;
    border-width: 1px 0px 0px;
    border-style: solid none none;
    border-color: #EEE -moz-use-text-color -moz-use-text-color;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
}

Sekarang kita Masukkan HTML nya

<div class="col-md-3 column">
<div class="thumbnail">
<img src="URL Gambar">
<div class="caption" align="center">
<p>Nama</p>
<hr>
<p>Posisi</p>
<p><a href="Link Facebook, Twitter"><img src="http://www.tontonanime.com/staff/fb.png"></a></p>
</div>
</div>

Langsung ajah kita liat demo nya

See the Pen vHAxu by hilmanfad (@hilmanfad) on CodePen.