اضافة لوحة تحكم بلوجر بشكل ووردبريس حصريا

السلام عليكم ورحمة الله وبركاته
درس اضافة شريط لوحة تحكم الووردبريس لبلوجر ليسهل على مدير المدونة بحيث يمكنه الانتقال الى اي مكان في لوحة التحكم عبر هذه الاضافه بسرعه وسهولة هذا عدا شكلها الجذاب الذي يعطي تمييز للموقع

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

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

تمكن هذه الاضافة المشرف او الادارة من الوصول بالسرعة الى وظائف المتوفر على البلوجر مثل : تحرير موضوع ، انشاء صفحة ، التخطيط ، تحرير 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://www.alinael.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://www.alinael.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi77RQl-Srrs113gLvAPJv8cF6kC-OIciEO3O8TfKEXU8CQ4rSy8DgmVOX61HHSOGB1KA6OndwsIyrevU0Iv4JRuUjkmMu80NJEMNrTEnUTD6y4Y40GLdBwcIafVvOub7Kb1wVGX_k_hog/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 : صورة للمشرف

اضافة لوحة تحكم بلوجر بشكل ووردبريس حصريا

عمر ناصر

1 تعليقات

عمر ناصر

القائمة البريدية

1 تعليقات