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