إضافة عداد معاينة أو تحميل لأى رابط

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

معاينةعدد المشاهدات :

تحميلعدد التحميلات :

طبعا كما رأيت انا اضفت روابط المعاينة والتحميل لموقعي انت يمكنك تخصيصها بشكل اكثر مع مواضيعك

الآن مع التركيب

أولا كود المظهر أضفه فوق الوسم ]]>

#cnmubcoun {
  margin: auto;
  width: 420px;
}
/*Preview*/
#cnmudcount1 {
  float: right;
  margin: 10px auto 30px;
  width: 200px;
}
#cnmudcount3 {margin: 10px auto 30px; width: 200px;}
#cnmudcount1 .cb1 a,#cnmudcount3 .cb1 a {
  background: url("https://lh3.googleusercontent.com/-tFT_SzCGOCs/VT6o1RUN9II/AAAAAAAAASw/P8dx0KP6wYo/s24/search.png") no-repeat scroll 96% center #E77B00;
  color: #fff;
  display: block;
  font-size: 20px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  transition: all 0.7s ease 0s;
}
#cnmudcount1 .cb2,#cnmudcount3 .cb2 {
  background-color: #000;
  border-radius: 0 0 5px 5px;
  color: #fff;
  display: block;
  font: bold 12px/20px tahoma;
  height: 0;
  opacity: 0;
  position: absolute;
  text-align: center;
  transition: all 0.5s ease 0s;
  width: 200px;
}

/*Download*/
#cnmudcount2 {
  float: left;
  margin: 10px auto 30px;
  width: 200px;
}
#cnmudcount4 {margin: 10px auto 30px; width: 200px;}
#cnmudcount2 .cb1 a,#cnmudcount4 .cb1 a {
  background: url("https://lh3.googleusercontent.com/-Q0fbJ6eNObg/VT6o1blDgdI/AAAAAAAAASs/yUJb62g7Oug/s24/downloadwhite.png") no-repeat scroll 96% center #319300;
  color: #fff;
  display: block;
  font-size: 20px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  transition: all 0.7s ease 0s;
}
#cnmudcount2 .cb2,#cnmudcount4 .cb2 {
  background-color: #c40101;
  border-radius: 0 0 5px 5px;
  color: #fff;
  display: block;
  font: bold 12px/20px tahoma;
  height: 0;
  opacity: 0;
  position: absolute;
  text-align: center;
  transition: all 0.5s ease 0s;
  width: 200px;
}
/*Hover*/
#cnmudcount1:hover .cb2,#cnmudcount2:hover .cb2,#cnmudcount3:hover .cb2,#cnmudcount4:hover .cb2 {height: 24px; opacity: 1;}

 ما يهمك تغييره في الكود السابق

1. لون زر المعاينة #E77B00
2. لون جملة العداد لزر المعاينة #000
3. لون زر التحميل #319300
4. لون جملة عداد زر التحميل #c40101

 طريقة الإستخدام

1">
#" target="_blank" rel="nofollow">معاينة

عدد المشاهدات :

2">
#" target="_blank" rel="nofollow">تحميل

عدد التحميلات :

تضيف الكود السابق في الموضوع بعد تحويل صندوق الكتابة من وضع التأليف الى وضع HTML

الرمز # المكرر مرتين في منطقة المعاينة تغيره بالرابط الذي تريد احتساب مشاهداته

اى تغيير في الرابط بين المرتين ستختلف النتائج

نفس الشئ مع رمز # المكرر مرتين في منطقة التحميل

في حالة رغبت بإستخدام زر واحد فقط من الزرين استخدم المنطقة الخاصة به فقط كما ترى كل منطقة معلمة بلون
مع تغيير الرقم 1 في منطقة المعاينة برقم 3
والرقم 2 في منطقة التحميل بالرقم 4

بالتوفيق