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

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

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

05-01-2013, 07:09 PM	#2
imo7amedi مدون جديد تاريخ التسجيل: Apr 2013 المشاركات: 16	رد: اضافة زر الذهاب إلى أعلى و زر الذهاب إلى الاسفل في بلوجر أنا : imo7amedi سجل معنا لتتمتع بهذه الخاصية الف شكر تسلم ايدك __________________ من مواضيع imo7amedi اريد زر التسجيل في المدونة عن طريق الفيس بوك احصـل على دومين .com مجــاني اريد حذف اداة من القالب مشكلة في السلايد شو لا يعمل

05-01-2013, 09:20 PM	#3
عالم الجوال مدون جديد تاريخ التسجيل: May 2013 المشاركات: 25	رد: اضافة زر الذهاب إلى أعلى و زر الذهاب إلى الاسفل في بلوجر أنا : عالم الجوال سجل معنا لتتمتع بهذه الخاصية شكرااا لك على الإضافة __________________ من مواضيع عالم الجوال (عالم الجوال) تحتاج اراءكم وتشجيعكم تبادل اعلاني مع مدونة عالم الجوال جرب اضافات بلوجر قبل اضافتها الى مدونتك تبادل إعلاني مع عالم الجوال أول قالب أصممه بنفسي من الصفر رأيكم يهمني

05-02-2013, 10:43 PM	#4
kingnt مدون جديد تاريخ التسجيل: Apr 2013 المشاركات: 72	رد: اضافة زر الذهاب إلى أعلى و زر الذهاب إلى الاسفل في بلوجر أنا : kingnt سجل معنا لتتمتع بهذه الخاصية ما شاء الله جزاك الله كل خير __________________ موقع كينج نت الدعم الفنى لمدونات بلوجر http://www.kingnt.com (( لا خير فى كاتم العلم )) من مواضيع kingnt تثبيت البرامج الهامة بعد عملية الفورمات تلقائيا installs programs automatically الحصول على جميع الايقونات المتنوعة مجانا Free icon حل مشكلة لم يتم العثور على ملف Normaliz.dll فشل تطبيق بدء التشغيل فك الملفات المضغوطة بدون برامج free archiver حل مشاكل الكمبيوتر والأنترنت تحويل فيديوهات اليوتيوب الى صور متحركة بدون برامج youtube gif maker

05-04-2013, 12:25 PM	#5
haitham max مدون جديد تاريخ التسجيل: Mar 2013 المشاركات: 35	رد: اضافة زر الذهاب إلى أعلى و زر الذهاب إلى الاسفل في بلوجر أنا : haitham max سجل معنا لتتمتع بهذه الخاصية <style> /--------Touch Me Sharing Widget ------/ .touchme a { display:block; height:50px; width:50px; padding:0 4px; float:left; background:transparent url() no-repeat; -webkit-transition: ease-in 0.2s all; -moz-transition: ease-in 0.2s all; -o-transition: ease-in 0.2s all; -ms-transition: ease-in 0.2s all; transition: ease-in 0.2s all; cursor:pointer; } .touchme a.googleplus { background-position: 0px -58px; } .touchme a.googleplus:hover { background-position: 0px 0px; } .touchme a.twitter { background-position: 0px -290px; } .touchme a.twitter:hover { background-position: 0px -232px; } .touchme a.facebook { background-position: 0px -406px; } .touchme a.facebook:hover { background-position: 0px -348px; } .touchme a.rss { background-position: 0px -174px; } .touchme a.rss:hover { background-position: 0px -116px; } </style> <div class='touchme'> <!--RSS--> <a class='rss' href="http://feeds.feedburner.com/xxxxxxxxxxxxxxxxx" rel='external nofollow' target='_blank'></a> <!--Google Plus--> <a class='googleplus' href="xxxxxxxxxxxxxxxx" rel='external nofollow' target='_blank'></a> <!--Facebook--> <a class='facebook' href="xxxxxxxxxxxxxxxx" rel='external nofollow' target='_blank'></a> <!-- Twitter --> <a class='twitter' href="xxxxxxxxxxxxxxxx" rel='external nofollow' target='_blank' ></a> </div> __________________ من مواضيع haitham max ارجو دخول المحترفين قالب مدونة سعيد مجانا علي كن محترف كل من يقوم بنسخ تدويناتك ينسخ رابط موقعك تبادل اعلاني مع احترف الفيس بوك ارجو حل لهذه المشكلة ارجوكم

05-05-2013, 04:24 PM	#6
amira_amira مدون جديد تاريخ التسجيل: May 2013 المشاركات: 44	رد: اضافة زر الذهاب إلى أعلى و زر الذهاب إلى الاسفل في بلوجر أنا : amira_amira سجل معنا لتتمتع بهذه الخاصية تسلم على الاضاقه __________________ من مواضيع amira_amira طلب تغيير لون المواضيع بخصوص القوائم الراسيه بخصوص الصفحات ترقيم الصفحات طلب كود لعمل جدول مع تغيير الالوان بداخله

05-09-2013, 08:45 AM	#7
مرادكوووم مدون نشيط تاريخ التسجيل: Apr 2013 المشاركات: 113	رد: اضافة زر الذهاب إلى أعلى و زر الذهاب إلى الاسفل في بلوجر أنا : مرادكوووم سجل معنا لتتمتع بهذه الخاصية ما شاء الله جزاكم الله خيرا __________________ تحميل برامج مجانية من مواضيع مرادكوووم تحميل برنامج Quick Heal Antivirus Pro 16.00 قاهر الفيروسات تحميل برنامج DriverPack Solution 13 R393 Final تعاريف الاجهزة تحميل برنامج Windows 7 Manager 5.1.0 كاملا تحميل برنامج Spotflux 2.10.7 لفتح المواقع المحجوبة تحميل برنامج BS.Player Free 2.69 لتشغيل الفيديو

05-13-2013, 09:59 AM	#8
trucsinformatique مدون جديد تاريخ التسجيل: Apr 2013 المشاركات: 13	رد: اضافة زر الذهاب إلى أعلى و زر الذهاب إلى الاسفل في بلوجر أنا : trucsinformatique سجل معنا لتتمتع بهذه الخاصية Momtazzzzzzz __________________ من مواضيع trucsinformatique قالب موقع trucsinformatique الرائع مع كل التحديثات و التطويرات طريقة وضع كتابة تتبع مؤشر الماوس في مدونة بلوجر طريقة رائعة لإضافة أيقونات المواقع الإجتماعية على شكل قنينات مشروبات غازية

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

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
مشكل بسيط في اعلان أدسنس أعلى الصفحة	مدونة المعرفة	طلبات الدعم الفني	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

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

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

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