Premium wapka, wapkiz & blogger template free download Buy Now!
الصفحة الرئيسية
Category Page Code
Top 7

Top 7 Random Colorful Wapkiz Category List Code With CSS in 2023

Top 7 Random Colorful Wapkiz Category List Code With CSS in 2023
Top 7 Wapkiz Category Code

Wapkiz Category Code: If you are a Wapkiz or Wapaxo user, then this tune is for you. Today I am here with you the Top 7 Random Colorful Wapkiz Category List Codes for your convenience. Hope you will like the category styles very much.

I am making this 7 category code with a lot of time. You can choose your preferred category code from here. Which will make your site more attractive. Also, from now on ClickLur site will publish various articles about Wapkiz. And to get such category, header, footer etc. code visit clicklur everyday.

Best 7 Colorful Wapkiz Category Code

To make the category list or menu of your Wapkiz site, copy the category code of your choice from the codes given below and paste it on your site. And if there is any problem in using the codes, don't forget to comment below.

Demo: 07 - Wapkiz Category Code

See the screenshot below. Both PC/Desktop View and Mobile View are provided here.

Demo: 07 - Wapkiz Category Code

If you like this color full category style, you can copy the code below.

<!-- Html Start -->
   <div id="lur-border">
      <div id="hide">
         <span id="lur-icon"> <span>
                  <i class="fa fa-folder-open fa-spin"></i>
              </span></span>
          <div id="lur-menu">
              <b>Categories</b>
          </div>
      </div>

      <div class="lur-cat" align="center">
          [fm_folder]d=:to-id(0)||<a href="/site-category.html?to-id=%id%&to-name=%name%">
              <div class="lur-lur" style="background::v:clicklur:;">%name%</div>
          </a>[/fm_folder]
      </div>
  </div>
<!-- Html End -->
/* Style css Start */
    #lur-border {
        border-radius: 0px 50px 10px 20px;
        border: 2px solid blue;
    }

    #hide {
        overflow: hidden;
        position: relative;
    }

    #lur-icon {
        background-image: linear-gradient(-130deg, rgb(255, 0, 255), blue);
        border-radius: 50px 0px 50px 50px;
        box-sizing: border-box;
        color: white;
        font-size: 15px;
        line-height: 13px;
        padding: 13px;
        position: absolute;
        right: 0px;
        top: 0px;
    }

    #lur-menu {
        background: blue;
        border-radius: 0px 48px 0px 0px;
        color: white;
        font-size: 18px;
        letter-spacing: 1.2px;
        padding: 8px 13px;
        text-transform: uppercase;
    }

    .lur-lur {
        padding: 10px;
        display: inline-block;
        font-weight: 700;
        border-radius: 3px;
        margin: 3px;
    }

    .lur-cat {
        padding: 10px 5px;
    }

    .lur-cat a {
        color: #ffffff;
    }

    .lur-cat a:hover {
        background: #ff12cf;
        text-decoration: none;
    }

/* Style css End */
<!-- Random Color Start -->
:var:clicklur=[rand-open]#FF0000[r]#3D991F[r]#0000CC[r]#B88A00[r]#00CC7A[r]#088A29[r]#FF00FF[/rand-close]:
<!-- Random Color End -->

Demo: 06 - Free Wapkiz Blog Category Code

Demo: 06 - Free Wapkiz Blog Category Code 
<!--Html Start-->
<div id="lur-border">
<div id="hide">
<span id="lur-icon"><span>
<i class="fa fa-folder-open fa-spin"></i>
</span></span>
<div id="lur-menu">
<b>Categories</b>
</div></div>
<div align="center" class="lur-cat">
<ol>

