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

الأربعاء، 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRF7u-sZjk4v460bBCooZ9wlPjeYEAJ0zTV1NWvak9gYDdiC5r96UvYKgjA92tFe820c7p7z8-98_y_x5o8SfbvefuCD5NOUYIcDCkeUtBaxVqpf2RTV3c3EMU8JGywjtEYFfhj3DBMdBT/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 != "error_page"'>
    <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 بمعرف مدونتك وللحصول على المعرف أدخل على إدارة مدونتك ومن شريط عنوان المتصفح إنسخ الرقم كالتالي

منشورة في: إضافات بلوجر, blogger widget, css

كل شي عندي

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