Cara Membuat Page All Genres
Hoho , Akhirnya dapat juga Tutorial Baru nih mimin :3
Langsung saja, Tutorial Kali ini adalah
CARA MEMBUAT PAGE ALL GENRES
Sesuai Judul, Tutorial Kali ini hanya bisa dipakai didalam Page / Post saja :)
DEMO
Genres List
Nah gimana ? Keren gak >.<
Ya pasti keren dong :v Langsung saja ikuti Caranya dibawah ,
Pertama Silahkan Masukkan CSSnya Diatas </style> / </b:skin>
/*---PAGE GENRES BY IMOECHAN---*/
.genrespage {
overflow: hidden;
}
.genrespage h2 {
font-size: 14px;
border-bottom: 4px solid #DDD;
padding: 4px 0;
margin-bottom: 5px;
}
.genrespage ul {
margin: 0;
padding: 0;
list-style: none;
}
.genrespage ul li {
float: left;
margin: 3px;
}
.genrespage ul li a {
display: block;
border-radius: 3px;
padding: 5px;
border: 1px solid #FFF;
text-align: center;
box-shadow: 0 0 1px #000;
width: 88px;
font-size: 11px;
color: #FFF;
background: #444;
}
.genrespage ul li a:hover {
background: #3E8FC5;
border: 1px solid #FFF;
color: #FFF;
text-decoration: none;
} Setelah di letakkan, Lalu Save Template ~
Lalu Pergi Ke Page / Post , dan letakkan HTML dibawah ini didalamnya :)
<div class="genrespage">
<h2>Genres List</h2>
<ul>
<li><a href="http://animedesu.co/genres/action" title="View all seri in genre Action" >Action</a></li><li><a href="http://animedesu.co/genres/adventure" title="View all seri in genre Adventure" >Adventure</a></li><li><a href="http://animedesu.co/genres/comedy" title="View all seri in genre Comedy" >Comedy</a></li><li><a href="http://animedesu.co/genres/demons" title="View all seri in genre Demons" >Demons</a></li><li><a href="http://animedesu.co/genres/drama" title="View all seri in genre Drama" >Drama</a></li><li><a href="http://animedesu.co/genres/ecchi" title="View all seri in genre Ecchi" >Ecchi</a></li><li><a href="http://animedesu.co/genres/fantasy" title="View all seri in genre Fantasy" >Fantasy</a></li><li><a href="http://animedesu.co/genres/game" title="View all seri in genre Game" >Game</a></li><li><a href="http://animedesu.co/genres/harem" title="View all seri in genre Harem" >Harem</a></li><li><a href="http://animedesu.co/genres/horror" title="View all seri in genre Horror" >Horror</a></li><li><a href="http://animedesu.co/genres/magic" title="View all seri in genre Magic" >Magic</a></li><li><a href="http://animedesu.co/genres/martial-arts" title="View all seri in genre Martial Arts" >Martial Arts</a></li><li><a href="http://animedesu.co/genres/mecha" title="View all seri in genre Mecha" >Mecha</a></li><li><a href="http://animedesu.co/genres/military" title="View all seri in genre Military" >Military</a></li><li><a href="http://animedesu.co/genres/parody" title="View all seri in genre Parody" >Parody</a></li><li><a href="http://animedesu.co/genres/psychological" title="View all seri in genre Psychological" >Psychological</a></li><li><a href="http://animedesu.co/genres/romance" title="View all seri in genre Romance" >Romance</a></li><li><a href="http://animedesu.co/genres/samurai" title="View all seri in genre Samurai" >Samurai</a></li><li><a href="http://animedesu.co/genres/school" title="View all seri in genre School" >School</a></li><li><a href="http://animedesu.co/genres/sci-fi" title="View all seri in genre Sci-Fi" >Sci-Fi</a></li><li><a href="http://animedesu.co/genres/seinen" title="View all seri in genre Seinen" >Seinen</a></li><li><a href="http://animedesu.co/genres/shoujo-ai" title="View all seri in genre Shoujo Ai" >Shoujo Ai</a></li><li><a href="http://animedesu.co/genres/shounen" title="View all seri in genre Shounen" >Shounen</a></li><li><a href="http://animedesu.co/genres/slice-of-life" title="View all seri in genre Slice of Life" >Slice of Life</a></li><li><a href="http://animedesu.co/genres/sports" title="View all seri in genre Sports" >Sports</a></li><li><a href="http://animedesu.co/genres/super-power" title="View all seri in genre Super Power" >Super Power</a></li><li><a href="http://animedesu.co/genres/supernatural" title="View all seri in genre Supernatural" >Supernatural</a></li><li><a href="http://animedesu.co/genres/vampire" title="View all seri in genre Vampire" >Vampire</a></li></ul>
</div> Lalu liat Hasilnya :)
Nah, Jika ada masalah Silahkan Komen dibawahnya xD
Pengunjung yang baik, pasti akan meninggalkan Komentarnya,
Biarpun itu Hanya Pertamax! / Sankyuu
Jangan Lupa Like & Share yah ! (y)
No comments