
إضافة خفيفة ولا تاخذ مساحة تساعد على إبقاء الزوار وقت أطول في المدونة فهي تنقل الزائر لتدوينة عشوائية كل مرة يضغط عليها ينتقل لموضوع جديد وكلها زيارات تحسب في النهاية لمدونتك والإضافة لا تحتاج أى إعداد فهي تعمل تلقائيا بمجرد إضافتها للمدونة
وتضاف في آداة 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 هو لون الخط
والألوان المكررة يجب تغييرها جميعا حتى تظهر الإضافة مضبوطة في كل المتصفحات
و font-size:14px هو حجم الخط
و color:#fff هو لون الخط
وهذا مثال للمعاينة
السلام عليكم ورحمة الله وبركاته
ردحذف---------------------------------
لدي استفسار بسيط وهو: كيف اجعل الموضوع العشوائي يفتح في نافذة جديدة,جزاك الله خيراً
وعليكم السلام ورحمة الله وبركاته
حذفحياك الله أخي محمد بالنسبة لفتح الزر في نافذة جديدة للأسف ليس تخصصي مجال برمجة جافا لكن انوه فقط ان هذا الأمر سيكون مزعجاً وبلا فائدة نظراً لان الزر لا يتغير تلقائياً يعني لو الرابط فتح في نافذة جديدة عند الضغط على الزر مرة أخرى فسيفتح نفس الموضوع في نافذة جديدة فلا يتغير موضوع الزر إلا بتحديث الصفحة وبالتالي هي ناذة اضافة للزائر تسبب ازعاج
السلام عليكم اخي الكريم
ردحذفهل من الممكن ان اتحكم في الصورة في التي تظهر في الزر
وعليكم السلام ورحمة الله وبركاته
حذفأى صورة أخي الكريم ؟ ان كنت تقصد لون الزر فانا وضحت طريقة تعديل اللون
او وضح ان كان لك قصد آخر
اريد أن اعوض تلك الكتابة بصورة واجعل لها طول وعرض من اختياري
حذفيمكنك ذلك أخي بعمل التالي
حذفاستبدل الاكواد التي بين هاذين الكودين
<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; بإرتفاع الصورة التي اخترتها
شكرا جزيلا اخي العزيز
حذفواتمنى لك الاستمرار في التفوق
تمت الطريقة اخى الكريم ونشرت الموضوع فى مدونتى وقلت المصدر اضافة جميلة جدا
ردحذفبالتوفيق أخي وشكراً على المرور وامانة النقل
حذف