What are skill bars?
Skill Bar or Skills column is a column that contains statistics or ratings about a product or a person’s skills. Usually Skill Bar This is installed on an e-commerce website that is supposed to check a product for both the performance of the device and the rating of the item.
Usually Skill Bar It was developed using JavaScript to generate animations from. to display Skill Bar This. But in this article the author will provide a little tutorial How to Create a Cool Skill Bar Using CSS on Blogger which only uses CSS and HTML so it doesn’t load your blog.
How to Create a Cool Skill Bar Using CSS on Blogger
1. Sign in to the account Blogger Themes HTML Edit.
2. Copy and paste the following CSS code before the code ]]> or
Note: Here the author provides 3 different CSS styles.
CSS styles 1
.skillst2 {width:100%;color:#fff;}.skillst2 .skillbar{width:100%;height:40px;position:relative;margin-bottom:5px;}.skillst2 .count-bar{height:100%;width:0px;position:relative;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}.skillst2 .count-bar.color-1{background-color:#338ae7;}.skillst2 .count-bar.color-2{background-color:#fe871f;}.skillst2 .count-bar.color-3{background-color:#bd5cb9;}.skillst2 .count-bar.color-4{background-color:#2d7da5;}.skillst2 .count-bar.color-5{background-color:#f75d41;}.skillst2 .title{font-size:14px;font-weight:400;padding-left:12px;line-height:40px;text-transform:uppercase;}.skillst2 .count{position:absolute;top:0;right:12px;line-height:40px;font-size:14px;font-weight:400;}
CSS styles 2
.jarak{padding:0px 10px}.progress{display:-ms-flexbox;display:flex;height:1rem;overflow:hidden;font-size:.75rem;background-color:#e9ecef;border-radius:.25rem;}.progress-bar{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;color:#fff;background-color:#123456;}.bg-primary{background-color:#007bfd!important}.bg-primary:focus,.bg-primary:hover{background-color:#0062cc!important}.bg-secondary{background-color:#868e96!important}.bg-secondary:focus,.bg-secondary:hover{background-color:#6c757d!important}.bg-danger{background-color:#dc3545!important;}.bg-danger:focus,.bg-danger:hover{background-color:#bd2130!important;}.bg-warning{background-color:#ffc107!important;}.bg-warning:focus,.bg-warning:hover{background-color:#d39e00!important;}.bg-success{background-color:#28a745!important;}.bg-success:focus,.bg-success:hover{background-color:#1e7e34!important;}.bg-info{background-color:#17a2b8!important;}.bg-info:focus,.bg-info:hover{background-color:#117a8b!important;}.bg-dark{background-color:#343a40!important;}.bg-dark:focus,.bg-dark:hover{background-color:#1d2124!important;}.bg-gradasi{background:linear-gradient(to left,green,orange) !important;}.bg-gradasi:focus,.bg-gradasi:hover{background:linear-gradient(to right,green,orange) !important;}
CSS styles 3
progress:not(value){}progress[value]{appearance:none;border:none;width:100%;height:20px;background-color:whiteSmoke;border-radius:3px;box-shadow:0 2px 3px rgba(0,0,0,.5) inset;color:royalblue;position:relative;margin:0 0 1.5em}progress[value]::-webkit-progress-bar{background-color:whiteSmoke;border-radius:3px;box-shadow:0 2px 3px rgba(0,0,0,.5) inset}progress[value]::-webkit-progress-value{position:relative;background-size:35px 20px,100% 100%,100% 100%;border-radius:3px;animation:animate-stripes 5s linear infinite}@keyframes animate-stripes{100%{background-position:-100px 0}}progress[value]::-webkit-progress-value:after{content:'';position:absolute;width:5px;height:5px;top:7px;right:7px;background-color:white;border-radius:100%}progress[value]::-moz-progress-bar{background-image:-moz-linear-gradient( 135deg,transparent,transparent 33%,rgba(0,0,0,.1) 33%,rgba(0,0,0,.1) 66%,transparent 66%),-moz-linear-gradient( top,rgba(255,255,255,.25),rgba(0,0,0,.2)),-moz-linear-gradient( left,#09c,#f44);background-size:35px 20px,100% 100%,100% 100%;border-radius:3px}.progress-bar{background-color:whiteSmoke;border-radius:3px;box-shadow:0 2px 3px rgba(0,0,0,.5) inset;width:100%;height:20px}.progress-bar span{background-color:royalblue;border-radius:3px;display:block;text-indent:-9999px}p[data-value]{position:relative}p[data-value]:after{content:attr(data-value) '%';position:absolute;right:0}.html5::-webkit-progress-value,.python::-webkit-progress-value{background-image:-webkit-linear-gradient( 135deg,transparent,transparent 33%,rgba(0,0,0,.1) 33%,rgba(0,0,0,.1) 66%,transparent 66%),-webkit-linear-gradient( top,rgba(255,255,255,.25),rgba(0,0,0,.2)),-webkit-linear-gradient( left,#09c,#f44)}.css3::-webkit-progress-value,.php::-webkit-progress-value{background-image:-webkit-linear-gradient( 135deg,transparent,transparent 33%,rgba(0,0,0,.1) 33%,rgba(0,0,0,.1) 66%,transparent 66%),-webkit-linear-gradient( top,rgba(255,255,255,.25),rgba(0,0,0,.2)),-webkit-linear-gradient( left,#09c,#ff0)}.jquery::-webkit-progress-value,.node-js::-webkit-progress-value{background-image:-webkit-linear-gradient( 135deg,transparent,transparent 33%,rgba(0,0,0,.1) 33%,rgba(0,0,0,.1) 66%,transparent 66%),-webkit-linear-gradient( top,rgba(255,255,255,.25),rgba(0,0,0,.2)),-webkit-linear-gradient( left,#09c,#690)}.html5::-moz-progress-bar,.php::-moz-progress-bar{/* Gradient background with Stripes */background-image:-moz-linear-gradient( 135deg,transparent,transparent 33%,rgba(0,0,0,.1) 33%,rgba(0,0,0,.1) 66%,transparent 66%),-moz-linear-gradient( top,rgba(255,255,255,.25),rgba(0,0,0,.2)),-moz-linear-gradient( left,#09c,#f44)}.css3::-moz-progress-bar,.php::-moz-progress-bar{{background-image:-moz-linear-gradient( 135deg,transparent,transparent 33%,rgba(0,0,0,.1) 33%,rgba(0,0,0,.1) 66%,transparent 66%),-moz-linear-gradient( top,rgba(255,255,255,.25),rgba(0,0,0,.2)),-moz-linear-gradient( left,#09c,#ff0)}.jquery::-moz-progress-bar,.node-js::-moz-progress-bar{background-image:-moz-linear-gradient( 135deg,transparent,transparent 33%,rgba(0,0,0,.1) 33%,rgba(0,0,0,.1) 66%,transparent 66%),-moz-linear-gradient( top,rgba(255,255,255,.25),rgba(0,0,0,.2)),-moz-linear-gradient( left,#09c,#690)}
3. Create an article or post and choose HTML mode no Compose Then enter the following area code.
HTML code 1
HTML code 2
| Default | |
| Primary | |
| Secondary | |
| Danger | |
| Warning | |
| Success | |
| Info | |
| Dark | |
| Gradasi |
HTML code 3
-
Coding
HTML5
CSS3
jQuery
-
Olahraga
Lari
Sepak Bola
Bulutangkis
4th complete Article ready for publication.
Here are 3 views Skill Bar with different CSS styles.
Skill Bar Style 1
Skill Bar Style 2
Skill Bar Style 3
So many tutorials Easy Ways to Create Cool Skill Bars Using CSS on Blogger. If you have any questions about this item, please feel free to leave a comment below. Hope it’s useful.
