دليل المدون

2015-06-20

أضف أزرار الإتجاه أعلى أو أسفل الصفحة إلى بلوجر

بسم الله الرحمن الرحيم

والصلاة والسلام على أشرف المرسلين

سيدنا محمد وعلى آله وصحبه أجمعين

من الأدوات الهامة التى تساعد الزوار على تصفح موقعك بسهولة هى أداة زر الصعود إلى أعلى أو الإتجاه إلى أسفل الصفحة ، خصوصًا إذا كانت صفحات موقعك تحتوى على مواضيع ومقالات طويلة.
up and down button
توجد العديد من الطرق لإضافة مثل هذه الأداة إعتمادًا على تقنيات مختلفة ، فمنها من يعتمد على تقنية Css وإضافات أخرى تعتمد على Javascript أو تقنية JQurey وفى هذا الموضوع سأعرض الطريقتين والفرق بينهما لتختار من بينهم ما يناسب موقعك.

زر العودة إلى أعلى أو الذهاب لأسفل الصفحة بإستخدام تقنية jQuery

ما يميز هذه الأداة هو سهولة الإستخدام مع وجود  تأثير التلاشى Fade effect أثناء الصعود لأعلى الصفحة أو الهبوط إلى الأسفل.
up-down-scroll 

تركيب الإضافة لمدونات بلوجر

1. إذهب إلى لوحة تحكم مدونتك ثم إختر قالب ( لاتنس الإحتفاظ بنسخة إحتياطية من القالب)
2. تحرير Html
3. قم بالبحث عن الكود التالى بإستخدام لوحة المفاتيح Ctrl+F
]]></b:skin>
ثم قم بلصق الكود التالى فوقه مباشرة
   /* Up and Down Buttons with jQuery
    ----------------------------------------------- */
    .button_up{
    padding:7px; /* Distance between the border and the icon */
    background-color:white;
    border:1px solid #CCC; /* Border Color */
    position:fixed;
   
 background: white 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimKESO693Iw4gB9_oSl03fMaNM5bZ0Qu2D5v3Asw3DF3NtYrexctT6znXhJLCns32RzjRxFCuslLv7WE4oxnhMcSCHMISabGnt5STouR46Odn9zt1gS5J-BZ98njRDFYwDo3QWkypaGt4/s16/arrow_up.png)
 no-repeat top left;
    background-position:50% 50%;
    width:20px; /* Button's width */
    height:20px; /* Button's height */
    bottom:280px; /* Distance from the bottom */
    right:5px; /* Change right to left if you want the buttons on the left */
    white-space:nowrap;
    cursor: pointer;
    border-radius: 3px 3px 3px 3px;
    opacity:0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    }
    .button_down{
    padding:7px; /* Distance between the border and the icon */
    background-color:white;
    border:1px solid #CCC; /* Border Color */
    position:fixed;
   
 background: white 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5cfNxEXAn0deRdS-ererr_d4PcAvoplAc8ithJu5iZxbG4nftl1OMWzoR3NJFnXb4Fg-ty8Vskk_kCOPRLSa7TnF4uXHhn_203AP2PVB6awTJCJE_MpwbIwUeIznj3LQw6vkz4QlBDOU/s16/arrow_down.png)
 no-repeat top left;
    background-position:50% 50%;
    width:20px; /* Button's width */
    height:20px; /* Button's height */
    bottom:242px; /* Distance from the bottom */
    right:5px; /* Change right to left if you want the buttons on the left */
    white-space:nowrap;
    cursor: pointer;
    border-radius: 3px 3px 3px 3px;
    opacity:0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    }
 

5. بعد ذلك قم بالبحث عن الكود التالى
</body>
 ثم قم بلصق الكود التالى فوقه مباشرة
