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

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

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

مـعـاينة الـشكل الاول

مـعـاينة الـشكل الثاني

لإضافة الأداة قم بلتوجه الى بلوجر ثم اختر المظهر ثم تعديل HTML ثم ابحث عن الوسم </head>
والصق الكود التالي قبله/فوقه
 <script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script> 

هذا الكود هو الكود الخاص بخط الايقونات , لااعي لإضافته اذا كان موجود
الان قم بالبحث عن الوسم </body> والصق الكود التالي قبله/فوقه
 <div id='downfooter'/>
<a href='#' id='slidetop'><i class='fa fa-chevron-up' title='Slide up'/></a><a href='#' id='slidebottom'><i class='fa fa-chevron-down' title='Slide down'/></a>
<script type='text/javascript'>
//<![CDATA[
// Slide Up and Down by www.naminakiky.com
!function(o){o(window).scroll(function(){o(this).scrollTop()>75?(o("#slidetop").removeAttr("href"),o("#slidetop").fadeIn()):o("#slidetop").fadeOut()}),o(function(){o("#slidetop").click(function(){return o("html, body").animate({scrollTop:0},"slow"),!1})})}(jQuery),function(o){o(window).scroll(function(){o(this).scrollTop()<0?(o("#slidebottom").removeAttr("href"),o("#slidebottom").fadeOut()):o("#slidebottom").fadeIn()}),o(function(){o("#slidebottom").click(function(){return o("html, body").animate({scrollTop:$("#downfooter").offset().top},"slow"),!1})})}(jQuery);
//]]>
</script> 

الأن اضافة الاكواد الخاصة بالاشكال,قم بإضافة احد الاكواد التالية قبل/فوق الوسم </head>
الشكل الاول
 <style type='text/css'>
/* Slide Up and Down */
#slidetop,#slidebottom{background:#fff;margin:0;padding:5px 15px 0;border-radius:0;position:fixed;color:#222;bottom:0;border:1px solid rgba(0,0,0,0.05);border-bottom:0;cursor:pointer;display:none;line-height:2;box-shadow:0 -1px 20px rgba(0,0,0,0.05);backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);transition:all .3s}#slidetop:hover,#slidebottom:hover{background:#fafafa}#slidetop{left:46px;border-radius:5px 0 0 0}#slidebottom{left:0;border-right:0;box-shadow:5px -1px 20px rgba(0,0,0,0.05)}
@media only screen and (max-width:768px){#slidetop{right:44px}}
</style> 

الشكل الثاني
 <style type='text/css'>
/* Slide Up and Down */
#slidetop,#slidebottom{background:#e74c3c;margin:0;padding:5px 15px 0;border-radius:0;position:fixed;color:#fff;bottom:0;cursor:pointer;display:none;line-height:2;backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);transition:all .3s}#slidetop:hover,#slidebottom:hover{background:#333}#slidetop{right:46px;border-radius:0 5px 0 0}#slidebottom{background:#c0392b;left:0}
@media only screen and (max-width:768px){#slidetop{left:44px}}
</style> 

الان اضغط على حفظ المظهر لحفظ التغييرات وشاهد النتائج على مدونتك
اذا كان لديك اي استفسار لاتتردد بطرحه في التعليقات

ذات صلة


عـرض التعليقات
اخفاء التعليقات

يسعدنا تفاعلكم معنا,نرجو احترام الآداب العامة وعم نشر اي روابط اشهارية.
لإضافة كود قم بتحويله اولا بمحول الاكواد

إخلاء المسؤولية محول الأكواد ابلاغ عن رابط لايعمل