لقد سبق وخصصت تدوينة لشرح طريقة اضافة خاصية عدد المشاهدات والتحميلات لمواضيع المدونة تلقائيا، لكن في هذا الموضوع سوف نتطرق انشاء الله لشرح طريقة اضافة عداد لاحتساب عدد التحميلات وزر المعاينة لاي موضوع اردته، وهذا امر مهم لان اغلبية المدونين يحتاجون الى هذه الاضافة الجميلة وذالك من اجل مراقبة عدد التحميلات لجميع روابط المدونة.
نبدا الشرح على بركة الله ونقوم بتوسيع القالب ونبحث على الكود التالي بالاستعانة ب CNTRL+F
]]></b:skin>
بعد ذالك نقوم بالصاق هذا الكود فوق الكود السابق
#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;}
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
الان كل شيئ جاهز لاستخدام هذه الخاصية في المشاركات التي تريد
وعند كتابة اي موضوع وتود اضافة له هذه الخاصية قم بالتوجه الى HTML كما في الصورة اسفل
بعد ذالك اضف الكود التالي مباشرة اسفل المقال
<div id="cnmubcoun">
<!--معاينة-->
<div id="cnmudcount1">
<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="cnmudcount2">
<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>
واخيرا قم بتغييركلا الرمزين الذي ستجده بهذا الشكل # برابط مدونتك ومبروك الخاصية.
محمد الوهابي، من مواليد 1994 من المغرب،الهواية، التدوين الالكتروني، مهتم كثيرا بالتكنولوجيا، وابحث دائما عن كل ماهو جديد لتقديم شروحات ومقالات مفيدة وذالك للارضاء الجميع وتحقيق الافضل.