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

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

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

البلوجر المنصة المجانية لانشاء المدونات و المواقع ، يمكن لأي شخص ان ينشئ موقع الخاص انطلاقا من خدمة بلوجر و بدا الاستثمار و الربح ، يتوفر البلوجر على لوحة تحكم تمكن للمشرف من التحكم الكامل لجميع مكونات و اجزاء المدونة ، لكن ما لا تتوفر عليه هذه المنصة هي لوحة تحكم خارجية بالحيث تكمنك من التحكم من داخل الموقع كالمنصة الووردبريس و غيرها ..

لوحة التحكم تكمن من ادراة الموقع بالسرعة اكبر  ، عن طريق عرض جميع اجزاء أقسام التحكم ، و في هذا الدرس الحصري سنشرح لكم طريقة اضافة لوحة التحكم الخاصة بالمشرف الى البلوجر .

ما هي لوحة تحكم المشرف و كيفية اضافتها الى البلوجر ؟

لوحة تحكم المشرف هي اضافة يتم ادراجها الى مدونات البلوجر تشبه لوحات التحكم في الووردبريس ، يستطيع المشرف أن يتحكم و يقوم بالتعديل من داخل المدونة و ليس من داخل البلوجر . و هذه اللوحة تكون مرأية فقط للمشرف و ليس للقراء ، مما يعني انها ستظهر فقط لمشرف المدونة عند تسجيل الدخول الى البلوجر .

تمكن هذه الاضافة المشرف او الادارة من الوصول بالسرعة  الى وظائف المتوفر على البلوجر مثل : تحرير موضوع ، انشاء صفحة ، التخطيط ، تحرير 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 :  صورة للمشرف 

تعليقك يشجعنا على الاستمرار .

مقالات ذات صلة

Previous
Next Post »

11 التعليقات

التعليقات
11/08/2014 delete

شكرا استمر يابطل روعه يا رائع

Reply
avatar
11/08/2014 delete

شكرا لك أنت ايضا أخي

Reply
avatar
11/09/2014 delete

ازى اضيف صورة بجانب الاقسام زة ما انت عامل فى المدونة كدة يعنى اخبار الانترنت جنبها صورة وكدة

Reply
avatar
11/23/2014 delete

لم تنجح أخي
عملت كلشي صح
يعني بدي أحط ID المدونة شي ؟؟

Reply
avatar
11/24/2014 delete

لا أخي لا تقم بالتعديل الا لما ثم دكره في شرح الموضوع اما الطريقة فهي مجربة و ناجحة 100%

Reply
avatar
11/24/2014 delete

لماذا لا تنجح عندي ؟؟؟؟
:(

Reply
avatar
11/25/2014 delete

أخي الكريم ما عليك سوى وضع الكود الموجود في اعلى أسفل من الوسم التالي و ستنجح انشاء الله
ضع الكود الموجود في الموضوع اسفل الكود الثالي
<body>

Reply
avatar
6/10/2016 delete أزال المؤلف هذا التعليق.
avatar
6/10/2016 delete

أخي هل يمكن أن تقوم بشرح لطريقة جعل عنوان المدونة (post header) على الشكل الذي يوجد في مدونتك

Reply
avatar

المروجوا احترام سياسة المدونة و عمل بها و شكرا ااا