مساحة إعلانية

الخميس، 24 يناير، 2013

الخميس، 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 هو لون الخط
وهذا مثال للمعاينة


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

      حذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

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