Home Tutorial Cara Membuat Template List iMoechansz

22 Apr 2015

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/AVvXsEh0g2L1VBONBc4gfjf0U0ANBGq_dwPP4_f9Hk-I5jiKpok7xrZotLt3axIKJWWckMBcd_BaIV0dd2MxuA4SIsgeKhKKapBiMCdnOEXGSVvcftmiuWf8xiEQy-hHV5RKtt-qLuz-gjW8KV42/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/AVvXsEi86vJ_o-uAPnaFMR7apHAMHlQt42bwd_XJTlYGa5jbXUQAt1WJ9N8XqbgK1iVCb5sYswV_9z3r5UuXSxgl620nXVy7dLgmc5c7iao2ZI-N_BhKkFM5hTICjZYynqijkox3-jiLAA4IfceL/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/AVvXsEhU1kH5SrXP_FOsZ3SPSfU8__kbzKMwPfW764PpjDwouaOxjXARc6cx0_Z5VO6039M6KBBJQ9Afz-9DtN70Zts3TOOPTmZu3ph1vLTr3T3pNIZueIdKkmhA0bJO-yV-AMIhzn_ryUXgArJy/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/AVvXsEgpISoLl-T2S8rZbowzjYOkUSpOA06CQD4dNYUgqJ8SnH9XleOyY_QY2Fb-uJMwR2RezZmdIJw-3cASc7OqnMXcwtSxjHdSgwuHYgVzAdmvtpieplZpJrDXde91sozCjnjsYQ3IBcd1GOiH/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/AVvXsEjZOscs2xE2FSIL4fTkUS5NUvI7zioIoSC1KVlT1DHuZFpUdSSg0LuGt0KQbPeeH1q056W8ImA0_5-1aQJpsfNyx0lueKGrHF6ntMcCAxP8J2-Mf7c0Mp3ZhhhWyrsRIr8utNXsvMJHfeVv/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/AVvXsEi0r0Hs9wWweBvaN4EWkKqTPR_m5KhzwmYAq0WnivveELR_eYeA-d4lX-k6M0J_slfD1id0hz9BOkJk0Qrvfd85U4GaCQetQIYIbCXx9pSH960Kkor2rdRIG5T_FqwtxjWpXGVthH0UX9tl/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/AVvXsEiDLAf0bk1EIj0j1rDX2Fmi6nINTut2c36sM60EOpwXhbdJyIm71ahyGMxqGXVEh2PWCSweGcmHF6uMGy-TzG01f47rbLVu-rRqy2ezDNjUhmIC-r66WaQJAYvZFuhyZFLFW2U0GyGXNFlS/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/AVvXsEgpe_ytEk86KwjBdETmSUtDobX_n9g67rC4E-b2l9_JwwCyp5THh-yb2zS1y9x2Zp-dIztf4td3itWtMIe1rvTYtfDiuaMtvhRjM1rDpHVtGLBoBsqDW95UF0QBAMwCX4lfei7d6IFo3ok/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/AVvXsEjWML0I2PWcOIe2POEajn9O_xMsbo7agG0xkvF2QdLB5THb4vrOxQjfb3_sEW_DtBoAMCgNnpkzqxoz-zzOnZLmzBu1Ses4IfMdwYe0xs7hORoVovb9g-_WH1BL0NyCuLS_SqJMSnG7yaSD/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/AVvXsEiP7nd0o1wNX5qWLo52oPo0WMLX4x_2SXXVYHMOojzU2efRwPZmpmiSW1mcvvNLEyi0gIGl5sDsT8sy-D_dJK6G1iHt7TYMBh6nwyvsn0P6DUr6Q5XBDaU8DG85R4XGZcdP2adnxW7RrIiI/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/AVvXsEhdocAy0SyblsJLNVBMB9gw10oJVv3V8PSCVDRXuJ3zzIQe_DLkU7g_KOfSR_xiReZXMv7SuoGIark_5iVNgKDefloGZ-h5oi_gVx6Ylqu-mG5PWKRQI0l4uPnlbvifsXbkJ1LBwmwaHeq4/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/AVvXsEjpR9Zzyc5qshBlm6nwMi24DaJQL03OxNTyzTMy-Yi2C5YT3O3j0YA7hfiz2VaNpSlTz26FPuxyB4hYKuxGzIdXTVX9ogza2j80zr1lFsuX5dTMFkjQFBorl4YMHu_jLITHgG7mKOz13W17/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/AVvXsEjxs6dSF-t6tuqsICyJJpBvUC_YnGb7FfiH6-b4cqOvHcV7XaOVCCaT4pS3vemlIKy4sqrIEs0NwKkTnzVqiZjdVQreMDy25S6TEKG8VkL8BfCDM6TLonhyphenhypheni9CSL1NMkpRg9msIq41n-ww9/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/AVvXsEht67MHK2UGlhNe8x-UlmZWdhyDnbL0bicAJ66EgiBXMO5yEODDmwU3JZHtBxlXrF1BORzLThoFh7ZezGsA21_LIkUY-NI3azKOKKRoqkLTvDt3kDMuZNBmOb9aPQ0bM7wKDhs9Ut5VKGRJ/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/AVvXsEhQOCoTYZ7O8UYynB7nhTRx-6-zALNpj4yeHjp_8IA0axb0hbI3AcBVVj9bH2VOrrNB6RDahU9ChyYGOFfeTEIixy0d795g2Oim4lE0-Lc5R-3CT-zu4ZzzBXf_7_ALvoXnC5D3c7YCHzFz/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/AVvXsEhtUr6UOYXj1-b_YkKxl0W2WTWNAXBmpk_RdV41CHwFcoBkaM4A-gsxlShXqSX3DCDNze3uSksi3a5McYvr4kBZdobAPGGNn_B4G_dFbiNQA2MW9hTMUFcjs-zhXh8EYzyJEzvilYBlKh1R/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/AVvXsEjuekVuZW5qlEkOlDLrZlbzkX4e6hnTqLAfyVs1DTGTbjyGmrkwpt0Q0HLxSxz3UmD83BBsBt5y5MiP5TccFVLJdBufxEyGTtftwWsI5q1FVT4CUZtGrNlGkLZb5DM5C-cDuNIoX-P7Q9FD/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/AVvXsEhabOzj06g1cgg-L5FvvXgL6i0co-yZchVOsORo4892vhuA1-ZFEUsu5r22Czz8_ipHhwMpFzQiTef6g7wTq4LDiH2XYFei40JkFtFFqlccwqtaFLIptsK_jx_UxVZZTWdabbNx_sngGK7w/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/AVvXsEhabOzj06g1cgg-L5FvvXgL6i0co-yZchVOsORo4892vhuA1-ZFEUsu5r22Czz8_ipHhwMpFzQiTef6g7wTq4LDiH2XYFei40JkFtFFqlccwqtaFLIptsK_jx_UxVZZTWdabbNx_sngGK7w/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)

Cara Membuat Template List iMoechansz Cara Membuat Template List iMoechansz arrahman 5.0 stars based on 35 reviews Huee, Dari Kemarin udah ada yang minta Beginian sih Cuma mimin Lupa Buatanya ^^ Gomen deh, Yaudah Sekarang Bakal Mimin Buat Tutorialnya DEMO...
Share this with short URL Get Short URLloading short url

Related Posts

Next Post
Previous Post


EmoticonEmoticon

Langganan: Posting Komentar (Atom)