معهد خبراء بلوجر

معهد خبراء بلوجر (https://www.bloggerexp.com/index.php)
-   إضافات وأدوات بلوجر (https://www.bloggerexp.com/forumdisplay.php?f=10)
-   -   اضافة زر الذهاب إلى الأعلى و الأسفل مثل مدونة حياتكـُم (https://www.bloggerexp.com/showthread.php?t=9391)

مدونة حياتكـُم 08-20-2013 07:28 PM

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

لمعـاينـة الإضافة : إضغط هنـا

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

الخطوة 1. الذهاب إلى قالب، انقر على زر تحرير HTML
http://1.bp.blogspot.com/-9PJxe92QMd...-edit-html.png
الخطوة 2. حدد "توسيع قوالب القطعة" مربع
http://3.bp.blogspot.com/-wkwMDAbjcc...-templates.png
الخطوة 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(http://4.bp.blogspot.com/-7zE5N9GdDU...6/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(opa city=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/-sukwuViZaY...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(opa city=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(){va r timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout( timer)}else{evt.type='scrollstart';jQuery.event.ha ndle.apply(_self,_args)}timer=setTimeout(function( ){timer=null},special.scrollstop.latency)};jQuery( this).bind('scroll',handler).data(uid1,handler)},t eardown:function(){jQuery(this).unbind('scroll',jQ uery(this).data(uid1))}};special.scrollstop={laten cy: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)},teardow n:function(){jQuery(this).unbind('scroll',jQuery(t his).data(uid2))}}})();

$(function() {
var $elem = $('body');
$('#button_up').fadeIn('slow');
$('#button_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#button_up,#button_down').stop().animate({'opac ity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#button_up,#button_down').stop().animate({'opac ity':'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://im32.gulfup.com/96zSE.png

مدونة حياتكـُم 10-02-2013 07:26 PM

رد: اضافة زر الذهاب إلى الأعلى و الأسفل مثل مدونة حياتكـُم
 
في إنتظـار الردود المشجعــــة ..

anas-atifi 10-05-2013 12:51 PM

رد: اضافة زر الذهاب إلى الأعلى و الأسفل مثل مدونة حياتكـُم
 
قم بزيارة هده المدونة www.infokelvin.com صاحبها لديه افضل الخدمات تواصل معه

__________________


الساعة الآن 08:41 PM

Powered by vBulletin® Copyright ©2000 - 2025 Dov By EGYNT.Co
new notification by 9adq_ala7sas
Developed By Marco Mamdouh
معهد خبراء بلوجر - 2012