API tools faq
paste
Advertisement
DedsecID

Admin Lupa Ngasih Tutorial Widget Genre >:(

DedsecID
Oct 8th, 2018
216
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 10.96 KB | None | 0 0
raw download clone embed print report
  1. <div class="yuukithemes-genre">
  2. <ul>
  3.   <li><a href="/search/label/action" title="Genre Action"><span>Action</span></a></li>
  4.   <li><a href="/search/label/adventure" title="Genre Adventure"><span>Adventure</span></a></li>
  5.   <li><a href="/search/label/comedy" title="Genre Comedy"><span>Comedy</span></a></li>
  6.   <li><a href="/search/label/drama" title="Genre Drama"><span>Drama</span></a></li>
  7.   <li><a href="/search/label/demons" title="Genre Demons"><span>Demons</span></a></li>
  8.   <li><a href="/search/label/ecchi" title="Genre Ecchi"><span>Ecchi</span></a></li>
  9.   <li><a href="/search/label/fantasy" title="Genre Fantasy"><span>Fantasy</span></a></li>
  10.   <li><a href="/search/label/game" title="Genre Game"><span>Game</span></a></li>
  11.   <li><a href="/search/label/hareem" title="Genre Hareem"><span>Hareem</span></a></li>
  12.   <li><a href="/search/label/historical" title="Genre Historical"><span>Historical</span></a></li>
  13.   <li><a href="/search/label/horror" title="Genre Horror"><span>Horror</span></a></li>
  14.   <li><a href="/search/label/isekai" title="Genre Isekai"><span>Isekai</span></a></li>
  15.   <li><a href="/search/label/kids" title="Genre Kids"><span>Kids</span></a></li>
  16.   <li><a href="/search/label/magic" title="Genre Magic"><span>Magic</span></a></li>
  17.   <li><a href="/search/label/martial arts" title="Genre Martial-Arts"><span>Martial Arts</span></a></li>
  18.   <li><a href="/search/label/mecha" title="Genre Mecha"><span>Mecha</span></a></li>
  19.   <li><a href="/search/label/military" title="Genre Military"><span>Military</span></a></li>
  20.   <li><a href="/search/label/music" title="Genre Music"><span>Music</span></a></li>
  21.   <li><a href="/search/label/mystery" title="Genre Mystery"><span>Mystery</span></a></li>
  22.   <li><a href="/search/label/parody" title="Genre Parody"><span>Parody</span></a></li>
  23.   <li><a href="/search/label/police" title="Genre Police"><span>Police</span></a></li>
  24.   <li><a href="/search/label/psychological" title="Genre Psychological"><span>Psychological</span></a></li>
  25.   <li><a href="/search/label/romance" title="Genre Romance"><span>Romance</span></a></li>
  26.   <li><a href="/search/label/school" title="Genre School"><span>School</span></a></li>
  27.   <li><a href="/search/label/sci-fi" title="Genre Sci-Fi"><span>Sci-Fi</span></a></li>
  28.   <li><a href="/search/label/seinen" title="Genre Seinen"><span>Seinen</span></a></li>
  29.   <li><a href="/search/label/shoujo" title="Genre Shoujo"><span>Shoujo</span></a></li>
  30.   <li><a href="/search/label/slice of life/" title="Genre Slice-of-Life"><span>Slice of Life</span></a></li>
  31.   <li><a href="/search/label/space" title="Genre Space"><span>Space</span></a></li>
  32.   <li><a href="/search/label/sports" title="Genre Sports"><span>Sports</span></a></li>
  33.   <li><a href="/search/label/supernatural" title="Genre Supernatural"><span>Supernatural</span></a></li>
  34.   <li><a href="/search/label/super power" title="Genre Super-Power"><span>Super Power</span></a></li>
  35.   <li><a href="/search/label/tragedy" title="Genre Tragedy"><span>Tragedy</span></a></li>
  36.   <li><a href="/search/label/vampire" title="Genre Vampire"><span>Vampire</span></a></li>
  37. </ul>
  38. </div>
  39. <style>
  40. /*
  41.  * Widget Genre Anime [21/02/18]
  42.  * @yuukithemes.com
  43.  *
  44.  */
  45.  
  46. .yuukithemes-genre li{float:left;width:calc(50% - 10px);text-align:center;position:relative;margin:5px}
  47. .yuukithemes-genre ul{list-style:none;margin:0 -5px;padding:0}
  48. .yuukithemes-genre ul:after{content:"";display:block;clear:both}
  49. .yuukithemes-genre li a{display:block;color:#fff;z-index:10;position:relative;padding:9px;font-weight:700}
  50. .yuukithemes-genre li a:before{content:"";position:absolute;background:#353638 center no-repeat;background-size:100%;top:0;left:0;width:100%;height:100%;border-radius:4px;filter:grayscale(1) opacity(.6);z-index:10}
  51. .yuukithemes-genre li a:after{content:"";position:absolute;background:#000;width:100%;height:100%;top:0;left:0;z-index:5;border-radius:4px}
  52. .yuukithemes-genre li a:hover:before{filter:grayscale(0) opacity(.7)}
  53. .yuukithemes-genre li a span{display:block;position:relative;z-index:12;}
  54. .yuukithemes-genre li a[title~=Action]:before{background-image:url("https://4.bp.blogspot.com/-2oSBPZr0CWA/WoxF7O94GoI/AAAAAAAAALY/R6FA4Xgi1FY3z-qk7LFc0UGRAUsLrVNkACLcBGAs/s1600/action1.png");}
  55. .yuukithemes-genre li a[title~=Adventure]:before{background-image:url("https://2.bp.blogspot.com/-8n3713g-2qY/WoxF7Lbys7I/AAAAAAAAALg/Wjw4J0D0_goeUWN3jSaBVkdWMIb4qukDgCLcBGAs/s1600/adventure.png");}
  56. .yuukithemes-genre li a[title~=Comedy]:before{background-image:url("https://4.bp.blogspot.com/-_S3hv9jpt0c/WoxF8M1XRAI/AAAAAAAAALk/pMousek5Ji49-gledYTMiIP04x4UidhegCLcBGAs/s1600/comedy.png");}
  57. .yuukithemes-genre li a[title~=Demons]:before{background-image:url("https://3.bp.blogspot.com/-esJxbOGQtdc/WoxF8V-1g3I/AAAAAAAAALs/_b6qisXjW-cPY51xYzy7-Pa_nqSKXqTQgCLcBGAs/s1600/demons2.png");}
  58. .yuukithemes-genre li a[title~=Drama]:before{background-image:url("https://3.bp.blogspot.com/-WCK01cgBO9Q/WoxF8lZebPI/AAAAAAAAALw/30jste0A-TgqCIysjOmKye0qGzy1COfLwCLcBGAs/s1600/drama.png");}
  59. .yuukithemes-genre li a[title~=Ecchi]:before{background-image:url("https://3.bp.blogspot.com/-iu1SnPhXcWY/WoxF8y3DIrI/AAAAAAAAAL0/5p8HLWIGpKY4WgxsYw54r6BrGtoyhOkWQCLcBGAs/s1600/ecchi.png");}
  60. .yuukithemes-genre li a[title~=Fantasy]:before{background-image:url("https://4.bp.blogspot.com/-aY9TQmfWNQk/WoxF9Ctx1qI/AAAAAAAAAL4/r_yTDwobH8MrYMPJ21DJiW_WUYBIYZM4gCLcBGAs/s1600/fantasy.png");}
  61. .yuukithemes-genre li a[title~=Game]:before{background-image:url("https://1.bp.blogspot.com/-8xtzeHw6_9s/WoxTBWeG_ZI/AAAAAAAAAOk/MkIf4jXWQQEKK24Wxr5soTELGjcWIA0NgCLcBGAs/s1600/game.png");}
  62. .yuukithemes-genre li a[title~=Hareem]:before{background-image:url("https://2.bp.blogspot.com/-SNjxpfl3qHs/WoxF9nvhVTI/AAAAAAAAAL8/MpJ6X6ZnsS4sywLak37DmztOkJOUkSQPACLcBGAs/s1600/hareem.png");}
  63. .yuukithemes-genre li a[title~=Historical]:before{background-image:url("https://2.bp.blogspot.com/-yiPS6BcZKfA/WoxF9ilqcnI/AAAAAAAAAMA/PQineJZVpI0ftN399ykK_qjpaWiUmsHkACLcBGAs/s1600/historical.png");}
  64. .yuukithemes-genre li a[title~=Horror]:before{background-image:url("https://2.bp.blogspot.com/-T3n21lexbzI/WoxF-LH6TpI/AAAAAAAAAMI/vsotfJpLoIQz7s9vh9hxDsWGITDJRI5DgCLcBGAs/s1600/horror1.png");}
  65. .yuukithemes-genre li a[title~=Isekai]:before{background-image:url("https://3.bp.blogspot.com/-5RFS8t6wNys/WoxF-sLeGrI/AAAAAAAAAMQ/INnR3AGGY2EC-5hcBArs2NSmGPpiGTeCgCLcBGAs/s1600/isekai1.png");}
  66. .yuukithemes-genre li a[title~=Kids]:before{background-image:url("https://2.bp.blogspot.com/-DGm33_3IalU/WoxF-8udeiI/AAAAAAAAAMU/fmdmYwydhbUWh-7LHPCg8CT2SAIw4UuEQCLcBGAs/s1600/kids.png");}
  67. .yuukithemes-genre li a[title~=Magic]:before{background-image:url("https://4.bp.blogspot.com/-RFKWU_zso5U/WoxF_L9KN-I/AAAAAAAAAMY/SYewi7FVG9gw7Z_7-NA_mGez3pfYJVmFQCLcBGAs/s1600/magic.png");}
  68. .yuukithemes-genre li a[title~=Martial-Arts]:before{background-image:url("https://1.bp.blogspot.com/-5RV9LeLy4cU/WoxF_u-iboI/AAAAAAAAAMg/WsD0tuOtAH006V1cvw3yuZjXnOdWUD7AACLcBGAs/s1600/martial%2Barts.png");}
  69. .yuukithemes-genre li a[title~=Mecha]:before{background-image:url("https://4.bp.blogspot.com/-NUMYczWjsPQ/WoxF_67yhVI/AAAAAAAAAMk/2eqvCWSUbIcIYA_yvHM2vKVlr8otkOGtACLcBGAs/s1600/mecha.png");}
  70. .yuukithemes-genre li a[title~=Military]:before{background-image:url("https://2.bp.blogspot.com/-LVFXC8FFYPs/WoxF_8f8ABI/AAAAAAAAAMo/rY-4rpxsJrQ5R_Z3h8BSqwLtosqgto6rgCLcBGAs/s1600/millitary.png");}
  71. .yuukithemes-genre li a[title~=Music]:before{background-image:url("https://4.bp.blogspot.com/-8Q3-o3LZYZs/WoxGAN_i86I/AAAAAAAAAMs/e9D0DENdnl8o77-mW9E27iI5XQWDy5QsQCLcBGAs/s1600/music.png");}
  72. .yuukithemes-genre li a[title~=Mystery]:before{background-image:url("https://4.bp.blogspot.com/-t8lIaQXN8KM/WoxTBVLkWCI/AAAAAAAAAOo/vhIqn7FwooEMqs_CLCjwIP064xbN333LQCLcBGAs/s1600/mystery.png");}
  73. .yuukithemes-genre li a[title~=Parody]:before{background-image:url("https://1.bp.blogspot.com/-ZCkWEM0hayk/WoxTBfKSYOI/AAAAAAAAAOs/CUnwAqOqmTQCLdRF6q6bEfgTmS-cNCv_QCLcBGAs/s1600/parody.png");}
  74. .yuukithemes-genre li a[title~=Police]:before{background-image:url("https://4.bp.blogspot.com/-R11Uji5OwJc/WoxGA6aX1NI/AAAAAAAAAM4/UwqKz20yS30VyH-xtEN4AXVCrmf5SPalgCLcBGAs/s1600/police.png");}
  75. .yuukithemes-genre li a[title~=Psychological]:before{background-image:url("https://2.bp.blogspot.com/-F-c7zlCy7xo/Wo00yq1vOFI/AAAAAAAAAQM/SfBT3smg3-IQ-6heg0_HP_QGRaqaQKwmQCLcBGAs/s1600/physchological.png");}
  76. .yuukithemes-genre li a[title~=Romance]:before{background-image:url("https://2.bp.blogspot.com/-DRN5kVs3dWI/WoxGBR_883I/AAAAAAAAANA/E243CocJrv0nbv7L4ZCgPTv3gZa-JvSugCLcBGAs/s1600/romance.png");}
  77. .yuukithemes-genre li a[title~=School]:before{background-image:url("https://1.bp.blogspot.com/-UWA2KVDJ1no/WoxGBnmPfKI/AAAAAAAAANE/-KCuFdIzk5QcZG0Wfoy9YsQwJsJrmlxzwCLcBGAs/s1600/school.png");}
  78. .yuukithemes-genre li a[title~=Sci-Fi]:before{background-image:url("https://4.bp.blogspot.com/-qnq003jAfp8/WoxGCnMNJ0I/AAAAAAAAANM/ME21z5HZLOYhhcKJw66wwJLQXpR5Cdf4wCLcBGAs/s1600/sci-fi.png");}
  79. .yuukithemes-genre li a[title~=Seinen]:before{background-image:url("https://2.bp.blogspot.com/-Hq6CULAjfSA/Wo0GHF_JD3I/AAAAAAAAAPg/A1AZAI60x0opNhvxGX7LUFojOdS7ePmDgCLcBGAs/s1600/seinen.png");}
  80. .yuukithemes-genre li a[title~=Shounen]:before{background-image:url("https://2.bp.blogspot.com/-60HuXQ510Kc/WoxGDbb0svI/AAAAAAAAANY/UxtiBk6hzhAAznM6rXl3dwQfeRUrMWyngCLcBGAs/s1600/shounen.png");}
  81. .yuukithemes-genre li a[title~=Shoujo]:before{background-image:url("https://1.bp.blogspot.com/-hPg7wXkC5V4/Wo1j04kuu2I/AAAAAAAAAQo/VntHSbIN8SAIaWSbNHpbi2AKWdgCuonjACLcBGAs/s1600/shoujo.png");}
  82. .yuukithemes-genre li a[title~=Slice-of-Life]:before{background-image:url("https://3.bp.blogspot.com/-RZIBq05XDW8/WoxGD_w8_1I/AAAAAAAAANg/Ide9dby6p5cew3ACKLmryPv60cpIcs4YQCLcBGAs/s1600/slice%2Bof%2Blife.png");}
  83. .yuukithemes-genre li a[title~=Space]:before{background-image:url("https://4.bp.blogspot.com/-Ebf1enRZYSI/WoxGEMyHUPI/AAAAAAAAANk/plxdxbyIASMKSdbxy57dKy9qqiREl9HEgCLcBGAs/s1600/space.png");}
  84. .yuukithemes-genre li a[title~=Sports]:before{background-image:url("https://3.bp.blogspot.com/-5q0bRP80BCQ/WoxGEH4m12I/AAAAAAAAANo/us7b3_uc5fQnbYc2LQkMMZ10a-MardsbACLcBGAs/s1600/sport.png");}
  85. .yuukithemes-genre li a[title~=Supernatural]:before{background-image:url("https://2.bp.blogspot.com/-8LTq1yiNMuc/WoxGEckJw0I/AAAAAAAAANs/GGs1KU6hQv4fGPfMcyBUFY5-9krm0L6tQCLcBGAs/s1600/supernatural.png");}
  86. .yuukithemes-genre li a[title~=Super-Power]:before{background-image:url("https://2.bp.blogspot.com/-R4qYwOL4pIY/WoxGE--f3mI/AAAAAAAAANw/HoOETgXyzxIg9fvq0Em4xhK8mi2KMKZkwCLcBGAs/s1600/superpower.png");}
  87. .yuukithemes-genre li a[title~=Tragedy]:before{background-image:url("https://4.bp.blogspot.com/-u9LSBhgrMwU/WoxGFLa-U7I/AAAAAAAAAN0/qGMQxRqB0v8AFgtVChBtMIzt_Ff-N9aqwCLcBGAs/s1600/tragedy.png");}
  88. .yuukithemes-genre li a[title~=Vampire]:before{background-image:url("https://4.bp.blogspot.com/-b9036SURy9w/WoxGFKnVgGI/AAAAAAAAAN4/HWAcUI3sOVwJBp6sCV5BcRkBzUCVJ7XwACLcBGAs/s1600/vampire.png");}
  89. @media screen and (min-width:620px) and (max-width:768px){
  90. .yuukithemes-genre li{float:none;width:100%}.yuukithemes-genre li a{padding:10px}
  91. }
  92. @media screen and (max-width:-480px){
  93. .yuukithemes-genre li{float:none;width:100%}.yuukithemes-genre li a{padding:11px}
  94. }
  95. </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!