أخر المقالات
تحميل...

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

السلام عليكم ورحمة الله وبركاته 


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


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

اولا ادخل لوحة التحكم في مدونتك ثم القالب واضغط على تحرير 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'/>

  الان اختر حفظ وشاهد النتائج ^_^


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

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

اريد ان احفظ البرنامج لكن باالييي اعرف

تذكر قوله تعالى:
(( مَا يَلْفِظُ مِنْ قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ)) ‏
-----------------------------------
الان يمكنك اضافة اي مقطع فيديو الى التعليقات وايضا اضافة الصور فقط ضع رابط الصور او مقطع الفيديو في التعليقات
----------------------------------
آرائكم تسعدنا, لمتابعة التعليق حتى نرد عليك فقط ضع إشارة على إعلامي

نحن نعرض الإعلانات على الموقع للإسهام في تحسين موقعنا.

نحن لانستخدم إعلانات ضارة او مزعجة في موقعنا نأمل منكم تعطيل الاداة في الموقع حتى تتمكن من مشاهدة الإعلانات.

شكرًا لك

×