Cara Membuat Staff List V.2

March 31, 2015

Hai Minna-san ! ~
Mimin Bingung mau kasi Tutorial apa :3
Tapi Tiba-tiba ada yang minta tolong Buatin Tutorial Baru xD
Yasudah langsung Mimin Buat deh xD
Tutorial Kali ini Adalah
Cara Membuat Staff List V.2
Silahkan Liat Demonya Dibawah

DEMO


Macchan

Macchan

Facebook | Twitter
Editor
Arie

Arie

Facebook | Twitter
Editor
Nano

Nano

Facebook | Twitter
Editor, Typesetter
Kyousukeee

Kyousukeee

Facebook | Twitter
Translator
Administrator

Administrator

Facebook | Twitter
Owner, Translator, Tlc, Encoder, Editor, Typesetter, Uploader, Karaoke effect

Langsung saja Ikuti Cara Dibawahnya xD
Pertama Masukkan CSS ya Diatas </style> / </b:skin>

.fslist {
  border-bottom: 1px solid #DDD;
  padding-bottom: 5px;
  margin-bottom: 5px;
}
.imgfslist {
  float: left;
  margin-right: 10px;
}
.imgfslist img {
  width: 50px;
  height: 50px;
  border: 1px solid #DDD;
  border-radius: 5px;
  padding: 1px;
}
.infofslist {
}
#content .infofslist h3 {
  font-size: 12px;
  margin: 0;
  text-transform: none;
  border: 0;
  padding: 0;
  font-weight: bold;
}
.infofslist a {
  color: #3f3f3f;
}

Setelah itu, Masukkan HTML ya di Page / Post anda

 <div class="fslist"><div class="imgfslist"><img src="http://api.rethumb.com/v1/width/150/http://animangation.net/wp-content/uploads/2014/09/20140904144648.jpg" title="Macchan" alt="Macchan"/></div><div class="infofslist"><h3>Macchan</h3><a href="http://www.facebook.com/https://www.facebook.com/mayu.k.yuko" target="_blank"><i class="fa fa-facebook-square" style="color: #2975BB;"></i> Facebook</a> | <a href="http://www.twitter.com/mayu_kitahara" target="_blank"><i class="fa fa-twitter-square" style="color: #3FC0E9;"></i> Twitter</a><br/><i class="fa fa-gear" style="color: #F7740E;"></i> Editor<div class="clear"></div></div></div><div class="fslist"><div class="imgfslist"><img src="http://api.rethumb.com/v1/width/150/http://animangation.net/wp-content/uploads/2014/09/10649886_337432299766621_5592652306994555611_n.png" title="Arie" alt="Arie"/></div><div class="infofslist"><h3>Arie</h3><a href="http://www.facebook.com/https://www.facebook.com/arie.l.espada" target="_blank"><i class="fa fa-facebook-square" style="color: #2975BB;"></i> Facebook</a> | <a href="http://www.twitter.com/ArieSyihab" target="_blank"><i class="fa fa-twitter-square" style="color: #3FC0E9;"></i> Twitter</a><br/><i class="fa fa-gear" style="color: #F7740E;"></i> Editor<div class="clear"></div></div></div><div class="fslist"><div class="imgfslist"><img src="http://api.rethumb.com/v1/width/150/http://animangation.net/wp-content/uploads/2014/09/140967.jpg" title="Nano" alt="Nano"/></div><div class="infofslist"><h3>Nano</h3><a href="http://www.facebook.com/https://www.facebook.com/kirue.ozaki" target="_blank"><i class="fa fa-facebook-square" style="color: #2975BB;"></i> Facebook</a> | <a href="http://www.twitter.com/Kirues" target="_blank"><i class="fa fa-twitter-square" style="color: #3FC0E9;"></i> Twitter</a><br/><i class="fa fa-gear" style="color: #F7740E;"></i> Editor, Typesetter<div class="clear"></div></div></div><div class="fslist"><div class="imgfslist"><img src="http://api.rethumb.com/v1/width/150/http://animangation.net/wp-content/uploads/2014/09/10430853_740382132663957_8061708621017581239_n.jpg" title="Kyousukeee" alt="Kyousukeee"/></div><div class="infofslist"><h3>Kyousukeee</h3><a href="http://www.facebook.com/https://www.facebook.com/Kyousukeee" target="_blank"><i class="fa fa-facebook-square" style="color: #2975BB;"></i> Facebook</a> | <a href="http://www.twitter.com/" target="_blank"><i class="fa fa-twitter-square" style="color: #3FC0E9;"></i> Twitter</a><br/><i class="fa fa-gear" style="color: #F7740E;"></i> Translator<div class="clear"></div></div></div><div class="fslist"><div class="imgfslist"><img src="http://api.rethumb.com/v1/width/150/http://animangation.net/wp-content/uploads/2014/09/Air-in-Summer.jpg" title="Administrator" alt="Administrator"/></div><div class="infofslist"><h3>Administrator</h3><a href="http://www.facebook.com/https://www.facebook.com/100002740101167" target="_blank"><i class="fa fa-facebook-square" style="color: #2975BB;"></i> Facebook</a> | <a href="http://www.twitter.com/dapital" target="_blank"><i class="fa fa-twitter-square" style="color: #3FC0E9;"></i> Twitter</a><br/><i class="fa fa-gear" style="color: #F7740E;"></i> Owner, Translator, Tlc, Encoder, Editor, Typesetter, Uploader, Karaoke effect<div class="clear"></div></div></div></div>

Nah Mudahkan , xD
Silahkan Komentar Kalau ada Masalah ~

Pengunjung yang baik, Pasti akan meninggalkan Komentarnya,
Biarpun itu hanya Pertamax! / Sankyuu

No comments

Subscribe to: Post Comments ( Atom )