15/7/2014
أضافة تعليق
اضافة زر الصعود الى اعلى بلوجر |
زر الصعود الى اعلى من اهم اضافات البلوجر لانه يوفر الكثير من الوقت والجهد على زائر مدونتك فبعد قراءة الزائر لموضوع ما
يحتاج طريقه سريعه للصعود الى اعلى والاختيار بين روابط واقسام الموقع
يتميز هذا الشرح لزر الصعود الى اعلى بسهولة التركيب والشكل الجميل وايضا تاثير jQuery smooth scrolling الانسيابى
الان مع شرح اضافة زر الصعود الى اعلى لمدونتك
ينقسم الشرح الى قسمين اضافه الكود الى المدونه واضافه كود اخر للسى اس اس css لتجميل الشكل وبامكانك التعديل على كود السى اس اس من الوان وخلافه للحصول على الشكل المناسب لمدونتك
اولا اضافة الكود
من لوحة ادارة المدونه اختر تخطيط
ثم اختر اضافة اداه ويفضل ان تكون فى الفوتر (اسفل القالب) لتظهر فى جميع صفحات المدونه
بعد اختيار اضافة اداه اختر HTML/JavaScript
لا تكتب عنوان للاداه الجديده فقط ضع الكود التالى
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script> jQuery(document).ready(function() { var offset = 220; var duration = 500; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > offset) { jQuery('.back-to-top').fadeIn(duration); } else { jQuery('.back-to-top').fadeOut(duration); } }); jQuery('.back-to-top').click(function(event) { event.preventDefault(); jQuery('html, body').animate({scrollTop: 0}, duration); return false; }) }); </script> <a href="#" class="back-to-top"></a>
ثانيا اضافة كود االسى اس اس css
ادخل الى قالب واختر تحرير HTMLابحث عن هذا الكود باستخدام CTRL+F
]]></b:skin>
وضع قبله مباشرتا هذا الكود
/*--- ToTop By th3maestro.com ----*/ div#page { max-width: 900px; margin-left: auto; margin-right: auto; padding: 20px; } .back-to-top { position: fixed; bottom: 0px; right: 15px; background-color:#E74C3C; background-image: url('http://3.bp.blogspot.com/-Vug8W3sF3PA/UXSMCnhg68I/AAAAAAAAI_U/OhgHbKpX8r0/s1600/up.png'); background-repeat: no-repeat; padding: 18px; border-radius: 2px 2px 0px 0px; width: 5px; background-position: 50% 50%; cursor: pointer; outline: 0px none; } .back-to-top:hover { background-color: #353535; } /*--- ToTop By th3maestro.com ----*/
ملحوظه هامه:
يمكنك اضافة زر الصعود الى اعلى بلوجر فى خطوه واحده وهذا اذا لم ترد التعديل على القالب
من لوحة التحكم اختر تخطيط
ثم اختر اضافة اداه ويفضل ان تكون فى الفوتر (اسفل القالب) لتظهر فى جميع صفحات المدونه
بعد اختيار اضافة اداه اختر HTML/JavaScript
لا تكتب عنوان للاداه الجديده فقط ضع الكود التالى
انتهى الشرح مبروك عليك اضافة زر الصعود الى اعلى بلوجر وفى انتظار تعليقاتكم
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script> jQuery(document).ready(function() { var offset = 220; var duration = 500; jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > offset) { jQuery('.back-to-top').fadeIn(duration); } else { jQuery('.back-to-top').fadeOut(duration); } }); jQuery('.back-to-top').click(function(event) { event.preventDefault(); jQuery('html, body').animate({scrollTop: 0}, duration); return false; }) }); </script> <style> /*--- ToTop By th3maestro.com ----*/ div#page { max-width: 900px; margin-left: auto; margin-right: auto; padding: 20px; } .back-to-top { position: fixed; bottom: 0px; right: 15px; background-color:#E74C3C; background-image: url('http://3.bp.blogspot.com/-Vug8W3sF3PA/UXSMCnhg68I/AAAAAAAAI_U/OhgHbKpX8r0/s1600/up.png'); background-repeat: no-repeat; padding: 18px; border-radius: 2px 2px 0px 0px; width: 5px; background-position: 50% 50%; cursor: pointer; outline: 0px none; } .back-to-top:hover { background-color: #353535; } /*--- ToTop By th3maestro.com ----*/ </style> <a href="#" class="back-to-top"></a>
انتهى الشرح مبروك عليك اضافة زر الصعود الى اعلى بلوجر وفى انتظار تعليقاتكم
الاشتراك في:
تعليقات الرسالة (Atom)
0 التعليقات على "اضافة زر الصعود الى اعلى بلوجر"
إرسال تعليق