15482721749897530
recent
أخبار ساخنة

اضافة احصائيات المدونة بشكل جديد في بلوجر

الخط

اضافة احصائيات المدونة بشكل جديد في بلوجر


 اضافة اداة احصائيات المدونة بشكل جديد وهذه الاداة هي نستعملها في موقعنا لاحصائيات المدونة وتركيبها سهل جدا , تابع الشرح

 
اضافة احصائيات المدونة


اضافة احصائيات المدونة


السلام عليكم

بعض الاشخاص علي صفحتنا سالو عن اداة احصائيات المدونة لدينا ومن المؤكد ان كل مافي مستر عربكو فهو مجانا للزوار وموضوعنا اليوم عن هذه الاداة , اداة احصائيات المدونة لقالبك في بلوجر
 الاداة لن تحتاج منك اي خبرة الشرح سهل جدا
وكما ترون في صورة الموضوع ان يمكنك اضافة + 50% للعلامة الخضرا اي زيادة ويمكنك ايضا جعلها حمراء لانخفاض العدد
 الاداة لي سبها اكواد جافا نهائيا فقط html و css
هذه الاضافة اضافة الارقام بها يدويا عن طريق صاحب المدونة

الشرح

الشرح كل ما عليك هو الذهاب للتخطيط ثم اضافة اداة HTML/JavaScript

ثم وضع هذا الكود





<div class="box">
<div class="box__header">
<h3 class="box__header-title">في موقعنا</h3>
</div>
<div class="box__body">
<div class="stats stats--main">
<div class="stats__amount"></div>
<div class="stats__caption"></div>
<div class="stats__change">
<div class="stats__value stats__value--positive"></div>
<div class="stats__period"></div>
</div>
</div>

<div class="stats">
<div class="stats__amount">200000</div>
<div class="stats__caption">زائر</div>
<div class="stats__change">
<div class="stats__value stats__value--positive"></div>
<div class="stats__period"></div>
</div>
</div>

<div class="stats">
<div class="stats__amount">280</div>
<div class="stats__caption">تعليق</div>
<div class="stats__change">
<div class="stats__value stats__value--positive">+50%</div>
<div class="stats__period"></div>
</div>
</div>

<div class="stats">
<div class="stats__amount">293</div>
<div class="stats__caption">موضوع</div>
<div class="stats__change">
<div class="stats__value"></div>
<div class="stats__period"></div>
</div>
</div>
</div>
</div>
<style>


body {
background: #222;
}

.box {
background: linear-gradient(45deg,#b33939,#0a3d62);
margin: 15px auto 0;
border-radius: 5px;
width: 300px;
}

.box__header {
padding: 15px 25px;
position: relative;
}

.box__header-title {
color: #fff;
font-size: 18px;
}

.box__body {
padding: 0 25px;
}

/* STATS */

.stats {
color: #fff;
position: relative;
padding-bottom: 25px;
}

.stats__amount {
font-size: 42px;
font-weight: bold;
line-height: 1.2;
}

.stats__caption {
font-size: 18px;

}

.stats__change {
position: absolute;
top: 10px;
right: 0;
text-align: right;
color: #B1B7C8;
}

.stats__value {
font-size: 18px;
padding-right: 67px;
}

.stats__period {
font-size: 14px;
}

.stats__value--positive {
color: #AEDC6F;
}

.stats__value--negative {
color: #FB5055;
}

.stats--main .stats__amount {
font-size: 54px;
}
</style>




وقم بحفظ الاداة وسوف تشتغل معك الاضافة

لأي استفسار اترك تعليق
 
ليست هناك تعليقات
إرسال تعليق

إرسال تعليق

نموذج الاتصال
الاسمبريد إلكترونيرسالة