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

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



- كما نلاحظ ان القائمة تحتوي على سهم يقوم بإصعادنا الى الاعلى واخر اتجاهه الى الأسفل يقوم بإنزالنا وبعدها نرى 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='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>

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

هناك 31 تعليقًا:

  1. صراحةً موضوعك مميز جدا وقالب مدونتك مميز :D
    شكرا اخى أيوب

    ردحذف
  2. رائع أخى شكراً لمجهودك

    ردحذف
  3. @King Sherif

    شكرا عزيزي لتعليقك وتشجيعك ، وشكرا ايضا لزيارتك لمدونتي وبداء رأيك في قالبها :D

    ردحذف
  4. @محمد شريف

    مرحبا اخي محمد شكرا لتعليقك وابداء رأيك ، وعفوا على كل شئ انا رهن الخدمة في كل وقت.

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

    ردحذف
  6. @أبو إياد


    عفوا عزيزي محمد تستاهل كل الخير.

    ردحذف
  7. اخي العزيز جربت الطريقه بس ماضهرت عندي ياريت اجاوبني
    وهذا رابط مدونتي
    http://7rem-alsultan.blogspot.com/
    وشكرا

    ردحذف
  8. @Ahmed Al Ezzi

    ارسلي القالب ورح حاول

    ردحذف
  9. شكرا جزيلا
    لا تنسوا زيارة مدونتي الجديدة http://cafe-arb.blogspot.com

    ردحذف
  10. عفوا اخي ومن هذا التعليق اريد ان اخبر كل من قام بنقل هذا الموضوع وحذف حقوقي انني لن اسامح وانا اعرفهم لانني اتابع الموضوع --

    ردحذف
  11. أزال المؤلف هذا التعليق.

    ردحذف
  12. شكرًا لك أخي على الإضافة الجميلة
    لكن مهما حاولت لا تظهر لي بالشكل المطلوب!
    طبقت الخطوات بحذافيرها ولم أنسى سطرًا
    وبعد التطبيق أجد أن الإضافة تظهر في في نهاية المدونة
    وليست على شكل شريط، بل تظهر لي الروابط بشكل إعتيادي فوق بعضها
    http://img02.arabsh.com/uploads/image/2012/08/17/0e3e454964fa04.jpg
    أرجو المساعدة

    ردحذف
  13. @Lovely Dream

    إبحث عن /B:skin

    وضع هذا الكود فوقها


    #nav{
    height:35px;
    border-bottom:1px solid #ddd;
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    background:#fff url(http://2.bp.blogspot.com/-bckLuWC19WY/T0fJrpz6iKI/AAAAAAAAA54/MC8DKKhTLIo/s1600/navbar.png) repeat-x center right;
    z-index:999999;
    }
    #nav ul{
    height:25px;
    list-style:none;
    margin:6px auto 0px auto;
    width:600px;
    }
    #nav ul li{
    display:inline;
    float:right;
    margin:0px 2px;
    }
    #nav a{
    font-size:11px;
    font-weight:bold;
    float:right;
    padding: 2px 4px;
    color:#999;
    text-decoration: none;
    border:1px solid #ccc;
    cursor: pointer;
    background:transparent url(http://4.bp.blogspot.com/-ShWV7a_7odE/T0fKLcy3gxI/AAAAAAAAA6A/ub4aoZ_NKdI/s1600/overlay.png) repeat-x center right;
    height:16px;
    line-height:16px;
    }
    #nav a:hover{
    background:#D9D9DA none;
    color: #fff;
    }
    #nav a.top span, #nav a.bottom span{
    float:right;
    width:16px;
    height:16px;
    }
    #nav a.top span{
    background:transparent url(http://3.bp.blogspot.com/-qZmlI1Nz7DM/T0fKY6MehSI/AAAAAAAAA6I/kb4LSXK4SpI/s1600/top.png) no-repeat center center;
    }
    #nav a.bottom span{
    background:transparent url(http://3.bp.blogspot.com/-kYbPC6fbW8E/T0fKkpgn4uI/AAAAAAAAA6Q/1EMaMEmc51o/s1600/bottom.png) no-repeat center center;
    }

    #nav ul li.search1{
    float:left;
    margin-left:-100px ;
    }
    #nav input[type="text"]{
    float:right;
    border:1px solid #ccc;
    margin:auto;
    padding:2px 2px 2px 2px;
    }
    input.searchbutton{
    border:1px solid #ccc;
    padding:1px;
    cursor:pointer;
    width:30px;
    height:22px;
    margin:auto;
    background:#E8E9EA url(http://2.bp.blogspot.com/-Z8TTNFUcQmQ/T0fKvZHRH_I/AAAAAAAAA6Y/FFtC1_2_snA/s1600/search.png) no-repeat center center;
    }
    input.searchbutton:hover{
    background-color:#D9D9DA;
    }

    ردحذف
  14. شكرًا جزيلاً.. تمت الإضافة بنجاح : )

    ردحذف
  15. @Lovely Dream

    عفوا لأي إستفسار راسلني من هنا ayoub-etmaiti.blogspot.com

    ردحذف
  16. هممم، عندما أقوم بالضغط على رابط ملفك في الهوتميل يحولني إلى صفحة "الأشخاص" الخاصة بي...

    لدي إستفسار آخر،
    الشريط لدي لا يبهت عندما أقوم بتنزيل الصفحة نحو الأسفل
    أي خاصية الشفافية لا تعمل ^^"

    ردحذف
  17. أزال المؤلف هذا التعليق.

    ردحذف
  18. تم المراسلة على الإيميل

    ردحذف
  19. مشكور اخى الفاضل :
    http://www.arabi-b.blogspot.com

    ردحذف
  20. https://sites.google.com/site/lightbox007/emoticon/64%2819%29.png

    ردحذف
  21. @السيد ابو جبل

    مبروك وارا انها تعمل على أكمل وجه في حالة ما كنت تريد تغيير الألوان قم بتفكيك ملف css وعدله على راحتك..

    ردحذف
  22. لا تعمل بمدونتى رجاء الحل http://abotgar.blogspot.com/

    ردحذف
  23. السلام عليكم ورحمة الله وبركاته
    احييكم على هذه الجهود الرائعة والتي افادة كثيرا من المدونين وانا من اكثرهم
    وليا طلب بسيط
    ارجو ان اجده لديكم
    هل استطيع جعل قائمة الصفحات الافقية تكون عائمة
    وشكرا جزيلا لكم
    م محمد جمال
    صاحب مدونة عالم الهندسة المعمارية
    اتشرف بزيارتكم
    http://woarch.blogspot.com/

    ردحذف
  24. @mohamed

    هذا ما شرحته في هذا الدرس هو كيف تجعل القائمة تتبعك الى كل مكان

    ردحذف
  25. @محمد ابوتجار


    أولا قلي كيف تظهر وبعد ذلك ساساعدك

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية