اضافة جميلة لتخبر الزائر ماهي التدوينات القادمة التي ستنشرها بالمدونة
طريقة التركيب
اذهب للتخطيط - اضافة اداة- HTML/Javascript
اضف الكود التالي مع تغيير مايلزم
الأفضل تركيبها فوق مشاركات المدونة مباشرة
<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">30%</span></li> <li><strong style="font-weight:bold;color: #F0AD4E;"> - قوالب بلوجر : </strong> معربة <span class="inf orange">سيتأخر</span></li> </ul> </span> </div>
المحددة بالألوان غيرها بما تريد
ليست هناك تعليقات:
إرسال تعليق