[fm_folder]d=:to-id(0),||<li><a href="/site-category.html?to-id=%id%&to-name=%name%"><div class="lur-lur" style="background: :v:clicklur:;">%name%</div></a></li>[/fm_folder]</ol>
</div></div>
<!--Html End-->
/* -- Style css Start -- */
#lur-border {
    border-radius: 0px 50px 10px 20px; 
    border: 2px solid blue;
}
#hide {
    overflow: hidden;
    position: relative;
}
#lur-icon {
    background-image: linear-gradient(-130deg, rgb(255, 0, 255), blue);
    border-radius: 50px 0px 50px 50px; 
    box-sizing: border-box; 
    color: white; 
    font-size: 15px; 
    line-height: 13px; 
    padding: 13px; 
    position: absolute;
    right: 0px;
    top: 0px;
}
#lur-menu {
    background: blue;
    border-radius: 0px 48px 0px 0px; 
    color: white;
    font-size: 18px; 
    letter-spacing: 1.2px;
    padding: 8px 13px;
    text-transform: uppercase;
}
.lur-lur {
    padding: 10px;
    text-align: left;
    font-weight: 700;
    border-radius: 0 30px 0 15px;
    margin: 3px;
}
.lur-cat {padding: 10px 5px;}
.lur-cat a{
    color:#ffffff;
    text-decoration: none;
}
.lur-cat a:hover{
    background:#ff12cf;
    text-decoration: none;
}
.lur-cat ol {
  counter-reset: my-awesome-counter;
  list-style: none;
  padding-left: 45px;
}
.lur-cat ol li {
  margin: 0 0 0.5rem 0;
  counter-increment: my-awesome-counter;
  position: relative;
}
.lur-cat ol li::before{
  content: counter(my-awesome-counter);
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  position: absolute;
  --size: 32px;
  left: calc(-1 * var(--size) - 10px);
  line-height: var(--size);
  width: var(--size);
  height: var(--size);
  top: 0;
  transform: rotate(-10deg);
  background::v:clicklur:;
  border-radius: 50%;
  text-align: center;
  box-shadow: 1px 1px 0 #999;
}
/* --Style css End-- */
<!--Random Color Start-->
:var:clicklur=[rand-open]#FF0000[r]#3D991F[r]#0000CC[r]#B88A00[r]#00CC7A[r]#088A29[r]#FF00FF[/rand-close]:
<!--Random Color End-->

Demo: 05 - Wapkiz Category Code Free Download

Demo: 05 - Wapkiz Category Code Free Download 
<!-- Html Start -->
<div id="lur-menu">
<b><i class="fa fa-folder-open"></i> Categories</b>
</div>
<div class="lur-cat" align="center">
<ol>

[fm_folder]d=:to-id(0)||<li><a href="/site-category.html?to-id=%id%&to-name=%name%"><div class="lur-lur" style="background::v:clicklur:;">%name%</div></a></li>[/fm_folder]</ol>
</div>
<!-- Html End -->
/* -- Style css Start -- */
#lur-menu:after {
    position: absolute;
    margin: -5px 0 0 10px;
    content: '';
    color: #ffffff;
    font-size: 0px;
    border-top: 32.5px solid rgb(0,0,0,0.0);
    border-left: 30px solid blue;
    clear: both;
}
#lur-menu {
    width: 127px;
    background: blue;
    color: white;
    font-size: 16px;
    padding: 5px 10px;
}
.lur-lur {
    padding: 10px;
    text-align: left;
    font-weight: 700;
    border-radius: 0 30px 0 15px;
    margin: 3px;
}
.lur-cat {
    padding: 10px 5px;
    border-top: 2px solid blue;
    border-left: 2px solid blue;
    border-right: 2px solid blue;
    border-bottom: 2px solid blue;
}
.lur-cat a{
    color:#ffffff;
    text-decoration: none;
}
.lur-cat a:hover{
    background:#ff12cf;
    text-decoration: none;
}
.lur-cat ol {
  counter-reset: my-awesome-counter;
  list-style: none;
  padding-left: 45px;
}
.lur-cat ol li {
  margin: 0 0 0.5rem 0;
  counter-increment: my-awesome-counter;
  position: relative;
}
.lur-cat ol li::before{
  content: counter(my-awesome-counter);
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  position: absolute;
  --size: 32px;
  left: calc(-1 * var(--size) - 10px);
  line-height: var(--size);
  width: var(--size);
  height: var(--size);
  top: 0;
  transform: rotate(-10deg);
  background::v:clicklur:;
  border-radius: 50%;
  text-align: center;
  box-shadow: 1px 1px 0 #999;
}
/* -- Style css End -- */
<!-- Random Color Start -->
:var:clicklur=[rand-open]#FF0000[r]#3D991F[r]#0000CC[r]#B88A00[r]#00CC7A[r]#088A29[r]#FF00FF[/rand-close]:
<!-- Random Color End -->

Demo: 04 - Wapkiz Category Blog List Code

Demo: 04 - Wapkiz Category Blog List Code 
<!-- Html Start -->
<div id="ClickLur"><center>
<i class="fa fa-chevron-circle-down" aria-hidden="true"></i> CATEGORIES <i class="fa fa-chevron-circle-down" aria-hidden="true"></i>
</center></div>

<div id="lur-border"><div class="lur-cat" align="center"><ol>
[fm_folder]d=:to-id(0)||<li><a href="/site-category.html?to-id=%id%&to-name=%name%"><div class="lur-lur" style="background::v:clicklur:;">%name%</div></a></li>[/fm_folder]</ol>
</div></div>
<!-- Html End -->
/* -- Style css Start -- */
.lur-lur {
    padding: 8px;
    text-align: left;
    font-weight: 700;
    border-radius: 0 30px 0 15px;
    margin: 3px;
}
.lur-cat {
    padding: 10px 5px 0 5px;
    
}
.lur-cat a{
    color:#ffffff;
    text-decoration: none;
}
.lur-cat a:hover{
    background:#ff12cf;
    text-decoration: none;
}
.lur-cat ol {
  counter-reset: my-awesome-counter;
  list-style: none;
  padding-left: 45px;
}
.lur-cat ol li {
  margin: 0 0 0.5rem 0;
  counter-increment: my-awesome-counter;
  position: relative;
}
.lur-cat ol li::before{
  content: counter(my-awesome-counter);
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  position: absolute;
  --size: 32px;
  left: calc(-1 * var(--size) - 10px);
  line-height: var(--size);
  width: var(--size);
  height: var(--size);
  top: 0;
  transform: rotate(-10deg);
  background::v:clicklur:;
  border-radius: 50%;
  text-align: center;
  box-shadow: 1px 1px 0 #999;
}
#ClickLur {
    background: blue; 
    border-top: 3px solid #ff00ff; 
    border-bottom: 3px solid #ff00ff;
    color: white; 
    padding: 5px; 
    border-radius:20px;
    font-size: 13px;
    text-decoration: none; 
    font-weight: bold;
    text-shadow: 1px 1px 2px;  
    transition: 0.6s;
}
#lur-border {
    border-radius: 0 0 0 25px;
    border-left: 2px solid blue;
    border-right: 2px solid blue;
    border-top: 2px solid #fff;
    border-bottom: 2px solid blue; 
}
/* -- Style css End -- */
<!-- Random Color Start -->
:var:clicklur=[rand-open]#FF0000[r]#3D991F[r]#0000CC[r]#B88A00[r]#00CC7A[r]#088A29[r]#FF00FF[/rand-close]:
<!-- Random Color End -->

Demo: 03 - Stylish Wapkiz Category Code

Demo: 03 - Stylish Wapkiz Category Code 
<!-- Html Start -->
<div class="ClickLur" style="background: blue; border-top: 3px solid #ff00ff; border-bottom: 3px solid #ff00ff;"><center>
<i class="fa fa-chevron-circle-down" aria-hidden="true"></i> CATEGORIES <i class="fa fa-chevron-circle-down" aria-hidden="true"></i>
</center></div>

<div id="lur-border">
[fm_folder]d=:to-id(0)||<div class="lur-cat" align="center"><a href="/site-category.html?to-id=%id%&to-name=%name%"><div class="ClickLur" style="background::v:clicklur:;">%name%</div></a></div>[/fm_folder]</div>

<!-- Html End -->
/* -- Style css Start -- */

.ClickLur {
    border-top: 2px solid :v:clicklur:;
    border-bottom: 2px solid :v:clicklur:;
    color: white; 
    padding: 5px; 
    border-radius:20px;
    font-size: 13px;
    text-decoration: none; 
    font-weight: bold;
    text-shadow: 1px 1px 2px;  
    transition: 0.6s;
}
.lur-cat {padding: 3px 5px;}
.lur-cat a{
    color:#ffffff;
    text-decoration: none;
}
.lur-cat a:hover{
    background:#ff12cf;
    text-decoration: none;
}
#lur-border {
    padding: 2px 2px 4px 2px;
    border-radius: 0 0 20px 20px;
    border-left: 2px solid blue;
    border-right: 2px solid blue;
    border-top: 2px solid #fff;
    border-bottom: 2px solid blue; 
}
/* -- Style css End -- */
<!-- Random Color Start -->
:var:clicklur=[rand-open]#FF0000[r]#3D991F[r]#0000CC[r]#B88A00[r]#00CC7A[r]#088A29[r]#FF00FF[/rand-close]:
<!-- Random Color End -->

Demo: 02 - Random Colorful Wapkiz Category Code

Demo: 02 - Random Colorful Wapkiz Category Code 
<!-- Html Start -->
<div id="lur-menu"><b>
<i class="fa fa-folder-open"></i> Categories
</b></div>
<div class="lur-cat" align="center">

[fm_folder]d=:to-id(0)||<div class="padding"><a href="/site-category.html?to-id=%id%&to-name=%name%"><div class="ClickLur" style="background::v:clicklur:;">%name%</div></a></div>[/fm_folder]</div>

