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

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 قابل للتعديل.

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

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

محمد جمال النادى يقول... @ 10 يونيو، 2010 7:33 ص

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

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

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

nOmO يقول... @ 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 م

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

Rotana baba يقول... @ 27 يوليو، 2013 12:46 ص

درس اليوم هو كيفية حذف خلفية الكروما بواسطة برنامج الفوتوشوب و وضع خلفية عليها .هذا ضمن سلسة دروس " بدقيقة" وهي عبارة عن مجموعة دروس خلال دقيقة في مختلف برامج المونتاج و التصميم و غيرها .
لمن لا يعرف الكروما هي من الوسائل http://www.arabie3lan.com الشيخ الروحاني
التقنية الحديثة التي يستعملها المخرج لإنجاز مشاهد صعبة ومستحيلة كالإنسان الطائر، وتستعمل في الأفلام أو المسلسلات الشيخ الروحاني أو لإعداد ديكور افتراضي للبرامج التليفزيونية، وهي خلفية تكون الشيخ الروحاني غالباً باللون الأخضر والأزرق يتم إزالتها ووضع صور أو فيديو في مكان الخلفية. (غالباً يستعمل اللونين الأخضر أو الأزرق لأنهما لا يشبهان لون بشرة الإنسان)

إرسال تعليق