مساحة اعلانية

آخر المواضيع

Add a button to the top


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



شرح تركيب الاضافة

  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>
وقم بحفظ القالب ومبروك عليك الأضافة والشكل الرائع الجديد لمدونتك

الكــاتــب

    • مشاركة

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

لا تذهب دون أن تترك تعليقك على الموضوع

ملحوظة: يمكن لأعضاء المدونة فقط إرسال تعليق.

جميع الحقوق محفوظة لــ مدونة كل العرب 2020 © DMCA.com Protection Status