اضافة زر الذهاب إلى أعلى و زر الذهاب إلى الاسفل في بلوجر

اضافة زر الذهاب إلى أعلى و زر الذهاب إلى الاسفل في بلوجر

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

كيفية تركيب الاضافة . تابع الخطوات :)

الخطوة 1. الذهاب إلى قالب، انقر على زر تحرير HTML

الخطوة 2. حدد "توسيع قوالب القطعة" مربع

الخطوة 3. بحث (باستخدام CTRL + F) عن الكود الاتي :

]]></b:skin>

الخطوة 4. فقط فوق هذا الرمز، الصق هذا الكود : 

/* 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: whiteurl(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEildDyfc8G09MiLCkyUpBA9APcT-of71aquipEZwQGxlG6Y1GCC-C_CfYcJjVvr-VZ1ktWrYAQbNYLnR3Bdpd2Z5xCENdNRWbtor6wpWWVDnsG19WYPhX05PoiBItDgu3Lmmlpeb5Fwm7Y/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/AVvXsEh5rpiCS9DJc2obfGpOJlwrXiGfInH-731s_JoSXgsLyw-ZW68zQzpvlJ5sebQrMMdytNj6AXixx7GEFNNWJusLQ9kbxeZmIIUqDhWI5ewNP9v6BOPuxbYThFpWR5iXgVYPTGCCiFJq_3Q/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. الآن بحث (CTRL + F) عن هذه العلامة:

</body>

الخطوة 6. وفوق ذلك، الصق الكود التالي : 

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

الخطوة 7. وأخيرا، حفظ القالب.

Tweet

تنبيه : أرجو عدم نسخ المحتوى بدون ذكر المصدر و السلام

بقلم المطورون العرب

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

تعليقك يساعدنا على المواصلة و يدعمنا نفسيا فلا تبخل علينا برأيك

قسم : اظافات بلوجر