اضافة لبلوجر زر ' موضوع عشوائي ' - أدوات بلوجر

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

*1  انتقل الى بلوجر ثم اضغط على مدونتك ثم ' التخطيط '
*2 اضغط على ' إضافة أداة ' في المكان الذي تريد عرض الاضافة فيه
*3 قم بلصق هذا الكود

<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> <style type='text/css'> #myLuckyPost a { position: relative; color: rgba(255,255,255,1); text-decoration: none; background-color: rgba(219,87,5,1); font-family: 'Courier New', Arial, monospace, sans-serif; font-weight: 700; font-size: 19px; display: block; padding: 4px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7); -moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7); box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7); margin: 10px auto; width: 200px; 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; } #myLuckyPost a:active { -webkit-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9); -moz-box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9); box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9); position: relative; top: 6px; } </style>

تخصيص الإضافة :

* لتغيير كلمة ' موضوع عشوائي ' . قم بكتابة أي كلمة أخرى مكانها ( في الكود )
* لتغيير لون النص استبدل

rgba(255,255,255,1)

قم بتعوضيه بأي لون آخر و ذلك باستبدال الثلاثة الأعداد الأولى 2555,255,255

* لتغيير لون الخلفية استبدل الكود التالي

rgba(219,87,5,1);

قمت بجمع الاعدادات . يمكنكم تغيير اعدادات أخرى و هذه أهمها ( ابحث عن كل سطر لوحده  )

color: rgba(255,255,255,1); /* لون النص */
background-color: rgba(219,87,5,1); /* لون الخلفية */
font-family: 'Courier New', Arial, monospace, sans-serif; /* نوع الخط*/
font-size: 19px; /* حجم الخط */
width: 200px; /* طول المستطيل */
text-align: center; /* تنسيق الخط */