الجمعة، 22 مايو 2015
من
الإضافات الهامة التي تبقي الوافدين على موقعك فترة أطول متصفحاً لموضوعاته و
متعرفا على محتوياته مما يحسن من ترتيبه في موقع أليكسا حتى يستطيع منافسة
أقرانه من المواقع متصدراً المواقع الأولى لنتائج البحث مما يعزز من سمعته لدى
جوجل و كذلك المزيد من الزائرين و الوافدين فمزيد من النقرات على الإعلانات فمزيد
من الربح بإذن الله. سنتحدث عن ترتيب موقع أليكسا لاحقا في تدوينة خاصة بإذن الله.
هذه
الإضافة هي " إضافة زر مشاهدة موضوع عشوائي " بحيث لو نقر عليه
الزائر الكريم فسيذهب به إلى موضوع عشوائي من موضوعات المدونة و هكذا لو كرر ذلك
فإلى موضوع جديد و هكذا.
و هذه
الإضافة تتميز بخفتها و صغر حجمها مقارنة بأهميتها - كما ذكرنا.
هيا بنا إلى الجانب العملي :
نستعين
بالله أولا قبل كل شئ.
1-
قم بالذهاب إلى
لوحة تحكم بلوجر الخاصة بمدونتك.
2-
قم بالذهاب إلى "
التخطيط ".
3-
قم بإضافة أداة
" HTML/JavaScript ".
· يمكنك مراجعة هذا الموضوع لمعرفة كيفية إضافة الأداة : " إضافة أدواتك المفضلة لمدونتك وتخصيص أداة HTML/JavaScript ".
4-
قم بإضافة الكود
التالي داخل الأداة ثم قم بالحفظ.
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=DroidArabicKufi:700);
#myLuckyPost a{
-moz-border-radius:8px;
-moz-box-shadow:0 9px 0 #2f6ae0, 0 9px 10px rgba(0,0,0,.7);
-webkit-border-radius:8px;
-webkit-box-shadow:0 9px 0 #2f6ae0, 0 9px 10px rgba(0,0,0,.7);
background-color:#497ce5;
border-radius:8px;
box-shadow:0 9px 0 #2f6ae0, 0 9px 10px rgba(0,0,0,.7);
color:#fff;
display:block;
font-family:'Droid Arabic Kufi';
font-size:15px;
font-weight:700;
height:40px;
margin:10px auto;
padding:10px 2px 2px;
position:relative;
text-align:center;
text-decoration:none;
width:200px;
-moz-transition:color 1s ease;
-ms-transition:color 1s ease;
-o-transition:color 1s ease;
transition:color 1s ease;
}
#myLuckyPost a:hover{
color:#000;
-moz-transition:color 1s ease;
-ms-transition:color 1s ease;
-o-transition:color 1s ease;
transition:color 1s ease;
}
#myLuckyPost a:active{
font-size:14px;
width:198px;
height:38px;
position:relative;
top:6px
}
</style>
<div id="myLuckyPost"></div>
<script type="text/javascript">
function showLucky(e){var t=e.feed;
var n=t.entry||[];
var r=t.entry[0];
for(var i=0;
i<r.link.length;
++i){if(r.link[i].rel=="alternate"){window.location=r.link[i].href}}}function fetchLuck(e){script=document.createElement("script");
script.src="/feeds/posts/summary?start-index="+e+"&max-results=1&alt=json-in-script&callback=showLucky";
script.type="text/javascript";
document.getElementsByTagName("head")[0].appendChild(script)}function feelingLucky(e){var t=e.feed;
var n=parseInt(t.openSearch$totalResults.$t,10);
var r=Math.floor(Math.random()*n);
r++;
a=document.createElement("a");
a.href="#random";
a.rel=r;
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>
مع
مراعاة الآتي :
· " #497ce5 " : عبارة عن كود لون الزر. قم بتغييره بما
يناسبك.
· "
#2f6ae0 " : عبارة عن كود لون
الظل السفلي للزر. قم بتغييره بما يناسبك. لاحظ أنه مكرر ثلاث مرات.
· "
#fff " : عبارة عن كود لون
خط الجملة التي تظهر على الزر. قم بتغييره بما يناسبك.
· "
Droid Arabic Kufi " : عبارة عن نوع خط الجملة التي تظهر على
الزر. قم بتغييره بما يناسبك.
· "
15px " : عبارة عن حجم
الخط الخاص بالجملة التي تظهر على الزر. قم بتغييره بما يناسبك.
· "
40px " : عبارة عن ارتفاع
الزر. قم بتغييره بما يناسبك.
· "
200px " : عبارة عن عرض
الزر. قم بتغييره بما يناسبك.
· "
#000 " : عبارة عن كود لون
خط الجملة التي تظهر على الزر في حالة المرور عليه بالماوس. قم بتغييره بما
يناسبك.
· "
14px " : عبارة عن حجم
الخط الخاص بالجملة التي تظهر على الزر في حالة النقر عليه. قم بتغييره بما
يناسبك.
· "
38px " : عبارة عن ارتفاع
الزر في حالة النقر عليه. قم بتغييره بما يناسبك.
· "
198px " : عبارة عن عرض
الزر في حالة النقر عليه. قم بتغييره بما يناسبك.
· "
شاهد موضوعاً عشوائياً " : هي الجملة التي تظهر على الزر. قم
باستبدالها بما يروق لك.
و هذا نموذج لزر مشاهدة موضوع عشوائي :
من فضلك قم بالنقر عليه كتجربة لمشاهدة موضوع عشوائي من مواضيع المدونة
و بذلك تكون قد انتهيت بحمد الله من إعداد زر مشاهدة موضوعات مدونتك عشوائياً.
و انتظرونا في التدوينة القادمة بإذن الله تعالى
الاشتراك في:
تعليقات الرسالة (Atom)
إرسال تعليق
كم يسعدنا تفاعلكم معنا بتعليقاتكم الهادفة٬ فهي تساعد على إثراء الحوار بالمزيد من الإفادة للجميع و أنا أولكم. لكن يرجى من الجميع مراعاة الآداب العامة و القيم الإسلامية و عدم نشر روابط للإشهار حتى يتم نشر التعليق. كما يمكنكم استخدام ركن الاستفسارات للسؤال عن شئ خارج الموضوع كما يمكنك إضافة كود داخل التعليق بعد تحويله بـمحول الأكواد .