السلام عليكم ورحمة الله وبركاته اخواني الاعزاء نقدم لكم في هذه الايام طريقة جديدة تساعد علي التنقل بسرعة واسمه زر العودة الي اعلي الصفحة ويعتبر زر اعلي الصفحة والعودة الي اعلي المدونة من اهم الزرار التي تزيد من سرعة تصفح مدونتك وتفيد كثل من الزوار لانه عندما يستخدم شريط التمرير اعلي واسفل وعندما
يكون الموضوع طويلا فانه في بعض الاحيان يمل من الضغط علي شريط التمرير واليكم اضفت هذا الزر لكم لتسهيل علي زائر المدونة التنقل بسهولة ففكرته تقوم علي عندما تضغط عليه يحرك الصفحة الي اعلي وبسرعة والحصول لزائر على خفيت الصفحة وهذا مثل على الاضافة فى مدونة تجربية ادخل هنا وشاهد بنفسك على الزار انهو اكثر من رائع ارجوالاهتمام بذلك الاضافة
طريقه التركيب
الآن انتقل إلى لوحة التحكم -> قالب -> تحرير ثم اضغط على
وهذا هيا طريقه استخدام المحرر الجديد 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>
ثم حفظ
:: خاتمة ::
إذا أعجبتكم الإضافة لا تبخلوا علينا من الضغط على زر لايك الفايسبوك و شكرا
تعليقات
إرسال تعليق
يمنع نشر التعليقات ذات الروابط الدعائية أو تعليقات بإسلوب غير لائق أو التى تحتوى على معلومات شخصية كالبريد الإلكترونى
أعتذر عن الرد على طلبات التوزيع لضيق الوقت أو التبادل الإعلانى
لتصلك إشعارات ردود هذا الموضوع على البريد الإلكترونى أضف علامة بالمربع بجوار كلمة "إعلامى"