How To Create Anime Genre Widget on Blog

Posted on February 22nd, 2018, 647 viewed

This time I will share the tutorial how to create anime category widget for wordpress blog or blogger. this is the second request from my friend that is sultan. this genre is inspired by the theme of Rainwolf made by Agecuk, before making this tutorial I have asked permission to Agecuk to make this tutorial.

this genre widget tutorial can be used on blogger theme or wordpress theme, also this anime genre widget is responsive. and the next post is a wordpress theme that I’ve discussed earlier in the article How to create download box using metabox wordpress. After that maybe I’m off for a couple of weeks because I’m focused on creating a safelink(shortlink) for my blog.

Please wait for my latest design breakthrough and do not forget to visit my blog often 😀

See Also :How To Create Anime Genre Widget on Blog
How To Skip Yuukithemes Safelink
How to Skip Safelinku for Download My Themes

How to Create Anime Genre Widget on WordPress

1. Log in to your WordPress Dashboard.
2. Go to Appearance > Widgets
3. Select the Custom HTML Widget and enter the code below in the widget’s content box

<link rel='stylesheet' href='https://rawgit.com/Yuukithemes/yuukithemes.github.io/master/css/yk-widget-genre.css' type='text/css' media='all' />
<div class="yuukithemes-genre">
<ul>
  <li><a href="/genre/action" title="Genre Action"><span>Action</span></a></li>
  <li><a href="/genre/adventure" title="Genre Adventure"><span>Adventure</span></a></li>
  <li><a href="/genre/comedy" title="Genre Comedy"><span>Comedy</span></a></li>
  <li><a href="/genre/drama" title="Genre Drama"><span>Drama</span></a></li>
  <li><a href="/genre/demons" title="Genre Demons"><span>Demons</span></a></li>
  <li><a href="/genre/ecchi" title="Genre Ecchi"><span>Ecchi</span></a></li>
  <li><a href="/genre/fantasy" title="Genre Fantasy"><span>Fantasy</span></a></li>
  <li><a href="/genre/game" title="Genre Game"><span>Game</span></a></li>
  <li><a href="/genre/hareem" title="Genre Hareem"><span>Hareem</span></a></li>
  <li><a href="/genre/historical" title="Genre Historical"><span>Historical</span></a></li>
  <li><a href="/genre/horror" title="Genre Horror"><span>Horror</span></a></li>
  <li><a href="/genre/isekai" title="Genre Isekai"><span>Isekai</span></a></li>
  <li><a href="/genre/kids" title="Genre Kids"><span>Kids</span></a></li>
  <li><a href="/genre/magic" title="Genre Magic"><span>Magic</span></a></li>
  <li><a href="/genre/martial arts" title="Genre Martial-Arts"><span>Martial Arts</span></a></li>
  <li><a href="/genre/mecha" title="Genre Mecha"><span>Mecha</span></a></li>
  <li><a href="/genre/military" title="Genre Military"><span>Military</span></a></li>
  <li><a href="/genre/music" title="Genre Music"><span>Music</span></a></li>
  <li><a href="/genre/mystery" title="Genre Mystery"><span>Mystery</span></a></li>
  <li><a href="/genre/parody" title="Genre Parody"><span>Parody</span></a></li>
  <li><a href="/genre/police" title="Genre Police"><span>Police</span></a></li>
  <li><a href="/genre/psychological" title="Genre Psychological"><span>Psychological</span></a></li>
  <li><a href="/genre/romance" title="Genre Romance"><span>Romance</span></a></li>
  <li><a href="/genre/school" title="Genre School"><span>School</span></a></li>
  <li><a href="/genre/sci-fi" title="Genre Sci-Fi"><span>Sci-Fi</span></a></li>
  <li><a href="/genre/seinen" title="Genre Seinen"><span>Seinen</span></a></li>
  <li><a href="/genre/shoujo" title="Genre Shoujo"><span>Shoujo</span></a></li>
  <li><a href="/genre/slice of life/" title="Genre Slice-of-Life"><span>Slice of Life</span></a></li>
  <li><a href="/genre/space" title="Genre Space"><span>Space</span></a></li>
  <li><a href="/genre/sports" title="Genre Sports"><span>Sports</span></a></li>
  <li><a href="/genre/supernatural" title="Genre Supernatural"><span>Supernatural</span></a></li>
  <li><a href="/genre/super power" title="Genre Super-Power"><span>Super Power</span></a></li>
  <li><a href="/genre/tragedy" title="Genre Tragedy"><span>Tragedy</span></a></li>
  <li><a href="/genre/vampire" title="Genre Vampire"><span>Vampire</span></a></li>
