Cara Membuat Template List iMoechansz

  1. Home
  2. Tutorial
  3. Cara Membuat Template List iMoechansz

Huee, Dari Kemarin udah ada yang minta Beginian sih
Cuma mimin Lupa Buatanya ^^
Gomen deh, Yaudah Sekarang Bakal Mimin Buat Tutorialnya



Langsung saja ikuti Cara dibawahnya,
Silahkan Masukkan CSSnya diatas </style> / </b:skin>

.col-md-3 {
  width: 32%;
  margin:0 2px;
  float: left;
}
.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: 110px;
  width: 195px;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
}
.thumbnail .caption {
    padding: 9px;
    color: #333;
}
.supportus {width:150px;height:auto;margin:0 5px;}
.supportus img{  border: 5px double #ddd;
  min-width: 274px;
  margin: -135px 95px;
  margin-bottom: 5px;
}
.supportus img:hover{opacity:5;}
.fakyoh {border: 3px double #ddd;
  padding: 5px 7px;
background:#444;
margin-top:7px;}
.supportus2 {width:150px;height:auto;margin:0 5px;}
.supportus2 img{  border: 5px double #ddd;
  min-width: 274px;
  margin: 0px -214px;
}
.supportus2 img:hover{opacity:5;}
.fakyoh {border: 3px double #ddd;
  padding: 5px 7px;
background:#444;
margin-top:7px;}
.fakyoh a {
  color: #fff;
font-weight:bold;}
  
.fakyoh:hover {background:#FFAAAA;transition:all .45s all-ease-in-out;}
.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;
}

