اضافة زر الصعود إلى أعلى و طريقة تركيبها


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

شرح تركيب الزر :

  1. ادخل على لوحة تحكم المدونة .
  2. انتقل إلى تبويب القالب .
  3. انقر على تحرير HTML .

ابحث عن الوسم

[code]]]></b:skin>[/code]

و اضف الكود التالي فوقه

[code]

/* Back to Top Roket meluncur */

#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)}[/code]

الخطوة الثانية ابحث عن الوسم

[code]</body>[/code]

و اضف الكود التالي فوقه :

[code]

<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>[/code]

و بالتوفيق و نراكم في الموضوع القادم ,


Like it? Share with your friends!

What's Your Reaction?

لم افهم ! لم افهم !
26
لم افهم !
عبقري ! عبقري !
53
عبقري !
لم يعجبني ! لم يعجبني !
48
لم يعجبني !
أحببته ! أحببته !
37
أحببته !
بحاجة للمزيد ! بحاجة للمزيد !
10
بحاجة للمزيد !
مهتم بهذا ! مهتم بهذا !
5
مهتم بهذا !
Mohab Elboshy

مهاب البوشي ، مؤسس شركة ترويج 'Trweeg.Com' و مسئول السيو و التسويق في ورشة لونك و مدير اكاديمية ورشة لونك التعليمية .

0 Comments

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

اختر التنسيق
Personality quiz
Series of questions that intends to reveal something about the personality
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Video
Youtube, Vimeo or Vine Embeds
صوت
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format