القائمة الرئيسية

الصفحات

قائمة مميزة منسدلة بثأتير جميله وشكل روعه 2013


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

تتيح لنا وبسهولة تامة إضافة تأثيرات رائعة على صفحات الويب

وسهولة التحكم بالكثير من الأحداث مثل تمرير مؤشر الفأرة

أو النقر بزر الفارة وغيرها الكثير بسطور برمجية قليلة ومفهومة


موضوعنا اليوم  تم قرائته من هدا الموقع

شاهد الاضافة على مدونة تجربية
شرح الاضافة
طريقة التركيب
.1 اذهب للوحة التحكم
2. تخطيط
3.عناصر الصفحة
4. اضف اداة
6.اختار  Html/Javascript

 هذا هو الكود 


<script src="http://blogspacetech.googlecode.com/files/prototype.js" type="text/javascript"></script>

<script src="http://bilokr.googlecode.com/files/effects.js" type="text/javascript"></script>

<script src="http://bilokr.googlecode.com/files/side-bar.js" type="text/javascript"></script>


<style>

{

    font-size:75%;

}

a{

    outline: none;

}

a:active{

    outline: none;

}

#sideBar{

text-align:center;

}

#sideBar h2{

    color:#FFFFFF;

    font-size:110%;

    font-family:arial;

    margin:10px 10px 10px 10px;

    font-weight:bold !important;

}

#sideBar h2 span{

    font-size:125%;

    font-weight:normal !important;

}

#sideBar ul{

    margin:0px 0px 0px 0px;

    padding:0px 0px 0px 0px;

}

#sideBar li{

    margin:0px 10px 3px 10px;

    padding:2px;

    list-style-type:none;

    display:block;

    background-color:#DA1074;

    width:177px;

    color:#FFFFFF;

}

#sideBar li a{

    width:100%;

}

#sideBar li a:link,

#sideBar li a:visited{

    color:#FFFFFF;

    font-family:verdana;

    font-size:100%;

    text-decoration:none;

    display:block;

    margin:0px 0px 0px 0px;

    padding:0px;

    width:100%;

}

#sideBar li a:hover{

    color:#FFFFFF;

    text-decoration:underline;

}

#sideBar{

    position: fixed;

    width: auto;

    height: auto;

    top: 140px;

    left:0px;

    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg__TTNqbpu0ylbXQKigYt8M5mto5vNaaDOJZhslexn03cQhvqJl9y9Mt80lUeOYoXSGJ04lURhBrLsho-WHnEcpDljQFRCCVWIxGrjjo5mV1EkLvZidm7VYjIFs-B-pH42wMCKSR1Qb4Q/s320/2wejg37.jpg.gif);

    background-position:top right;

    background-repeat:repeat-y;

}

#sideBarTab{

    float:left;

    height:137px;

    width:28px;

}

#sideBarTab img{

    border:0px solid #FFFFFF;

}

#sideBarContents{

    float:left;

    overflow:hidden !important;

    width:200px;

    height:320px;

}

#sideBarContentsInner{

    width:200px;

}</style>

<div id="sideBar">

        <div id="sideBarContents" style="display:none;">

        <div id="sideBarContentsInner">

            <h2><div style="text-align: justify;"><span style="font-family:verdana;">روابط هامة</span>

</div></h2>

<ul>

<li><a href="#">الرابط الاول</a></li>

<li><a href="#">الرابط الثاني</a></li>

<li><a href="#">الرابط الثالت</a></li>

<li><a href="#">الرابط الرابع</a></li>

</ul>

</div> </div>

    <a id="sideBarTab" href="#"><img alt="sideBar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjExPdqQIppruBHqBM3h-7xupiT7KRr9dvrZE2r6QvAJS0JYlJ_GhCQf2IJtYCw0YOexsdvxqU9BGj7o1pWxFLOxlVEa_Y44yhHaUE9NrcSn-GoZCdKLnGqX76a6wdqRJoPwvzUyDlkJ4I/s320/blogspacetech.gif" title="sideBar" /></a>

</div>

تمنى لك الاستفادة

Kommentare

  1. العفور يا اخى هذا اقل شئ وشكرا على مرورك الطيب

    AntwortenLöschen
  2. نتاليا اليونارDienstag, Oktober 02, 2012 2:08:00 PM

    .

    رغم انني اول مرة ازور المدونة كوني ابحث عن افضل تصميم للشعار لمدونة ( انا احد مؤلفيها ولست مديرتها )

    المدونه الخاصة ليست ملكاً لي وانما عبارة عن مجموعة كتاب وانا من احدهم واحببت ان اضع لمسه فنية في المدونة كمشاركة مني حتى احصل على حق التاليف الاكبر , فلكل مؤلفه او مؤلف في هذه المدونة احضار 5 مواضيع موثقة وليست منقوله

    والاهم من ذلك ان تكون موثقة بالصور والفيديو لجميع الزوار والاعضاء ,

    لذلك عندما كنت ابحث في جوجل عن تصميم حتى اقوم باهدائه للمدراء توصلت لمدونتك وكنت اتمنى منك المساعدة في تصميم لهذا الموقع وتستطيع زيارته في حالة فراغك وقبولك مساعدتي في تصميم الشعار , لانني عرفت من بعض مواضيعك انك تجتهد في مساعدة الاخوة بتصميم شعارات لمدوناتهم ,

    واسال الله ان يشملني كرمك وعطفك في هذه المساعدة وتصميم الشعار , لانني تقدمت بعدة تصاميم وللاسف لم تعجب المسؤليين في المدونة

    http://wikileaks-alarabia.blogspot.com/

    وجزاك الله الف خيرا ,,, في انتظار ردكم الكريم

    ....

    AntwortenLöschen
    Antworten
    1. السلام عليكم يا اخى واشكرك على مرورك الكريم وكلمك الطيب اولا مدونة بلوجر توب تساعد فى تطوير المدونات العربيه وانا بكل جهدى ان شاء الله تعاله سوف يتم شعار الى المدونة الخاصه بيك وارجو من حضرتك متابعه المدونة لتكون وحد من اسرتنا فى هذا المدونة هام: باب المؤالفين مفتوح لكل من له خبر فى جميع المجالات
      انتظر لعمل الشعار الى مدونتك

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

      Löschen
  3. نتاليا اليونارMittwoch, Oktober 03, 2012 3:54:00 PM


    السيد ابو جبل
    انا صبيه وليس شب
    واسمي نتاليا من تركيا ( واتكلم العربية بطلاقة والحمدالله )
    واعمل منسقة اخبار بجريدة يومية مستقله

    واعتذرعن التاخير ان كنت قد تاخرت

    وشكرا لثقتك وردك الكريم واتمنى ان اوفق في التصميم علما بان لدي الصور اذا احتجنها ، الاهم من ذلك هي انواع الخط التي سيكتب في التصميم لابد له ان يكون هادي ويعبر عن المدونة وليس به اي ترميز او زخرفة

    فالاخوة المدراء شديدين بعض الشيي حتى في التاليف فدائماً يفضلون المشاركات الاصلية وبمعنى افضل ان تكون الحقيقة وليست المفبركة من قبل القنوات الاخبارية والصحف العربية .

    حتى يتم توثيق الحقيقة للزائر والعضو

    لذلك اتمنى من الله ان توفق في اجمل تصميم سيتم باذن الله

    وللامانه قمت برفع اكثر من اربع تصاميم لهم بمساعدة الاصدقاء وللاسف بدون جدوى فهم حريصون ان يعبر التصميم عن الموقع

    وشكرا للرد
    .

    AntwortenLöschen
  4. موضوع جدا هائل
    ولكن ياخي لم تشرح هل يوجد هناك اي تعديل في الاضافة
    ام انها فقط نسخ ولصق في الاداه الجديدة
    الرجاء تنويري ان كنت على صواب

    AntwortenLöschen
  5. بخصوص عملية تصغير الحجم للطول والعرض
    ياليت تحدد من وين اذهب حتى اعطيها شكل الحجم الذي يتناسب مع مدونتي

    AntwortenLöschen
  6. إضافة مميزة جدا .. والوان رائعه
    شكراا

    وظائف السعودية:
    http://www.wzief4u.blogspot.com/

    AntwortenLöschen
  7. اسف على التاخير تسلم على مرورك

    AntwortenLöschen
  8. اضافه رائعه برك الله فيك

    AntwortenLöschen

Kommentar veröffentlichen

يمنع نشر التعليقات ذات الروابط الدعائية أو تعليقات بإسلوب غير لائق أو التى تحتوى على معلومات شخصية كالبريد الإلكترونى
أعتذر عن الرد على طلبات التوزيع لضيق الوقت أو التبادل الإعلانى

لتصلك إشعارات ردود هذا الموضوع على البريد الإلكترونى أضف علامة بالمربع بجوار كلمة "إعلامى"

التنقل السريع
    -->