مساحة إعلانية

الأربعاء، 23 يناير، 2013

الأربعاء، 23 يناير، 2013

لوحة إدارية إحترافية لمدونتك نسخة مطورة

كل القوالب المعدلة وحتى غير المعدلة يقوم المدونون بإخفاء شريط أدوات بلوجر العلوي Navbar لأنه يشوه شكل المدونة لكن يفقد مع هذا الشريط الإمكانيات الإدارية للمدونة والحل في وجود بديل البعض يدخل موقع blogger ثم يذهب ليعدل ولكن هذه طريقة بطيئة والبعض يضع روابط للتعديل في المدونة ولكن تاخذ حيز لكن هناك بديل قوي وهو عمل لوحة إدارية أنيقه وخفيفة ولا تأخذ حيز وتلبي كل الإحتياجات وفي نفس الوقت مخفيه عن الزوار فهي لا تظهر إلا للإداريين هذه الآداة تم تصميمها عن طريق الأخ أبو إياد لكن كان بها بعض الأشياء التي تحتاج تعديل لتصبح الآداة أكثر مرونة ولا أقصد أن الآداة بها خطأ لا الأخ أبو إياد كفى ووفى في صنعها لكن أنا أقصد بعض التطوير لزيادة الكفائة وهو ما قمت بإعدادة وإعادة بناء الأداة ,
 كانت الأداة تحتوي على 12 صورة وكثرة طلبات http
تزيد ثقل تحميل الآداة والمدونة لذا تم تلخيصهم في صورة واحده بتقنية Css Sprites فبدل من 12 رابط يتم طلب رابط واحد فقط وتم إضافة لمسة جمالية تضيف شفافية على جميع الأدوات عدا الأداة المفعلة كالصورة المعروضه في الجانب إن كنت ركبت السابقة يفضل إستبدالبها بالجديدة للتقليل من عبئ التحميل

طريقة التركيب

أولا ادخل الى تحرير قالبك ولا تنسى نسختك الإحتياطية
نبحث هم أحد هاذين الكويدين
<b:include name='feedLinks'/>
او
<b:include name='nextprev'/>
ونضيف تحت أحدهما هذا الكود
<b:include name='ButtonsbloggerFix'/>

ثم نبحث عن الوسم </head> ونضيف فوقه الكود التالي

<style type='text/css'>
    ul.cnmu-soc {position: fixed;top: 200px;left: 10px;width: 24px;overflow: hidden;padding: 5px;background: #ffffff;border-width: 1px;border-style: solid;border-color: #ccc;-moz-box-shadow: 1px 1px 3px #666666;-webkit-box-shadow: 1px 1px 3px #666666;box-shadow: 1px 1px 3px #666666;border-radius: 2px;-webkit-border-radius: 2px;-moz-border-radius: 2px;} 
    ul.cnmu-soc li { display:inline; float:right; background: url(https://lh6.googleusercontent.com/-w0a53XQed88/UPHMj2LZkwI/AAAAAAAAAFw/Wk1yeASh4kY/s295/cnmu-bl.png) no-repeat center center; }
    ul.cnmu-soc li a { display:block; width:25px; height:25px;position:relative; margin-left:-3px;text-decoration:none; } 
    ul.cnmu-soc li.cnmu-bl1 {background-position: 0px 0px;); } 
    ul.cnmu-soc li.cnmu-bl2 {background-position: 0px -25px;); }  
    ul.cnmu-soc li.cnmu-bl3 {background-position: 0px -50px;); } 
    ul.cnmu-soc li.cnmu-bl4 {background-position: 0px -75px;); } 
    ul.cnmu-soc li.cnmu-bl5 {background-position: 0px -100px;); } 
    ul.cnmu-soc li.cnmu-bl6 {background-position: 0px -125px;); } 
    ul.cnmu-soc li.cnmu-bl7 {background-position: 0px -150px;); } 
    ul.cnmu-soc li.cnmu-bl8 {background-position: 0px -175px;); } 
    ul.cnmu-soc li.cnmu-bl9 {background-position: 0px -200px;); } 
    ul.cnmu-soc li.cnmu-bl10 {background-position: 0px -225px;); } 
    ul.cnmu-soc li.cnmu-bl11 {background-position: 0px -250px;); } 
    ul.cnmu-soc li.cnmu-bl12 {background-position: 0px -275px;); } 
    #cnmu-cssanime:hover li { opacity:0.2; } 
    #cnmu-cssanime li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;-moz-transition-property: opacity; -moz-transition-duration: 500ms; } 
    #cnmu-cssanime li a strong { opacity:0; -webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms; -moz-transition-property: opacity, top; -moz-transition-duration: 300ms; } 
    #cnmu-cssanime li:hover { opacity:1; } 
    #cnmu-cssanime li:hover a strong { opacity:1; top:-10px; } 
