تحميل قالب جلسة قالب بلوجر أنيق وعملي | jallsa template

في عالم التدوين الرقمي، يُعد عرض إحصائيات المدونة جزءًا مهمًا من بناء مصداقية المدونة وزيادة التفاعل مع الزوار. من بين الأدوات التي يمكن إضافتها لمدونات بلوجر هي أداة إحصائيات المدونة التي تعرض معلومات مثل عدد المقالات، وعدد الكلمات، وعدد الزيارات، وعدد السنوات التي قضتها المدونة في مجالها.

في هذا المقال، سنتعرف على كيفية إضافة أداة إحصائيات احترافية لمدونتك في بلوجر بطريقة سلسة وسريعة.

معاينة أداة إحصائيات المدونة

• --

  في المجال التقني

• --

  مقال تقني متخصص

• 251,483

  كلمة تحتوي عليها المُدوَّنة

• 1,806,356

  زيارة للمُدوَّنة منذ إنشائها

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

تعتبر الإحصائيات التي تعرضها مدونتك إحدى الطرق التي تعكس مصداقية واحترافية المدونة. من خلال عرض هذه الإحصائيات، يمكن للزوار معرفة مدى نشاط المدونة وعدد المقالات التي تم نشرها، وكذلك الاطلاع على الإحصائيات المتعددة مثل الكلمات المكتوبة وعدد الزيارات. هذا يساعد في:

• بناء الثقة مع الزوار الجدد.
• تعزيز التفاعل مع زوار مدونتك.
• إظهار الجهد المبذول في تطوير المدونة.

كيفية إضافة أداة إحصائيات المدونة؟

يمكنك إضافة أداة إحصائيات المدونة بسهولة باستخدام كود HTML وJavaScript بسيط. لن تحتاج إلى أي أدوات إضافية أو خدمات خارجية، فقط تابع هذه الخطوات:

1. افتح لوحة تحكم بلوجر.
2. انتقل إلى التخطيط.
3. اختر إضافة أداة HTML/JavaScript.
4. ألصق كود الإحصائيات التالي:

كود إحصائيات المدونة

<!-- ويدجيت إحصائيات المدونة -->
<div class="eltiqni-stats-widget">
  <h2>آخر إحصائيات المُدوَّنة</h2>
  <ul>
    <li>
      <div class="eltiqni-icon">
        <!-- أيقونة سنوات -->
        <svg width="24" height="24" viewbox="0 0 24 24" fill="none">
          <circle cx="12" cy="12" r="10" stroke="#FF7F50" stroke-width="2"></circle>
          <path d="M12 6V12L15 15" stroke="#FF7F50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </path></svg>
      </div>
      <div class="eltiqni-info">
        <span id="years">--</span>
        <p>في المجال التقني</p>
      </div>
    </li>
    <li>
      <div class="eltiqni-icon">
        <!-- أيقونة مقالات -->
        <svg width="24" height="24" viewbox="0 0 24 24" fill="none">
          <rect x="3" y="4" width="18" height="16" rx="2" stroke="#FF7F50" stroke-width="2"></rect>
          <line x1="7" y1="8" x2="17" y2="8" stroke="#FF7F50" stroke-width="2" stroke-linecap="round"/>
          <line x1="7" y1="12" x2="17" y2="12" stroke="#FF7F50" stroke-width="2" stroke-linecap="round"/>
          <line x1="7" y1="16" x2="12" y2="16" stroke="#FF7F50" stroke-width="2" stroke-linecap="round"/>
        </line></line></line></svg>
      </div>
      <div class="eltiqni-info">
        <span id="postCount">--</span>
        <p>مقال تقني متخصص</p>
      </div>
    </li>
    <li>
      <div class="eltiqni-icon">
        <!-- أيقونة كلمات -->
        <svg width="24" height="24" viewbox="0 0 24 24" fill="none">
          <path d="M4 4H20V20H4V4Z" stroke="#FF7F50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M8 8H16" stroke="#FF7F50" stroke-width="2" stroke-linecap="round"/>
          <path d="M8 12H16" stroke="#FF7F50" stroke-width="2" stroke-linecap="round"/>
          <path d="M8 16H12" stroke="#FF7F50" stroke-width="2" stroke-linecap="round"/>
        </path></path></path></path></svg>
      </div>
      <div class="eltiqni-info">
        <span>251,483</span>
        <p>كلمة تحتوي عليها المُدوَّنة</p>
      </div>
    </li>
    <li>
      <div class="eltiqni-icon">
        <!-- أيقونة زيارات -->
        <svg width="24" height="24" viewbox="0 0 24 24" fill="none">
          <path d="M3 12C3 12 6 5 12 5C18 5 21 12 21 12C21 12 18 19 12 19C6 19 3 12 3 12Z" stroke="#FF7F50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <circle cx="12" cy="12" r="3" stroke="#FF7F50" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </circle></path></svg>
      </div>
      <div class="eltiqni-info">
        <span>1,806,356</span>
        <p>زيارة للمُدوَّنة منذ إنشائها</p>
      </div>
    </li>
  </ul>
</div>

<!-- تنسيقات CSS -->
<style>
.eltiqni-stats-widget {
  background: #fff;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  font-family: 'Cairo', sans-serif;
  text-align: right;
}
.eltiqni-stats-widget h2 {
  font-size: 18px;
  color: #333;
  margin-bottom: 15px;
  border-right: 4px solid #FF7F50;
  padding-right: 8px;
}
.eltiqni-stats-widget ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.eltiqni-stats-widget li {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.eltiqni-icon {
  width: 40px;
  height: 40px;
  background: #FFF3EE;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
}
.eltiqni-info span {
  font-size: 16px;
  font-weight: bold;
  color: #FF7F50;
  display: block;
}
.eltiqni-info p {
  margin: 0;
  font-size: 13px;
  color: #555;
}
</style>

<!-- سكربت جلب عدد المقالات + حساب السنوات -->
<script>
(function(){
  var startYear = 2025;
  var currentYear = new Date().getFullYear();
  var years = currentYear - startYear;
  document.getElementById('years').innerText = years > 0 ? years + ' سنة' : 'سنة واحدة';

  fetch('https://www.eltiqni.com/feeds/posts/default?alt=json&max-results=0')
    .then(response => response.json())
    .then(data => {
      var totalPosts = data.feed.openSearch$totalResults.$t;
      document.getElementById('postCount').innerText = totalPosts + ' مقال';
    })
    .catch(error => {
      console.error('Error fetching post count:', error);
      document.getElementById('postCount').innerText = '---';
    });
})();
</script>

تخصيص الأداة

العنصر	الوصف	طريقة التخصيص
startYear في السكربت	سنة إنشاء المدونة لحساب عدد السنوات تلقائيًا	عدل القيمة 2025 إلى سنة الإنشاء مثل 2020
رابط الفيد (feeds)	رابط مدونتك لجلب عدد المقالات تلقائيًا	تأكد أن الرابط داخل fetch يشير إلى فيد مدونتك
<h2> عنوان الأداة	العنوان الظاهر أعلى الودجت	عدل النص بين الوسمين مثل <h2>
أيقونات SVG	الأيقونات بجانب كل رقم (سنوات، مقالات، كلمات، زيارات)	يمكنك تغيير كود <svg> لأي أيقونة أخرى
<span id="years">	مكان عرض عدد السنوات تلقائيًا	لا تعدل الـ ID، يتغير تلقائيًا عبر السكربت
<span id="postCount">	مكان عرض عدد المقالات تلقائيًا	لا تعدل الـ ID، يتغير تلقائيًا عبر السكربت
عدد الكلمات (251,483)	عدد الكلمات الكلي (ثابت حاليًا)	غير الرقم يدويًا حسب إحصائياتك
عدد الزيارات (1,806,356)	عدد الزيارات الكلي (ثابت حاليًا)	غير الرقم يدويًا حسب تقاريرك
لون الأيقونات والخطوط	اللون البرتقالي #FF7F50 المستخدم	غير الكود اللوني في الأكواد أو الـ CSS
خلفية الأيقونة	لون الخلفية الدائرية #FFF3EE	غير اللون في كلاس .eltiqni-icon بالـ CSS
الخط المستخدم	خط النصوص Cairo	يمكن تغييره بتعديل font-family بالـ CSS
شكل الحواف	الحواف دائرية border-radius: 12px	يمكن تعديل الرقم حسب الرغبة
الظل للصندوق	تأثير الظل الخفيف للصندوق	يمكنك تغييره بتعديل box-shadow بالـ CSS

خاتمة

إضافة أداة إحصائيات المدونة لبلوجر هي واحدة من الطرق التي يمكنك من خلالها تعزيز تفاعل الزوار مع مدونتك وزيادة مصداقيتك في العالم الرقمي. باستخدام الكود البسيط والأنيق، يمكنك إظهار الإحصائيات الخاصة بمدونتك بطريقة احترافية تجعل الزوار يشعرون بالثقة في محتوى مدونتك. جرب الأداة الآن وشارك إحصائياتك مع جمهورك بشكل مبتكر وجذاب!

نتمنى أن تكون قد استفدت من هذا المحتوى، ونسعد برؤية تفاعلك معنا سواء بتعليق صغير أو بمشاركة المقال مع الآخرين. دعمك يحفزنا لتقديم المزيد!

قد يعجبك