قائمة إدارة المدونة على مدونات بلوجر




السلام عليكم ورحمة الله تعالى وبركاته ،مرحبا بكم أحباءنا الكرام في درس جديد ،اليوم سوف نقوم بإضافة قوائم تسهل عليك التنقل بين قوائم حسابك على موقع بلوجر ،وجعلها في مدونتك إذ يمكنك كتابة تدوينة جديدة ،أو التعديل على الرسائل أو الإعدادات فقط بكبسة زر من مدونتك ،وهذه عملية تسهيلية للمدون .ولمعاينة الإضافة قم بالضغط على "أبو إياد" الموجودة في القائمة العلوية فوق الهيدر ،إلا أن عند ضغطك على أحد القوائم سوف يطلب منك إدخال حسابك على بلوجر ،لكن عندما أضغط أنا على أحد القوائم يتم التوجيه مباشرة إلى الخاصية المعنية لأن الإضافة تحتوي على الرقم التعريفي لمدونتي ،وسوف نتعرف على ذلك خلال شرح الإضافة .
وحقيقة الأمر أن هذه الإضافة عبارة عن إضافتين :
الإضافة الأولى : إضافة قائمة إظهار وإخفاء ل3 إضافات في قائمة واحدة والتي تم شرحها سابقا على مدونة صديقي الغالي خالد صاحب مدونة "الفضاء التكنولوجي" .
الإضافة الثانية :وهي القوائم أو الأزرار التي تمكنك من الولوج بطريقة سهلة إلى لوحة التحكم بمدونتك
 لذلك قمت بإدماج هاتين الإضافتين في إضافة واحدة .

