CodingX

Web Designing Codes & Widgets Free Download

The unlimited source of free wapkiz codes & widgets. Download web designing html, css, javascript, php codes.

See More
[Official] TrickBD Discord Server
Blogs

One step ahead in Technology

Take a step forward in Technology | Forms and communities run by Bangladesh's first digital technology.

See More
Technology
Designers

ClickLur Founder, Developer & Designer

Labib UR Rahman is the founder of ClickLur. He gained 2 years of experience with us. He made so many beautiful themes, pages, blocks.

See More
ClickLur Founder, Developer & Designer
Templates

Top Creators of ClickLur Themes & Widget

We completed our works with 32+ top subscribers of ClickLur. We are doing more better that now. We are achieving goals with top client from world's top countries.

See More
Technology

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

সেরা ৭ কালার ফুল ওয়াপকিজ ক্যাটাগরি কোড - Top 7 Wapkiz Category Code
Top 7 Wapkiz Category Code

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

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

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

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

First - Wapkiz Category Code

নিচের স্ক্রিনশট লক্ষ করো। এখানে পিসি / ডেস্কটপ ভিউ এবং মোবাইল ভিউ দুটোই দেওয়া আছে।

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:clicklur=[rand-open]#FF0000[r]#3D991F[r]#0000CC[r]#B88A00[r]#00CC7A[r]#088A29[r]#FF00FF[/rand-close]:
<!-- Random Color End -->

Second - Wapkiz Category Code

নিচের স্ক্রিনশট লক্ষ করো। এখানে পিসি / ডেস্কটপ ভিউ এবং মোবাইল ভিউ দুটোই দেওয়া আছে।

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:clicklur=[rand-open]#FF0000[r]#3D991F[r]#0000CC[r]#B88A00[r]#00CC7A[r]#088A29[r]#FF00FF[/rand-close]:
<!--Random Color End-->

Third - Wapkiz Category Code

নিচের স্ক্রিনশট লক্ষ করো। এখানে পিসি / ডেস্কটপ ভিউ এবং মোবাইল ভিউ দুটোই দেওয়া আছে।

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:clicklur=[rand-open]#FF0000[r]#3D991F[r]#0000CC[r]#B88A00[r]#00CC7A[r]#088A29[r]#FF00FF[/rand-close]:
<!-- Random Color End -->

Fourth - Wapkiz Category Code

নিচের স্ক্রিনশট লক্ষ করো। এখানে পিসি / ডেস্কটপ ভিউ এবং মোবাইল ভিউ দুটোই দেওয়া আছে।

Fourth - Wapkiz Category 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 -->
<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;
}
#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>
<!-- 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 -->

Fifth - Wapkiz Category Code

নিচের স্ক্রিনশট লক্ষ করো। এখানে পিসি / ডেস্কটপ ভিউ এবং মোবাইল ভিউ দুটোই দেওয়া আছে।

Fifth - 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 -->
<style type="text/css">

.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>
<!-- 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 -->

Sixth - Wapkiz Category Code

নিচের স্ক্রিনশট লক্ষ করো। এখানে পিসি / ডেস্কটপ ভিউ এবং মোবাইল ভিউ দুটোই দেওয়া আছে।

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;
}
.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>
<!-- 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 -->

Seventh - Wapkiz Category Code

নিচের স্ক্রিনশট লক্ষ করো। এখানে পিসি / ডেস্কটপ ভিউ এবং মোবাইল ভিউ দুটোই দেওয়া আছে।

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;
}
.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>
<!-- 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 -->

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

শেষ কথা

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

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

Comments

Please comment on how you like our Template

Blog Archive

Contact Form

Send