Wapkiz Code Love Story Life Story Funy Topic All Poem Covid 19 Exam Topic GP Offer BL Offer Robi Offer Help Desk সাইটম্যাপ ফেসবুক পেইজ আমাদের সম্পর্কে ডিসক্লেইমার গোপনীয়তা নীতিমালা


সাইটম্যাপ ফেসবুক পেইজ আমাদের সম্পর্কে ডিসক্লেইমার গোপনীয়তা নীতিমালা
Login Sing up সাইটম্যাপ ফেসবুক পেইজ আমাদের সম্পর্কে ডিসক্লেইমার গোপনীয়তা নীতিমালা
Download site Forum site Blog site SMS categories Live All FM Channel Live All Tv Channel সাইটম্যাপ ফেসবুক পেইজ আমাদের সম্পর্কে ডিসক্লেইমার গোপনীয়তা নীতিমালা
আজ । আপনাকে স্বাগতম।This site is sutting down by amadul. we are parked in new website. You can join us WapTpl.Aino.Pk/ Wapmash.wapkiz.com website’s full code [WAPMASH3] Wapkiz Responsive Blogger Template Full Source Code by WapMash Wapkiz New Links Merging Template by WapMash Top 3 stylish Wapkiz Header Code with colorful CSS code in 2021 Top 7 Random Colorful Wapkiz Category List Code With CSS in 2021 ব্লগার Reflex CS Premium Version টেম্পলেট ফ্রি Wapkiz Stylish Blog Post Code With Dropdown Category Add a comment box on wapkiz file download page Add smooth scroll to the top of page fixed button in wapkiz How to create stylish contact page in wapkiz

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

লেখক: admin

About 7 months ago

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

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

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

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

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

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: border-box; color: #01ffff;">:;">%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 -->
 
 <!-- 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:aramadul:;">%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:aramadul:;
   border-radius: 50%;
   text-align: center;
   box-shadow: 1px 1px 0 #999;
 }
 </style>
 <!--Style css End-->
 
 <!--Random Color Start-->
 
 <!--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:aramadul:;">%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:aramadul:;
   border-radius: 50%;
   text-align: center;
   box-shadow: 1px 1px 0 #999;
 }
 </style>
 <!-- Style css End -->
 
 <!-- Random Color Start -->
 
 <!-- Random Color End -->
 

Fourth - Wapkiz Category Code

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

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:aramadul:;">%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:aramadul:;
   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 -->
 
 <!-- Random Color End -->
 

Fifth - Wapkiz Category Code

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

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="aramadul" 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 -->
 
 <!-- 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="aramadul" 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 -->
 
 <!-- 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="aramadul" 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 -->
 
 <!-- Random Color End -->
 

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

শেষ কথা

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

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


পোস্টটি কেমন লেগেছে তা জানাতে একদম ভুলবেন না !

মন্তব্য 0 টি আছে।
Need Login or Sing Up

কোন মন্তব্য নেই।
Top
WapTpl