Cara Membuat List Anime Untuk Blogger
Karena ngga ada yang request, jadi saya buat tutorial untuk memasang list anime di Blogger, bukan cuman buat anime, tapi bisa di pake untuk List yang lain. Misalnya, film, postingan, dan lain-lain. Kekurangan nya adalah, List ini tidak otomatis, jadi kalian harus memasukan HTML dan CSS ke halaman Blogger atau Postingan baru untuk membuat List ini.
Yang Pertama, Masuk ke Blogger > Buat postingan atau halaman baru > Buka Tab "HTML" dan Masukkan CSS di bawah ini.
/*CSS List Fansubartikel*/
.nav_apb {
padding: 1px 0;
text-align: center;
margin: 0 0 5px 0;
}
.nav_apb a {
display: block;
padding: 5px 0;
width: 26.7px;
float: left;
background: #424242;
font-weight: 500;
color: #FFFFFF;
}
.nav_apb a:hover {
background: #2977BE;
text-decoration: none;
}
.letter-group {
position: relative;
margin-bottom: 10px;
}
.letter-cell {
font-family: segoe ui;
font-weight: bold;
color: #333;
font-size: 13px;
border-bottom: 2px solid #000;
margin-bottom: 5px;
background: none;
padding: 5px;
text-transform: uppercase;
position: relative;
}
.letter-cell a {
color: #6D6D6D;
}
.row-cells {
float: left;
line-height: 21px;
width: 308px;
color: #000;
padding-left: 16px;
}
.title-cell {
line-height: 21px;
font-weight: 300;
display: list-item;
}
.title-cell a {
font-family: tahoma;
font-size: 12px;
color: #2E2E2E;
}
.title-cell a:hover {
text-decoration: underline;
} Lalu, masukan juga HTML nya agar list nya bisa muncul. HTML di bawah sengaja saya buat hanya satu list, karena hanya untuk contoh.
<div class="nav_apb"> <a href="#%23">#</a> <a href="#A">A</a> <a href="#B">B</a> <a href="#C">C</a> <a href="#D">D</a> <a href="#E">E</a> <a href="#F">F</a> <a href="#G">G</a> <a href="#H">H</a> <a href="#I">I</a> <a href="#J">J</a> <a href="#K">K</a> <a href="#L">L</a> <a href="#M">M</a> <a href="#N">N</a> <a href="#O">O</a> <a href="#P">P</a> <a href="#Q">Q</a> <a href="#R">R</a> <a href="#S">S</a> <a href="#T">T</a> <a href="#U">U</a> <a href="#V">V</a> <a href="#W">W</a> <a href="#X">X</a> <a href="#Y">Y</a> <a href="#Z">Z</a><div class="clear"></div></div><br/>
<div class="letter-group">
<div class="letter-cell"><a name="A">A</a></div>
<div class="row-cells">
</div>
<div class="row-cells">
<div class="title-cell"><a href="#" title="Seri Absolute Duo">Absolute Duo</a></div>
</div>
<div class="row-cells">
<div class="title-cell"><a href="# title="Seri ACCA: 13-ku Kansatsu-ka">ACCA: 13-ku Kansatsu-ka</a></div>
</div>
<div class="row-cells">
<div class="title-cell"><a href="#" title="Seri Accel World EX">Accel World EX</a></div>
</div>
<div class="row-cells">
<div class="title-cell"><a href="#" title="Seri Action Heroine Cheer Fruits">Action Heroine Cheer Fruits</a></div>
</div>
<div class="row-cells">
<div class="title-cell"><a href="#" title="Seri Aho Girl">Aho Girl</a></div>
</div>
<div class="clear"></div></div> Catatan : Jika kalian ingin menambahkan list yang lain, silakan kalian copy lagi HTMLnya, mulai dari <div class="letter-cell"><a name="A">A</a></div> sampai di atas <div class="clear">
Setelah selesai, kalian bisa Simpan dan Publish Postingan atau Halaman kalian.
Ini dia preview dari List nya.
EmoticonEmoticon