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

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

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

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

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

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

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

شرح طريقة اضافة لوحة التحكم خاصة بالمشرف الى البلوجر

نتوجه ال البلوجر
نختار قالب
نضغط تحرير HTML
نبحث عن الكود الثالي "استعمل 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 > 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;
}
.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=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'/> &nbsp; لوحة التحكم</a></li>
<li><a href='#'><i class='fa fa-pencil'/> &nbsp; تحرير</a>
<ul class='child1'>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/src=sidebar"'><i class='fa fa-pencil'/> &nbsp; مشاركة جديدة</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/target=page"'><i class='fa fa-file'/> &nbsp; انشاء صفحة</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#posts"'><i class='fa fa-th-list'/> &nbsp; المشاركات</a></li>
<li><a expr:href='"https://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/target=post;postID=" + data:blog.postId + ""'><i class='fa fa-pencil-square'/> &nbsp; تحرير الموضوع</a></li>
</ul>
</li>
<li><a href='#'><i class='fa fa-cogs'/> &nbsp; التخصيص</a>
<ul class='child1'>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#pageelements"'><i class='fa fa-wrench'/> &nbsp; التخطيط</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#templatehtml"'><i class='fa fa-pencil-square-o'/> &nbsp; تحرير القالب</a></li>
</ul>
</li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#comments"'><i class='fa fa-comment'/> &nbsp; التعليقات</a>
<ul class='child1'>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#pendingcomments"'><i class='fa fa-bullhorn'/> &nbsp; تعليقات تحت الإشراف</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#spamcomments"'><i class='fa fa-ban'/> &nbsp; التعليقات غير مرغوب فيها</a></li>
</ul>
</li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#basicsettings"'><i class='fa fa-cog'/> &nbsp; الإعدادات</a>
<ul class='child1'>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#basicsettings"'><i class='fa fa-heart-o'/> &nbsp; أساسيات</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#postandcommentsettings"'><i class='fa fa-comments'/> &nbsp; مشاركات & تعليقات</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#emailandmobilesettings"'><i class='fa fa-mobile'/> &nbsp; الجوال & الإميل</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#languageandformattingsettings"'><i class='fa fa-calendar-o'/> &nbsp; اللغة و تنسيق</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#searchsettings"'><i class='fa fa-search-plus'/> &nbsp; تفضيلات البحث</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#othersettings"'><i class='fa fa-code'/> &nbsp; أخرى</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#overviewstats"'><i class='fa fa-signal'/> &nbsp; احصائيات</a></li>
</ul>
</li>
<li class='mright'><a href='#'><i class='fa fa-signal'/> &nbsp; الإدارة، الخروج</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'/>&nbsp; تسجيل الخروج </a></li>
</ul>
</li>
</ul>
</div>
</div>
</span>

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

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

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

جميع الحقوق محفوضة لمكونة حكمات للمعلوميات

المصدر www.hukmat.blogspot.com

» كيفية إنشاء مدونة و الربح من الانترنت
» كيفية إنشاء ثيمات إحترافية من صنعك لأي نوع من الهواتف ببساطة
» كيفية تحويل صورتك الى لوحة فنية مع برنامج Photoshine لعمل الاطارت والبراويز
» طريقة اضافة أقسام للمواضيع على البلوجر
» إخواني الكرام كيف حالكم اليوم بإذن الله ساقدم لكم إضافة حصرية وهي إضافة لوحة المفاتيح العربية هذه الإضافة التي قليلا ما نجدها على منصة بلوجر حان الوقت لكي تتالق بمدونتك صورة من الإضافة أضف لوحة المفاتيح العربية لمدونتك Virtual Keyboard for blogger الكي