</ul>
</div>
category anime
4. Click Save

Result Js Fiddle

Result in Theme Fanstrap
View Result in Fanstrap
category anime

How to Create Anime Genre Widget in Blogger

1. Sign in to Blogger
2. Your Blog > Layout > Add a Gadget
3. Select HTML / Javascript
4. Copy the code below and paste it inside the widget content

<link rel='stylesheet' href='https://rawgit.com/Yuukithemes/yuukithemes.github.io/master/css/yk-widget-genre.css' type='text/css' media='all' />
<div class="yuukithemes-genre">
<ul>
  <li><a href="/search/label/Action" title="Genre Action"><span>Action</span></a></li>
  <li><a href="/search/label/Adventure" title="Genre Adventure"><span>Adventure</span></a></li>
  <li><a href="/search/label/Comedy" title="Genre Comedy"><span>Comedy</span></a></li>
  <li><a href="/search/label/Drama" title="Genre Drama"><span>Drama</span></a></li>
  <li><a href="/search/label/Demons" title="Genre Demons"><span>Demons</span></a></li>
  <li><a href="/search/label/Ecchi" title="Genre Ecchi"><span>Ecchi</span></a></li>
  <li><a href="/search/label/Fantasy" title="Genre Fantasy"><span>Fantasy</span></a></li>
  <li><a href="/search/label/Game" title="Genre Game"><span>Game</span></a></li>
  <li><a href="/search/label/Hareem" title="Genre Hareem"><span>Hareem</span></a></li>
  <li><a href="/search/label/Historical" title="Genre Historical"><span>Historical</span></a></li>
  <li><a href="/search/label/Horror" title="Genre Horror"><span>Horror</span></a></li>
  <li><a href="/search/label/Isekai" title="Genre Isekai"><span>Isekai</span></a></li>
  <li><a href="/search/label/Kids" title="Genre Kids"><span>Kids</span></a></li>
  <li><a href="/search/label/Magic" title="Genre Magic"><span>Magic</span></a></li>
  <li><a href="/search/label/Martial arts" title="Genre Martial-Arts"><span>Martial Arts</span></a></li>
  <li><a href="/search/label/Mecha" title="Genre Mecha"><span>Mecha</span></a></li>
  <li><a href="/search/label/Military" title="Genre Military"><span>Military</span></a></li>
  <li><a href="/search/label/Music" title="Genre Music"><span>Music</span></a></li>
  <li><a href="/search/label/Mystery" title="Genre Mystery"><span>Mystery</span></a></li>
  <li><a href="/search/label/Parody" title="Genre Parody"><span>Parody</span></a></li>
  <li><a href="/search/label/Police" title="Genre Police"><span>Police</span></a></li>
  <li><a href="/search/label/Psychological" title="Genre Psychological"><span>Psychological</span></a></li>
  <li><a href="/search/label/Romance" title="Genre Romance"><span>Romance</span></a></li>
  <li><a href="/search/label/School" title="Genre School"><span>School</span></a></li>
  <li><a href="/search/label/Sci-fi" title="Genre Sci-Fi"><span>Sci-Fi</span></a></li>
  <li><a href="/search/label/Seinen" title="Genre Seinen"><span>Seinen</span></a></li>
  <li><a href="/search/label/Shoujo" title="Genre Shoujo"><span>Shoujo</span></a></li>
  <li><a href="/search/label/Slice of life/" title="Genre Slice-of-Life"><span>Slice of Life</span></a></li>
  <li><a href="/search/label/Space" title="Genre Space"><span>Space</span></a></li>
  <li><a href="/search/label/Sports" title="Genre Sports"><span>Sports</span></a></li>
  <li><a href="/search/label/Supernatural" title="Genre Supernatural"><span>Supernatural</span></a></li>
  <li><a href="/search/label/Super power" title="Genre Super-Power"><span>Super Power</span></a></li>
  <li><a href="/search/label/Tragedy" title="Genre Tragedy"><span>Tragedy</span></a></li>
  <li><a href="/search/label/Vampire" title="Genre Vampire"><span>Vampire</span></a></li>
</ul>
</div>
category anime
6. Click Save

Result in Blog Fanstrap
View Result in Fanstrap
category anime

I hope this tutorial is very useful for you
Enjoy..

Reference
I made this article not alone, I also glanced at some references to add my insight in making this article.
– https://translate.google.com
– http://cuklabs.web.id/bluewolf-theme-wordpress/
– http://stream.cuklabs.web.id/
– https://www.google.co.id/imghp?hl=id&tab=wi&authuser=0

Related Post

Please wait....
Disqus comment box is being loaded