13 أكتوبر 2014

مدون محترف اضافات بلوجر دروس بلوجر CSS كيفية إنشاء لوحة تحكم متقدمة في مدونات بلوجر

كيفية إنشاء لوحة تحكم متقدمة في مدونات بلوجر

كيفية إنشاء لوحة تحكم متقدمة في مدونات بلوجر ,كيفية إنشاء لوحة تحكم متقدمة Admin في مدونات بلوجر

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

ما هي لوحة تحكم الإدارة في مدونات بلوجر


هي لوحة تحكم متقدمة توفر لك عمل التغييرات في المدونة بسهولة و سرعة ,و سوف تظهر هذه اللوحة فقط للمشرفين على المدونة مثل مسؤول او كاتب ,ولا تظهر للزائر العادي مما يعني انها ستظهر لك فقط و يمكنك رؤية شكل لوحة التحكم من خلال الصورة في الاعلى تبين لك اين و كيف ستظهر و باستخدام اللوحة يمكنة الوصول بسرعة إلى وظائف التحرير مثل | تحرير HTML و التعليقات و التخطيط و غيرها |



كيفية إنشاء لوحة تحكم Admin في مدونات بلوجر

ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه
/* Admin By Mudwnp.blogspot.com
----------------------------------------------- */
.admin-controll,.admin-controll * {
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-type: none;
    line-height: 1.0;
}
.admin-controll ul {
    position: absolute;
    top: -999em;
    width: 100%;
}
.admin-controll ul li {
    width: 100%;
    background: 333333;
}
.admin-controll li:hover {
    visibility: inherit;
}
.admin-controll li {
    float: right;
    position: relative;
}
.admin-controll a {
    display: block;
    position: relative;
}
.admin-controll li:hover ul,.admin-controll li.sfHover ul {
    right: 0;
    top: 100%;
    z-index: 99;
}
.admin-controll li:hover li ul,.admin-controll li.sfHover li ul {
    top: -999em;
}
.admin-controll li li:hover ul,.admin-controll li li.sfHover ul {
    right: 100%;
    top: 0;
}
.admin-controll li li:hover li ul,.admin-controll li li.sfHover li ul {
    top: -999em;
}
.admin-controll li li li:hover ul,.admin-controll li li li.sfHover ul {
    right: 100%;
    top: 0;
}
.mbl-admin-bar {
    margin: 0px;
    direction: ltr;
    color: #ccc;
    font: 400 13px/32px "Open Sans",sans-serif;
    height: 32px;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    min-width: 600px;
    z-index: 99999;
    background: #222;
    float: right;
}
.mbl-admin-bar li a {
    display: block;
    color: #fff;
    padding: 7px 15px;
    font-weight: 400;
    text-decoration: none;
    font-size: 14px;
}
.mbl-admin-bar li li a {
    font-size: 15px;
    color: #fff;
    float: none;
    padding: 0px;
    width: 0;
}
ul.children {
    color: #fff;
    background: #333333;
    font-size: 18px;
    min-width: 230px;
    padding: 10px;
    float: left;
    margin-right: -163px;
}
.mbl-admin-bar li a:hover,.mbl-admin-bar li a:active,.mbl-admin-bar li a:focus,.mbl-admin-bar li:hover > a,.mbl-admin-bar li.current-cat > a,.mbl-admin-bar li.current_page_item > a,.mbl-admin-bar li.current-menu-item > a {
    color: #38b8f0;
    background: #333333;
}
.fa {
    font-size: 18px;
    color: #999;
    margin-left: 5px;
}
.fa.fa-user {
    font-size: 50px;
    float: right;
    padding: 50px;
    border: 1px solid #212121;
    background: #575757;
}
ul.children img {
    width: 80px;
    height: auto;
    float: right;
    margin-left: 10px;
}
ul.children a {
    margin-top: 10px;
}
li.mright {
    float: left;
}
li.mblogo a {
    padding: 3px 15px 3px 15px!important;
}
ul.child1 {
    min-width: 180px;
    color: #fff;  background: #333333;
}
ul.child1 li a {
    padding: 10px;
    width: 100%;
    background: #333333;
}

الان ابحث عن الوسم <body> و اضف الكود التالي تحته
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Open Sans:400' rel='stylesheet' type='text/css'/>
 <span class='item-control blog-admin'>
<div class='span-24'>
<div class='mbl-cpanel'>
<ul class='admin-controll mbl-admin-bar'>
  <li class='mblogo'><a href="http://goo.gl/JiD66C"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTQ4vyEZPdFqeQ8F5fX1CQh62-WmW6hMq2cJ-ESxuCbjjVfQ-1NSahLLSlB_bS1GN5il-bZ8lRUZ_1L6SqwSuNUvfOdgLWgBUjJb5o5gWuCsuDbXAEPML6Hl4FUT_-yTYRuzkLM97qSpI/s1600/v.pn'/></a></li>
  <li class='blog-title'><a expr:href='data:blog.homepageUrl'><i class='fa fa-tachometer'/> <data:blog.title/></a></li>
<li><a href='http://www.blogger.com/home'><i class='fa fa-puzzle-piece'/> لوحة التحكم</a></li>

  <li><a href="#"><i class="fa fa-pencil"></i> المشاركات</a>
