Cara Membuat Info Anime V3

May 03, 2015

Ohayou Minna-san xD
Mimin mau Berbagi Tutorial nih xD Langsung saja di coba :D
Tutorial Kali ini mimin dapat dari pengunjung yang menyarankan Membuat Tutorial seperti ini yg berada di Fansub Tonansub :D

DEMO

Langsung saja ikuti Caranya Dibawahnya ~ :D
Silahkan Masukkan CSS nya di atas </style> / </b:skin> 

.col-md-8 {
  width: 66.66666666666666%;
}
.row {
  margin-right: -15px;
  margin-left: -15px;
}
.row:before, .row:after {
  display: table;
  content: " ";
}
.col-md-12 {
  width: 100%;
}
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
  float: left;
}
.lined-heading {
  position: relative;
  margin-top: 0;
  margin-bottom: 5px;
  text-align: center;
  display: block;
}
h1.lined-heading:before, h2.lined-heading:before, h3.lined-heading:before, h4.lined-heading:before, h5.lined-heading:before, h6.lined-heading:before {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: block;
  width: 100%;
  height: 1px;
  border-top: 2px solid #ccc;
  content: "";
}
h1.lined-heading span, h2.lined-heading span, h3.lined-heading span, h4.lined-heading span, h5.lined-heading span, h6.lined-heading span {
  position: relative;
  z-index: 1;
  padding: 0 20px;
  background: #fff;
  display: inline-block;
}
img {
  vertical-align: middle;
}
.col-md-4 {
  width: 33.33333333333333%;
}
.col-md-8 {
  width: 66.66666666666666%;
}
.table {
  width: 100%;
  margin-bottom: 20px;
}
.room-thumb .main .price, .comment, .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th, .panel-default > .panel-heading {
  background-color: rgba(90, 186, 198, 0.05);
}
.table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #f9f9f9;
}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
  border-top: 1px solid #ebebeb;
}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
  padding: 8px;
  line-height: 1.428571429;
  vertical-align: top;
  border-top: 1px solid #dddddd;
}
.row:after {
  clear: both;
}
.col-md-12 {
  width: 100%;
}
.comment {
  margin: 20px 0 0 0;
  padding-bottom: 20px;
}
.comment p {
  margin: 0;
  padding: 0 20px 0 20px;
}
#reservation-form {
  margin-top: -60px;
}#reservation-form .reservation-horizontal, #reservation-form .reservation-vertical, #contact-form .contact-vertical {
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  border: 1px solid #ebebeb;
  -webkit-box-shadow: 0 3px 0 0 rgba(0,0,0,0.12);
  box-shadow: 0 3px 0 0 rgba(0,0,0,0.12);
  padding: 30px 30px;
  z-index: 9999;
  background-color: #fff;
}
.col-sm-12 {
  width: 100%;
}
.room-thumb .main .price, .comment, .table-striped > tbody > tr:nth-child(odd) > td, .table-striped > tbody > tr:nth-child(odd) > th, .panel-default > .panel-heading {
  background-color: rgba(90, 186, 198, 0.05);
}
#reservation-form .price, label span, .room-thumb .main .price, .room-thumb .content p span, .blog-author span, #owl-reviews .text-balloon span, .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight, .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, aside .widget ul a:hover, .yamm a:hover {
  color: #75c5cf !important;
}
#reservation-form .price {
  padding: 10px 25px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 12px;
  font-size: 18px;
  display: block;
  border: 1px dashed #ebebeb;
}

Jika Sudah diletakkan, Silahkan Masukkan HTMLnya di dalam Post / Page anda :D
  <div class="row">
            <div class="col-md-12">
    <h3 class="lined-heading"><span>Arslan Senki Subtitle Indonesia</span></h3>
    <br>
     <div class="row">
      <div class="col-md-4">
      <img width="230px" height="335px" src="http://tontonanime.com/gambar/arslan.jpg">
      </div>
      <div class="col-md-8"> 
       <table class="table table-striped mt1">
        <tbody>
          <tr>
         <td width="20%">Japanes</td>
         <td width="1%">:</td>
         <td width="79%"> アルスラーン戦記</td>
          </tr>
          <tr>
         <td>Type</td>
         <td>:</td>
         <td>TV</td>
          </tr>
          <tr>
         <td>Genre</td>
         <td>:</td>
         <td>Action, Adventure, Drama, Fantasy, Historical, Supernatural</td>
          </tr>
          <tr>
         <td>Status</td>
         <td>:</td>
         <td>on-going</td>
          </tr>
          <tr>
         <td>Durasi</td>
         <td>:</td>
         <td>24 min. per episode</td>
          </tr>
          <tr>
         <td>Rating</td>
         <td>:</td>
         <td>7.66</td>
          </tr>
          <tr>
         <td>Episode</td>
         <td>:</td>
         <td>Unknown</td>
          </tr>
          <tr>
         <td>Produser</td>
         <td>:</td>
         <td>FUNimation EntertainmentL, Magic Capsule, SANZIGEN, LIDENFILMS, Graphinica, NBCUniversal Entertainment</td>
          </tr>
          <tr>
         <td>Mulai Rilis</td>
         <td>:</td>
         <td>Apr 5, 2015 to ?</td>
          </tr>
        </tbody>
       </table>
      </div>
     </div>
     <div class="row">
      <div class="col-md-12">
       <hr>
       <div class="comment">
        <center>
        <p><h4>Sinopsis</h4></p>
        <p>Di umurnya yang ke-14 Arslan masuk ke medan tempur, api berkobar membakar semua kerajaan dan kerajaannya jatuh, dan dia kehilangan segalanya. Banyak cobaan yang akan dihadapi Arslan, meskipun begitu Arslan harus merebut kembali kerajaannya yang jatuh itu!</p>
        </center>
        <br>
        <br>
       </div>
       
      </div>
     </div>
             </div>
          </div>
        </article>
    <section id="reservation-form" class="mt100">
     <div class="col-sm-12">
      <form class="reservation-vertical clearfix" role="form" method="post" action="php/reservation.php" name="reservationform" id="reservationform">
       <h3 class="lined-heading"><span>Download Arslan Senki</span></h3>
       <div class="price">
            <h4><a href="arslan-senki-episode-4-subtitle-indonesia">Arslan Senki episode 4 subtitle indonesia</a></h4>
   </div>
   <div class="price">
            <h4><a href="arslan-senki-episode-3-subtitle-indonesia">Arslan Senki episode 3 subtitle indonesia</a></h4>
   </div>
   <div class="price">
            <h4><a href="arslan-senki-episode-2-subtitle-indonesia">Arslan Senki episode 2 subtitle indonesia</a></h4>
   </div>
   <div class="price">
            <h4><a href="arslan-senki-episode-1-subtitle-indonesia">Arslan Senki episode 1 subtitle indonesia</a></h4>
   </div>
      </form>
     </div>
    </section>

SETTINGan nya Seperti Versi - versi sebelumnya juga kok xD 
Jadinya gk usah mimin jelasin yah xD
Nah, Jika ada masalah silahkan Komentar dibawahnya,

Pengunjung yang baik, pasti akan meninggalkan Komentarnya,
Biarpun itu hanya Pertamax! / Sankyuu
Jangan Lupa Like & Share yah! (y)

No comments

Subscribe to: Post Comments ( Atom )