آموزش افزودن بلوک سفارشی برای نمایش درصد پروژه های انجام شده

سلام خدمت همه کاربران عزیز

تو این آموزش قراره یاد بگیریم تا چطور یک بلوک اختصاصی برای نمایش درصد پیشرفت پروژه هامون ایجاد کنیم

برای این کار ابتدا افزونه زیر رو نصب کنین:

بعد از نصب از انجمن از طریق مدیریت بلوکها بلوک این افزونه رو به قسمت دلخواه بکشین و کدهای زیر رو داخلش قرار بدین:

کد html:

<div class="container">    
                    <span id="mytext">IPSforum.ir</span>
                    <div class="progress progress-striped">
                      <div class="progress-bar progress-bar-danger red" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                        <span>40% </span>
                      </div>
                    </div>
                    <span id="mytext">IPSforum.ir</span>
                    <div class="progress progress-striped">
                      <div class="progress-bar progress-bar-danger blue" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                        <span>80% </span>
                      </div>
                    </div>
                    <span id="mytext">IPSforum.ir</span>
                    <div class="progress progress-striped">
                      <div class="progress-bar progress-bar-danger green" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 58%">
                        <span>58%  </span>
                      </div>
                    </div>
                    <span id="mytext">IPSforum.ir</span>
                    <div class="progress progress-striped">
                      <div class="progress-bar progress-bar-danger orange" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                        <span>40% </span>
                      </div>
                    </div>
</div>

کد css:

.container{
	width:250px;
	display:block;
    line-height: 150%;
    font-family: comic sans ms,cursive;
}
.progress {
	overflow: hidden;
	height: 20px;
	background-color: #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
	box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
		margin-bottom: 20px;
}
.progress-bar {
	width: 0;
	height: 100%;
	color: #fff;
	text-align: center;
	background-color: #ee303c;
}
.progress-striped .progress-bar {
			background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
			background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
			background-size: 40px 40px;
}
.progress.active .progress-bar {
	-webkit-animation: progress-bar-stripes 2s linear infinite;
	animation: progress-bar-stripes 2s linear infinite;
	-moz-animation: progress-bar-stripes 2s linear infinite;
}
.progress-bar.progress-bar-danger.blue {
    background-color: #2D2DC3;
}
.progress-bar.progress-bar-danger.green {
    background-color: green;
}
.progress-bar.progress-bar-danger.orange {
    background-color: rgb(230, 155, 17);
}
span#mytext {
    line-height: 22pt;
}
.progress-bar.progress-bar-danger.blue, .progress-bar.progress-bar-danger.red, .progress-bar.progress-bar-danger.green, .progress-bar.progress-bar-danger.orange {
    -webkit-animation: progress-bar-stripes 2s linear infinite;
    -o-animation: progress-bar-stripes 2s linear infinite;
    animation: progress-bar-stripes 2s linear infinite;
}

امیدوارم موفق باشید!