أداة المواضيع القادمة قريبا

<style>
.infobox h3{margin:0;padding:10px ;font-family: Droid Arabic Naskh;background:#333333;color:#ffffff;position:relative;}.inf.red{background:#d9534f;}.inf.green{background:#5cb85c;}.inf.orange{background:#f0ad4e;}.infobox{margin: 0 0 15px; background: #fff; border-bottom: 1px dashed #E4E1E1;-webkit-user-select: none;}.infobox .onhide{position:absolute;left:7px;top:10px;padding:3px 4px 0px 3px;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;font-size:15px;font-weight:400;cursor:pointer;}.infobox > span{ font-family: Droid Arabic Naskh; color:#555;padding:10px;line-height:20px;display:block;}.infobox ul{list-style:none;margin:0;padding:5px 8px;}.infobox li{clear:both;margin:5px 0;    position: relative;}.inf{padding: 0px 5px; border-radius: 2px; font-size: 10px; float: left; text-align: center; color: #fff; font-weight: 700; text-shadow: 0 0 1px rgba(0, 0, 0, 0.1); }.infobox li .green:before,.infobox li .orange:before,.infobox li .red:before {     font-family: Droid Arabic Naskh; counter-increment: popcount; float: right; font-size: 14px; line-height: 20px; list-style-type: none; padding: 0 8px 1px 1px; position: absolute; top: 0; z-index: 4; right: -20px; }.infobox li .red:before { color: #D9534F; content: '2';} .infobox li .orange:before { color: #F0AD4E; content: '3';} .infobox li .green:before { color: #5CB85C; content: '1' }</style><div class="infobox">
<h3>مواضيع جديدة قادمة قريبًا! <span class="fa fa-times onhide"></span></h3>
<span>
<ul>
<li><strong style="font-weight:bold;color: #5CB85C;"> دورة انشاء مدونة متفاعلة : </strong> أول ما ستنشره في المدونة <span class="inf green">تم النشر</span></li>
<li><strong style="font-weight:bold;color: #d9534f;"> دروس ، بلوجر : </strong>نسخ المواضيع الغير قابلة للنسخ<span class="inf red">50%</span></li>
<li><strong style="font-weight:bold;color: #F0AD4E;"> خدمات : </strong>تطوير قوالب بلوجر مجانا <span class="inf orange">سيتأخر</span></li>
</ul>
</span>
</div>