Setelah itu , Silahkan Masukkan HTMLnya 
<div class="col-md-3 column">
<div class="thumbnail">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJVeEpQz9Ox7wZTQY8dxzgxDBL7YMsvIu55S6QMy3yUZ3RQTPH782hGcw7dpNCepN2NNOv2WL9p78ggQdu-FrpS-3kqzr5kWvfIHIFFWgNp8t9MytJQO7Ip4XTbn31W2neoqbjoyoSCGUm/s1600/Screenshot_1.png" />
<br />
<div align="center" class="caption">
<b>Kato Megumi Theme <span style="color: red;"><i>New!</i></span></b><br />
<hr />
<b>Design by iMoechan</b><br />
<div class="fakyoh">
<a href="http://www.imoechanz.ga/2015/04/kato-megumi-template-blogger.html">DOWNLOAD</a></div>
</div>
</div>
</div>
<div class="col-md-3 column">
<div class="thumbnail">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6leoNfFIVqKcBzfq6waJGgSsXstLQ5DMuld-klzSGD4A1jnKGXInrXDaSeLm2jbW4QRO4JS2a8tuaoLD1GcqBoWz_cmVuttMabyE_Cg-re5YFPlrJ2gGT6pIk5XdggtJDOFrLq2Q-eg7p/s1600/Tampilan.png" />
<br />
<div align="center" class="caption">
<b>LoliJones Theme </b><br />
<hr />
<b>Design by iMoechan</b><br />
<div class="fakyoh">
<a href="http://www.imoechanz.ga/2015/04/lolijones-template-blogger.html">DOWNLOAD</a></div>
</div>
</div>
</div>
<div class="col-md-3 column">
<div class="thumbnail">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilRaZMQap9J2QZnSQRENiG1-5k4dQ6lNA4k5FginF1kJ-Auh-9DDPWOyNMf0cSZcVsybO0b6BaG3KjhPIQ5V0YySYopL_2T1VDNmblvIeE0s6P7KPVarvxOM70tjJss4_PNXv_87MlVtYp/s1600/Screenshot_1.png" />
<br />
<div align="center" class="caption">
<b>Inaho Kaizuka Theme </b><br />
<hr />
<b>Design by iMoechan</b><br />
<div class="fakyoh">
<a href="http://imoechansz.blogspot.com/2015/03/inaho-kaizuka-template-blogger.html">DOWNLOAD</a></div>
</div>
</div>
</div>
<div class="col-md-3 column">
<div class="thumbnail">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijtOE8-9KOsAndLshMu9NLttb19TkyZPRqnJMG1bCXGnjnDVt9lhU4oEuP-TXQsKFYQGBRP40hS7qwAV0xJyWWJ0c3RDV8BOa0rFeWD4DQy8lkb-a8HDGHdJWQu5I1e-bQRw3qb-yC4MEq/s1600/Tampilan.png" />
<br />
<div align="center" class="caption">
<b>Kuroko Tetsuya Theme </b><br />
<hr />
<b>Design by iMoechan</b><br />
<div class="fakyoh">
<a href="http://imoechansz.blogspot.com/2015/03/kuroko-tetsuya-template-blogger.html">DOWNLOAD</a></div>
</div>
</div>
</div>
<div class="col-md-3 column">
<div class="thumbnail">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7AS5P_DqcC26PLqH6eYrjab0LFLh9hxI4Tx5iI2OhqqGvjUs8CjQBDdWfWGBK9cweKScguduW-JjKwZJ_qq1_7tchOazvBOIZojWfsywsx-smcEcxCvky7zraIB5Ta2ZW-urfXYDzVYAK/s1600/Screenshot_2.png" />
<br />
<div align="center" class="caption">
<b>Miku Green Theme </b><br />
<hr />
<b>Design by iMoechan</b><br />
<div class="fakyoh">
<a href="http://imoechansz.blogspot.com/2015/03/miku-green-template-blogger.html">DOWNLOAD</a></div>
</div>
</div>
</div>
<div class="col-md-3 column">
<div class="thumbnail">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGsb9CWbCLlqeRzhoJPikjBbjRbWbBT5eo19yMiPyGbthMnzig586xEjwqXfbDD8BVrP0mGOH8fAjEAzvaIuOjq_CxbdeAsZZb1Avz-6_9sAqVcqNTRk8jOPJ7PCauUJ4f_xGxm3MQSGSI/s1600/Screenshot_1.png" />
<br />
<div align="center" class="caption">
<b>Hyouka Theme </b><br />
<hr />
<b>Design by iMoechan</b><br />
<div class="fakyoh">
<a href="http://imoechansz.blogspot.com/2015/03/hyouka-template-blogger.html">DOWNLOAD</a></div>
</div>
</div>
</div>
<div class="col-md-3 column">
<div class="thumbnail">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIfFIKH0AKHr4tuF0NSQEz81YydsM23egwMGnhaD0G0XjHiVXc0ika0aTjc8kIPQ_5GJX7M0U2S8rJsDdXCC2EYoMnrANsU2AWBFXezgJ4fBERIqj-Q7dA_3Tvt1AIGZ_hrAG642xsznD9/s1600/Templates.png" />
<br />
<div align="center" class="caption">
<b>iMoechansz Official Theme [Premium] </b><br />
<hr />
<b>Design by iMoechan</b><br />
<div class="fakyoh">
<a href="http://imoechansz.blogspot.com/2015/03/imoechansz-official-theme-blogger.html">DOWNLOAD</a></div>
</div>
</div>
</div>
<div class="col-md-3 column">
<div class="thumbnail">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdrIL0jUB8Hp4PHMFEeepC9pvl4rwc9xZw6MUO35NOe48mnzn8QyLXHFrd_blAyKDz3TM5r8Mf1277sWlDgSGPR6SZG3wJAubm8ISxfXYDC0puJxwcFZBngjCYyTjr_D5I6FoMTYpZOVc/s320/SS+Hiver.png" />
<br />
<div align="center" class="caption">
<b>HoverFansub Theme V3.0 [Final] </b><br />
<hr />
<b>Design by iMoechan</b><br />
<div class="fakyoh">
<a href="http://imoechansz.blogspot.com/2015/03/hoverfansub-versi-30-template-blogger.html">DOWNLOAD</a></div>
</div>
</div>
</div>
<div class="col-md-3 column">
<div class="thumbnail">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4-JFEX170irM46aU28ip7PwQxE8lcG2rPYk-M9Tc5iM-B6SmafZFSdi9W-7tZOv7iuEvbqLTdiogl8aLbVLNgG-eRaEJMaywWp1buGQ6lKjjce_VmIenxZHnAvNDEA6767__JHUJdmy4V/s1600/Screenshot_2.png" />
<br />
<div align="center" class="caption">
<b>iMoechansz Theme V2.0 </b><br />
<hr />
<b>Design by iMoechan</b><br />
<div class="fakyoh">
<a href="http://imoechansz.blogspot.com/2015/03/imoechansz-v20-template-blogger-premium.html">DOWNLOAD</a></div>
</div>
</div>
</div>
<div class="col-md-3 column">
<div class="thumbnail">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6EJwKnELMK2GMEhCFUwFz0HOItrU_WdJFuuJsKrBcAe1Sw6L2ooZlToWBWxUdLTPSQO8gEhzg2W95W_9frI-lyBl5dSkmwjjGcdRJbBneO4T4Fi5_Zjw-x0xj-cpOfOe1kuSOC7miVtGT/s1600/Onodera.png" />
<br />
<div align="center" class="caption">
<b>OnoderaLovers Theme</b><br />
<hr />
<b>Design by iMoechan</b><br />
<div class="fakyoh">
<a href="http://imoechansz.blogspot.com/2015/03/onoderalovers-template-blogger.html">DOWNLOAD</a></div>
</div>
</div>
</div>
<div class="col-md-3 column">
<div class="thumbnail">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXS9BF-t4D98HRsH3paKNssG18ejSEwC1sF46RMtY8obST6Qbexdqi6XmGm_O5kYvKfPZdmCKYQIMbzRAiiwUPcLl3mqUE6zKb5PcCHkuJNjfczqhbdlRSK9HTk3fyRoKCPqVQ_mNlGy4d/s1600/SS.jpg" />
<br />
<div align="center" class="caption">
<b>iMoechansz Theme </b><br />
<hr />
<b>Design by iMoechan</b><br />
<div class="fakyoh">
<a href="http://imoechansz.blogspot.com/2015/02/imoechansz-blogger-template-free-version.html">DOWNLOAD</a></div>
</div>
</div>
</div>
<div class="col-md-3 column">
<div class="thumbnail">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKeUgZHpjwoWvUIIqsefIr3G8AKKUcLX84m7QPOyQZDwUne4OWo4MTfqvLf_sfVS_bbMw566zhcYsGAMP7zfhn7iBYlmvwjJaAAXiITiFFaF8B7fzWN57gwK6OHZRx0aGvDF0kojUq6hVo/s1600/p.png" />
<br />
<div align="center" class="caption">
<b>IsengShare Theme </b><br />
<hr />
<b>Design by iMoechan</b><br />
<div class="fakyoh">
<a href="http://imoechansz.blogspot.com/2015/02/isengshare-template-blogger.html">DOWNLOAD</a></div>
</div>
</div>
</div>
<div class="col-md-3 column">
<div class="thumbnail">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKqJnyleSo5sVhebG5t7mtwPFCOoCJTGJTwknORlyG_Irxv28qw0FelRDsP0bgMKjp5a_dgsWy48g9B0AahAUlYCq7_0jFfEtyDvs2YqFY6vPPJEZ5Osx-BlxcjzXAno6H8UsauXgwIKuA/s1600/p.png" />
<br />
<div align="center" class="caption">
<b>Chitoge Attack Theme </b><br />
<hr />
<b>Design by iMoechan</b><br />
<div class="fakyoh">
<a href="http://imoechansz.blogspot.com/2015/02/chitoge-attack-template-blogger.html">DOWNLOAD</a></div>
</div>
</div>
</div>
<div class="col-md-3 column">
<div class="thumbnail">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSz8yL6fgkLhllbngdo-kgi_8dvzEDN00kuWPI0xoyBvsM5Xqk6RaYVE8BPwTKRQSFCRjF5w9-h_vNraSi68Z4sqnUkeZhTgD_5NKqjVS7DFI3wb5UH2UEEkxMb-DZLYTFK0jHujk8wKPN/s1600/p.png" />
<br />
<div align="center" class="caption">
<b>BlackAvelic Theme </b><br />
<hr />
<b>Design by iMoechan</b><br />
<div class="fakyoh">
<a href="http://imoechansz.blogspot.com/2015/02/blackavelic-template-blogger.html">DOWNLOAD</a></div>
</div>
</div>
</div>
<div class="col-md-3 column">
<div class="thumbnail">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn6SH7ZJNzeFWxoKoDaqpxl7uDV9aXxB1NfD5w5ygzUzOup36P2zMqMTf_pnbnGxTsTsC7_lT6f1kOrfKpb3XfCD40Vht-OIAkP6WSh84pIq1KHJGuf9aZl32M1XF2tDt0EQbY42hx3zXz/s1600/p.png" />
<br />
<div align="center" class="caption">
<b>Kimi no Uso Theme </b><br />
<hr />
<b>Design by iMoechan</b><br />
<div class="fakyoh">
<a href="http://imoechansz.blogspot.com/2015/02/kimi-no-uso-template-blogger.html">DOWNLOAD</a></div>
</div>
</div>
</div>
<div class="col-md-3 column">
<div class="thumbnail">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilyABlGHGmVUeU9To5h3qak4Do0YGA3lrEyl9bMUaFIbY8HjU5Cpo8hVJnyAFCa-VX066_oL4-2ZnHuavAKXUcEcba4BYYgvvIJax3VZ3nOA9TDtLaRvoTtjMXvTUngpAidaQ86rm3Z1p5/s1600/sa.png" />
<br />
<div align="center" class="caption">
<b>OtakuNews Theme </b><br />
<hr />
<b>Design by iMoechan</b><br />
<div class="fakyoh">
<a href="http://imoechansz.blogspot.com/2015/02/otakunews-template-blogger.html">DOWNLOAD</a></div>
</div>
</div>
</div>
<div class="col-md-3 column">
<div class="thumbnail">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZZuMrztSVMIbOlmXBWxJ_8pEI85kCSyyCF7cDHjSpTgPTJZyUab19LJKz9weq62lfyV4DADt8VxSSW6dJ0u_M3WIPUMdqDJu-1S4WkVM4iUXliA3wdmiZmWYUpzRMqeHgdeZHWouvWeMf/s1600/p.png" />
<br />
<div align="center" class="caption">
<b>HoverFansub Theme V.2.5 </b><br />
<hr />
<b>Design by iMoechan</b><br />
<div class="fakyoh">
<a href="http://imoechansz.blogspot.com/2015/02/download-demo-thanks-for-download-and_16.html">DOWNLOAD</a></div>
</div>
</div>
</div>
<div class="col-md-3 column">
<div class="thumbnail">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivxNyXWudEARI00HL2C8Z8B1CEsRVUFANH3fG1xVWYWJiBNvDQZU7NTnTAsGTw4HW9SWcHONS4PBZr34HqMlkpzNkwOmFbWDA5p0lmrNeEtSNyRtjAczv9-MHZG8CpZj7Al_Qh6InyDPVS/s1600/p.png" />
<br />
<div align="center" class="caption">
<b>HoverFansub Theme</b><br />
<hr />
<b>Design by iMoechan</b><br />
<div class="fakyoh">
<a href="http://imoechansz.blogspot.com/2015/02/hoverfansub-template-blogger_84.html">DOWNLOAD</a></div>
</div>
</div>
</div>
</div>
</div>
</div>

Huee :3
CARA SETTING :
<div class="col-md-3 column">
<div class="thumbnail">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivxNyXWudEARI00HL2C8Z8B1CEsRVUFANH3fG1xVWYWJiBNvDQZU7NTnTAsGTw4HW9SWcHONS4PBZr34HqMlkpzNkwOmFbWDA5p0lmrNeEtSNyRtjAczv9-MHZG8CpZj7Al_Qh6InyDPVS/s1600/p.png" />
<br />
<div align="center" class="caption">
<b>HoverFansub Theme</b><br />
<hr />
<b>Design by iMoechan</b><br />
<div class="fakyoh">
<a href="http://imoechansz.blogspot.com/2015/02/hoverfansub-template-blogger_84.html">DOWNLOAD</a></div>

</div>

*MERAH = Link Gambar
*Biru = Nama Template
*Ungu = Info Designer
*Hijau = Link Template 

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)

0 Comments for "Cara Membuat Template List iMoechansz"