السلام عليكم ورحمة الله تعالى وبركاته ،مرحبا بكم أحباءنا الكرام في درس جديد ،اليوم سوف نقوم بإضافة قوائم تسهل عليك التنقل بين قوائم حسابك على موقع بلوجر ،وجعلها في مدونتك إذ يمكنك كتابة تدوينة جديدة ،أو التعديل على الرسائل أو الإعدادات فقط بكبسة زر من مدونتك ،وهذه عملية تسهيلية للمدون .ولمعاينة الإضافة قم بالضغط على "أبو إياد" الموجودة في القائمة العلوية فوق الهيدر ،إلا أن عند ضغطك على أحد القوائم سوف يطلب منك إدخال حسابك على بلوجر ،لكن عندما أضغط أنا على أحد القوائم يتم التوجيه مباشرة إلى الخاصية المعنية لأن الإضافة تحتوي على الرقم التعريفي لمدونتي ،وسوف نتعرف على ذلك خلال شرح الإضافة .
وحقيقة الأمر أن هذه الإضافة عبارة عن إضافتين :
الإضافة الأولى : إضافة قائمة إظهار وإخفاء ل3 إضافات في قائمة واحدة والتي تم شرحها سابقا على مدونة صديقي الغالي خالد صاحب مدونة "الفضاء التكنولوجي" .
الإضافة الثانية :وهي القوائم أو الأزرار التي تمكنك من الولوج بطريقة سهلة إلى لوحة التحكم بمدونتك
لذلك قمت بإدماج هاتين الإضافتين في إضافة واحدة .
تطبيق الإضافات :
1.قم بإضافة القائمة العلوية التي تقوم بإظهار وإخفاء 3 إضافات في وقت واحد من هنا ،لكن لا تقم بتطبيق المرحلة الخامسة والأخيرة والتي يطلب منك إضافة كود بعد الوسم body
2.قم بالبحث عن الوسم :
ثم ضع تحته هذا الكود<body>
3.قم بالبحث عن الوسم :<div id='toppanel'>
<div id='panel'>
<div class='content clearfix'>
<div class='left'>
<b:section class='left' id='left' maxwidgets='4' showaddelement='yes'>
</b:section>
</div>
<div class='left'>
<b:section class='center' id='center' maxwidgets='4' showaddelement='yes'>
</b:section>
</div>
<div class='left right'>
<b:section class='right' id='right' maxwidgets='4' showaddelement='yes'>
</b:section>
</div>
</div>
</div>
<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>الإدارة</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' id='open'>إظهار</a>
<a class='close' id='close' style='display: none;'>إخفاء</a>
</li>
<li class='right'/>
</ul>
</div>
</div>
ثم ضع فوقه هذا الكود :]]></b:skin>
4.توجه إلى تصميم مدونتك سوف تلاحظ أنه تمت إضافة 3 قوائم لإضافة أداة جديدة فوق هيدر المدونةul.adminbar
{ background-color:#F5EDE3;
border:1px solid #F5EDE3;
margin-bottom:8px;
padding:5px 5px 0;
}
ul.adminbar li {
background-color:#E6DAC9;
border:1px solid #999999;
list-style:none outside none;
margin-bottom:6px;
outline:1px solid #D0CBE5;
padding:12px 0px 20px 50px;
}
ul.adminbar li a
{ display:block;
color:#333333 !important;
text-shadow:1px 1px 0 #fff;
text-decoration:none;
font-size:20px;
height:27px;
margin:0 0 0 15px;
}
a.dashboard
{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe8C7BBDpl-uqv0xy9S3sHZ34YvvTLW6WH5eWAf4C3-6V77AUjAtpj6BL6-CeDyAqUi0KRcwiy8mM-ufrnm4DeQ1kmwDHfejiOAKjyAs804P2TmOKI7HCKUyDMunZO9uSUZbnv-5HcRPP-/s1600/dashboard.png) no-repeat 0px 0px;
padding:4px 0 2px 47px;
}
a.settings
{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm6BJ8AYldmd2OsbeaHrL0gGFiK7ltJV10F4kJlH2th646u9pRwnxbvKGEjA1walCyO4Mrwf0RELmFGLPLuYzmd8rVO-VpEqLc58-OfqvHzFPW14LmfpzyyE3xYDMP5AH79TBX7nVFi6jp/s1600/setting+blogger.jpg) no-repeat 0px 0px;
padding:5px 0 0 47px;
}
a.layout
{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeGfWZu-hHoOKVxkqnQuZaHdPQ9jt_kCVXhh4L4gOx_ZxE31Wf5C6VHEQA8AP_6Q9MpH3EHZtJ6K6g7Zw_SzfV9WiDSh6i3s8kw88rHm37v1MmrBD1ck_KgV2qT1t8jKjCKUGsOh7sFyya/s1600/3anasir.jpg) no-repeat 0px 0px;
padding:5px 0 0 47px;
}
a.editpost
{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeR2F1rh2BmuA6VJVuRJaM4LtOAJRYQnn_gc0F2l6yULYrkS3jNyMWSm1KzbPQhE1qK5_ztmKQVd3CnljUINMZZOUWvArBjtPoP_fAL4ccnt0EPofi4g_gl-glflC3DIHE9oa6qTUcbnrJ/s1600/edit.png) no-repeat 0px 0px;
padding:5px 0 0 47px;
}
a.newpost
{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZJGxqerYJx4w3aMZfY5NamyOwo-Amzu2_zDljVUghCrQznd-1xzdGZdhocg1ukBc9ahzT4GCJYdVu_jG0woMVuiGEpWDjPk3Usr0AbyIfv7xiqc9CNa2Zi66s0VJz7ZmmqkRv589csc_T/s1600/add+message+blogger.png) no-repeat 0px 0px;
padding:5px 0 0 47px;
}
a.statistic
{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUiWOzL-4mybm2uCGsjdyqAcZY3Sw7Pt9KFufisKFXOWQx1tzeWfy2njC4WiIlbB8dHiJQTn9_my910lPbRzaNL_-uP9JYjxR0O3FxJI_kk9s5cXrNC8ku6LZcNmbt75mCyzl_dWtkpChv/s1600/Statistics+blogger.png) no-repeat 0px 0px;
padding:5px 0 0 47px;
}
5.الآن سوف نقوم بإضافة القوائم في الأدوات الجديدة التي تم إنشؤها
6.القائمة العلوية :
-قم بإضافة هذا الكود في أداة جديدة .
القائمة الوسطى :<ul class="adminbar">
<li><a class="layout" href="http://www.blogger.com/rearrange?blogID=xxxxxxxxxx" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlxm6qgaoqstXXNTAPw330Sz3EIsq_7jW9XD9eZFNmhabXCzmJTUL8RL3oXLd2b3WQkHUpxe0aS3ca6elbymwPnORZH5l2AGHdKniDZ7A0_bI8vlGKeAF6qaVQfAxFY3IMHvbgaaCmats/s1600/tasmim.png" title="" alt=""/>
</a></li>
<li><a class="statistic" href="http://www.blogger.com/stats2.g?blogID=xxxxxxxxxx" target="_blank" ><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3deQBY64gqErOhyphenhyphenTLf_aXy38stJjOP62yXHV0J9BR-1qqvwJsO6Ch9g8YQ4rYBPLTRU_9LSI70gh6gPZaf6zjqyAg9TaKebGcPH9d1TOJbmjl7EmF6lHzTJnU6DooTphBKPsD8iEcR7E/s1600/statistic.png" title="" alt=""/>
</a></li>
</ul>
-قم بإضافة هذا الكود في أداة جديدة .
القائمة السفلية :<ul class="adminbar">
<li><a class="editpost" href="http://www.blogger.com/posts.g?blogID=xxxxxxxxxx" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxnAdpBGFBpRVx7vwI0mwwl_LA3Ci0J_TOS6tNtNa89JELEiME6vmWRzm00PomCzv81a3s7KLMKocbHiI0_HgtBf_XwTJgdaTUB2mkwCz2-9iSZp1Sa3xnQNQN9lB2o6hvlN_2rqXvFb4/s1600/edit+message.png" title="" alt=""/>
</a></li>
<li><a class="newpost" href="http://www.blogger.com/post-create.g?blogID=xxxxxxxxxx" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLBKGw4foJjf-2kYsxNyDgrtACczJkPj6Qf0mYuO0GzzwFxvyZXtwtlPbbZn6sJngRglG3XHmfvfYCZgB_qjj-yIMjVafO9FOBMwTXDLqop9n_6yx9iEXrh5MSOXtQnf65iEQ2x_JX9JI/s1600/new+message.png" title="" alt=""/>
</a></li>
</ul>
-قم بإضافة هذا الكود في أداة جديدة .
7.عند إضافتك لجميع القوائم لا تنسى أن تقوم بإستبدال xxxxxxxxxx من جميع أكواد الإضافات الثلات برقم تعريف مدونتك،وللحصول على هذا الرقم كما هو موضح أسفله .<ul class="adminbar">
<li><a class="dashboard" href="http://www.blogger.com/home" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrXKoqhRbUtIIXFVHDktQdfNjrfXePjZTuJXx49A8doEJbQ-lserKNK5ZOJ43wBzgVdb8-PxsJ7IoFxLyidA9aY0qga9OOiXzcwaJxwVhDnfswQwxzrqe3xyz-zOxpzTZ78j1T94gkDkw/s1600/lawa77a2.png" title="" alt=""/></a></li>
<li><a class="settings" href="http://www.blogger.com/blog-options-basic.g?blogID=xxxxxxxxxx" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG9sMg2BEkFaWfXwPclqBMcYnQj7LiYEa3SbFdrCZfTK6tZX6hZ7NuWe-jEfrbyT8E4fTJAOSORF3BHo25tk2z6lAjeR_fd6VEprRVbVXKS4azahg-2sDVBJ0kXSr75_mCYt9lr3uo2Hk/s1600/setting2.png" title="" alt=""/>
</a></li>
</ul>
ملاحظة : لقد قمت بتغيير ألوان القائمة العلوية لتكون متناسقة مع مدونتي،لأن الإضافة توجد باللون الأسود كما هو موضح في شرح الأخ خالد
أتمنى أن تعجبكم هذه الإضافة الجديدة في إنتظار إستفساراتكم وآرائكم حول الموضوع
أضافة جميلة جدا يا ابو أياد و أن شاء الله أطبقها في مدونتي ..
ردحذفو يشرفني أنك تزور مدونتي المتواضعة :)
www.ar-documentary.com
اضافة رائعة يا ابو اياد
ردحذفشكرا على الشرح
http://al-alaalmia.blogspot.com/
أنا الحمدلله ركبت الأضافة بس عاوز أعرف أزاي أعدل عليها علشان تناسب مدونتي ..
ردحذفالسلام عليكم ورحمة الله وبركاته
ردحذفإضافه اكثر من رائعه اخى \ ابو إياد
لكن بعد إذنك
ممكن شرح إضافة ادوات اخرى غير الاداره
بمعنى
مممكن شرح إضافة التواصل عبر الموااقع الاجتماعيه او الاشتراك عبر البريد الاكترونى
كما شرح اخى خالد فى موضوعه
فانا عندما اطبق المرحله الاخيره فى شرحه واقوم بالمعاينه
اجد رسالة خطا توزيع القالب ... فهذه هى المشكله
فانا اريد منك اخيرا شرح الاضافات بشكل مميز كما أنت دائما
وجزاك الله كل خير وبارك الله فيك وهى اضافه رائعه بمعنى الكلمه
شكراً لك ..
ردحذفشكلها جميل وجذاب ، ولكن أراها نوعاً ما مربكة للزائر. انقدح في ذهني وأنا أكتب هذا التعليق أنه قد يكون ممكناً جعل هذه الإضافة تظهر لصاحب المدونة فقط دون غيره، مثل ايقونات التحرير السريع !
عن نفسي استخدم المفضلة لغرض الدخول السريع لأقسام مدونتي
دمت بخيرٍ وعافيةٍ برحمة الله
بصراحه حركه جميلة,
ردحذفانا معجبة جدا بيها
بس حابه استفسر
هل تؤثر على لود المدونه ام لا؟
‘ضافة رائعة وسيتك تجربتها ان شاء الله في مدوناتي
ردحذف@جاسر الحربي
ردحذفمرحبا أخي جاسر ،بالنسبة لوجهة نظرك في جعل الإضافة تظهر فقط عند صاحب المدونة كان أول شئ فكرت فيه حيث أنني حاولت تخصيصها مثل أيقونات التحرير السريع ،لكن مع الأسف كانت جميع المحاولات تبوء بالفشل فكانت فكرتي الأخيرة أن أجعلها بإضافة يمكن إخفاؤها وإظهارها وكذلك قمت بإضافة رسالة توضيحية للزائر لعدم إرباكه ،لكنها تبقى دائمة فكرة جديدة ،وأتمنى أن تلقى إستحسان الجميع
بالتوفيق
@Maysa
ردحذفنعم أختي الكريمة بما أن الإضافة تستدعي روابط الجافاسكريبت وسي أس أس فلها تأثير جزئي على تحميل صفحة المدونة
@محمد المصـــرى
إنشاء الله لو تسنى لي بعض الوقت سوف أقوم بشرحها في تدوينة جديدة
اضافة رائعة واصل العمل الرائع
ردحذفاضافة مميزة مزيدا من التالق
ردحذفشكرا لك اخي ابو اياد لقد افدتنا بمواضيعك القيمة ;))
ردحذفيشرفني أنك تزور مدونتي المتواضعة :-*
dzmind.blogspot.com
:((
رائعة ما شاء الله .. مبروك القالب :)
ردحذفأخى العزيز
ردحذفلقد قمت بتركيب الإضافة كما ذكرت بالضبط ونجحت وأحييك على ذلك
ولكن السلايد شو توقف عن العمل ولا أعرف لماذا فهل هناك طريقة لجعله يعمل مرة أخرى دون حذف هذه الإضافة الرائعة أم ماذا؟
انتظر ردكم فى القريب العاجل لأن الموضوع مهم جدا
رابط المدونة
http://historiansunion.blogspot.com
شكرا لك أخلى
@وائل إبراهيم الدسوقي
ردحذفجاري البحث عن سبب المشكلة أخي الكريم ،تقبل تحياتي
طيب انا هعمل حاجة هي متعبة لكن ان شاء الله تؤدى الى معرفة سبب المشكلة لأنى شاكك في احد الأكواد هرجع المدونة كما بدأت وهنزل كل اضافة وبعدها السلايد شو حتى افهم المشكلة وسوف ارد عليكم بالنتيجة
ردحذفتحياتي
اخى أبو اياد
ردحذفلقد بدأت الإضافات فى المدونة بقائمة الإدارة التي نحن بصددها الآن
وتم تركيبها جيدا وأخذت تعمل ولكنى وجدت السلايد شو توقف مرة أخرى
حذفت كل اكواد الإضافة من المدونة فعمل السلايد شو مرة أخرى
وهكذا فإن تلك الإضافة تسبب خللا فى السلايد شو يمكنك معالجته لانها اضافة هامة وتريحنا جميعا
شكرا وأخى وتحياتي على مجهوداتك الطيبة
@وائل إبراهيم الدسوقي
ردحذفسوف يتم البحث عن سبب المشكلة أخي الكريم في القريب العاجل بإذن الله
تحياتي لك
@وائل إبراهيم الدسوقي
ردحذفالسلام عليكم ورحمة الله ،ممكن أن ترسل لي قالب مدونتك على الخاص لأطبق عليه خطوات الإضافة لإكتشاف السبب الرئسي في الكود الذي يسبب عدم عمل السلايدشو وهذا بريدي
mohamed@abu-iyad.com
شكرا ياابو اياد بس ياريت تعلمنا نعملها مثل ماعندك وياريت تشرحهالنا نعملها في قلئمه مندلسه
ردحذفشكرا لك على هذا التدوينة الرائعه لكني لم اجد كود body
ردحذف