Cara Membuat Manga List
Hai Minna-san Kali ini Admin Terkece Membagikan Tutorial
Bagi anda yang membuka Blog Manga :)
Silahkan Pakai Manga List ini saja xD
Karna Lebih Keren dan Ringan :)
Ya, tutorial kali ini adalah
CARA MEMBUAT MANGA LIST
DEMO
Annarasumanara | Kakegurui | Toriko |
AKB 49 | Demon King | Hikaru No Go |
Langsung saja yah ikuti cara dibawah.
Pertama, Silahkan Masukkan CSS ya diatas </style> / </b:skin>
.manga {
background: #111;
margin: 21px;
width: 150px;
float: left;
position: relative;
}
.manga a {
color: #000;
}
.manga img {
width: 150px;
height: 200px;
opacity: 1.0;
filter: alpha(opacity=100);
}
.manga h6 {
font: normal bold 17px Arial narrow;
margin: 0 auto;
background: #e5e5e5;
padding: 4px 4px 4px 8px;
right: -10px;
bottom: 12px;
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: normal;
color: #000;
border-color: #111;
border-style: solid;
border-width: 1px;
}Setelah itu masukkan HTML ya di Page / Post anda.
<center>
<table border="0"><tbody>
<tr>
<td width="150px"><center>
<div class="manga">
<h6>
Annarasumanara</h6>
<a href="https://www.blogger.com/2001/03/baca-komik-manhwa-annarasumanara-bahasa.html" target="_blank" title="Annarasumanara"><img alt="Annarasumanara" border="0" src="http://i1.x8.net/T/Reo_X.jpeg" height="220" width="155" /></a>
</div>
</center>
</td>
<td width="150px"><center>
<div class="manga">
<h6>
Kakegurui</h6>
<a href="https://www.blogger.com/2011/03/baca-manga-komik-kakegurui-bahasa.html" target="_blank" title="Kakegurui"><img alt="Kagegurui" border="0" src="http://www.anime-planet.com/images/manga/main_images/kakegurui.jpg" height="220" width="155" /></a>
</div>
</center>
</td>
<td width="150px"><center>
<div class="manga">
<h6>
Toriko</h6>
<a href="https://www.blogger.com/2001/01/baca-manga-komik-toriko-bahasa.html" target="_blank" title="Toriko"><img alt="Toriko" border="0" src="http://vignette1.wikia.nocookie.net/toriko/images/f/f0/Toriko-OAV_(2).jpg/revision/latest?cb=20100830231154" height="220" width="155" /></a>
</div>
</center>
</td>
<td width="150px"><center>
<div class="manga">
<h6>
Kuroko No Basket</h6>
<a href="https://www.blogger.com/2001/01/baca-manga-komik-kuroko-no-basket.html" target="_blank" title="Kuroko No Basket"><img alt="Kuroko No Basket" border="0" src="http://4.bp.blogspot.com/-s7bHp_Bnq2c/UhoL04BOYJI/AAAAAAAAIJY/eehdXNN1hDM/s1600/588782.jpgw" height="220" width="155" /></a>
</div>
</center>
</td>
<td width="150px"><center>
<div class="manga">
<h6>
Avatar</h6>
<a href="http://www.animanga.ga/2001/03/baca-komik-avatar-last-air-bender.html" target="_blank" title="Avatar"><img alt="Avatar " border="0" src="http://s23.postimg.org/rrq8zqm1n/200_cb_20130711133212.png" height="220" width="155" /></a>
</div>
</center>
</td>
</tr>
</tbody></table>
<table border="0"><tbody>
<tr>
<td width="150px"><center>
<div class="manga">
<h6>
AKB 49</h6>
<a href="https://www.blogger.com/2001/01/baca-manga-komik-akb49-bahasa-indonesia.html" target="_blank" title="AKB49"><img alt="AKB49" border="0" src="http://m.mhcdn.net/store/manga/9104/cover.jpg?v=1352164284" height="220" width="155" /></a>
</div>
</center>
</td>
<td width="150px"><center>
<div class="manga">
<h6>
Demon King</h6>
<a href="https://www.blogger.com/2001/01/baca-manga-komik-demon-king-bahasa.html" target="_blank" title="Demon King"><img alt="Demon King" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivTsRufJnMijnuOBKw_73hDXPWu6yyXUKzP6ah0h7d9CTVtNNeZ58HWGEWG9kFua_J3mHLt3r3uXSzh4BAW-lY1zSZlCQDTZxRJz90_L97J6sZppjQPzlDfX0Ezb_LjTjbiSjmpYTXR8hG/s1600/DK.jpg" height="220" width="155" /></a>
</div>
</center>
</td>
<td width="150px"><center>
<div class="manga">
<h6>
Hikaru No Go</h6>
<a href="https://www.blogger.com/2013/05/baca-manga-komik-hikaru-no-go-bahasa.html" target="_blank" title="Hikaru No Go"><img alt="Hikaru No Go" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyC0JQl_qHvnLBtSbd29K22BgKHsb7kl90CZcR9NHopYbhi_h1T5VCjd3s3myXbhYUToUZTUmI30nDaWvutLCo4dI7rTFE63j96u1Gs_JSwcTsb8I8wOM7CEb9bR2IO1DOk0hOIMMTtnWx/s200/cover.jpeg" height="220" width="155" /></a>
</div>
</center>
</td>
<td width="150px"><center>
<div class="manga">
<h6>
Yotsuba</h6>
<a href="https://www.blogger.com/2012/12/baca-manga-komik-yotsubato-bahasa.html" target="_blank" title="Yotsuba"><img alt="Yotsuba" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ9mgsRoSdUk0anHmv9cm1KFVdDFD5mJOcX6PjpRf6fZfpSKXem1wI8V-BLTB7dJZt5SxX2DyzXBsF7QSMLbGxUsIxYKBEMt7pnpLsRCD4b47kKTXHtFg83AnQI4Blpw_dls1ac8cuX7s/s1600/images.jpg" height="220" width="155" /></a>
</div>
</center>
</td>
<td width="150px"><center>
<div class="manga">
<h6>
Gangster.</h6>
<a href="https://www.blogger.com/2001/03/baca-manga-komik-gangster-bahasa.html" target="_blank" title="Gangster."><img alt="Gangster." border="0" src="http://s10.postimg.org/u3y44rguh/i191121.png" height="220" width="155" /></a>
</div>
</center>
</td>
</tr>
</tbody></table>
<br />
<center>
<div class="adbpt">
<script language="javascript" src="http://www.cpmfun.com/getad.php?57312;97574;300x250"></script>
</div>
</center>
<div style="clear: both;">
</div>
<hr />
</center>
</div>
<br />
Langsung saja yah ikuti cara dibawah.<br />
Pertama, Silahkan Masukkan CSS ya diatas <b></style> / </b:skin></b><br />
<div>
<br /></div>
</div>
<pre data-codetype="CSSku" title="CSS"><code class="language-css"> .manga {
margin: 21px;
width: 150px;
float: left;
position: relative;
}
.manga a {
color: #000;
}
.manga img {
width: 150px;
height: 200px;
opacity: 1.0;
filter: alpha(opacity=100);
}
.manga h6 {
font: normal bold 17px Arial narrow;
margin: 0 auto;
background: #e5e5e5;
padding: 4px 4px 4px 8px;
right: -10px;
bottom: 12px;
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: normal;
color: #000;
border-color: #111;
border-style: solid;
border-width: 1px;
}Nah jika ada masalah silahkan komentarnya dibawah :)
Pengunjung yang baik pasti akan meninggalkan komentarnya,
Biarpun itu hanya Pertamax! / Sanykuu!
Jangan Lupa like & Share yah ! (y)
No comments