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

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

ضع تقييمك من فضللك
[Total: 0 Average: 0]
حصريا كيفية إنشاء لوحة تحكم بالمشرف في البلوجر
البلوجر المنصة المجانية لانشاء المدونات و المواقع ، يمكن لأي شخص ان ينشئ موقع الخاص انطلاقا من خدمة بلوجر و بدا الاستثمار و الربح ، يتوفر البلوجر على لوحة تحكم تمكن للمشرف من التحكم الكامل لجميع مكونات و اجزاء المدونة ، لكن ما لا تتوفر عليه هذه المنصة هي لوحة تحكم خارجية بالحيث تكمنك من التحكم من داخل الموقع كالمنصة الووردبريس و غيرها ..
لوحة التحكم تكمن من ادراة الموقع بالسرعة اكبر  ، عن طريق عرض جميع اجزاء أقسام التحكم ، و في هذا الدرس الحصري سنشرح لكم طريقة اضافة لوحة التحكم الخاصة بالمشرف الى البلوجر .
ما هي لوحة تحكم المشرف و كيفية اضافتها الى البلوجر ؟
لوحة تحكم المشرف هي اضافة يتم ادراجها الى مدونات البلوجر تشبه لوحات التحكم في الووردبريس ، يستطيع المشرف أن يتحكم و يقوم بالتعديل من داخل المدونة و ليس من داخل البلوجر . و هذه اللوحة تكون مرأية فقط للمشرف و ليس للقراء ، مما يعني انها ستظهر فقط لمشرف المدونة عند تسجيل الدخول الى البلوجر .
تمكن هذه الاضافة المشرف او الادارة من الوصول بالسرعة  الى وظائف المتوفر على البلوجر مثل : تحرير موضوع ، انشاء صفحة ، التخطيط ، تحرير 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 :  صورة للمشرف

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

محمد عبدالله:عربي الهوية مصري الجنسية /اعمل في مجال الانترنت و الكمبيوتر لهدف واحد ووحيد وهو مساعدة كل عربي مبتدئ وتأهيله للإعتماد علي نفسه بعد الله عز وجل وأرجو منكم مساعدتي في تحقيق الهدف بأن تكونو في عون بعضكم البعض كعرب دون النظر للجنسية أو الدين أو العرق .

اترك رد

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