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

اعلانات
بحـث
 
 

نتائج البحث
 


Rechercher بحث متقدم

اعلانات
المواضيع الأخيرة
» لـــحـــظـة لــقــــــاء
الإثنين 10 ديسمبر 2012, 9:02 pm من طرف نانا محمد

» ليـــــــــــــــــــه كـــــــل النـــاس ظلمــــــــــانى
الإثنين 03 ديسمبر 2012, 9:01 pm من طرف نانا محمد

» أشهد يا بيتنا و سجل دمعتى
الأحد 25 نوفمبر 2012, 3:05 am من طرف نانا محمد

» كلوي كارداشيان تجلس على حضن سايمون كويل:"هل انتَ متحمس؟"
الخميس 22 نوفمبر 2012, 6:26 pm من طرف شاعر

» يـا دوحة المجد من فهرٍ ومن مضر
الخميس 22 نوفمبر 2012, 6:17 pm من طرف شاعر

»  ﻓـﻲ ﺍﻟـﺤُــﺐ ، ﻳُـﻠــﻐـﻰ ﺍﻟـﻤـﻨـﻄـﻖ
الخميس 22 نوفمبر 2012, 6:06 pm من طرف شاعر

» كلمات اغنية امال ماهر "رايح بيا فين " 2012
الخميس 22 نوفمبر 2012, 7:20 am من طرف شاعر

» « حبر العيون » راشد الماجد
الخميس 22 نوفمبر 2012, 7:18 am من طرف شاعر

»  الطيور المهاجرة.
الثلاثاء 20 نوفمبر 2012, 11:52 am من طرف الزهراء

المتواجدون الآن ؟
ككل هناك 1 عُضو حالياً في هذا المنتدى :: 0 عضو مُسجل, 0 عُضو مُختفي و 1 زائر

لا أحد

[ مُعاينة اللائحة بأكملها ]


أكبر عدد للأعضاء المتواجدين في هذا المنتدى في نفس الوقت كان 32 بتاريخ السبت 04 أغسطس 2012, 8:13 pm
احصائيات
alexa
فتحه اجباريه
اعلانات

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

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

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

مُساهمة من طرف شاعر في السبت 18 أغسطس 2012, 11:35 am

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


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



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


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

الخطوات:

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

ونقوم بإلصاق هذا الكود قبله .
الكود:
[font=tahoma]link href='[/font]https://abuiyad.googlecode.com/svn/Ayoub-Etmaiti-menu-fixed-abu-i.css[font=tahoma]' rel='stylesheet'/>[/font]



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

[font=tahoma] <script type='text/javascript'>[/font]

[font=tahoma]            $(function() {[/font]

[font=tahoma]                $(window).scroll(function(){[/font]

[font=tahoma]                    var scrollTop = $(window).scrollTop();[/font]

[font=tahoma]                    if(scrollTop != 0)[/font]

[font=tahoma]                        $('#nav').stop().animate({'opacity':'0.2'},400);[/font]

[font=tahoma]                    else    [/font]

[font=tahoma]                        $('#nav').stop().animate({'opacity':'1'},400);[/font]

[font=tahoma]                });[/font]

               

[font=tahoma]                $('#nav').hover([/font]

[font=tahoma]                    function (e) {[/font]

[font=tahoma]                        var scrollTop = $(window).scrollTop();[/font]

[font=tahoma]                        if(scrollTop != 0){[/font]

[font=tahoma]                            $('#nav').stop().animate({'opacity':'1'},400);[/font]

[font=tahoma]                        }[/font]

[font=tahoma]                    },[/font]

[font=tahoma]                    function (e) {[/font]

[font=tahoma]                        var scrollTop = $(window).scrollTop();[/font]

[font=tahoma]                        if(scrollTop != 0){[/font]

[font=tahoma]                            $('#nav').stop().animate({'opacity':'0.2'},400);[/font]

[font=tahoma]                        }[/font]

[font=tahoma]                    }[/font]

[font=tahoma]                );[/font]

[font=tahoma]            });[/font]

[font=tahoma]        </script>[/font]


وبعد هذا سنقوم بالبحث على </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='http://3.bp.blogspot.com/-80DxERf30RE/UBWOpjpQFII/AAAAAAAABB8/xOILGMsPazI/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>
وهذا هو كل شئ مع تحياتي

avatar
شاعر
Admin
Admin

عدد المساهمات : 859
نقاط : 2302
السٌّمعَة : 0
تاريخ التسجيل : 29/07/2012
العمر : 32

معاينة صفحة البيانات الشخصي للعضو http://mohammedsaber341985.blogspot.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة


 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى