إضافة الصعود والنزول بشكل عرب ويب

الكاتب بتاريخ عدد التعليقات : 5
مرحبا بكم اصدقائي متابعين مدونة مهووسين الويب في درس جديد في المدونة وهو إضافة جميلة لمدونات بلوجر وهي ازرار عرب ويب للصعود لإعلى والنزول لإسفل وقد جاء لي الكثير من الطلبات من اجلها لأني كنت اضعها في كل قوالب المدونة تقريبا اليوم قررت وضعها لكم لن اطيل عليكم ندخل الى الشرح
شرح التركيب
1-إدخل الى المدونة ثم ادخل الى القالب ثم تحرير html
2-قم بالبحث عن ]]></b:skin>
3-ضع الكود التالي فوقه (قبله)
/* CSS Top Down by th3geekweb3 */
#BounceToTop {background:#fff;text-align:center;position:fixed;bottom:10px;right:10px;cursor:pointer;width:30px;height:20px;padding:5px;display:none;border-radius:2px;}
#BounceToTop:before {content:"";position:absolute;bottom:5px;right:5px;width:0; height:0;border-style:solid;border-width:0 15px 20px 15px;border-color:transparent transparent #0af transparent;line-height:0;transition:all 0.3s ease-out;}
#BounceToTop:hover:before {content:"";position:absolute;bottom:5px;right:5px; width:0;height:0;border-style:solid;border-width:0 15px 20px 15px;border-color:transparent transparent #00c0ef transparent;line-height:0}
#BounceToTop:after {content:""; position:absolute;bottom:5px;right:11px;width:0; height:0;border-style:solid;border-width:0 9px 12px 9px;border-color:transparent transparent #fff transparent;line-height:0;}
#GoToDown {background:#fff;text-align:center;position:fixed;bottom:10px;right:60px;z-index:999;cursor:pointer;width:30px;height:20px;padding:5px;border-radius:2px;}
#GoToDown:before {content:"";position:absolute; bottom:5px;right:5px; width:0;height:0;border-style:solid;border-width:20px 15px 0 15px;border-color:#0af transparent transparent transparent;line-height:0;transition:all 0.3s ease-out;}
#GoToDown:hover:before {content:"";position:absolute; bottom:5px; right:5px;width:0;height:0;border-style:solid;border-width:20px 15px 0 15px;border-color:#139CE2 transparent transparent transparent;line-height:0}
#GoToDown:after {content:"";position:absolute;top:5px;right:11px;width:0; height:0;border-style:solid;border-width:12px 9px 0 9px;border-color:#fff transparent transparent transparent;line-height:0;}
4-قم بالبحث عن </body>
5-ضع الكود التالي فوقه(قبله)
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()&gt;100) { $(&#39;#BounceToTop&#39;).fadeIn(); } else { $(&#39;#BounceToTop&#39;).fadeOut(); } });
$(&#39;#BounceToTop&#39;).click(function() { $(&#39;body,html&#39;).animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); var $elem = $(&#39;body&#39;);
$(&#39;#GoToDown&#39;).click(function () {
$(&#39;html, body&#39;).animate({scrollTop: $elem.height()}, 4000);
$(&#39;#GoToDown&#39;).fadeOut()
});
$(&#39;#BounceToTop&#39;).click(function () {
$(&#39;#GoToDown&#39;).fadeIn()
});
 });
</script>
<div id='BounceToTop'/>
<div id='GoToDown'/>
*الان سوف نضيف ملف الايقونات اذا كان موجود لديك لا تضفه
6-قم بالبحث عن </head>
7-ضع الكود التالي فوقه(قبله)
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
ومن ثم قم بحفظ القالب وانتهى الدرس ونلتقي في اضافة اخرى انشاء الله

5 تعليقات على موضوع " إضافة الصعود والنزول بشكل عرب ويب "

اضافة غاية في الابداع

شكرا وهناك المزيد قريبا بإذن الله

أخي الأضافة لا تعمل
www.66GS66.com
أرجو الرد بسرعة

████ شروط التعليق ████
1- يجب على التعليق أن يكون بلا روابط إشهارية
2- أن يكون التعليق خاص بمحتوى التدوينة
3- لإضافة كود حوله أولاً بمحول الأكواد
4- لاستعمال خط عريض ضع الكود : <strong>النص هنا...</strong>
5- لاستعمال خط مائل ضع الكود : <em>النص هنا...</em>
6- لإضافة صورة ضعها بهذا الكود : <i rel="image"> ... رابط الصورة هنا ... </i>

الإبتسامات إخفاء