قائمة أفقية ثابتة لمدونات بلوجر

www.monte-escalier-prix.org

شاركه على +Googleأضفه الى Deliciousشاركه على Twitterشاركه على Facebookأضفه الى StumbleUponأضفه الى Digg

السلام عليكم ورحمة الله اليوم أقدم لكم اضافة جميلة ويحتاجها الكثيرة منا ونرى انها مستعملة  في أشهر المواقع الإجتماعية ، إنها قائمة افقية ثابتة اي تتبعك وانت تتصفح المدونة اذا نزلت تنزل معك واذا صَعِدْتَ صَعَدَتْ معك، أقدم لكم صورة الأداة بعد ان قمت بتعريبها و تطويرها:

معاينة الإضافة 

- كما نلاحظ ان القائمة تحتوي على سهم يقوم بإصعادنا الى الاعلى واخر اتجاهه الى الأسفل يقوم بإنزالنا وبعدها نرى 5 ازرار يمككنا وضع روابطنا فيها ويمكننا زيادة العدد او العكس، ايضا نرى مربع بحث في الاضافة الأصل الغير المعربة مربع البحث لا يعمل وانا جعلته يعمل وبشكل جيد كما ينبغي,عندما ننزل القائمة تصبح شفافة نوعا ما وعندما نضع المؤشر عليها تصبح عادية كما كانت في السابق


الأن حان وقت عرض الاكواد لوضع هذه القائمة الرائعة في مدونتنا:

الخطوات: 

أولا سنقوم بأخذ بعض الإحطياتات، سنقوم بحفظ القالب من اجل تفادي حصول اي مشكلة ، ثم نتجه الى تحرير html ، ثم نضغط على متابعة.نقوم بالضغط على Cntrl + F اذا كنت تستخدم متصفح جديد مثل كرومي او موزيلا ونبحث عن :  </head>

ونقوم بإلصاق هذا الكود قبله .

<link href='https://abuiyad.googlecode.com/svn/Ayoub-Etmaiti-menu-fixed-abu-i.css' rel='stylesheet'/>

<script src='http://helplogger.googlecode.com/svn/trunk/html/[helplogger.blogspot.com]jquery-1.3.2.js' type='text/javascript'/>

 <script type='text/javascript'>

            $(function() {

                $(window).scroll(function(){

                    var scrollTop = $(window).scrollTop();

                    if(scrollTop != 0)

                        $(&#39;#nav&#39;).stop().animate({&#39;opacity&#39;:&#39;0.2&#39;},400);

                    else   

                        $(&#39;#nav&#39;).stop().animate({&#39;opacity&#39;:&#39;1&#39;},400);

                });

               

                $(&#39;#nav&#39;).hover(

                    function (e) {

                        var scrollTop = $(window).scrollTop();

                        if(scrollTop != 0){

                            $(&#39;#nav&#39;).stop().animate({&#39;opacity&#39;:&#39;1&#39;},400);

                        }

                    },

                    function (e) {

                        var scrollTop = $(window).scrollTop();

                        if(scrollTop != 0){

                            $(&#39;#nav&#39;).stop().animate({&#39;opacity&#39;:&#39;0.2&#39;},400);

                        }

                    }

                );

            });

        </script>

وبعد هذا سنقوم بالبحث على </body> بنفس الطريقة التي استخدمناها سابقا ونقوم بإلصاق الكود التالي قبله أيضا مع تعديل ما يناسب:

<div id='nav'>

<ul>

<li><a class='top' href='#'><span/></a></li>

<li><a class='bottom' href='#bottom'><span/></a></li>

<li><a href='الرابط-1'><span>عنوان الرابط 1</span></a></li>

<li><a href='الرابط-2'><span>عنوان الرابط 2</span></a></li>

<li><a href='الرابط-3'><span>عنوان الرابط 3</span></a></li>

<li><a href='الرابط-4'><span>عنوان الرابط 4</span></a></li>

<li><a href='الرابط-5'><span>عنوان الرابط 5</span></a></li>

<li class='search1'>

<form action='/search' id='search1' method='get'>

        <input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;ابحث في المدونة...&quot;;}' onfocus='if (this.value == &quot;ابحث في المدونة...&quot;) {this.value = &quot;&quot;}' type='text' value='ابحث في المدونة...'/>

        <input id='searchbutton' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXXxnM70qj7bXAB3flbA83CUfnK-yh3ytdxYhe_S8zFo00fsciJFzhyphenhyphenwIMZjJO8du-ZGUdxNrxN2Ltl1sbLVQfNnI04BO5LcMWTKBBEqxziAzubZ2qNwVYcl0I2VHEgTZbpyvw6IHbjcb_/s1600/search-ico-ayoub-etmaiti.png' type='image'/>

    </form>

   

</li>

</ul>

</div> 

<div id='top'/>

<div class='desc'/>

<div id='bottom'/>

<div class='scroll'/>

نقوم بتغير الكلمات :
الرابط-1 ، 2 ، 3 ، 4  و  5   بروابطنا التي نريد ان يتم التوجيه اليها بعد الظغط على الزر ، ونغير العناوين : عنوان الرابط 1
، 2 ، 3 ، 4 و 5  بالكلمة التي ستظهر على زر

 مثال:

<li><a href='ayoub-etmaiti.blogspot.com'><span>أيوب التمايتي</span></a></li>

وهذا هو كل شئ مع تحياتي اخوكم : 

Ayoub Etmaiti.

بقلم mohammed glal

مهندس مصري ومتابع جيد للأخبار والمستجدات التقنية والاعلام الاجتماعى ومهتم بالاعلان عن الشركات الناشئة عبر مدونته الشخصية (مدونة راصد تقني), كاتب سابق على مدونة عالم الإبداع ومشرف سابق فى موقع نقطة التطوير ومنتدى الديوان -تم اغلاقه-. أحب القراءة والترجمة للمستجدات التقنية والتكنولوجية. المالك الحالي لمدونة أبو إياد.

روابط هذه التدوينة قابلة للنسخ واللصق
URL
HTML
BBCode

www.monte-escalier-prix.org

تنبيه : المرجوا عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا

www.monte-escalier-prix.org