السلام عليكم و رحمة الله تعالى وبركاته
و مرحبا بكم على المدونة ...اليوم سنتعرف على طريقة إضافة شريط مدير الموقع فوق المدونة الذي يشمل جميع اعدادت المدونة فهو بمثابة لوحة تحكم المدونة , لكن هذه الخاصية ستظهر فقط لمدير الموقع او المدونة ,و مميزاتها ستسهل عليك الوصول الى جميع الاعدادات وكذلك احصائيات المدونة بكل سهولة كما ان طريقة اضافتها سهلة وسلسة جدا ,
طريقة التركيب سهلة
1 ) توجه الى لوحة تحكم بلوجر
2 )القالب ثم تحرير html
3 )ابحث عن ]]></b:skin>
أضف فوقه هدا الكود
.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-family: monospace;
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: -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;
}
.fa {
font-size: 18px;
color: #999;
margin-left: 5px;
}
.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;
}
2 )ثم ابحث عن </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='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='mleft'><a href='#'><i class='fa fa-signal'/> مدير الموقع </a>
<ul class='children'>
<li><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihbvtO_EcOP4CKpBWI4ysgY9zdhWTHRaOA9RkSxylI4h1zZlB6hTSPpU_HK6qM4WPC5BujIRwFeVL99KeuGy1KdCzVoyc7_5W42TQSYlbqPT2Ny1WfUK-Wf2161kkDdS6XLwRXSzbaIbo/s1600/1743572_677837862312091_3747784122366788402_nd.jpg'/>
<div class='mauthor'><br/>Ahmed Haddou</div>
<a href='http://www.blogger.com/logout.g'> تسجيل الخروج</a></li>
</ul>
</li>
</ul>
</div>
</div>
</span>
ولتغيير صورة الشعار ابحث عن
هذا كل ما في الامر ...إن نال الدرس اعجابك شاركه ,
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihbvtO_EcOP4CKpBWI4ysgY9zdhWTHRaOA9RkSxylI4h1zZlB6hTSPpU_HK6qM4WPC5BujIRwFeVL99KeuGy1KdCzVoyc7_5W42TQSYlbqPT2Ny1WfUK-Wf2161kkDdS6XLwRXSzbaIbo/s1600/1743572_677837862312091_3747784122366788402_nd.jpg
/*ملاحظة*\
الاضافة ستظهرفقط لمدير المدونة/الموقع.و لن تظهر للزوار ..لذا يجب ان تكون مسجلاََ للدخول على البلوجر
المصدر MyBloggerLab
المصدر MyBloggerLab
مري 15 سنة اعيش بمدينة وجد .أهتم بكل ماهو جديد في العالم الافتراضي .و أهدف الى تطوير المحتوى المعلوماتي العربي
