fbpx
الرئيسية / تطوير المواقع / بلوجر / حصريا كيفية إنشاء لوحة تحكم بالمشرف في البلوجر

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

ضع تقييمك من فضللك
[Total: 1 Average: 5]
حصريا كيفية إنشاء لوحة تحكم بالمشرف في البلوجر
البلوجر المنصة المجانية لانشاء المدونات و المواقع ، يمكن لأي شخص ان ينشئ موقع الخاص انطلاقا من خدمة بلوجر و بدا الاستثمار و الربح ، يتوفر البلوجر على لوحة تحكم تمكن للمشرف من التحكم الكامل لجميع مكونات و اجزاء المدونة ، لكن ما لا تتوفر عليه هذه المنصة هي لوحة تحكم خارجية بالحيث تكمنك من التحكم من داخل الموقع كالمنصة الووردبريس و غيرها ..
لوحة التحكم تكمن من ادراة الموقع بالسرعة اكبر  ، عن طريق عرض جميع اجزاء أقسام التحكم ، و في هذا الدرس الحصري سنشرح لكم طريقة اضافة لوحة التحكم الخاصة بالمشرف الى البلوجر .
ما هي لوحة تحكم المشرف و كيفية اضافتها الى البلوجر ؟
لوحة تحكم المشرف هي اضافة يتم ادراجها الى مدونات البلوجر تشبه لوحات التحكم في الووردبريس ، يستطيع المشرف أن يتحكم و يقوم بالتعديل من داخل المدونة و ليس من داخل البلوجر . و هذه اللوحة تكون مرأية فقط للمشرف و ليس للقراء ، مما يعني انها ستظهر فقط لمشرف المدونة عند تسجيل الدخول الى البلوجر .
تمكن هذه الاضافة المشرف او الادارة من الوصول بالسرعة  الى وظائف المتوفر على البلوجر مثل : تحرير موضوع ، انشاء صفحة ، التخطيط ، تحرير HTML ، تعليقات و…..
شرح طريقة اضافة لوحة التحكم خاصة بالمشرف الى البلوجر
  1. نتوجه ال البلوجر
  2. نختار قالب
  3. نضغط تحرير HTML
  4. نبحث عن الكود الثالي   “استعمل CTRL+F  للبحث بالسرعة

</head>

5. ثم نضيف الكود الثالي من فوقه

 

<link href=’//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css’ rel=’stylesheet’/>
<style>
/*  Control Panel By http://hukmat.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;
    directio1n: ltr;
    color: #ccc;
    font: 400 14px/32px oswald,GESSTwoLight;
    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: 8px 15px;
    font-weight: 400;
    text-decoration: none;
    font-size: 13px;
    line-hei1ght: normal;
}
.mbl-admin-bar li li a {
    font-size: 12px;
    color: #fff;
    float: none;
    padding: 0px;
    width1: 0;
    text-align: right;
}
ul.children {
    color: #fff;
    background: #333333;
    font-size: 20px;
    min-width: 230px;
    padding: 10px;
    float: left;
    margin-right: -98px;
}
.mbl-admin-bar li a:hover,.mbl-admin-bar li a:active,.mbl-admin-bar li a:focus,.mbl-admin-bar li:hover &gt; a,.mbl-admin-bar li.current-cat &gt; a,.mbl-admin-bar li.current_page_item &gt; a,.mbl-admin-bar li.current-menu-item &gt; a {
    color: #38b8f0;
    background: #333333;
}
.fa1 {
    font-size: 20px;
    color: #999;
    margin-left: 5px;
    float: right;
}
.fa.fa-user {
    font-size: 50px;
    float: right;
    padding: 20px;
    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.mleft {
    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;
}
.mauthor {
font-weight: normal;
}
</style>

6. نبحث عن الكود الثالي

<body>

اذا لم تجده فبحث عن

<body

7. نضيف الكود الثالي من أسفله

 

<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://hukmat.blogspot.com/’><img src=’http://1.bp.blogspot.com/-YyMN2VM2FGc/VDka36seHBI/AAAAAAAAFH0/gxXlBTMcJPU/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’/> &amp;nbsp;  لوحة التحكم</a></li>
  <li><a href=’#’><i class=’fa fa-pencil’/> &amp;nbsp;  تحرير</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’/> &amp;nbsp;  مشاركة جديدة</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’/> &amp;nbsp;  انشاء صفحة</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’/>  &amp;nbsp;  المشاركات</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’/> &amp;nbsp;   تحرير الموضوع</a></li>
  </ul>
</li>
  <li><a href=’#’><i class=’fa fa-cogs’/> &amp;nbsp;  التخصيص</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’/> &amp;nbsp;   التخطيط</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’/> &amp;nbsp;   تحرير القالب</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’/> &amp;nbsp;  التعليقات</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’/> &amp;nbsp;   تعليقات تحت الإشراف</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’/> &amp;nbsp;   التعليقات غير مرغوب فيها</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’/> &amp;nbsp;  الإعدادات</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’/> &amp;nbsp;  أساسيات</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’/> &amp;nbsp;  مشاركات &amp; تعليقات</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’/> &amp;nbsp;  الجوال &amp; الإميل</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’/> &amp;nbsp;  اللغة و تنسيق</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’/> &amp;nbsp;  تفضيلات البحث</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’/> &amp;nbsp;  أخرى</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’/> &amp;nbsp;  احصائيات</a></li>
  </ul>
</li>
<li class=’mright’><a href=’#’><i class=’fa fa-signal’/> &amp;nbsp;  الإدارة&#1548; الخروج</a>
<ul class=’children’>
<li><img src=’Img profile‘/>
<div class=’mauthor’><br/>Your Name Here</div>
<a href=’http://www.blogger.com/logout.g’><i class=’fa fa-exclamation-triangle’/>&amp;nbsp;  تسجيل الخروج       </a></li>
</ul>
</li>
</ul>
</div>
</div>
</span>

8. نقوم بالتغيير الاسم   و صورة البروفيل  عير تغيير ما يلي :

 

Your Name Here :  ضع اسمك مكانه أو اسم المشرف
Img profile :  صورة للمشرف

عن المهندس الاول

اضف رد

هذا الموقع يستخدم Akismet للحدّ من التعليقات المزعجة والغير مرغوبة. تعرّف على كيفية معالجة بيانات تعليقك.

x

‎قد يُعجبك أيضاً

تحميل 5 قوالب بلوجر عربية إحترافية مجانا من متجر Picalica

ضع تقييمك من فضللك [Total: 2 Average: 4]تحميل 5 قوالب بلوجر عربية ...

Secured by Skytells Guard

المهندس الاول للتدريب تعليم كل مايخص الحاسوب من البداية للإحتراف حماية - صيانة - تصميم - انترنت - برامج كامله -دورات ......