شرح إنشاء زر للأعلى وللأسفل مع الاختفاء لمدونات بلوجر

مرحبا بكل متابعي وزوار مدونة  PH3ahmed

طريقة انشاء زر للاعلى والاسفل ازرار سلسة مع خاصية الاختفاء ساعد زوارك على التنقل في مدونتك بسهولة تامة 

كيفية الاضافة 

اولا ادخل لوحة التحكم في مدونتك ثم القالب واضغط على تحرير html 

الان ابحث عن الرمز 

]]></b:skin>

ثم اضف الكود التالي فوق ]]></b:skin> مباشر 

#gotop{cursor:pointer;width:30px;height:30px;position:fixed !important;position:absolute;z-index:999;text-indent:-9999px;border:1px solid #144F69;background-color:#067BAF;background-image:-webkit-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:-moz-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:-ms-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:-o-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:radial-gradient(ellipse at center top,#2493C4,#086A95);-webkit-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;-moz-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;-webkit-border-radius:10px 0 0 0;-moz-border-radius:10px 0 0 0;border-radius:10px 0 0 0;overflow:hidden}#gotop:hover:after{border-bottom-color:white}#gotop:after{content:"";display:block;width:0;height:0;border-width:10px 4px;border-style:solid;border-color:transparent transparent #C3D1D7 transparent;position:absolute;top:0;left:11px}#gobottom{cursor:pointer;width:30px;height:30px;position:fixed!important;position:absolute;top:26px;right:0;z-index:99;text-indent:-9999px;border:1px solid #144F69;background-color:#067BAF;background-image:-webkit-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:-moz-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:-ms-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:-o-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:radial-gradient(ellipse at center top,#2493C4,#086A95);-webkit-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;-moz-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;-webkit-border-radius:0 0 0 10px;-moz-border-radius:0 0 0 10px;border-radius:0 0 0 10px;overflow:hidden}#gobottom:hover:after{border-top-color:white}#gobottom:after{content:"";display:block;width:0;height:0;border-width:10px 4px;border-style:solid;border-color:#C3D1D7 transparent transparent transparent;position:absolute;top:10px;left:11px}

الان ابحث عن الرمز </body> ثم اضف الكود التالي فوقه مباشر

<div style='clear:both;'/>  <script type='text/javascript'>//<![CDATA[$(window).scroll(function () {    if ($(this).scrollTop() > 100) {        $("#gotop").removeAttr("href");        $("#gotop").stop().animate({            bottom: "0",            right: "0"        }, {            duration: 800,            queue: false        })    } else {        $("#gotop").stop().animate({            bottom: "-50",            right: "-50"        }, {            duration: 1000,            queue: false        })    }   if ($(this).scrollTop() > 100) {        $("#gobottom").removeAttr("href");        $("#gobottom").stop().animate({            top: "-50",            right: "-50"        }, {            duration: 800,            queue: false        })    } else {        $("#gobottom").stop().animate({            top: "0",            right: "0"        }, {            duration: 1000,            queue: false        })    }
});$(function () {    $("#gotop").click(function () {        $("html, body").animate({            scrollTop: 0        }, "slow");        return false    })    $("#gobottom").click(function () {        $("html, body").animate({            scrollTop: $('#footer').offset().top        }, 970);        return false    })});//]]></script><a id="gotop" style="bottom: -50px; right: -50px;">Lên Trên!</a><a id="gobottom" style="top: 0px; right: 0px;">Xuống Dưới!</a><div id='footer'/>

واختر الحفظ ومبروك عليك

هل أعجبك الموضوع ؟

Share

Tweet