مدونة محمد عماد : اضافة زر موضوع عشوائي لمدونات بلوجر

السلام عليكم ورحمة الله تعالى وبركاته

اليوم درسنا عن اضافة زر موضع عشوائي هذه اضافة احترافية وسهلة التركيب ويمكنكم معاينتها من خلال الدخول الى الصفحة الرئيسية الى المدونة ستكون موجودة في Sidebar2 

وهذه صورة للاضافة:

الان نأتي لطريقة التركيب الطريقة لا تحتج لاخذ نسخة من القالب فقط اذهب الى تخطيط ومن ثم اضافة اداة HTML/JavaScirpt وضع هذا الكود في الفراغ

<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>

تخصيص الاضافة حسب مدونتك 

1_ لتغيير كلمة موضوع عشوائي ابحث عنها في الكود موجودة في اللون الاحمر

2_ لتغيير لون النص استبدل الاعداد الثلاثة الاولى بأي لون تريده

rgba(255,255,255,1)

لتغيير الخلفية استبدل هذا الكود 

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; /* تنسيق الخط */

الى هنا يكون قد انتهى الدرس الى اللقاء في درس اخر