** إذا كان السطر الملون باللون الأحمر موجود فى القالب فلا داعى إلى إضافته مرة أخرى
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

    <div class='button_up' id='button_up' style='display:none;'/>
    <div class='button_down' id='button_down' style='display:none;'/>

    <script>
    //<![CDATA[
   
 (function(){var special=jQuery.event.special,uid1='D'+(+new 
Date()),uid2='D'+(+new 
Date()+1);special.scrollstart={setup:function(){var 
timer,handler=function(evt){var 
_self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var
 timer,handler=function(evt){var 
_self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();

    $(function() {
    var $elem = $('body');
    $('#button_up').fadeIn('slow');
    $('#button_down').fadeIn('slow');
    $(window).bind('scrollstart', function(){
    $('#button_up,#button_down').stop().animate({'opacity':'0.2'});
    });
    $(window).bind('scrollstop', function(){
    $('#button_up,#button_down').stop().animate({'opacity':'1'});
    });
    $('#button_down').click(
    function (e) {
    $('html, body').animate({scrollTop: $elem.height()}, 800);
    } );
    $('#button_up').click(
    function (e) {
    $('html, body').animate({scrollTop: '0px'}, 800);
    } );});
    //]]>
    </script>
6. قم بمعاينة القالب وحفظه

زر العودة إلى أعلى أو الذهاب لأسفل الصفحة بتقنية CSS

بالرغم أن إستخدام تقنية jQuery من حيث التنسيق تكون أفضل ولكنى شخصيًا أفضل إستخدام تقنية css لهذه الأسباب:
  • أحيانًا يوجد تعارض بين مكتبات jQuery عند وجود أدوات أخرى تستخدم نفس التقنية مما يؤدى إلى تعطل عمل أحد هذه الأدوات.
  • إستخدام العديد من الأدوات التى تعتمد على الجافاسكريبت أو جي كويرى يؤدى إلى بطء تحميل صفحات الموقع.
لذلك أفضل التخلى عن التأثيرات الجميلة الموجودة بإضافة jQuery وإستبدالها بإضافة بسيطة تعتمد على css ,Html
وقد قدمت إضافة مشابهة لها وهى إضافة القفز لجزء معين من الموضوع وبنفس الفكرة يمكن القفز لأعلى أو أسفل الصفحة.

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

كيفية تركيب الإضافة لمدونات بلوجر:
1. إذهب إلى لوحة تحكم بلوجر ثم إختر تخطيط
2. أضف أداة Html & javascript
3. إنسخ الكود التالى وألصقه بالأداة
up-down-css
 /* Up and Down Buttons with Css By http://www.condaianllkhir.com/
    ----------------------------------------------- */
<span style="background-color: #cc0000; bottom: 45px; position: fixed; right: 10px;border-top-left-radius: 5px;
border-top-right-radius: 5px;"><a href="#"><img border="0" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbVx1_8m1qZ7zVw5rbL1_B4OsXxYkna7CR6NOVX746vidHwsCHP3ql2eL78IB3Tl2OTfwge9VXHB6wNTKL80ZvzdckfFyYPVX_W4AiFTXMO7m-1x91U2oC7jq8xkHuY8t2B2fRLyrxhmjm/s200/up.png" width="25" /></a></span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>

<span style="background-color: #cc0000; bottom: 20px; position: fixed; right: 10px;border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;"><a href="#footer"><img border="0" height="20" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2zmRouVUvYGHmMeux4JF0HqXL1EE8A8oLOFSvt4SGoLSnf67yzHKr3o5zcXdV3iylnh8pXK1sMV3ZdAa8135ozi8cdFQKVGpOlaE7aX28YXIi1EAE4JMtZJc1oUjMkKWwlhJbjpc46qCr/s200/down.png" width="25" /></a></span></div>
<br /></div>
  • يمكنك تغيير لون الإضافة بما يناسب تنسيق موقعك بتغيير أكواد الألوان الملونة باللون الأصفر بالكود (يمكن الإستعانة بمولد أكواد الألوان)
  • أحيانًا فى بعض القوالب يسمى الفوتر "footer" وقوالب أخرى يسمى "footer-1" لذلك يمكن إستبدال الجزء الملون باللون الأخضر بالتسمية الموجودة بقالب مدونتك
  • إذا كنت ترغب أن يقفز الزر إلى التعليقات قم بإستبدال الجزء الملون بالأخضر بـ  comments
إذا واجهتك مشكلة فى تركيب الإضافة يمكنك طرحها بتعليق...وشكرًا
تنبيه : المرجو عدم نسخ الموضوع بدون ذكر مصدره المرفق بالرابط المباشر للموضوع الأصلي وإسم المدونة وشكرا
تصميم مواقع إلكترونية و تطبيقات بأقل الأسعار

هناك 4 تعليقات

  1. شكرا اختي :)
    ممكن انشر رابط مدونتي؟
    لا مش ممكن خلاص
    لو ممكن يبقى اشكرك

    ردحذف
  2. شكرا ع الاكواد


    Elmo7taref

    ردحذف
  3. شكرا على الاضافة الرائعة المرجو زيارةمدونتي وشكرا

    ردحذف

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

Privacy-Policy | إعلن لدينا
جميع الحقوق محفوظة لــ كن داعيا للخير 2011-2022 ©

تصميم كن مدون