</style>

ويمكنك تغيير Left الى Right لتكون الإضافة تجاه اليمين
ثم نبحث عن الكود التالي

<b:widget id='Blog1' locked='true' title='رسائل المدونة الإلكترونية' type='Blog'>

ونضيف تحته مباشرة الكود التالي

<b:includable id='ButtonsbloggerFix'>
<span class='item-control blog-admin'>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
    <ul class='cnmu-soc' id='cnmu-cssanime'>
<li class='cnmu-bl1'>
<a class='layout' href='http://www.blogger.com/home' target='_blank' title='الرئيسية '></a>
</li>
<li class='cnmu-bl2'>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#overview' target='_blank' title='نظرة عامة '></a>
</li>
<li class='cnmu-bl3'>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#editor/src=sidebar' target='_blank' title='مشاركة جديدة'></a>
</li>
<li class='cnmu-bl4'>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#allposts' target='_blank' title='المشاركات'></a>
</li>
<li class='cnmu-bl5'>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#pages' target='_blank' title='الصفحات'></a>
</li>
<li class='cnmu-bl6'>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#publishedcomments' target='_blank' title='التعليقات'></a>
</li>
<li class='cnmu-bl7'>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#googleplus' target='_blank' title='Google +'></a>
</li>
<li class='cnmu-bl8'>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#overviewstats' target='_blank' title='الإحصائيات'></a>
</li>
<li class='cnmu-bl9'>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#adsensesummary' target='_blank' title='الأرباح'></a>
</li>
<li class='cnmu-bl10'>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#pageelements' target='_blank' title='تخطيط'></a>
</li>
<li class='cnmu-bl11'>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#template' target='_blank' title='قالب'></a>
</li>
<li class='cnmu-bl12'>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#basicsettings' target='_blank' title='إعدادات'></a>
</li>
       </ul>
        </b:if>
</span>
</b:includable>

