سوف نشرح اليوم إضافة زر المشاركات العشوائية عند النقر عليها سيتم توجيهك إلى أي مشاركة بشكل عشوائي على مدونتك . الاداة تعمل على جافا سكريبت . هذه الاداة بسيطة تستخدم جافا سكريبت وتبدو أنيقة. هذه الاداة قد تكون مفيدة حقا لزيادة عدد زيارات المشاركات القديمة . وايضا ذلك الزر له تأثير 3D يعطى لها شكل جميل.

معاينة


 

نذهب الى لوحة تحكم المدونة ← التخطيط ← اضافة اداة جديدة HTML/JavaScript
 ونضع هذا الكود

<style>
#random{position:relative;color:rgba(255,255,255,1);text-decoration:none;background-color:rgba(219,87,5,1);font-family:'Yanone Kaffeesatz';font-weight:700;font-size:20px;display:block;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 9px 0 rgba(219,31,5,1), 0 9px 25px rgba(0,0,0,.7);-moz-box-shadow:0 9px 0 rgba(219,31,5,1), 0 9px 25px rgba(0,0,0,.7);box-shadow:0 9px 0 rgba(219,31,5,1), 0 9px 25px rgba(0,0,0,.7);margin-bottom:10px;margin-top:10px;width:160px;text-align:center;-webkit-transition:all .1s ease;-moz-transition:all .1s ease;-ms-transition:all .1s ease;-o-transition:all .1s ease;transition:all .1s ease;padding:4px}
#random:active{-webkit-box-shadow:0 3px 0 rgba(219,31,5,1), 0 3px 6px rgba(0,0,0,.9);-moz-box-shadow:0 3px 0 rgba(219,31,5,1), 0 3px 6px rgba(0,0,0,.9);box-shadow:0 3px 0 rgba(219,31,5,1), 0 3px 6px rgba(0,0,0,.9);position:relative;top:6px}
#random a{color: #fff;}
</style>

<center><div id="random"></div></center>
<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 = 'Random Post'; document.getElementById('random').appendChild(a); } </script><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky">
</script>

اللون اللبنى

<style>
#random{position:relative;color:rgba(255,255,255,1);text-decoration:none;background-color:#00b5fc;font-family:'Yanone Kaffeesatz';font-weight:700;font-size:20px;display:block;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 9px 0 #00a3e3, 0 9px 25px rgba(0,0,0,.7);-moz-box-shadow:0 9px 0 #00a3e3, 0 9px 25px rgba(0,0,0,.7);box-shadow:0 9px 0 #00a3e3, 0 9px 25px rgba(0,0,0,.7);margin-bottom:10px;margin-top:10px;width:160px;text-align:center;-webkit-transition:all .1s ease;-moz-transition:all .1s ease;-ms-transition:all .1s ease;-o-transition:all .1s ease;transition:all .1s ease;padding:4px}
#random:active{-webkit-box-shadow:0 3px 0 rgba(219,31,5,1), 0 3px 6px rgba(0,0,0,.9);-moz-box-shadow:0 3px 0 #00a3e3, 0 3px 6px rgba(0,0,0,.9);box-shadow:0 3px 0 #00a3e3, 0 3px 6px rgba(0,0,0,.9);position:relative;top:6px}
#random a{color: #fff;}
</style>

<center><div id="random"></div></center>
<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 = 'Random Post'; document.getElementById('random').appendChild(a); } </script><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky">
</script>

اللون الاصفر

<style>
#random{position:relative;color:rgba(255,255,255,1);text-decoration:none;background-color:#fcc500;font-family:'Yanone Kaffeesatz';font-weight:700;font-size:20px;display:block;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 9px 0 #e3b200, 0 9px 25px rgba(0,0,0,.7);-moz-box-shadow:0 9px 0 #e3b200, 0 9px 25px rgba(0,0,0,.7);box-shadow:0 9px 0 #e3b200, 0 9px 25px rgba(0,0,0,.7);margin-bottom:10px;margin-top:10px;width:160px;text-align:center;-webkit-transition:all .1s ease;-moz-transition:all .1s ease;-ms-transition:all .1s ease;-o-transition:all .1s ease;transition:all .1s ease;padding:4px}
#random:active{-webkit-box-shadow:0 3px 0 rgba(219,31,5,1), 0 3px 6px rgba(0,0,0,.9);-moz-box-shadow:0 3px 0 #e3b200, 0 3px 6px rgba(0,0,0,.9);box-shadow:0 3px 0 #e3b200, 0 3px 6px rgba(0,0,0,.9);position:relative;top:6px}
#random a{color: #fff;}
</style>

<center><div id="random"></div></center>
<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 = 'Random Post'; document.getElementById('random').appendChild(a); } </script><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky">
</script>