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

---- your ads -----

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

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

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

لإضافة الأداة قم بلتوجه الى بلوجر ثم اختر المظهر ثم تعديل 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>

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

---- your ads -----

CSS