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

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

حصرياً على مدون محترف شرح كامل لكيفية إنشاء لوحة تحكم متقدمة 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'/>

<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/AVvXsEjZw5N3kDGaFcPBtkn9UkS2ocjPspSId9clqJJGs_UEtncZ87NKfpWpTTxUUzxvv9eE1v0lSQHzLfm8_w6QHCuUnFpzmJeVCnPmEt8W5SQi0QtjrReRsL6138Ikayo_VTLAvy8Ys3okTN4/s1600/v.pn'/></a></li>
<li class='blog-title'><a expr:href='data:blog.homepageUrl'> <data:blog.title/></a></li>
<li><a href='http://www.blogger.com/home'> لوحة التحكم</a></li>

<li><a href="#"> المشاركات</a>
<ul class='child1'>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/src=sidebar"'> مشاركة جديدة</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/target=page"'> صفحة جديدة</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#posts"'> جميع المشاركات</a></li>
<li><a expr:href='"https://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/target=post;postID=" + data:blog.postId + ""'> تحرير مشاركة</a></li>
</ul>
</li>
<li><a href="#"> تخصيص</a>
<ul class='child1'>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#pageelements"'> التخطيط</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#templatehtml"'> تحرير القالب</a></li>
</ul>
</li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#comments"'> التعليقات</a>
<ul class='child1'>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#pendingcomments"'> في انتظار الإشراف</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#spamcomments"'> التعليقات غير مرغوب فيها</a></li>
</ul>
</li>

<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#basicsettings"'> إعدادات</a>
<ul class='child1'>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#basicsettings"'> أساسي</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#postandcommentsettings"'> مشاركات و تعليقات</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#emailandmobilesettings"'> الجوال و البريد الإلكتروني</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#languageandformattingsettings"'> اللغة و التنسيق</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#searchsettings"'> تفضيلات البحث</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#othersettings"'> اخرى</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#overviewstats"'> الإحصائيات</a></li>
</ul>
</li>

<li class='mright'><a href='#'> الإدارة </a>
<ul class='children'>
<li><img src='http://im88.gulfup.com/Ajvw5S.png'/>
<div class='mauthor'> مدون محترف</div>
<a href='http://www.blogger.com/logout.g'> الخروج</a></li>
</ul>
</li>
</ul>
</div>
</div>

اهم الملاحظات حول الكود

استبدل اسم مدونتي التي باللون الاحمر باسم مدونتك
لتغيير الصورة استبدل هذا الرابط http://im88.gulfup.com/Ajvw5S.png برابط الصورة التي تريدها
يمكنك استبدال كلمة الإدارة بكلمة Admin

و الأمر متروك لك إذا كنت ترغب في تخصيص لوحة الادارة وفقا لاحتياجاتك يمكن فعل هذا مع قليل من الخبرة في CSS و HTML و بمجرد الإنتهاء من كل شيء قم بحفظ القالب

بالتوفيق

الاثنين، 8 ديسمبر 2014