اضافة ازرار الصعود لأعلى والنزول
اضافة ازرار الصعود لأعلى والنزول
بواسطة
Mohammad Ktifan
تعليقات
مشاركة
مشاركة: اضافة ازرار الصعود لأعلى والنزول
0 دقيقة للقراءة
تغيير حجم الخط
تغيير حجم الخط
مرحبا اصدقائي في مقال جديد , في هذا المقال سأطرح اضافة ازرار الصعود لأعلى والنزول.
طبعا الإضافة جميلة جدا وتساعد الزوار في التنقل بشكل كبير و خاصة في المقالات لطويلة دون التمرير يدويا.
مـعـاينة الـشكل الاول
مـعـاينة الـشكل الثاني
لإضافة الأداة قم بلتوجه الى بلوجر ثم اختر المظهر ثم تعديل HTML ثم ابحث عن الوسم
والصق الكود التالي قبله/فوقه
<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>
هذا الكود هو الكود الخاص بخط الايقونات , لااعي لإضافته اذا كان موجود
الان قم بالبحث عن الوسم
<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>
الأن اضافة الاكواد الخاصة بالاشكال,قم بإضافة احد الاكواد التالية قبل/فوق الوسم
الشكل الاول
<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>
الان اضغط على حفظ المظهر لحفظ التغييرات وشاهد النتائج على مدونتك
اذا كان لديك اي استفسار لاتتردد بطرحه في التعليقات
مشاركة:
Mohammad Ktifan
مدون يسعى لتقديم محتوى مميز وجذاب للقراء بشكل عام,مهتم بكثير من الأشياء كـ بلوجر ,تصميم الويب, التصميم الجرافيكي,وأيضا الافلام والمسلسلات العالمية. مدونة الأثير فيسبوك
قد تُعجبك هذه المشاركات
تعليقات
يرجى الالتزام بسياسة التعليقات لدينا ليتم نشر تعليقك . وشكرا
تعليقات