6 يونيو، 2015

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

اضافة زر الصعود إلى أعلى على شكل صاروخ

من اهم اضافات بلوجر هو زر الصعود إلى اعلى لأنه يوفر على الزائر عناء الصعود إلى بداية الصفحة إذا كانت المواضيع طويلة

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




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


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

ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه
/* 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)}


الخطوة الثانية ابحث عن الوسم </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>

الان قم بحفظ القالب و مبروك عليك الإضافة اي سؤال او استفسار لا تترد بوضع في تعليق
و لا تنسى دعمنا عبر ازرار المشاركة بنشرك للموضوع.


مواضيع ذات صلة
اضافة زر الصعود إلى أعلى على شكل صاروخ
4 / 5
بواسطة

هناك 32 تعليقًا :

  1. أهااا :o و الله العظيم كنت بانتظار هذا الدرس
    على أحر من الجمر، و كنت سأقترحه عليك في
    أقرب وقتٍ ممكن، إلا أني لم أجد الوقت بسبب الترجمة
    هيهيهيهي :p باركك الله عزيزي، و الله زر احترافي و التأثير
    عند التأشير عليه بالفأرة أعجبني، الفكرة جميلة جدًا، بانتظارك في دروس
    جديدة أخرى عن إضافات أجمل بحول الله <3 باركك الله ثانيةً عزيزي منير
    واصل يا الغالي، تحياتي الخالصة!

    ردحذف
    الردود
    1. الله يعينك و يوفقك على الترجمة
      صراحة هي امر صعب انا مرة ترجمت مقطع من 5 دقائق
      بقيت عليه ساعتين و كان باللغة الانجليزية =d
      و الحمدلله انه اعجبك اخي ليو
      بارك الله فيك انت ايضا
      احترامي لشخصك الكريم
      احلا وردة =r

      حذف
  2. أخي لقد أرسلت لك الصورة

    ردحذف
    الردود
    1. اين ارسلتها اخي يوسف

      حذف
  3. q=
    اخى محتاج منك طلب
    لما بحثت عنك فى جوجل ظهر كدا
    --------------
    مدون محترف
    mudwnp.blogspot.com/
    طريقك لإحتراف التدوين لدينا كل ما يحتاجه المدونون معنا ستصبح مدون محترف.
    لقد زرت هذه الصفحة 2 من المرات. تاريخ آخر زيارة: 03/06/15
    الفهرس
    فهرس مدون محترف اضافات بلوجر ,قوالب بلوجر ,دروس بلوجر ,قوالب ...
    فوتوشوب Photoshop
    استخدام الفوتوشوب مباشرة بدون برامج ,تصميم بدون برامج ...
    الوان فلات
    الوان فلات احترافية من مدون محترف يمكنك استخدامها في تصاميم ...
    محول الاكواد
    محول الأكواد Blogger Code Converter. يمكنكم إستخدام ...
    عداد الحروف
    عداد الحروف. تمنحك هذه الاداة عد الاحرف مهما كان عددها فقط ضع الاحرف في ...
    سياسة الخصوصية
    ... زوارنا لها اهمية بالغة بالنسبة لنا . سياسة الخصوصية الموجودة في هذه ...
    ========================
    ظهر الصفحه الرئيسيه وعدة صفحات اسفلها "
    ممكن شرح تركيب كود سكيما هذا

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

      حذف
  4. مرحبا ممكن رد مبسط
    طريقه عمل شريط اخر الاخبار HTML
    ياريت الرد باسرع وقت
    محتاجيتو كتيير

    ردحذف
    الردود
    1. اهلا اخي الكريم
      صراحة هذه تحتاج موضوع كامل و من الصعب وضع شرح هنا
      ولكن قم بالكتابة في جوجل إضافة شريط اخر الاخبار في بلوجر
      و سوف تجد الكثير من المواضيع حول إضافته

      حذف
  5. انا الشرح الى عايزة شرح القوائم المندسلة وشكرا ع الموضوع دا انا كنت بدور علية برضوا وياريت تحققلى طلبى =d =q

    ردحذف
    الردود
    1. لا شكر على واجب
      بخصوص القوائم المنسدلة لو لك خبرة في اكواد CSS في بقوالب بلوجر الخاصة بمدون محترف
      الكثير من القوائم المنسدلة تستطيع تحميل اي قالب و اخذ اكواده
      لإنه احيانا هناك قوائم تحتاج اكواد سكريبت
      و الافضل لك اخذ اكواد اي قائمة من اي قالب بلوجر في المدونة
      افضل من الشروحات الموجودة في جوجل

      حذف
  6. جميييل جميل جدا

    ردحذف
    الردود
    1. مرورك الجميل يا غالي

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

    ردحذف
    الردود
    1. و عليكم السلام ورحمة الله و بركاته
      تقدر تخليه بالجهتين
      كل ما عليك فعله هو نسخ الاكواد مرتين ولكن بمُعرفات مختلفة يعني تغيير الـ id و class

      حذف
  8. رائع جدا اخى اضافه ولا احى بالتوفيق

    ردحذف
    الردود
    1. =h
      يوجد لك تعليق هُنا =d

      حذف
  9. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
    الردود
    1. نعتذر لمسح التعليق بسبب الرابط
      قد يكون لم يعمل معك لإنه لا يوجد في قالبك كود جافاسكريبت الخاص بموقع font-awesome
      قم بإضافة الكود وردلي خبر

      حذف
  10. انا مش رادى يتعمل عندى

    ردحذف
    الردود
    1. قد تكون طريقة تركيب الاكواد خاطئة او يتعارض مع إضافة مع قالبك

      حذف
  11. أزال أحد مشرفي المدونة هذا التعليق.

    ردحذف
    الردود
    1. لا شُكر على واجب صديقي
      ومن الجيد أنّ الأضافة عملت معك
      بالتوفيق

      حذف
  12. من فضلك اخى انا اريد منك اصلاح مدونتىمن فضلك اخى الكريم

    ردحذف
    الردود
    1. أعتذر منك صديقي
      فنحن مشغولين كثيرًا

      حذف
  13. السلام عليكم، الإضافة لم تشتغل.. ببساطة :/
    طبقت كل الأكواد بشكل صحيح لكن لم يظهر شيء

    فما الأمر؟

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

      حذف
  14. تم شكرا لك اخي الكريم

    ردحذف
    الردود
    1. لا شكر على واجب
      بالتوفيق صديقي

      حذف

يسعدنا تفاعلكم بالتعليق , لكن يرجى مراعاة الآداب العامة وعدم نشر روابط إشهار حتى ينشر التعليق , ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود. اولا تضع الـ = بعدها الحرف الخاص بالإبتسامة
=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r