إضافة زر الصعود إلى أعلى لمدونات بلوجر بشكل إحترافى

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


شرح تركيب الاضافة
  1. ندخل الى لوحة التحكم فى بلوجر
  2. من ثم نحتار القالب
  3. ونختار تحرير Html
ونبحث عن ]]></b:skin> ونضيف قبله هذا الكود

/* Back to Top Roket meluncur by Eslam Tiger From Abu-iyad.com*/
#scrolltop{display:none}
#rocketmeluncur{position:fixed;bottom:50px;z-index:7;display:none;visibility:hidden;width:26px;height:48px;right:25px;background:url(http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png) 50% 0 no-repeat;opacity:0;-webkit-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-webkit-transform .6s cubic-bezier(.6,.04,.98,.335);-moz-transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),-moz-transform .6s cubic-bezier(.6,.04,.98,.335);transition:visibility .6s cubic-bezier(.6,.04,.98,.335),opacity .6s cubic-bezier(.6,.04,.98,.335),transform .6s cubic-bezier(.6,.04,.98,.335)}
#rocketmeluncur i{display:block;margin-top:48px;height:14px;background:url(http://1.bp.blogspot.com/-UR9I7YEuEUY/VXIJn8MrBPI/AAAAAAAAKRE/qZObHBd5zIo/s1600/rocket.png) 50% -48px no-repeat;opacity:.5;-webkit-transition:-webkit-transform .2s;-moz-transition:-moz-transform .2s;transition:transform .2s;-webkit-transform-origin:50% 0;-moz-transform-origin:50% 0;transform-origin:50% 0}
#rocketmeluncur:hover{background-position:50% -62px}
#rocketmeluncur:hover i{background-position:50% 100%;-webkit-animation:flaming .7s infinite;-moz-animation:flaming .7s infinite;animation:flaming .7s infinite}#rocketmeluncur.showrocket{visibility:visible;opacity:1}
#rocketmeluncur.launchrocket{background-position:50% -62px;opacity:0;-webkit-transform:translateY(-800px);-moz-transform:translateY(-800px);-ms-transform:translateY(-800px);transform:translateY(-800px);pointer-events:none}
#rocketmeluncur.launchrocket i{background-position:50% 100%;-webkit-transform:scale(1.4,3.2);-moz-transform:scale(1.4,3.2);transform:scale(1.4,3.2)}

ومن ثم نبحث عن </body> ونضيف قبله هذا الكود

<a href="javascript:void(0);" id="rocketmeluncur" class="showrocket" ><i></i></a>
<script type='text/javascript'>
//<![CDATA[
jQuery(window).scroll(function(){jQuery(window).scrollTop()<50?jQuery("#rocketmeluncur").slideUp(500):jQuery("#rocketmeluncur").slideDown(500);var e=jQuery("#ft")[0]?jQuery("#ft")[0]:jQuery(document.body)[0],t=$("rocketmeluncur"),n=(parseInt(document.documentElement.clientHeight),parseInt(document.body.getBoundingClientRect().top),parseInt(e.clientWidth)),r=t.clientWidth;if(1e3>n){var l=parseInt(fetchOffset(e).left);l=r>l?2*l-r:l,t.style.left=n+l+"px"}else t.style.left="auto",t.style.right="10px"}),jQuery("#rocketmeluncur").click(function(){jQuery("html, body").animate({scrollTop:"0px",display:"none"},{duration:600,easing:"linear"});var e=this;this.className+=" launchrocket",setTimeout(function(){e.className="showrocket"},800)});
//]]>
</script>
وقم بحفظ القالب ومبروك عليك الأضافة والشكل الرائع الجديد لمدونتك , لا تتردد فى طرح استفسارك او اى مشكلة تواجهك فى التركيب. شكر خاص للرائع Arlina Fitriyani لنشر الطريقة على مدونتة.

هناك 9 تعليقات:

  1. دائما رائع وجميل ولديك كل ماهو جديد ابو اياد
    ارجو ان تشرفنى بزيارة مدوناتى
    http://ekhtyar.riadah.org
    http://ekhtyar.riadah.org/t9-topic
    http://ekhtyar.blogspot.com

    ردحذف
    الردود
    1. أنت الأروع يا غالي
      بالتوفيق

      حذف
  2. ديماً فى تقدم بالنسبالى افضل مدونة مصرية

    ردحذف
  3. شكرا لك :)
    مصر سبورت
    b-mobasher1.blogspot.com

    ردحذف
  4. السلام عليكم
    لقد قمت باجراء جميع الخطوات ولم تظهر الاضافه

    ردحذف
  5. لم تظهر معي الاضافة

    ردحذف
  6. دائما رائع وجميل ولديك كل ماهو جديد ومميز

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية