[إضافات] الدرس 9: اضافة ازرار التحميل والمعاينة مع عداد المشاهدات والتحميل

بسم الله الرحمن الرحيم

اضافة ازرار التحميل والمعاينة مع عداد المشاهدات والتحميل

درس اليوم درس بسيط عن كيفية اضافة زر التحميل والمعاينة مع عداد لمرات التحميل والمشاهدة وبالطبع سبقنى لعرضها اخى العزيز صاحب مدونة كن مدون الان لنبداء الدرس ومع معاينة الاداة

معاينة الاداة

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

تحميل تم التحميل مرة

 

طريقة التركيب

فى مدونتك ابحث عن </head>
واضف فوهقها

<style>

#blbloggercoun {
  margin: auto;
  width: 420px;
}
/*Preview counter from bl-blogger*/
#bl-blogger-pr-co {
  float: right;
  margin: 10px auto 30px;
  width: 200px;
}
#bl-blogger-pr-co .cb1 a {
  background: url("https://lh3.googleusercontent.com/-tFT_SzCGOCs/VT6o1RUN9II/AAAAAAAAASw/P8dx0KP6wYo/s24/search.png") no-repeat scroll 96% center #FFAB00;
  color: #fff;
  display: block;
  font-size: 20px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  transition: all 0.7s ease 0s;
}
#bl-blogger-pr-co .cb2 {
  background-color: #D48E00;
  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;
}
#bl-blogger-pr-co:hover .cb2 {height: 24px; opacity: 1;}

/*Download counter from bl-blogger*/
#bl-blogger-do-co {
  float: left;
  margin: 10px auto 30px;
  width: 200px;
}
#bl-blogger-do-co .cb1 a {
  background: url("https://lh3.googleusercontent.com/-Q0fbJ6eNObg/VT6o1blDgdI/AAAAAAAAASs/yUJb62g7Oug/s24/downloadwhite.png") no-repeat scroll 96% center #0070DE;
  color: #fff;
  display: block;
  font-size: 20px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  text-decoration: none;
  transition: all 0.7s ease 0s;
}
#bl-blogger-do-co .cb2 {
  background-color: #0057AD;
  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;
}
#bl-blogger-do-co:hover .cb2 {height: 24px; opacity: 1;}

</style>

• غير #FFAB00 بلون زر المعاينة
• غير #D48E00 بلون زر عداد المعاينة
• غير #0070DE  بلون زر التحميل
• غير #0057AD  لون زر عداد التحميل

الان فى الموضوع فى وضع تحرير html

كود المعاينة

<div id="blbloggercoun">
<!--معاينة-->
<div id="bl-blogger-pr-co">
<span class="cb1"><a href="هنا رابط صفحة المعاينة" target="_blank" rel="nofollow">معاينة</a></span>
<span class="cb2">
تمت المشاهدة
<script type='text/javascript' src='http://dstats.net/sitetracker.php?url=#'></script>
<script type='text/javascript'>document.write(dsCounter);</script>
 مرة
</span> 

</div>

</div>

كود التحميل

<div id="blbloggercoun">

<!--تحميل-->
<div id="bl-blogger-do-co">
<span class="cb1"><a href="هنا رابط صفحة التحميل" target="_blank" rel="nofollow">تحميل</a></span>
<span class="cb2">
تم التحميل
<script type='text/javascript' src='http://dstats.net/sitetracker.php?url=#'></script>
<script type='text/javascript'>document.write(dsCounter);</script>
 مرة
</span>
</div>
</div>

اما ان اردت اضافة الاداتان فى نفس الموضوع فاضف الكود التالى

<div id="blbloggercoun">
<!--معاينة-->
<div id="bl-blogger-pr-co">
<span class="cb1"><a href="#" target="_blank" rel="nofollow">معاينة</a></span>
<span class="cb2">
تمت المشاهدة
<script type='text/javascript' src='http://dstats.net/sitetracker.php?url=#'></script>
<script type='text/javascript'>document.write(dsCounter);</script>
 مرة
</span>
</div>
<!--تحميل-->
<div id="bl-blogger-do-co">
<span class="cb1"><a href="#" target="_blank" rel="nofollow">تحميل</a></span>
<span class="cb2">
تم التحميل
<script type='text/javascript' src='http://dstats.net/sitetracker.php?url=#'></script>
<script type='text/javascript'>document.write(dsCounter);</script>
 مرة
</span>
</div>
</div>

انتهى الشرح شكرا لحسن المتابعة

شارك شارك شارك