قائمة روابط متحركة بشكل جميل لمدونات البلوجر

09‏/06‏/2010
بسم الله الرحمن الرحيم
مرحبا بكم في اضافة اخرى لمونات البلوجر اتمنا ان تنال اعجابكم
الأضافة هي قائمة روابط متحركة على جانب القالب (المدونة) على الجانب الأيسر بشكل جميل وجذا وطريقة العرض بشكل رائع وجميل ومتوافقة مع جميع القوالب والمتصفحات دون التأثير على عمل المدونة.


لمعاينة الأضافة اضغط هنا


لن اطول عليكم في الكلام سأبد بالشرح :.
اذهب الى المسار التالي
تخطيط >عناصر الصفحة > اضافة اداة > Html / Javascript
انسخ هذا الكود والصقه داخل الأداة

<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/prototype.js" type="text/javascript"></script>
<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/effects.js" type="text/javascript"></script>
<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/side-bar.js" type="text/javascript"></script>
<style>
body{
    font-size:75%;
}
a{
    outline: none;
}
a:active{
    outline: none;
}
#sideBar{
text-align:right;
}
#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://i49.tinypic.com/121abrq.jpg);
    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>side<span>bar</span></h2>
                    <ul>
                <li><a href="link 1">text 1</a></li>
                <li><a href="link 2">text 2</a></li>
                <li><a href="link 3">text 3</a></li>
                <li><a href="link 4">text 4</a></li>

                  </ul>
                </div> </div>
    <a id="sideBarTab" href="#"><img alt="sideBar" src="http://i46.tinypic.com/ao8h9u.jpg" title="sideBar"/></a>
</div>
      

    *شرح الأوان*    
الأحمر:. لوضع رابط النص الذي بالون الأخضر.
الأخضر:. لوضع نص لرابط الذي بالون الأحمر
الأزرق:. لوضع عنوان لقائمة الروابط. 
ملاحضة :. هذا كود css قابل للتعديل.

اي استفسار عن تركيب الأضافة او اي سؤال عن ظهور الأضافة انا جاهز للجميع
اخوكم مهند ناصر

16 تعليق على قائمة روابط متحركة بشكل جميل لمدونات البلوجر

Unknown يقول... @ 10 يونيو 2010 في 7:33 ص

شكرا لك على هذه الأداة وعلى مجهودك ولكن المشكلة هى تغيير الأكواد فأرجو إيجاد أداة أسهل , وشكراً (أخوك محمد جمال)

مهند ناصر يقول... @ 11 يونيو 2010 في 9:31 ص

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

Dros4U يقول... @ 15 يونيو 2010 في 8:44 م

السلام عليكمـ

اضافة مميزة :)

شكرا لك ،،

بالتوفيق ،،

أبومسلم يقول... @ 16 يونيو 2010 في 5:43 م

بارك الله فيك أستاذنا مهند . تم تشغيل الاداة وهى جميلة جدا بارك الله فيك . وفى انتظار جديدك إن شاء الله .
مدونة العبيد الفقير
http://mte31mte.blogspot.com/

مهند ناصر يقول... @ 17 يونيو 2010 في 6:11 م

nomo :. وعليكم السلام والرحمة والأكرام شكرا على مرورك وهذا من زوقك.

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

اخوكم مهند ناصر

カリム 浜田 يقول... @ 26 يونيو 2010 في 1:33 م

لم تنجح مع ياغالى

مهند ناصر يقول... @ 27 يونيو 2010 في 8:48 ص

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

الأفق العربى يقول... @ 3 أغسطس 2010 في 6:14 م

أخى للأسف كلما وضعت روابط لا تعمل للأسف عندى

مهند ناصر يقول... @ 3 أغسطس 2010 في 7:05 م

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

مهند ناصر

Dr/ walaa salah يقول... @ 20 أغسطس 2010 في 1:44 م

استاذ مهند انا عملتها بس كل ما اضغط السهم اللي في السايد بار يفتحلي المدونه تاني ومبيظهرش الروابط اللي انا حاطاها

مهند ناصر يقول... @ 20 أغسطس 2010 في 2:43 م

Dr/ walaa salah :اهلا بك اخي الكريم اخي اتوقع ان قالب مدونتك يحتوي على كود فتح الروابط بصفحه جديدة؟؟

Dr/ walaa salah يقول... @ 20 أغسطس 2010 في 3:02 م

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

ليلى يقول... @ 22 ديسمبر 2010 في 11:15 م

السلام عليكم اخي

اذا كنت انت من صمم الكود ..اريد ملفات الجافا لكي ارفعها من جديد فقد حذفت من الموقع المضيف والان لا تعمل لدي

amly يقول... @ 23 ديسمبر 2010 في 5:24 م

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

مهند ناصر يقول... @ 23 ديسمبر 2010 في 6:05 م

ليلى : للأسف لا املك الكود.

amly : نعم للأسف كود الجافا سكريبت تم حذفه من قبل الموقع الرئيسيي للأسف ولا املك الكود حاليا.


تحياتي

amly يقول... @ 23 ديسمبر 2010 في 9:30 م

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

إرسال تعليق