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

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

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

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

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

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

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

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

 

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

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 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

إذا واجهتك مشكلة فى تركيب الإضافة يمكنك طرحها بتعليق...وشكرًا

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

بقلم Dr.Rasha Omran

مطورة تطبيقات الهاتف ، سفيرة ببرنامج Women Techmakers التابع لجوجل ، أهتم بالمحتوى الرقمى وأحببت أن أدون كل ما تعلمته فى هذا الموقع للإفادة فى أعمال هادفة