إضافة زر مشاهدة تدوينة عشوائية

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

<center><div id='myLuckyPost'></div> <script type='text/javascript'> function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'شاهد تدوينة عشوائية'; document.getElementById('myLuckyPost').appendChild(a); } </script> <script src='/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky'></script></center>
<style type='text/css'>
#myLuckyPost a{color:#fff; display: block; margin:10px auto; width:200px; background: #080199;background: -moz-linear-gradient(top,#759CD6,#080199);background: -webkit-linear-gradient(top,#759CD6,#080199); font-size:14px; font-weight:bold; line-height:16px; text-decoration:none; border:1px solid #7B7A79; padding:10px; border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;}
#myLuckyPost a:hover{color:#fff;  background: #0300BA;background: -moz-linear-gradient(top,#92BBF5,#0300BA);background: -webkit-linear-gradient(top,#92BBF5,#0300BA); text-decoration:none; border:1px solid #7B7A79; border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;}
}
#myLuckyPost a:active {}
</style>

وللتحكم في الوان الإضافة
لتغيير الكلمة الظاهرة عدل شاهد تدوينة عشوائية في الكود
لتغيير الوان الزر
اللونين بالأزرق هما تدرج لون الزر 
واللونين بالأخضر هما لونين التدرج الذي يظهر عند تمرير الماوس
والألوان المكررة يجب تغييرها جميعا حتى تظهر الإضافة مضبوطة في كل المتصفحات
و font-size:14px هو حجم الخط
و color:#fff هو لون الخط
وهذا مثال للمعاينة


هناك 9 تعليقات:

  1. السلام عليكم ورحمة الله وبركاته
    ---------------------------------
    لدي استفسار بسيط وهو: كيف اجعل الموضوع العشوائي يفتح في نافذة جديدة,جزاك الله خيراً

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

      حذف
  2. السلام عليكم اخي الكريم
    هل من الممكن ان اتحكم في الصورة في التي تظهر في الزر

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      أى صورة أخي الكريم ؟ ان كنت تقصد لون الزر فانا وضحت طريقة تعديل اللون
      او وضح ان كان لك قصد آخر

      حذف
    2. اريد أن اعوض تلك الكتابة بصورة واجعل لها طول وعرض من اختياري

      حذف
    3. يمكنك ذلك أخي بعمل التالي
      استبدل الاكواد التي بين هاذين الكودين
      <style type='text/css'>
      </style>
      بهذه الاكواد
      #myLuckyPost a {
      background: url("https://lh6.googleusercontent.com/-fQH96KA0kKM/UsH2plC-SRI/AAAAAAAACv0/mBoLG8YFCKs/s125/down.gif") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
      color: transparent;
      display: block;
      font-size: 0;
      height: 70px;
      margin: 10px auto;
      width: 125px;
      }
      #myLuckyPost a:hover { opacity: 0.8;}
      #myLuckyPost a:active {}

      مع تعديل هذا الرابط https://lh6.googleusercontent.com/-fQH96KA0kKM/UsH2plC-SRI/AAAAAAAACv0/mBoLG8YFCKs/s125/down.gif
      برابط الصورة التي تريد
      وتعديل الرقم 125 في الكود التالي width: 125px; بعرض الصورة التي اخترتها
      وتعديل الرقم 70 في هذا الكود height: 70px; بإرتفاع الصورة التي اخترتها

      حذف
    4. شكرا جزيلا اخي العزيز
      واتمنى لك الاستمرار في التفوق

      حذف
  3. تمت الطريقة اخى الكريم ونشرت الموضوع فى مدونتى وقلت المصدر اضافة جميلة جدا

    ردحذف
    الردود
    1. بالتوفيق أخي وشكراً على المرور وامانة النقل

      حذف

نسعد بتعليقاتكم ومروركم
يرجى أن يكون التعليق في اطار الموضوع اى اسئلة أو تعليق يخص موضوع آخر او سؤال خارجي نعتذر عن عدم القدرة للرد عليه

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

جميع الحقوق محفوظة لــ كن مدون 2018 ©