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

ابحث عن الوسم

]]></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: 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="https://www.traidnt.net/vb/search.php?searchid=2199468"><img src='http://1.bp.blogspot.com/-YyMN2VM2FGc/VDka36seHBI/AAAAAAAAFH0/gxXlBTMcJPU/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='https://3.bp.blogspot.com/-BAa4infIy2s/WND97Rf83cI/AAAAAAAAGCo/Ca-gcyNtbCgq2tduAJUSdDailFcU6k7eACLcB/s1600/drupal.png'/>

<div class='mauthor'> هذى مدونتي</div>

<a href='http://www.blogger.com/logout.g'> الخروج</a></li>

</ul>

</li>

</ul>

</div>

</div>

================================

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

================================

http://mudwnp.blogspot.com/2014/10/how-to-create-admin-control-panel-in.html

التغير لـ

https://www.traidnt.net/vb/search.php?searchid=2199468

https://3.bp.blogspot.com/-BAa4infIy2s/WND97Rf83cI/AAAAAAAAGCo/Ca-gcyNtbCgq2tduAJUSdDailFcU6k7eACLcB/s1600/drupal.png صوره لمدونتك

هذي مدونتي

1

البحث بالمدونه

الثلاثاء

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

ليست هناك تعليقات:

إرسال تعليق

التعليقات والمواضيع

الاقسام لمدونه

Popular Posts المشاركات الشائعة

الزوار بالاعلام

مشاهد اليوتيوب

المتابعون

التاريخ

أداة ترجمة المدونة الإلكترونية

اعرف حاسوبك ومتصفحك فيه

الأرشيف

في المتصفح

إجمالي مرات مشاهدة الصفحة