بسم الله الرحمان الرحيم
السلام عليكم أحباء ومتابعي مدونة منبع المعلوميات
اليوم إن شاء الله سأقدم لكم النسخة الثانية من إضافة أزرار التحميل و المعاينة . قد طرحنا سابقا هذه الإضافة و هذا هو الموضوع :
الدرس 68 : إضافة أزرار التحميل و المعاينة v1
هذه النسخة من الإضافة مختلفة تماما عن سابقتها من حيث الشكل و طريقة التحرك أو الإنزلاق حيث تم إضافة عداد مرات التحميل و عداد لمرات المعاينة و يمكنكم معاينتها ببساطة من صورة الموضوع أو إذا أردتم معاينة كاملة فتوجهوا لهذا الرابط من هـــنـــا .
دعنا نمر لطريقة التركيب الآن و لا نهدر المزيد من الوقت :
طبعا الخطوات المعتادة
- الدخول للمدونة المراد تركيب الإضافة بها .
- نذهب إلى القالب .
- نقوم بالظغط على تحرير Html
- نبحث عن الوسم </head> عبر الضغط على ctrl + F
- نضيف هذا الكود فوقه مباشرة :
<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;}نغير #FFAB00 بلون زر المعاينة
/*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>
نغير #0070DE بلون زر التحميل
ثم نقوم بحفظ القالب و ببساطة عند رغبتك في إضافة الأداة قم بالذهاب إلى تبويب 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 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>
نغير # برابط المعاينة
نغير # برابط التحميل
و بهذا يكون درسنا قد إنتهى و إن شاء الله تكون الإضافة قد أعجبكم و شكراً .
