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

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

بسم الله الرحمن الرحيم

السلام عليكم و رحمة الله تعالى و بركاته

أهلا بكم زوار و متتبعي مدونتنا في درس جديد على قسم دروس البلوجر ان شاء

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

في مدونة اللوجر ليسهل على الزائر تصفح مواضيع مدونتك على سبيل المثال عندما

يكون الزائر يتصفح اي موضوع في اسفل المدونة فقط يضغط على ايقونة الصعود

التي تظهر اسفل المدونة على يمين الصفحة و بذالك تصعد به الى اعلى المدونة
هذه هي الايقونة الجميلة .

طريقة ادراج الكود سهل جدا تابع معي:

أول شيئ تتوجه الى مدونتك و تدخل الى لوحة التحكم ثم الى قسم التخطيط

و بعد ذالك اضافة أدات في اي مكان تريده ثم HTML/Java Script

ثم قم بنسخ هذا الكود أسفله و الصقه و قم بالحفظ.

<span class="flame"></span>
      <span class="flame"></span>
      <span class="flame"></span>
    </div>
<style>
    .scroll-top img{
    height:45px;
    margin: -12px 0 0 5px;
    border:0;
    }

.scroll-top {height: 60px; width: 60px; position: fixed; bottom: 100px; right: 30px; display: none; z-index: 9999;}.scroll-top:hover{animation-delay:0s;animation-duration:.1s;animation-iteration-count:infinite;animation-name:shake-little;animation-play-state:running;animation-timing-function:ease-in-out}.scroll-top .flame{-moz-border-bottom-colors:none;-moz-border-left-colors:none;-moz-border-right-colors:none;-moz-border-top-colors:none;border-color:#ffda44 transparent transparent;border-style:solid;border-width:25px 3px 3px;display:none;height:0;left:-4px;margin:-5px auto 0;position:absolute;right:0;top:66%;width:0}.scroll-top .flame+.flame{border-width:10px 2px 2px;left:20px;margin:0}.scroll-top .flame+.flame+.flame{border-width:10px 2px 2px;left:auto;margin:0;right:24px}.scrolling .flame{display:block}.nav-toggle,.owl-item .quote-icon,.price-box .price-box-head-shadow,.scroll-top .flame{transition:all .5s cubic-bezier(.25,.1,.25,1) 0s}@keyframes shake-little{0%{transform:translate(0,0) rotate(0)}14%,16%,2%,20%,24%,30%,48%,52%,54%,76%,8%,84%,86%,88%,92%,96%,98%{transform:translate(0,0) rotate(-.5deg)}10%,12%,22%,32%,4%,42%,44%,64%,72%,80%,90%{transform:translate(-1px,0) rotate(-.5deg)}18%,34%,36%,46%,6%,66%,68%,70%,74%,82%,94%{transform:translate(0,-1px) rotate(-.5deg)}26%,28%,38%,40%,50%,56%,58%,60%,62%,78%{transform:translate(-1px,-1px) rotate(-.5deg)}}
    </style>

//Click event to scroll to top
        jQuery('.scroll-top').click(function(){
            jQuery('html, body').animate({scrollTop : 0},800);
            jQuery(this).addClass('scrolling');

});

</script>

بعد ذالك توجه الى مدونتك البلوجر و شاهد النتيجة ستظهر لك ايقونة زر الصعود السريع

أسفل المدونة على اليمين و ستزيد جمالية مدونتك.