اعلان

صفحة خطأ ):
الصفحة التي تبحث/ي عنها غير موجودة

يمكنك محاولة كتابة كلمة البحث مضبوطه أو الضغط على الزر التالي للعودة للرئيسية

الرئيسية

1‏/10‏/2012

قائمة مميزة منسدلة بثأتير جميله وشكل روعه 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(http://2.bp.blogspot.com/_jFIsHl5gfpM/THhjQQUWsXI/AAAAAAAAAto/5E96FIy3Z0Q/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="http://1.bp.blogspot.com/_jFIsHl5gfpM/THhjOWad6fI/AAAAAAAAAtg/tG7K8tSbhdM/s320/blogspacetech.gif" title="sideBar" /></a>

</div>

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

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

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

      حذف
  2. .

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

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

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

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

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

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

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

    ....

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

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

      حذف

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

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

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

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

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

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

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

    وشكرا للرد
    .

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

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

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

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

    ردحذف

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

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

جميع الحقوق محفوظة لــ بلوجر توب ©