44
لم يتم العثور على الصفحة ! معذرة، فالصفحة التي تبحث عنها في هذه المدونة ليست متوفرة. رئيسية المدونة

الثلاثاء، 31 مايو 2011

قائمة إدارة المدونة على مدونات بلوجر


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

تطبيق الإضافات :
1.قم بإضافة القائمة العلوية التي تقوم بإظهار وإخفاء 3 إضافات في وقت واحد من هنا ،لكن لا تقم بتطبيق المرحلة الخامسة والأخيرة والتي يطلب منك إضافة كود بعد الوسم body
2.قم بالبحث عن الوسم :
<body>
ثم ضع تحته هذا الكود
<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>
3.قم بالبحث عن الوسم :
]]></b:skin>
ثم ضع فوقه هذا الكود :
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;
    }
4.توجه إلى تصميم مدونتك سوف تلاحظ أنه تمت إضافة 3 قوائم لإضافة أداة جديدة فوق هيدر المدونة
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>
القائمة السفلية :
-قم بإضافة هذا الكود في أداة جديدة .
<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>
7.عند إضافتك لجميع القوائم لا تنسى أن تقوم بإستبدال xxxxxxxxxx من جميع أكواد الإضافات الثلات برقم تعريف مدونتك،وللحصول على هذا الرقم كما هو موضح أسفله .
ملاحظة : لقد قمت بتغيير ألوان القائمة العلوية لتكون متناسقة مع مدونتي،لأن الإضافة توجد باللون الأسود كما هو موضح في شرح الأخ خالد
أتمنى أن تعجبكم هذه الإضافة الجديدة في إنتظار إستفساراتكم وآرائكم حول الموضوع

هناك 21 تعليقًا:

  1. أضافة جميلة جدا يا ابو أياد و أن شاء الله أطبقها في مدونتي ..
    و يشرفني أنك تزور مدونتي المتواضعة :)
    www.ar-documentary.com

    ردحذف
  2. اضافة رائعة يا ابو اياد
    شكرا على الشرح
    http://al-alaalmia.blogspot.com/

    ردحذف
  3. أنا الحمدلله ركبت الأضافة بس عاوز أعرف أزاي أعدل عليها علشان تناسب مدونتي ..

    ردحذف
  4. السلام عليكم ورحمة الله وبركاته

    إضافه اكثر من رائعه اخى \ ابو إياد

    لكن بعد إذنك

    ممكن شرح إضافة ادوات اخرى غير الاداره

    بمعنى

    مممكن شرح إضافة التواصل عبر الموااقع الاجتماعيه او الاشتراك عبر البريد الاكترونى

    كما شرح اخى خالد فى موضوعه

    فانا عندما اطبق المرحله الاخيره فى شرحه واقوم بالمعاينه

    اجد رسالة خطا توزيع القالب ... فهذه هى المشكله

    فانا اريد منك اخيرا شرح الاضافات بشكل مميز كما أنت دائما

    وجزاك الله كل خير وبارك الله فيك وهى اضافه رائعه بمعنى الكلمه

    ردحذف
  5. شكراً لك ..

    شكلها جميل وجذاب ، ولكن أراها نوعاً ما مربكة للزائر. انقدح في ذهني وأنا أكتب هذا التعليق أنه قد يكون ممكناً جعل هذه الإضافة تظهر لصاحب المدونة فقط دون غيره، مثل ايقونات التحرير السريع !

    عن نفسي استخدم المفضلة لغرض الدخول السريع لأقسام مدونتي

    دمت بخيرٍ وعافيةٍ برحمة الله

    ردحذف
  6. بصراحه حركه جميلة,

    انا معجبة جدا بيها

    بس حابه استفسر

    هل تؤثر على لود المدونه ام لا؟

    ردحذف
  7. ‘ضافة رائعة وسيتك تجربتها ان شاء الله في مدوناتي

    ردحذف
  8. @جاسر الحربي
    مرحبا أخي جاسر ،بالنسبة لوجهة نظرك في جعل الإضافة تظهر فقط عند صاحب المدونة كان أول شئ فكرت فيه حيث أنني حاولت تخصيصها مثل أيقونات التحرير السريع ،لكن مع الأسف كانت جميع المحاولات تبوء بالفشل فكانت فكرتي الأخيرة أن أجعلها بإضافة يمكن إخفاؤها وإظهارها وكذلك قمت بإضافة رسالة توضيحية للزائر لعدم إرباكه ،لكنها تبقى دائمة فكرة جديدة ،وأتمنى أن تلقى إستحسان الجميع
    بالتوفيق

    ردحذف
  9. @Maysa
    نعم أختي الكريمة بما أن الإضافة تستدعي روابط الجافاسكريبت وسي أس أس فلها تأثير جزئي على تحميل صفحة المدونة

    @محمد المصـــرى
    إنشاء الله لو تسنى لي بعض الوقت سوف أقوم بشرحها في تدوينة جديدة

    ردحذف
  10. اضافة رائعة واصل العمل الرائع

    ردحذف
  11. شكرا لك اخي ابو اياد لقد افدتنا بمواضيعك القيمة ;))
    يشرفني أنك تزور مدونتي المتواضعة :-*
    dzmind.blogspot.com
    :((

    ردحذف
  12. رائعة ما شاء الله .. مبروك القالب :)

    ردحذف
  13. أخى العزيز
    لقد قمت بتركيب الإضافة كما ذكرت بالضبط ونجحت وأحييك على ذلك
    ولكن السلايد شو توقف عن العمل ولا أعرف لماذا فهل هناك طريقة لجعله يعمل مرة أخرى دون حذف هذه الإضافة الرائعة أم ماذا؟
    انتظر ردكم فى القريب العاجل لأن الموضوع مهم جدا
    رابط المدونة
    http://historiansunion.blogspot.com

    شكرا لك أخلى

    ردحذف
  14. @وائل إبراهيم الدسوقي
    جاري البحث عن سبب المشكلة أخي الكريم ،تقبل تحياتي

    ردحذف
  15. طيب انا هعمل حاجة هي متعبة لكن ان شاء الله تؤدى الى معرفة سبب المشكلة لأنى شاكك في احد الأكواد هرجع المدونة كما بدأت وهنزل كل اضافة وبعدها السلايد شو حتى افهم المشكلة وسوف ارد عليكم بالنتيجة
    تحياتي

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

    ردحذف
  17. @وائل إبراهيم الدسوقي
    سوف يتم البحث عن سبب المشكلة أخي الكريم في القريب العاجل بإذن الله
    تحياتي لك

    ردحذف
  18. @وائل إبراهيم الدسوقي
    السلام عليكم ورحمة الله ،ممكن أن ترسل لي قالب مدونتك على الخاص لأطبق عليه خطوات الإضافة لإكتشاف السبب الرئسي في الكود الذي يسبب عدم عمل السلايدشو وهذا بريدي
    mohamed@abu-iyad.com

    ردحذف
  19. شكرا ياابو اياد بس ياريت تعلمنا نعملها مثل ماعندك وياريت تشرحهالنا نعملها في قلئمه مندلسه

    ردحذف
  20. شكرا لك على هذا التدوينة الرائعه لكني لم اجد كود body

    ردحذف