زر الصعود للأعلى من الإضفات المهمة لمدونات بلوجر كما أنها مفيدة للزائر, وتعتبر هذه الإضافة من أهم الإضافات الجانبية لمدونات بلوجر بشكل عام, فى هذا الموضوع سأريك كيف تقوم بإضافة هذا الزر بشكل بسيط مع الشرح وبالتفصيل بالإضافة إلى ميزة أخرى ستتعرف عليها فى نهاية التدوينة.
ما سنقوم به فى هذا الدرس هو إضافة بعض الأكواد الصغيرة إلى القالب من أجل إضافة الزر بشكل مناسب, وأول شيئ سنقوم به هو التوجه إلى بلوجر ثم الدخول إلى القالب ونقوم بعمل " تحرير HTML ", من ثم نقوم بالبحث عن " <head> " بأستعمال " Ctrl + f " ونقوم بإضافة الكود التالى بعده مباشرة.
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
#Rise-to-Top { border-radius: 6px; background: rgba(0, 0, 0, 0.15); width: 80px; text-align: center; padding: 5px; position: fixed; bottom: 20px; right: 50px; cursor: pointer; text-decoration: none; border: 1px solid rgba(0, 0, 0, 0.2); } #icon-up:before{ content: "\f077"; font-family: fontawesome; color: #fff; font-size: 18px; }
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type='text/javascript'> $(function() { $.fn.scrollToTop = function() { $(this).hide().removeAttr("href"); if ($(window).scrollTop() != "0") { $(this).fadeIn("slow") } var scrollDiv = $(this); $(window).scroll(function() { if ($(window).scrollTop() == "0") { $(scrollDiv).fadeOut("slow") } else { $(scrollDiv).fadeIn("slow") } }); $(this).click(function() { $("html, body").animate({ scrollTop: 0 }, "slow") }) } }); $(function() { $("#Rise-to-Top").scrollToTop(); }); </script> <a href='#' title='الصعود للأعلى' id='Rise-to-Top' style='display:none;'><div id='icon-up'/></a>
والشيئ المميز فى هذا الدرس هو إمكانية تغير شكل أيقونة الزر حيث يود العديد من أشكال الأيقونات التى بإمكانك أستعمالها بدل هذه الأيقونة, وسأريك الطريقة الآن بكل بساطة.
أولاً توجه إلى هذا الموقع من هنا.
ثانياً ستجد العديد من الأيقونات التى بإمكانك أستعمالها, قم بأختيار الأيقونة التى تعجبك.
ثالثاً ستجد أمام كل أيقونة الكود الخاص بها كما بالصورة أسفله :
كما بالصورة يوجد على اليسار أسم الأيقونة وعلى اليمين كود " CSS " الخاص بالأيقونة وكل ما عليك فعله هو نسخ الكود الملون باللون الأحمر على اليمين وتقوم بأستبداله بالكود الملون باللون الأحمر فى أكواد " CSS " الموجودة بالأعلى.
ليست هناك تعليقات:
إرسال تعليق