ملاحظة قم بتغيير علامات xxxxxxxxxxx بمعرف مدونتك وللحصول على المعرف أدخل على إدارة مدونتك ومن شريط عنوان المتصفح إنسخ الرقم كالتالي




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

  1. ياغالى الكود فيه شى غلط اانا كنت مركب كود ابو اياد حاولت احذفه مالاقتهوش
    المهم عملت خطواتك وبعد مابدوس حفظ بيجبلى الخطا ده ايه الحل

    يشتمل عنصر واجهة المستخدم ذو المعرف "Blog1" على عنصري b:includable على الأقل ولهما نفس المعرف: "ButtonsbloggerFix". يجب أن تحتوي كافة عناصر b:includable على معرف فريد لعنصر واجهة مستخدم محدد.
    Error 500

    ردحذف
  2. السبب هو وجود الكود الخاص بالاخ أبو إياد فيحدث تعارض بينهما
    قم أولا بالتاشير على خانة توسيع العناصر في القالب
    ثم إبحث عن هذا الكود
    <b:include name='ButtonsbloggerFix'/>
    وتحته ستجد باقي الكود الخاص بالأخ أبو إياد قم بحذفه بالكامل
    ثم قم بتركيب الإضافة الخاصة بي

    ردحذف
  3. اخويا تسلم لردك
    انا عملت زى ماقولت بس برضه حاسس فى حاجة المهم جيت اعمل حفظ قالى كده
    The widget with id "Blog1" contains at least two b:includable elements with the same id: "ButtonsbloggerFix". All b:includable elements should have a unique id for a given widget.

    ردحذف
  4. *** انا سويته مرة ثانية ونفس الشي ( نسيت ما اوضح انه الصورة ما تطلع ..)
    مثل هذا
    http://im34.gulfup.com/0Bc7T.png
    هذي اللوحة ...

    ردحذف
  5. يبدو أنك تنسخ هذا الكود أيضا فيتكرر معك
    <b:widget id='Blog1' locked='true' title='رسائل المدونة الإلكترونية' type='Blog'>
    تأكد أن هذا الكود لا يتكرر في قالبك
    وإن لم تستطيع يمكنك إرسال القالب لي لأنظر في المشكلة

    ردحذف
    الردود
    1. تأكدت منه احين وشفت انه هو الوحيد وحطيت تحته الكود اللي احطه تحته .....
      وهذا القالب
      http://www.gulfup.com/?6LYmsp

      حذف
    2. يبدو أن القالب لا يتوافق مع الآداة
      وقد قمت بتركيبها على قالب آخر للتأكد من انها تعمل ووجدتها تعمل جيدا وأنا استخدمها في مدونتي وفي
      أكثر من مدونة أخرى

      حذف
  6. اخويا اين ردك عليا
    هل الاداة متوافقة معى اما لا
    واذا مش متوافقة هل اضافة اخى ابو اياد هتسبب مشاكل اذ سبتها
    وتسلم ايدك

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

    ردحذف
  8. طيب تسلم ياغالى على ردك
    ممكن طلب منك ياغالى ومتكسفنيش
    تقولى ايه رايك فى المدونة بتاعتى هل كده حلوة ولا فيها مشاكل انا بقالى اكتر من اسبوع بظبط فيها من مدونتك الجميلة والله
    وياريت اخيرا فاضلى موضوع الاقسام ممكن تشوفلى شرح للحكاية دى وابقى شاكر افضالاك

    ردحذف
  9. شكرا على الرد السريع ..
    هل هناك اضافة توافق القالب ؟

    ردحذف
  10. لقد رأيت قالباً جديداً وجعلته في مدونتي وقد نجح المر بالنسبة إلى الإضافة هذه
    وشكرا

    ردحذف
  11. تمام أخي سعيد وموفق بإذن الله في القادم تحياتي

    ردحذف
  12. اخيرا اخويا انا ركبت الكود بنجاح الحمد لله تسلم ايدك
    بس سوال بسيط هل الاداة دى هاتكون ظاهرة لاى زائر ولا ايه ؟؟
    ارجو الرد

    ردحذف
  13. الحمد لله
    وبالنسبة للآداة لن تظهر إلا لك ولأى إداري إن كانت مدونتك متعددة الكتاب
    أما الزوار لن يشاهدوها

    ردحذف
  14. تسلم اخويا وحبيبى
    طيب معلش ممكن استفاد منك برضه
    ايه متعددة الكتاب دى ؟؟

    ردحذف
    الردود
    1. هناك مدونات يكون بها أكثر من كاتب
      وهذا يمكن أن تطبقه على مدونتك إن كان لديك أصدقاء تحب ان يكتبوا مواضيع في مدونتك
      يمكنك ان ترسل لهم دعوة على بريد gmail الخاص بهم
      وبالتالي يتمكن من كتابة مواضيع ويصبح كاتب في المدونة ويمكنك أيضا ترقية الكاتب ليصبح مدير
      ولكن هذا لا أنصح به إلا مع شخص تثق به تمام بحيث ان المدير يمكنه أن يحذف صاحب المدونة ويمتلك هو المدونة
      وهذا يمكنك فعله من إعدادت مدونتك

      حذف
  15. طيب ياغالى ممكن تساعدنى ومعلش اتقل عليك
    تقولى بالصورة ازاى ابعتله دعوة بحيث يكون كاتب فقط معايا فى المدونة
    مش ادمن زى ماانت بتقول

    ردحذف
    الردود
    1. أى شخص ترسل له دعوة سيكون كاتب فقط
      وبجوار إسمه في لوحة التحكم بعض الإضافة ستجد زر يمكنك تحويلة من كاتب لمشر او العكس
      وهذه طريقة إضافة كتاب شاهد الصورة
      http://is.gd/5XZ6Iv

      حذف
  16. تسلم اخويا على زوقك وتعبك معايا
    الف الف شكر ليك

    ردحذف
  17. شكرا جزيلا على الموضوع الافضل من الرائع

    ردحذف
  18. شكراً على الاضافة
    لكن يوجد مشكلة صغيرة

    وهي ان صور الأدوات فيها مشكلة
    صورة توضيحية :
    http://im59.gulfup.com/9lgBS9.png

    ردحذف
    الردود
    1. يبدو أنه مع التحديثات التي مرت بالمنصة الإضاف تحتاج تحديث هي الأخرى بإذن الله ساقوم بتحديثها قريباً اخي الكريم

      حذف
  19. ماشاء الله عليك يعطيك العافيه انت وابو اياد على هذا العمل
    جزاكم الله خيرا

    ردحذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©