Yang pertama pada postingan kali ini, saya akan membahas tentang "Membuat Menu Genre Dibawah Header Seperti Oploverz" ini. Cara Membuat Menu Genre Dibawah Header ini diambil dari Template Oploverz, cara membuatnya masih manual menggunakan HTML.Dan sebenarnya nggak sulit kok membuat Menu Genre, hanya mungkin belum tahu saja letak pengaturannya dimana. So, lets check below!
Membuat Menu Genre Dibawah Header Seperti Oploverz
- Buka Blogger > Tema > Edit HTML
- Salin CSS berikut dan simpan diatas </style>
- Kemudian cari html yang mirip id='content-wrapper' atau id='outer-wrapper'
- Jika sudah ketemu, salin dan letakkan HTML berikut dibawahnya
- Save Tema & Jangan lupa edit bagian yang sudah ditandai.
._genre {
max-width: 1080px;
margin: 0 auto;
background: #fff;
padding: 10px 0 5px 5px;
margin-bottom: 12px;
border-color: #e5e6e9 #dfe0e4 #d0d1d5;
}
._genre a{
font-family: MyriadPro;
font-size: 14px;
color: #5b5b5b;
font-weight: 500;
text-transform: capitalize;
background-color: #fff;
border: 1px solid #e3e9ff;
border-radius: 10px;
padding: 4px 10px;
margin-right: 5px;
display: inline-block;
overflow:hidden;
}
._genre a:hover {
background-color: #3c9ccd!important;
color: #fff!important;
text-decoration: none;
}<div class="_genre">
<a href="/search/label/LABEL POST">Action</a>
<a href="/search/label/LABEL POST">Adventure</a>
<a href="/search/label/LABEL POST">Comedy</a>
<a href="/search/label/LABEL POST">Demons</a>
<a href="/search/label/LABEL POST">Drama</a>
<a href="/search/label/LABEL POST">Ecchi</a>
<a href="/search/label/LABEL POST">Fantasy</a>
<a href="/search/label/LABEL POST">Game</a>
<a href="/search/label/LABEL POST">Harem</a>
<a href="/search/label/LABEL POST">Historical</a>
<a href="/search/label/LABEL POST">Horror</a>
<a href="/search/label/LABEL POST">Magic</a>
<a href="/search/label/LABEL POST">Martial Arts</a>
<a href="LINK POST">Genre Lainnya >></a>
</div>Cara Membuat Genre List Seperti AnimeKompi
/* CSS Genre List AnimeKompi - Shannenpio */
.akgenres321{overflow:hidden;font-size:13px; margin-left: -4px !important;margin-right: -4px !important;line-height: 21px !important;font-family: tahoma;list-style: none !important;padding: 0px !important;margin: 0px !important;}
.akgenres321 li{line-height: 21px !important;float: left;list-style: none !important;}
.akgenres321 li a{background:#F5F5F5;color: #0176C9 !important;padding:3px 10px;border:1px solid #DDD;display:block;margin:4px;width:93px;border-radius:3px}
.akgenres321 li a:hover{background:#0091D0;color:#FFF !important;text-decoration:none;border:1px solid #FFF;box-shadow:0 1px 1px #DDD}
Setelah itu, Silahkan Simpan Template.
Jika sudah, Buat postingan baru di halaman statis > Kemudian tambah kode di bawah ini pada Tab HTML (Bukan Compose).
<ul class="akgenres321">
<li>
<a href="/search/label/action/" title="View all in Action">Action</a>
</li>
<li>
<a href="/search/label/adventure/" title="View all in Adventure">Adventure</a>
</li>
<li>
<a href="/search/label/animation/" title="View all in Animation">Animation</a>
</li>
<li>
<a href="/search/label/cars/" title="View all in Cars">Cars</a>
</li>
<li>
<a href="/search/label/comedy/" title="View all in Comedy">Comedy</a>
</li>
<li>
<a href="/search/label/dementia/" title="View all in Dementia">Dementia</a>
</li>
<li>
<a href="/search/label/demons/" title="View all in Demons">Demons</a>
</li>
<li>
<a href="/search/label/drama/" title="View all in Drama">Drama</a>
</li>
<li>
<a href="/search/label/ecchi/" title="View all in Ecchi">Ecchi</a>
</li>
<li>
<a href="/search/label/fantasy/" title="View all in Fantasy">Fantasy</a>
</li>
<li>
<a href="/search/label/game/" title="View all in Game">Game</a>
</li>
<li>
<a href="/search/label/harem/" title="View all in Harem">Harem</a>
</li>
<li>
<a href="/search/label/historical/" title="View all in Historical">Historical</a>
</li>
<li>
<a href="/search/label/horror/" title="View all in Horror">Horror</a>
</li>
<li>
<a href="/search/label/josei/" title="View all in Josei">Josei</a>
</li>
<li>
<a href="/search/label/kids/" title="View all in Kids">Kids</a>
</li>
<li>
<a href="/search/label/magic/" title="View all in Magic">Magic</a>
</li>
<li>
<a href="/search/label/martial-arts/" title="View all in Martial Arts">Martial Arts</a>
</li>
<li>
<a href="/search/label/mecha/" title="View all in Mecha">Mecha</a>
</li>
<li>
<a href="/search/label/military/" title="View all in Military">Military</a>
</li>
<li>
<a href="/search/label/music/" title="View all in Music">Music</a>
</li>
<li>
<a href="/search/label/mystery/" title="View all in Mystery">Mystery</a>
</li>
<li>
<a href="/search/label/parody/" title="View all in Parody">Parody</a>
</li>
<li>
<a href="/search/label/police/" title="View all in Police">Police</a>
</li>
<li>
<a href="/search/label/psychological/" title="View all in Psychological">Psychological</a>
</li>
<li>
<a href="/search/label/romance/" title="View all in Romance">Romance</a>
</li>
<li>
<a href="/search/label/samurai/" title="View all in Samurai">Samurai</a>
</li>
<li>
<a href="/search/label/school/" title="View all in School">School</a>
</li>
<li>
<a href="/search/label/sci-fi/" title="View all in Sci-Fi">Sci-Fi</a>
</li>
<li>
<a href="/search/label/seinen/" title="View all in Seinen">Seinen</a>
</li>
<li>
<a href="/search/label/shoujo/" title="View all in Shoujo">Shoujo</a>
</li>
<li>
<a href="/search/label/shoujo-ai/" title="View all in Shoujo Ai">Shoujo Ai</a>
</li>
<li>
<a href="/search/label/shounen/" title="View all in Shounen">Shounen</a>
</li>
<li>
<a href="/search/label/shounen-ai/" title="View all in Shounen Ai">Shounen Ai</a>
</li>
<li>
<a href="/search/label/slice-of-life/" title="View all in Slice of Life">Slice of Life</a>
</li>
<li>
<a href="/search/label/space/" title="View all in Space">Space</a>
</li>
<li>
<a href="/search/label/sports/" title="View all in Sports">Sports</a>
</li>
<li>
<a href="/search/label/super-power/" title="View all in Super Power">Super Power</a>
</li>
<li>
<a href="/search/label/supernatural/" title="View all in Supernatural">Supernatural</a>
</li>
<li>
<a href="/search/label/thriller/" title="View all in Thriller">Thriller</a>
</li>
<li>
<a href="/search/label/vampire/" title="View all in Vampire">Vampire</a>
</li>
</ul>
Terakhir, silahkan kamu mengganti kode yang sudah ditandai sesuai keinginanmu.
0 komentar