تطبيق الإضافات :
1.قم بإضافة القائمة العلوية التي تقوم بإظهار وإخفاء 3 إضافات في وقت واحد من هنا ،لكن لا تقم بتطبيق المرحلة الخامسة والأخيرة والتي يطلب منك إضافة كود بعد الوسم body
2.قم بالبحث عن الوسم :
<body>
ثم ضع تحته هذا الكود
<div id='toppanel'>
<div id='panel'>
<div class='content clearfix'>
<div class='left'>
<b:section class='left' id='left' maxwidgets='4' showaddelement='yes'>
</b:section>
</div>
<div class='left'>
<b:section class='center' id='center' maxwidgets='4' showaddelement='yes'>
</b:section>
</div>
<div class='left right'>
<b:section class='right' id='right' maxwidgets='4' showaddelement='yes'>
</b:section>
</div>
</div>
</div>
<div class='tab'>
<ul class='login'>
<li class='left'/>
<li>الإدارة</li>
<li class='sep'>|</li>
<li id='toggle'>
<a class='open' id='open'>إظهار</a>
<a class='close' id='close' style='display: none;'>إخفاء</a>
</li>
<li class='right'/>
</ul>
</div>
</div>
3.قم بالبحث عن الوسم :
]]></b:skin>
ثم ضع فوقه هذا الكود :
ul.adminbar
    {      background-color:#F5EDE3;
        border:1px solid #F5EDE3;
        margin-bottom:8px;
        padding:5px 5px 0;
    }
    ul.adminbar li {
        background-color:#E6DAC9;
        border:1px solid #999999;
        list-style:none outside none;
        margin-bottom:6px;
        outline:1px solid #D0CBE5;
        padding:12px 0px 20px 50px;
}
    ul.adminbar li a
    {      display:block;
        color:#333333 !important;
        text-shadow:1px 1px 0 #fff;
        text-decoration:none;
        font-size:20px;
        height:27px;
        margin:0 0 0 15px;
    }
    a.dashboard
    {      background:url(http://1.bp.blogspot.com/-Le542yqWfFg/TeQHu_1XCbI/AAAAAAAACLU/c-HtViQPEQI/s1600/dashboard.png) no-repeat 0px 0px;
        padding:4px 0 2px 47px;
    }
        a.settings
    {      background:url(http://2.bp.blogspot.com/-hsTX92fGbtU/TeQHvyTk9TI/AAAAAAAACLc/zV2CbQWaYiQ/s1600/setting+blogger.jpg) no-repeat 0px 0px;
        padding:5px 0 0 47px;
    }
        a.layout
    {      background:url(http://1.bp.blogspot.com/-dAP-uFxDb2A/TeQHs-8yViI/AAAAAAAACLM/OAVA_VQUvXU/s1600/3anasir.jpg) no-repeat 0px 0px;
        padding:5px 0 0 47px;
    }
        a.editpost
    {      background:url(http://1.bp.blogspot.com/-MNTaudHeQBw/TeQJNVakhbI/AAAAAAAACLg/EWE_dnaYZmg/s1600/edit.png) no-repeat 0px 0px;
        padding:5px 0 0 47px;
    }
        a.newpost
    {      background:url(http://2.bp.blogspot.com/-6Pv1pbavuPY/TeQHt8lkzHI/AAAAAAAACLQ/sEDaHHgUz8o/s1600/add+message+blogger.png) no-repeat 0px 0px;
        padding:5px 0 0 47px;
    }
    a.statistic
    {      background:url(http://1.bp.blogspot.com/-K0mz7u5qyrw/TeQHsXXSOmI/AAAAAAAACLI/k1_kCabmX2E/s1600/Statistics+blogger.png) no-repeat 0px 0px;
        padding:5px 0 0 47px;
    }
4.توجه إلى تصميم مدونتك سوف تلاحظ أنه تمت إضافة 3 قوائم لإضافة أداة جديدة فوق هيدر المدونة
5.الآن سوف نقوم بإضافة القوائم في الأدوات الجديدة التي تم إنشؤها
6.القائمة العلوية :
-قم بإضافة هذا الكود في أداة جديدة .
<ul class="adminbar">
<li><a class="layout" href="http://www.blogger.com/rearrange?blogID=xxxxxxxxxx" target="_blank"><img src="http://3.bp.blogspot.com/-fedEZ7YS_i0/TeQr5zVK47I/AAAAAAAAADA/_D3wFOXGDqE/s1600/tasmim.png" title="" alt=""/>
</a></li>
<li><a class="statistic" href="http://www.blogger.com/stats2.g?blogID=xxxxxxxxxx" target="_blank" ><img src="http://4.bp.blogspot.com/-KAN1lkRnyIw/TeQsTE6A5eI/AAAAAAAAADE/lgt7qNJvf8c/s1600/statistic.png" title="" alt=""/>
</a></li>
</ul>
القائمة الوسطى :
-قم بإضافة هذا الكود في أداة جديدة .
<ul class="adminbar">
<li><a class="editpost" href="http://www.blogger.com/posts.g?blogID=xxxxxxxxxx" target="_blank"><img src="http://1.bp.blogspot.com/-x1YTP6Fg1H4/TeQrHpVZ2yI/AAAAAAAAAC4/InHqGgpZOes/s1600/edit+message.png" title="" alt=""/>
</a></li>
<li><a class="newpost" href="http://www.blogger.com/post-create.g?blogID=xxxxxxxxxx" target="_blank"><img src="http://2.bp.blogspot.com/-2lHvVvwAWtQ/TeQrbo4O4SI/AAAAAAAAAC8/mqoLb3Y4Hks/s1600/new+message.png" title="" alt=""/>
</a></li>
</ul>
القائمة السفلية :
-قم بإضافة هذا الكود في أداة جديدة .
<ul class="adminbar">
<li><a class="dashboard" href="http://www.blogger.com/home" target="_blank"><img src="http://4.bp.blogspot.com/-jH1CMLVBqlI/TeQpX1ar4gI/AAAAAAAAACw/zQLdZ8FNu8w/s1600/lawa77a2.png" title="" alt=""/></a></li>
<li><a class="settings" href="http://www.blogger.com/blog-options-basic.g?blogID=xxxxxxxxxx" target="_blank"><img src="http://3.bp.blogspot.com/-4QK8B4CasL0/TeQqjO44-gI/AAAAAAAAAC0/kdRneGcosIU/s1600/setting2.png" title="" alt=""/>
</a></li>
</ul>
7.عند إضافتك لجميع القوائم لا تنسى أن تقوم بإستبدال xxxxxxxxxx من جميع أكواد الإضافات الثلات برقم تعريف مدونتك،وللحصول على هذا الرقم كما هو موضح أسفله .
ملاحظة : لقد قمت بتغيير ألوان القائمة العلوية لتكون متناسقة مع مدونتي،لأن الإضافة توجد باللون الأسود كما هو موضح في شرح الأخ خالد
أتمنى أن تعجبكم هذه الإضافة الجديدة في إنتظار إستفساراتكم وآرائكم حول الموضوع

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