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

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

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

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

1 - ابحث عن الكود ]]></b:skin> في محرر HTML من لوحة تحكم بلوجر واضف الكود التالي قبله :

#scroll-top{    
    overflow: hidden;
    position: fixed;
    z-index: 9999;
    right: 30px;
    bottom: 15px;
    width: 40px;
    height: 40px;
    color: #EEE;
    background-color: #059fc5;
    font-size: 20px;
    text-indent: 0px;
    cursor: pointer;
    text-align: center;
    border-radius: 50% !important;
    transition: all 0.5s ease 0s;
}
#scroll-top i{
  height:40px; 
  line-height: 36px;
}

للتعديل غير لون الخلفية المحدد بالون الأحمر مع مايتناسب مع لون مدونتك  :

2  - ابحث عن الكود </body> واضف قبله الكود التالي :

<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>

بالنسبة لمكتبة jquery المحددة باللون الأحمر اذا كانت موجودة سابقا في مدونتك ، احذفها ، ايضا خط font Awesome يجب ان يتواجد على مدونتك مالم اضف هذا الكود قبل الوسم التالي </head>:

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

وبهذا تكون اضفت زر الصعود الى اعلى على مدونتك بنجاح ، واذا واجهت اي مشكلة في التركيب لاتتردد بتركها في تعليق ، دمتم في رعاية الله وحفظه!