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

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

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

معاينة

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

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

ابحث عن الوسم ]]> و اضف الكود التالي فوقه

/* 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)}

الخطوة الثانية ابحث عن الوسم و اضف الكود التالي فوقه

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

Unknown

اضف تعليق

اضافات بلوجر, نصائح للمدونين

السبت، 6 يونيو 2015

عن الكاتب مدون محترف

إسمي شرف ملقب بي فيدي عمري حوالي 28 سنة مدون مغربي مهووس بجديد تكنولوجيا المعلوميات مهتم بالحماية المعلوماتية يمكنك متابعتي من خلال الفيسبوك أو. تويتر.أو. جوجل بلس

0000000000

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

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

عن الكاتب مدون محترف

مقالات قد تهمك