[ بلوجر] كيف تحصل على قالب أي موقع يعجبك

موضوعنا في هذه التدوينة خاص بمدونات بلوجر وهي طريقة إضافة زر الصعود إلى الاعلى لمدونات بلوجر، هذه الاضافة مهمة للمدونات التى بها محتوى مقالي كتابي اخباري او حتى رياضي كالمدونات الاخبارية مثلا،فهذه الاضافة تقوم بنقل الزائر من الجزء الذى هو به بالصفحة الى أعلى الصفحة في ثانية :) وبهذا فهي توفر عناء الزائر في الصعود إلى أعلى وتسهل عليه تصفح مدونتك، غير أن إضافة زر الصعود إلى أعلى يضيف لمسه جمالية لمدونتك ويعطيها بريقاً ومنظراً جذاباً و مثميزا .

طريقة إضافة زر الصعود سهلة و وسلسة :
1. ندخل الى لوحة التحكم فى بلوجر.
2. ثم نحتار القالب، ونختار تحرير Html.
3. نبحث عن </head> ونضيف قبله الكود التالي.

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>

4. ثم نبحث عن ]]></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;
}

5. ثم نبحث عن </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>

وقم بحفظ القالب ومبروك عليك الإضافة والشكل الرائع الجديد لمدونتك ، لا تتردد فى طرح اى مشكلة تواجهك فى التركيب