More

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


كل
القوالب المعدلة وحتى غير المعدلة يقوم المدونون بإخفاء شريط أدوات بلوجر
العلوي 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 بمعرف مدونتك وللحصول على المعرف أدخل على إدارة مدونتك ومن شريط عنوان المتصفح إنسخ الرقم كالتالي





READ  إضافة تفييم للمواضيع في المدونة

Tags
Show More

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Adblock Detected

Please consider supporting us by disabling your ad blocker
Inline
Inline