حصرياً على مدون محترف شرح كامل لكيفية إنشاء لوحة تحكم متقدمة Admin في مدونات بلوجر كثر هذا الطلب من اخوه افاضل ولم ارد ابداً ان أتأخر عليهم اكثر من ذلك و هذه الاضافة من اجمل الاضافات التي توفر الوقت و الجهد و هي لوحة تحكم الإدارة
ما هي لوحة تحكم الإدارة في مدونات بلوجر
هي لوحة تحكم متقدمة توفر لك عمل التغييرات في المدونة بسهولة و سرعة ,و سوف تظهر هذه اللوحة فقط للمشرفين على المدونة مثل مسؤول او كاتب ,ولا تظهر للزائر العادي مما يعني انها ستظهر لك فقط و يمكنك رؤية شكل لوحة التحكم من خلال الصورة في الاعلى تبين لك اين و كيف ستظهر و باستخدام اللوحة يمكنة الوصول بسرعة إلى وظائف التحرير مثل | تحرير HTML و التعليقات و التخطيط و غيرها |
كيفية إنشاء لوحة تحكم Admin في مدونات بلوجر
ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه
/* Admin By Mudwnp.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;
direction: ltr;
color: #ccc;
font: 400 13px/32px "Open Sans",sans-serif;
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: 7px 15px;
font-weight: 400;
text-decoration: none;
font-size: 14px;
}
.mbl-admin-bar li li a {
font-size: 15px;
color: #fff;
float: none;
padding: 0px;
width: 0;
}
ul.children {
color: #fff;
background: #333333;
font-size: 18px;
min-width: 230px;
padding: 10px;
float: left;
margin-right: -163px;
}
.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;
}
.fa {
font-size: 18px;
color: #999;
margin-left: 5px;
}
.fa.fa-user {
font-size: 50px;
float: right;
padding: 50px;
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.mright {
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;
}
الان ابحث عن الوسم <body> و اضف الكود التالي تحته
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Open Sans:400' rel='stylesheet' type='text/css'/>
<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://goo.gl/JiD66C"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTQ4vyEZPdFqeQ8F5fX1CQh62-WmW6hMq2cJ-ESxuCbjjVfQ-1NSahLLSlB_bS1GN5il-bZ8lRUZ_1L6SqwSuNUvfOdgLWgBUjJb5o5gWuCsuDbXAEPML6Hl4FUT_-yTYRuzkLM97qSpI/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'/> لوحة التحكم</a></li>
<li><a href="#"><i class="fa fa-pencil"></i> المشاركات</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'/> مشاركة جديدة</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/target=page"'><i class='fa fa-file'/> صفحة جديدة</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#posts"'><i class='fa fa-th-list'/> جميع المشاركات</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"/> تحرير مشاركة</a></li>
</ul>
</li>
<li><a href="#"><i class="fa fa-cogs"></i> تخصيص</a>
<ul class='child1'>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#pageelements"'><i class='fa fa-wrench'/> التخطيط</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#templatehtml"'><i class='fa fa-pencil-square-o'/> تحرير القالب</a></li>
</ul>
</li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#comments"'><i class='fa fa-comment'/> التعليقات</a>
<ul class='child1'>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#pendingcomments"'><i class="fa fa-bullhorn"></i> في انتظار الإشراف</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#spamcomments"'><i class="fa fa-ban"></i> التعليقات غير مرغوب فيها</a></li>
</ul>
</li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#basicsettings"'><i class='fa fa-cog'/> إعدادات</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"></i> أساسي</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#postandcommentsettings"'><i class="fa fa-comments"></i> مشاركات و تعليقات</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#emailandmobilesettings"'><i class="fa fa-mobile"></i> الجوال و البريد الإلكتروني</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#languageandformattingsettings"'><i class="fa fa-calendar-o"></i> اللغة و التنسيق</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#searchsettings"'><i class="fa fa-search-plus"></i> تفضيلات البحث</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#othersettings"'><i class="fa fa-code"></i> اخرى</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#overviewstats"'><i class='fa fa-signal'/> الإحصائيات</a></li>
</ul>
</li>
<li class='mright'><a href='#'><i class='fa fa-signal'/> الإدارة </a>
<ul class='children'>
<li><img src='http://im88.gulfup.com/Ajvw5S.png'/>
<div class='mauthor'><br/>مدون محترف</div>
<a href='http://www.blogger.com/logout.g'> الخروج</a></li>
</ul>
</li>
</ul>
</div>
</div>
</span>
اهم الملاحظات حول الكود
استبدل اسم مدونتي التي باللون الاحمر باسم مدونتك
لتغيير الصورة استبدل هذا الرابط http://im88.gulfup.com/Ajvw5S.png برابط الصورة التي تريدها
يمكنك استبدال كلمة الإدارة بكلمة Admin
و الأمر متروك لك إذا كنت ترغب في تخصيص لوحة الادارة وفقا لاحتياجاتك يمكن فعل هذا مع قليل من الخبرة في CSS و HTML و بمجرد الإنتهاء من كل شيء قم بحفظ القالب
بالتوفيق
كيفية إنشاء لوحة تحكم متقدمة في مدونات بلوجر
4
/
5
بواسطة
مدون محترف
أزال أحد مشرفي المدونة هذا التعليق.
ردحذفشكرا s= تم الاضافة بنجاااح q=
ردحذفبل شكرا لمرورك
حذفبالتوفيق يا غالي =r
=q بارك الله فيك
ردحذفو بارك فيك ايضاً يا غالي
حذفشكرا لتعليقك =r
لدي استفسار بسيط ازاي اغير الصور
ردحذفيجب عليك استخدام موقع Font-awesome ابحث عن شرح له على يوتيوب
حذفواستبدل الاكواد المشابهة لهذه <i class='fa fa-file'/>
بارك الله بيك بس ممكن تقدر تعملي الوحة اذا ممكن لان حاولت كثير وماضبطت
ردحذفوبارك فيك أيضاً
حذفاتمنى ان لا تفهمني خطأ
ولكن اعتذر منك والله مشغول كثيراً
اخي شكرا لك لكن لدي سوال هل الصفحة تضهر للزائر ام فقط للادمن
ردحذففقط للأدمن
حذفأيضًا هذا الموضوع قديم جدًا
حاول أنّ تقوم بتعريب الإضافة لتظهر معك بشكل جيد
لي عتاب عند حضرتك..كنت مستخدم لقالب لك وانا اجهل موضوع حقوق القوالب واتاذيت منك بقصد او بدون قصد..مدونتي اسمها اشرف هيكل المشاكس بس بالانجليزي.
ردحذفانا لا انكر انك متفوق ومن نجاح لنجاح
صراحًة مسح الحقوق يؤدي إلى نقل مدونتك إلى مدونتي
حذفونحن نقوم بهذا بسبب أنّه هُناك أشخاص يقومون بسرقة قوالبنا وينسبوها لنفسهم ولا يذكرون حقوقنا
شكرًا لك
يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r