حصريا كيفية إنشاء لوحة تحكم بالمشرف في البلوجر
البلوجر المنصة المجانية لانشاء المدونات و المواقع ، يمكن لأي شخص ان ينشئ موقع الخاص انطلاقا من خدمة بلوجر و بدا الاستثمار و الربح ، يتوفر البلوجر على لوحة تحكم تمكن للمشرف من التحكم الكامل لجميع مكونات و اجزاء المدونة ، لكن ما لا تتوفر عليه هذه المنصة هي لوحة تحكم خارجية بالحيث تكمنك من التحكم من داخل الموقع كالمنصة الووردبريس و غيرها ..
لوحة التحكم تكمن من ادراة الموقع بالسرعة اكبر ، عن طريق عرض جميع اجزاء أقسام التحكم ، و في هذا الدرس الحصري سنشرح لكم طريقة اضافة لوحة التحكم الخاصة بالمشرف الى البلوجر .
ما هي لوحة تحكم المشرف و كيفية اضافتها الى البلوجر ؟
لوحة تحكم المشرف هي اضافة يتم ادراجها الى مدونات البلوجر تشبه لوحات التحكم في الووردبريس ، يستطيع المشرف أن يتحكم و يقوم بالتعديل من داخل المدونة و ليس من داخل البلوجر . و هذه اللوحة تكون مرأية فقط للمشرف و ليس للقراء ، مما يعني انها ستظهر فقط لمشرف المدونة عند تسجيل الدخول الى البلوجر .
تمكن هذه الاضافة المشرف او الادارة من الوصول بالسرعة الى وظائف المتوفر على البلوجر مثل : تحرير موضوع ، انشاء صفحة ، التخطيط ، تحرير 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcKJM3E3I4O6y1JCAho5UqNbRipfOuB7SnRKTt7FSGVzDvGKgz4Hsngpu7GMkpw2mzQn1fByAWOhthUkjI7OeUKpbc-CrM0pDChhr63J_OK4NI5cCfiIKodKhbeRAidTU7d2Vf9stbvfQ/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'/> &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 : صورة للمشرف
ليست هناك تعليقات:
إرسال تعليق