29‏/09‏/2014

دائما ما نبحث عن إضافات جديدة لموقعنا حتى إن تواجدت فلا بد أنك تفكر بتغييرها لتحديث أجمل وأفضل، وهذا ما سنتطرق إليه في هذه التدوينة، في إضافة زر صعود للأعلى وهو زر لا غنى عنه يُسهل على المتصفح العودة لأعلى الصفحة بسهولة وسرعة تامة بشكل جميل
شرح طريقة التركيب
1. توجه لقالب >> تحرير
2. ابحث بإستعمال Ctrl+F عن <head/> ثم ضع الكود التالي فوقه
* الكود هو فقط لإظهار الأيقونة إذا كنت تتوفر عليه فلا داعي لإضافته
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
3. ابحث عن ]]></b:skin ثم ضع الكود التالي فوقه
.smoothscroll-top {
    position:fixed;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    text-align:center;
    z-index:99;
    background-color:#2ba6e1;
    color:#fff;
    width:47px;
    height:44px;
    line-height:44px;
    right:25px;
    bottom:-25px;
    padding-top:2px;
    border-radius:5px;
    transition:all 0.5s ease-in-out;
    transition-delay:0.2s;
}
.smoothscroll-top:hover {
    background-color:#3eb2ea;
    color:#fff;
    transition:all 0.2s ease-in-out;
    transition-delay:0s;
}
.smoothscroll-top.show {
    visibility:visible;
    cursor:pointer;
    opacity:1;
    bottom:25px;
}
.smoothscroll-top i.fa {
    line-height:inherit;
}
4. ابحث عن <body/> ثم ضع الكود التالي فوقه
<div class="smoothscroll-top">
<span class="scroll-top-inner">
<i class="fa fa-2x fa-arrow-circle-up"></i>
</span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){ 
$(document).on( 'scroll', function(){
if ($(window).scrollTop() > 100) {
$('.smoothscroll-top').addClass('show');
} else {
$('.smoothscroll-top').removeClass('show');
}
}); 
$('.smoothscroll-top').on('click', scrollToTop);
}); 
function scrollToTop() {
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</script>
دائما ما نبحث عن إضافات جديدة لموقعنا حتى إن تواجدت فلا بد أنك تفكر بتغييرها لتحديث أجمل وأفضل، وهذا ما سنتطرق إليه في هذه التدوينة، في إضافة زر صعود للأعلى وهو زر لا غنى عنه يُسهل على المتصفح العودة لأعلى الصفحة بسهولة وسرعة تامة بشكل جميل
شرح طريقة التركيب
1. توجه لقالب >> تحرير
2. ابحث بإستعمال Ctrl+F عن <head/> ثم ضع الكود التالي فوقه
* الكود هو فقط لإظهار الأيقونة إذا كنت تتوفر عليه فلا داعي لإضافته
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>
3. ابحث عن ]]></b:skin ثم ضع الكود التالي فوقه
.smoothscroll-top {
    position:fixed;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    text-align:center;
    z-index:99;
    background-color:#2ba6e1;
    color:#fff;
    width:47px;
    height:44px;
    line-height:44px;
    right:25px;
    bottom:-25px;
    padding-top:2px;
    border-radius:5px;
    transition:all 0.5s ease-in-out;
    transition-delay:0.2s;
}
.smoothscroll-top:hover {
    background-color:#3eb2ea;
    color:#fff;
    transition:all 0.2s ease-in-out;
    transition-delay:0s;
}
.smoothscroll-top.show {
    visibility:visible;
    cursor:pointer;
    opacity:1;
    bottom:25px;
}
.smoothscroll-top i.fa {
    line-height:inherit;
}
4. ابحث عن <body/> ثم ضع الكود التالي فوقه
<div class="smoothscroll-top">
<span class="scroll-top-inner">
<i class="fa fa-2x fa-arrow-circle-up"></i>
</span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){ 
$(document).on( 'scroll', function(){
if ($(window).scrollTop() > 100) {
$('.smoothscroll-top').addClass('show');
} else {
$('.smoothscroll-top').removeClass('show');
}
}); 
$('.smoothscroll-top').on('click', scrollToTop);
}); 
function scrollToTop() {
verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
element = $('body');
offset = element.offset();
offsetTop = offset.top;
$('html, body').animate({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</script>
14 Blogger تعليقات
Disqus
14 التعليقات
أزال المؤلف هذا التعليق. - حذف
المشرف
avatar

سيتم تخصيص موضوع خاص لشرح عمل الطريقة وإضافاته في الأيام القادمة ، حاليا لدي بعض المهام ريتما أنتهي منها..

أزال المؤلف هذا التعليق. - حذف
المشرف
avatar

أخي أريد طريقة إضافة السمايلات إلى مدونتي أي فوق تعليق

المشرف
avatar
الحبيب 2/06/2015
delete

أخي أستسمحك لقد نسيت أن تضيف كود الجي كوري



بالطبع قبل



لانه مهم لكي تعمل الاضافة وشكرا لك

بالتوفيق

المشرف
avatar

شكراً لك، لكن الأغلبية وكل القوالب يكون بها ذاك الكود على العموم تشكر

المشرف
avatar
Zied Zaabi 3/18/2015
delete

www.zied1web.blogspot.com

المشرف
avatar

شكرا لك أخي


إضافة زر الصعود إلى أعلى بأشكال جميلة ومختلفة لمدونات بلوجر
http://mido4tech.blogspot.com/2015/04/Button-BackTo-Top.html

المشرف
avatar
ahmad fathi 4/27/2015
delete

]]></b:skin
غير موجود بالمدونه

المشرف
avatar

إبحث عن skin فقط وستجدها

المشرف
avatar

كيف احذف الموجود من اصل القالب وتركيب جديد

المشرف
avatar

أترك رابط المعاينة

المشرف
avatar

بارك الله فيك ^^

المشرف
avatar

مشكور اخي fenlweb.com

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة