توجد اخطاء حاليا في جوجل مشرفي الموقع

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

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

 

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


السلام عليكم

بعض الاشخاص علي صفحتنا سالو عن اداة احصائيات المدونة لدينا ومن المؤكد ان كل مافي مستر عربكو فهو مجانا للزوار وموضوعنا اليوم عن هذه الاداة , اداة احصائيات المدونة لقالبك في بلوجر
 الاداة لن تحتاج منك اي خبرة الشرح سهل جدا
وكما ترون في صورة الموضوع ان يمكنك اضافة + 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>



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

لأي استفسار اترك تعليق