<ul class='child1'>
  <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/src=sidebar&quot;'><i class='fa fa-pencil'/> مشاركة جديدة</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/target=page&quot;'><i class='fa fa-file'/> صفحة جديدة</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#posts&quot;'><i class='fa fa-th-list'/> جميع المشاركات</a></li>
<li><a expr:href='&quot;https://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/target=post;postID=&quot; + data:blog.postId + &quot;&quot;'><i class="fa fa-pencil-square"/> تحرير مشاركة</a></li>
  </ul>
</li>
  <li><a href="#"><i class="fa fa-cogs"></i> تخصيص</a>
<ul class='child1'>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#pageelements&quot;'><i class='fa fa-wrench'/> التخطيط</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#templatehtml&quot;'><i class='fa fa-pencil-square-o'/> تحرير القالب</a></li>
  </ul>
</li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#comments&quot;'><i class='fa fa-comment'/> التعليقات</a>
<ul class='child1'>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#pendingcomments&quot;'><i class="fa fa-bullhorn"></i> في انتظار الإشراف</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#spamcomments&quot;'><i class="fa fa-ban"></i> التعليقات غير مرغوب فيها</a></li>
  </ul>
</li>

<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#basicsettings&quot;'><i class='fa fa-cog'/> إعدادات</a>
<ul class='child1'>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#basicsettings&quot;'><i class="fa fa-heart-o"></i> أساسي</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#postandcommentsettings&quot;'><i class="fa fa-comments"></i> مشاركات و تعليقات</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#emailandmobilesettings&quot;'><i class="fa fa-mobile"></i> الجوال و البريد الإلكتروني</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#languageandformattingsettings&quot;'><i class="fa fa-calendar-o"></i> اللغة و التنسيق</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#searchsettings&quot;'><i class="fa fa-search-plus"></i> تفضيلات البحث</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#othersettings&quot;'><i class="fa fa-code"></i> اخرى</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#overviewstats&quot;'><i class='fa fa-signal'/> الإحصائيات</a></li>
  </ul>
</li>

<li class='mright'><a href='#'><i class='fa fa-signal'/>  الإدارة </a>
<ul class='children'>
<li><img src='http://im88.gulfup.com/Ajvw5S.png'/>
<div class='mauthor'><br/>مدون محترف</div>
<a href='http://www.blogger.com/logout.g'> الخروج</a></li>
</ul>
</li>
</ul>
</div>
</div>
</span>

اهم الملاحظات حول الكود


استبدل اسم مدونتي التي باللون  الاحمر باسم مدونتك
لتغيير الصورة استبدل هذا الرابط  http://im88.gulfup.com/Ajvw5S.png  برابط الصورة التي تريدها
يمكنك استبدال كلمة الإدارة بكلمة Admin

و الأمر متروك لك إذا كنت ترغب في تخصيص لوحة الادارة وفقا لاحتياجاتك يمكن فعل هذا مع قليل من الخبرة في CSS و HTML و بمجرد الإنتهاء من كل شيء قم بحفظ القالب

بالتوفيق

مواضيع ذات صلة
كيفية إنشاء لوحة تحكم متقدمة في مدونات بلوجر
4 / 5
بواسطة

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

  1. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
  2. شكرا s= تم الاضافة بنجاااح q=

    ردحذف
    الردود
    1. بل شكرا لمرورك

      بالتوفيق يا غالي =r

      حذف
  3. غير معرف09 سبتمبر, 2015

    =q بارك الله فيك

    ردحذف
    الردود
    1. و بارك فيك ايضاً يا غالي
      شكرا لتعليقك =r

      حذف
  4. لدي استفسار بسيط ازاي اغير الصور

    ردحذف
    الردود
    1. يجب عليك استخدام موقع Font-awesome ابحث عن شرح له على يوتيوب
      واستبدل الاكواد المشابهة لهذه <i class='fa fa-file'/>

      حذف
  5. بارك الله بيك بس ممكن تقدر تعملي الوحة اذا ممكن لان حاولت كثير وماضبطت

    ردحذف
    الردود
    1. وبارك فيك أيضاً
      اتمنى ان لا تفهمني خطأ
      ولكن اعتذر منك والله مشغول كثيراً

      حذف
  6. اخي شكرا لك لكن لدي سوال هل الصفحة تضهر للزائر ام فقط للادمن

    ردحذف
    الردود
    1. فقط للأدمن
      أيضًا هذا الموضوع قديم جدًا
      حاول أنّ تقوم بتعريب الإضافة لتظهر معك بشكل جيد

      حذف
  7. لي عتاب عند حضرتك..كنت مستخدم لقالب لك وانا اجهل موضوع حقوق القوالب واتاذيت منك بقصد او بدون قصد..مدونتي اسمها اشرف هيكل المشاكس بس بالانجليزي.
    انا لا انكر انك متفوق ومن نجاح لنجاح

    ردحذف
    الردود
    1. صراحًة مسح الحقوق يؤدي إلى نقل مدونتك إلى مدونتي
      ونحن نقوم بهذا بسبب أنّه هُناك أشخاص يقومون بسرقة قوالبنا وينسبوها لنفسهم ولا يذكرون حقوقنا
      شكرًا لك

      حذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r