العالم التقني | Techniworld العالم التقني | Techniworld

الواجهه

صحة

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


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


 اضافة زر الصعود الى اعلى

هده الاضافة تعتبر من الاضافات دات اهمية للمدونة و بالاخص لمن ينشر محتوى طويل ، طريقة التركيب هيا سهلة جدا تابع معي الخطوات


ابحث عن الكود <b:skin/> في المحررر HTML من لوحة التحكم

وقم بإضافة الكود التالي قبله 

#scroll-top{    
   
    overflow: hidden;
    position: fixed;
    z-index: 9999;
    right: 10px;
    bottom: 15px;
    width: 40px;
    height: 40px;
    color: #EEE;
    background-color: #5aa4e1;
    font-size: 20px;
    text-indent: 0px;
    cursor: pointer;
    text-align: center;
    border-radius: 2px;
    transition: all 0.5s ease 0s;


}
#scroll-top i{
  height:40px; 
  line-height: 36px;
}

لتعديل غير القيمة اللون بالون  

<div id="scroll-top" style="display:none;">
 <i class="fa fa-angle-up"></i>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
/*<![CDATA[*/
var scrollbtn = $("#scroll-top");
$(window).scroll(function(){
$(this).scrollTop() >= 700 ? scrollbtn.show(): scrollbtn.hide();
});
scrollbtn.click(function()
{
$("html,body").animate({scrollTop : 0},600 );
});
//]]></script>وبعد دالك اضف ايضا الخط font Awsome


وبعد دالك اضف ايضا الخط font Awsome قبل الوسم <head/>



<link href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>

عن الكاتب

أسامة بنبراهيم

Ceo of

عالم التقنية | Techworld

التعليقات



جميع الحقوق محفوظة

العالم التقني | Techniworld