شاشة الإنتظار

لغة القالب

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

كن مدون
الخميس, يناير 24, 2013
إضافة خفيفة ولا تاخذ مساحة تساعد على إبقاء الزوار وقت أطول في المدونة فهي تنقل الزائر لتدوينة عشوائية كل مرة يضغط عليها ينتقل لموضوع جديد وكلها زيارات تحسب في النهاية لمدونتك والإضافة لا تحتاج أى إعداد فهي تعمل تلقائيا بمجرد إضافتها للمدونة
وتضاف في آداة 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 هو لون الخط
وهذا مثال للمعاينة


إضافة زر مشاهدة تدوينة عشوائية كن مدون : موقع متخصص في تطوير منصة بلوجر

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

  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. بالتوفيق أخي وشكراً على المرور وامانة النقل

      حذف

عدد المواضيع