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

04-29-2013, 06:08 PM

بلال حمدان

عضو شرف

تاريخ التسجيل: Aug 2012

المشاركات: 231

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

أنا : بلال حمدان

سجل معنا لتتمتع بهذه الخاصية

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

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

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

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

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

كود بلغة HTML:

]]></b:skin>

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

كود بلغة HTML:

/* 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(http://4.bp.blogspot.com/-7zE5N9GdDUk/T6rH17KE6II/AAAAAAAACeQ/aEcKRyEhxsE/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(http://3.bp.blogspot.com/-sukwuViZaYY/T6rH15A8niI/AAAAAAAACeM/YErd0S8lPGA/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) عن هذه العلامة:

كود بلغة HTML:

</body>

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

كود بلغة HTML:

<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. وأخيرا، حفظ القالب.

المصدر : http://www.computer-com.com/2013/04/blog-post_29.html

__________________
مدونة كمبيوتر كوم | دروس بلوجر , اضافات بلوجر و قوالب بلوجر
com-pc.blogspot.com

من مواضيع بلال حمدان

مواقع النشر (المفضلة)

الكلمات الدلالية (Tags)

أغلي, الاسفل, الذهاب, اضافة, بلوجر

« الموضوع السابق | الموضوع التالي »

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة لا تستطيع الرد على المواضيع لا تستطيع إرفاق ملفات لا تستطيع تعديل مشاركاتك BB code is متاحة الابتسامات متاحة كود [IMG] متاحة كود HTML معطلة قوانين المنتدى

الانتقال السريع

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
مشكل بسيط في اعلان أدسنس أعلى الصفحة	مدونة المعرفة	طلبات الدعم الفني	3	04-19-2013 02:16 AM
الحصول على ميكرونش للحصول على أعلى الأرباح	ma-coder	الربح عن طريق أدسنس	1	03-10-2013 11:53 AM
أغلي الكلمات الربحية في ادسنس لعام 2013	saheralialy	الربح عن طريق أدسنس	0	01-24-2013 12:46 AM
كيفية اضافة مواضيع ذات صلة في بلوجر	بلال حمدان	إضافات وأدوات بلوجر	0	10-03-2012 01:24 PM
اضافة الأيقونات الإجتماعية أعلى التدوينة	yosefssss	طلبات الدعم الفني	3	08-07-2012 10:56 PM

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

إضافات وأدوات بلوجر