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

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

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


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

طريقة اضافة هذه الأداة هي بسيطة جدا و لا تحتاج منك أي خبرة في هذا المجال فستقوم باضافة كود واحد الى المكان الذي تريده في تخطيط مدونة بلوجر في أداة HTML JAVA SCRIPT جديدة و قم بالحفظ . 


 <div class=”scroll-top”>
   ضع هنا كود Html للصورة التي تريد 
      <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>
    <script type=”text/javascript”>
    // Scroll to top button
        wnHeight = jQuery(window).height();
        //Check to see if the window is top if not then display button
        jQuery(window).scroll(function(){
            if (jQuery(this).scrollTop() > wnHeight/2) {
                jQuery(‘.scroll-top’).fadeIn();
            } else {
               jQuery(‘.scroll-top’).fadeOut().removeClass(‘scrolling’);
            }
        });
        //Click event to scroll to top
        jQuery(‘.scroll-top’).click(function(){
            jQuery(‘html, body’).animate({scrollTop : 0},800);
            jQuery(this).addClass(‘scrolling’);
        });
    </script>


بالنسبة لكود Html للصورة سأقدم لكم موقعا رابطه أسفل الشرح و تابع الخطوات الموضحة في الصور التالية : 

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




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




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


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


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



بعد نسخ كود HTML للأيقونة ضعه مكان الجملة في الكود الأول و مبروك عليك زر الصعود . 


رابط موقع Flaticon . 


ان أعجبكم الشرح شاركوه مع أصدقائكم و السلام عليكم و رحمة الله . 

قلعة الشروح

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

إرسال التعليق