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

Top 7 Wapkiz Category Code

Wapkiz Category Code: তুমি যদি একজন Wapkiz বা Wapaxo ব্যাবহার করে থাকো, তবে এই টিউনটি তোমার জন্য। আজ তোমাদের সুবিধার জন্য আমি সেরা ৭ কালার ফুল ওয়াপকিজ ক্যাটাগরি কোড নিয়ে তোমাদের মাঝে হাজির হয়েছি। আশা অরি তোমাদের ক্যাটাগরি স্টাইল গুলো খুবই ভাল লাগবে।

অনেক সময় নিয়ে কোড ৭ টি বানাইছি। তোমার পছন্দের ক্যাটাগরি কোডটি এখান থেকে বেছে নিতে পারো। যা তোমাদের সাইট কে আরও আকর্ষণীয় করে তুলবে। এছাড়াও এখন থেকে ArAmadul সাইটে ওয়াপকিজ বিষয়ক নানারকম আর্টিকেল প্রকাশ করা হবে। আর এইরকম ক্যাটাগরি, হিডার, ফুটার ইত্যাদি কোড পেতে ArAmadul ভিজিট করবে।

সেরা ৭ কালার ফুল ওয়াপকিজ ক্যাটাগরি কোড

তোমার ওয়াপকিজ সাইটের ক্যাটাগরি লিস্ট বা মেনু বানাতে নিম্নের দেওয়া কোড গুলো থেকে তোমার পছন্দের ক্যাটাগরি কোডটি কপি করে নিয়ে তোমার সাইটে পেস্ট করে দিবে। আর কোড গুলো ব্যবহারে কোনো সমস্যা হলে নিচে কমেন্ট করতে ভুুুলবে না।

First - Wapkiz 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 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 -->
<style type="text/css">
#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>
<!-- Style css End -->

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

Second - Wapkiz 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-->
<style type="text/css">
#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>
<!--Style css End-->

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

Third - 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">
<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 -->
<style type="text/css">
#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>
<!-- Style css End -->

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

Fourth - Wapkiz Category Code

<!-- Html Start -->
<div id="aramadul"><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 -->
<style type="text/css">
.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;
}
#aramadul {
    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>
<!-- Style css End -->

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

Fifth - Wapkiz Category Code

<!-- Html Start -->
<div class="aramadul" 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 -->
<style type="text/css">

.aramadul {
    border-top: 2px solid :v:aramadul:;
    border-bottom: 2px solid :v:aramadul:;
    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>
<!-- Style css End -->

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

Sixth - 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 -->
<style type="text/css">
#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;
}
.aramadul {
    border-top: 2px solid :v:aramadul:;
    border-bottom: 2px solid :v:aramadul:;
    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>
<!-- Style css End -->

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

Seventh - Wapkiz 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 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 -->
<style type="text/css">
#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;
}
.aramadul {
    border-top: 2px solid :v:aramadul:;
    border-bottom: 2px solid :v:aramadul:;
    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>
<!-- Style css End -->

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

আশাকরি তোমার কোড গুলো কপি করতে কোনো রকম সমস্যা হয়নি।

শেষ কথা

আশা করি তোমার ওয়াপকিজ ক্যাটাগরি কোড গুলো অনেক ভালই লেগেছে। যদি তোমার ভাল লেগে থাকে বা এরকম আরও কোড লাগে তবে তোমার মন্তব্য আশা করছি। তোমাদের কমেন্ট পেলে টিউন লিখতে আগ্রহ পেয়ে থাকি তাই কমেন্ট করে উৎসাহ দিতে ভুলবে না।

খুব শিগ্রই নতুন কিছু নিয়ে তোমাদের মাঝে হাজির হব। সেই সময় পর্যন্ত সাথেই থাকিও। সকলের সু - সাস্থ এবং মঙ্গল কামনা করে আজ কের টিউন এখানেই শেষ করছি। টাটা। 🤚🏻

About Me