<!-- Html End -->
/* -- Style css Start -- */
#lur-menu:after {
    position: absolute;
    margin: -5px 0 0 10px;
    content: '';
    color: #ffffff;
    font-size: 0px;
    border-top: 32.5px solid rgb(0,0,0,0.0);
    border-left: 30px solid blue;
    clear: both;
}
#lur-menu {
    width: 127px;
    background: blue;
    color: white;
    font-size: 16px;
    padding: 5px 10px;
}
.ClickLur {
    border-top: 2px solid :v:clicklur:;
    border-bottom: 2px solid :v:clicklur:;
    color: white; 
    padding: 5px; 
    border-radius:20px;
    font-size: 13px;
    text-decoration: none; 
    font-weight: bold;
    text-shadow: 1px 1px 2px;  
    transition: 0.6s;
}
.padding {padding:3px 0 3px 0}
.lur-cat {
    padding: 10px 5px;
    border-top: 2px solid blue;
    border-left: 2px solid blue;
    border-right: 2px solid blue;
    border-bottom: 2px solid blue;
}
.lur-cat a{
    color:#ffffff;
    text-decoration: none;
}
.lur-cat a:hover{
    background:#ff12cf;
    text-decoration: none;
}
/* -- Style css End -- */
<!-- Random Color Start -->
:var:clicklur=[rand-open]#FF0000[r]#3D991F[r]#0000CC[r]#B88A00[r]#00CC7A[r]#088A29[r]#FF00FF[/rand-close]:
<!-- Random Color End -->

Demo: 01 - Wapkiz Category List Code

Demo: 01 - Wapkiz Category List Code 
<!-- Html Start -->
<div id="lur-border">
<div id="hide">
<span id="lur-icon"><span>
<i class="fa fa-folder-open fa-spin"></i>
</span></span>
<div id="lur-menu"><b>Categories</b></div>
</div>
<div class="lur-cat" align="center">

[fm_folder]d=:to-id(0)||<div class="padding"><a href="/site-category.html?to-id=%id%&to-name=%name%"><div class="ClickLur" style="background::v:clicklur:;">%name%</div></a></div>[/fm_folder]</div></div>

<!-- Html End -->
/* -- Style css Start -- */
#lur-border {
    border-radius: 0px 50px 10px 20px; 
    border: 2px solid blue;
}
#hide {
    overflow: hidden;
    position: relative;
}
#lur-icon {
    background-image: linear-gradient(-130deg, rgb(255, 0, 255), blue);
    border-radius: 50px 0px 50px 50px; 
    box-sizing: border-box; 
    color: white; 
    font-size: 15px; 
    line-height: 13px; 
    padding: 13px; 
    position: absolute;
    right: 0px;
    top: 0px;
}
#lur-menu {
    background: blue;
    border-radius: 0px 48px 0px 0px; 
    color: white;
    font-size: 18px; 
    letter-spacing: 1.2px;
    padding: 8px 13px;
    text-transform: uppercase;
}
.ClickLur {
    border-top: 2px solid :v:clicklur:;
    border-bottom: 2px solid :v:clicklur:;
    color: white; 
    padding: 5px; 
    border-radius:20px;
    font-size: 13px;
    text-decoration: none; 
    font-weight: bold;
    text-shadow: 1px 1px 2px;  
    transition: 0.6s;
}
.padding {padding:3px 0 3px 0}
.lur-cat {
    padding: 10px 5px;
}
.lur-cat a{
    color:#ffffff;
    text-decoration: none;
}
.lur-cat a:hover{
    background:#ff12cf;
    text-decoration: none;
}
/* -- Style css End -- */
<!-- Random Color Start -->
:var:clicklur=[rand-open]#FF0000[r]#3D991F[r]#0000CC[r]#B88A00[r]#00CC7A[r]#088A29[r]#FF00FF[/rand-close]:
<!-- Random Color End -->

Hopefully there was no problem copying and download your code.

Conclusion

I hope you like the Random Colorful Wapkiz Category List Code a lot. If you like it or need more code like this, I hope your comment. I am interested in writing tunes after receiving your comments, so don't forget to encourage by commenting.

I will come to you soon with something new. Stay with us until then. Wishing everyone good health and well-being, I am finishing the tune here today. TaTa. 🤚🏻

About the Author

Hello, Labib UR Rahman here. What to say about me I am confused. I am a 20 yr old adult starter with great passion for web and app development. Here I come to connect myself with the world. I always believe, I can do anything.
#Category Page Code #Top 7 #Webmaster

إرسال تعليق

Enter your comment
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.