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

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

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

مُساهمة من طرف Admin في الجمعة يونيو 10, 2016 10:48 pm

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



شرح تركيب الاضافة
[list="margin-right: 0px; margin-left: 0px; padding-right: 0px; padding-left: 0px; outline: 0px; transition: all 0.5s ease; border: 0px; vertical-align: baseline; list-style-position: inside; color: rgb(0, 0, 0); font-family: \"Droid Arabic Naskh"; font-size: 14px; line-height: 28px; text-align: right; background: rgb(255, 255, 255);"]
[*]ندخل الى لوحة التحكم فى بلوجر

[*]من ثم نحتار القالب

[*]ونختار تحرير Html

[/list]
ونبحث عن ]]></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)}
[size]

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

[/size]
<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 لنشر الطريقة على مدونتة.

Admin
Admin

المساهمات : 55
تاريخ التسجيل : 10/06/2016

معاينة صفحة البيانات الشخصي للعضو http://tgm3.a7larab.net

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة


 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى