مرحبا بكم متابعي مدونة ابراهيم للمعلومات نقدم لكم اليوم طريقة اضافة مواضيع جديدة قادمة قريبًا التي موجودة في موقعي وهي اضافة جميلة تظهر لمتابعينك المواضيع القادمة في موقعك
- قم بالتوجة الي لوحة التحكم في بلوجر
- ثم الي تحرير HTML او التخطيط
- واضعها في المكان الذي يناسبك
<style> .infobox h3{margin:0;padding:10px;background:#111119 url('http://pngimg.com/upload/smoke_PNG962.png') center;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: 14px; 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 { counter-increment: popcount; float: right; font-size: 20px; 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">فوتوشوب</span></li>
<li><strong style="font-weight:bold;color: #F0AD4E;"> دورات : </strong>تعليم انشاء بنر متحرك بالفوتوشوب<span class="inf orange">جاري التنفيذ</span></li>
</ul>
</span> </div>
<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">فوتوشوب</span></li>
<li><strong style="font-weight:bold;color: #F0AD4E;"> دورات : </strong>تعليم انشاء بنر متحرك بالفوتوشوب<span class="inf orange">جاري التنفيذ</span></li>
</ul>
</span> </div>
- ثم قم بتغير اسم المواضيع
- ومبروك عليك الاضافة
ليست هناك تعليقات:
إرسال تعليق