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