تبادل اعلانى

الخميس، 2 يناير، 2014

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


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

0 التعليقات:

إرسال تعليق