Cara Membuat Template List iMoechansz

April 22, 2015

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/AVvXsEhANKhaXdVTWDI979T5Eowdhr4_lWqWvPstunPgkgSoop4ktjVhAwP0IRxUjqR2xXbGZAaaNIZeeLMQLjbwHJA7jMaLI-Hmet4g3_rgY51cOHPu9VURECvF9yyLz7XQFd5ZPbF_QCi5CtQb/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/AVvXsEhWUELaaMPTTBScAVRUgXiI2ljGavwccNzbH3wBJkJNXZJ60d_6TGKA5Fa6LSMI0ppCM0XvrZQZZolQqo63rHMOasZbYKYgFVG793NIMom79dAmy97xWC_2t9lNacvzOBYBWCqxn4Sx-_8v/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/AVvXsEiSKCP4ns7x1TuVIt3fUdh3MQ9LGNpHP34by3akz_MElgLbLRy0dl40ucQN6e8V4vmM9BO3W8b1HS3JIaBvjjSsYkmEEFi93FAciF-G0CjMusMjc78MDdaaaWVdjK4GLspHktxO3pkqQT4J/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/AVvXsEihyphenhyphenso76N2mGlJM-ySVP9ZUv1Qp3MFmIVIMRoy9nvVECEJJzYGibhGimOITBTj5SECnWFU2jfi_1Ew5E097pB-x7u7IK2KPkK3H9PQtoWdgMbhDUzOTiCKhhoE_vU3COhGeUDZyXWQFxInl/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/AVvXsEjANBVYEqyiXmg8veR_57-9ORAM56iopdvv7wRHSRDUC770oFVnN21uWLSI_ta2Lj0uS8URWXfasUCwU5M4qGbZ4dG6joohnOOXyoWwdASD0-lIVGR6qB1ET5kxsaR2dX_A4Cw1mePvABnP/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/AVvXsEjeGCPicMUyI4vzsBYXjFpuy8-8Dht_0gM1rom4usd04DHZ-zKTzeAsOheqeUDTOFrPNpA41mIIefW3v0YpK2JbTp_r4_69pPczHw4MoS7gsM-SWMeSbd9gIOIPwAaJXGGbjC169cmNK1A3/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/AVvXsEgVU4pdXfdQuVpiExRvkQ5mNBu72guo0zXXj-vgi8sMknYQT4nbxbu7ZatfsRCFfMhHqA2wHGyT9YVknknEZKp-spuTAMfALuRB2omqQjykEYDNp9CPyuLvwEjGZp94NtYYrDJlO-AmHzvl/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/AVvXsEiqTk8_jL_qx76bS-Korg4LmDXqJ3UxPI1xrVEBEvA1Mzp75fYz6op7wrf3Q4J1m3w8HRlHeCNdJOPlXNV9Q9r_d_Xp73f7EW2YTqhUrg7gl7bAOjTC3oGZbveDiwpcyPduL8Buxls-A-U/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/AVvXsEg-_qHxydn4Qd6fsu35opxT6m7VdCMO-eDUE_D0_4rkC80TdJ14g9m6Ai2VIukplF5bhHl1CPbN8OrE4cAp2Fv0ymRmkBGalxvGZKIlT9z4UC5112eWNo8wfacPr11PBGvYsR9CpEZXu1Lb/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/AVvXsEg4UNC1hGYSCczBE7Eq3vAttoeFRlTVNJ9ow3I97Jw4M8rOc-PubO48nXJFjQMmNMeXw6EXspbVIa4HxMibmG5WpWquGvSV1dmK_RHbd27BJExOKadHoYzEhvO-Q9xstNK_6NRG-YszIYE-/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/AVvXsEgZQAJqHqer-UkNvPLaRXSNuoyTxDQojV1eP2pF0KRvfvmfJ6P2ubMQKwYLw2PKRdFnCNQ5tCKh2EUX5fI5G7WTTX8Hc7iFkNDzXZ0NsSW02VOpkKOYT0YY70-or3ata-xKQianDoB-6VkQ/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/AVvXsEjmpd1JJaqib8C6t2mFgnTdh5QPFQtn3Wb_WBHTnB1CazgaMv8m3lW5jDWm80DHIxovOPH3p71nLZwjShxSjry8r6_IbwX7sF1Aa7zPYsYq6zXv9a34qopWPEyETbSkhe8nQlrczbKCPQdn/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/AVvXsEhihhyMqtUozdh1Ahaat4fczifoQbWOuvYKWWWvqSrYrYHxqpgUf4JYXlKsypIio5yg4fJMc9ZMe5qAYtNNkcsn1m7TkC2R-IyXMJgglRfmXdZXbojY2d9xsmcSOTJTXwGRwBUCm6tyZ9Vr/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/AVvXsEhECCaKfLwmCuMTv_w001L9r-8kPj1aA2UY0agcEbirzse_bC5B3wlXNCvn0y24GXDfXrpp3uucnAiQlJtpH-P7yxapFtWvN8uvXCFU7lH8f9zn4tJvZ-5l5zxMqbdMV9hikRhrjc6Qcq7n/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/AVvXsEiNDvsPpZ4uNL66WpzD475uRy2FLwwkLLME5QMm0o3UdSi0my0OlAlJTEBIUVqWuU8i0CukAcEEHeOGUlE1g7m8RvlpzYAiA6avcKxMmVpjju_XXQheO2ezkAqy0m2z_vYqsa_h_qwuENh0/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/AVvXsEjmcr32AVAudMaiN8rWI3maQ1537-QckWY3xQd3siG_5jvgA9oo8mQ9dD_P_xO3iSgAmZIgBGfS2O9EvnFjPqtx8HlHgelZFbsaRygV_t3wyuCbJt05ZPNMzwp1STtZC5Gs_f6tugyKYWdd/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/AVvXsEjnipqlTgf1etG67bw8pWsuvSa-S8d_UjZaO6olMbgSP0FNZpkcw7tP6RBXBDrAWNSea1FeGeIgEavFB2p4M_M7bzdlmLnG7vkmvvVuWEgfa1R8aqWTbA9Z3xkBA3y7DdT_7_6TBdtYCkG-/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/AVvXsEjGv7nBUwwS6DFZ_RAkVY-XV5UArYvp4fk9iL2q3V1y6XgfcctnhkL1bnX-SpvDauauP6KxlC_dBvYerzjL70mcGtdhR5-6MLzzKsdU8nK64xshvYlQr7iE8sEH8aZlBIQkCDsGBs2WGgE8/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/AVvXsEjGv7nBUwwS6DFZ_RAkVY-XV5UArYvp4fk9iL2q3V1y6XgfcctnhkL1bnX-SpvDauauP6KxlC_dBvYerzjL70mcGtdhR5-6MLzzKsdU8nK64xshvYlQr7iE8sEH8aZlBIQkCDsGBs2WGgE8/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)

No comments

Subscribe to: Post Comments ( Atom )