اعلان

صفحة خطأ ):
الصفحة التي تبحث/ي عنها غير موجودة

يمكنك محاولة كتابة كلمة البحث مضبوطه أو الضغط على الزر التالي للعودة للرئيسية

الرئيسية

12‏/5‏/2013

اضافة زر العودة الي اعلي الصفحة او اعلي المدونة بشكل جديد


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

طريقه التركيب

الآن انتقل إلى لوحة التحكم -> قالب -> تحرير ثم اضغط على

وهذا هيا طريقه استخدام المحرر الجديد html من هنــــــــا

ثم ابحث عن الكود التالى <head>
اصف الكود التالى فوقه مباشر
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
ثم ابحث عن الكود التالى ]]></b:skin>
اضف فوقه مباشر الكود التالى

 #scroll-top {
 background-color: #777777;
 border-radius: 24px;
 box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8) inset;
 color: #FFFFFF;
 cursor: pointer;
 display: block;
 font-family: Verdana;
 font-size: 2em;
 font-weight: bold;
 line-height: 2em;
 text-align: center;
 text-decoration: none;
 position:fixed;
 width: 48px;
 height: 48px;
 bottom:30px;
 right:20px;
 opacity:0.85;
 transition:opacity 0.25s ease 0s;
}
#scroll-top:hover{
 opacity: 1;
 color: #FFFFFF;
}

تغير ما فى الكود #777777 بالون الخلفية لزار المراد فى مدونتك
ثم ابحث عن الكود التالى </body>
واضف فوقه مباشر الكود التالى


<script type='text/javascript'>
$(function() {
 $.fn.scrolltoTop = function() {
 var scrollLink = $(this),
 win = $(window);
 scrollLink.hide();
 if (win.scrollTop() != '0'){
 scrollLink.fadeIn('slow')
 }
 win.scroll(function() {
 if (win.scrollTop() == '0'){
 scrollLink.fadeOut('slow')
 }
 else{
 scrollLink.fadeIn('slow')
 }
 });
 scrollLink.click(function() {
 $('html, body').animate({
 scrollTop: 0
 }, 'slow')
 })
 }  
});
$(function() {
 $('#scroll-top').scrolltoTop();
});
</script>
<a id='scroll-top' href='#' title='Scroll to top'>^</a>     

ثم حفظ



:: خاتمة ::
إذا أعجبتكم الإضافة لا تبخلوا علينا من الضغط على زر لايك الفايسبوك و شكرا

ليست هناك تعليقات:

يمنع نشر التعليقات ذات الروابط الدعائية أو تعليقات بإسلوب غير لائق أو التى تحتوى على معلومات شخصية كالبريد الإلكترونى
أعتذر عن الرد على طلبات التوزيع لضيق الوقت أو التبادل الإعلانى

لتصلك إشعارات ردود هذا الموضوع على البريد الإلكترونى أضف علامة بالمربع بجوار كلمة "إعلامى"

جميع الحقوق محفوظة لــ بلوجر توب ©