[بلوجر] إضافة زر الصعود للأعلى و النزول للأسفل بشكل احترافي - المطور | نطوّر الويب العربي
أخر التدوينات
الأحد، 21 ديسمبر، 2014

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

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

السلام عليكم ورحمة الله وبركاتة

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

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

في البداية قم بالذهاب الى لوحة تحكم بلوجر ثم اذهب قالب ثم تحرير html
قم بالبحث عن </body>
وضع فوقة / قبلة الكود الاتي يمكنك تحميل الكود من هنا  او قم بالذهاب الى التخطيط وقم بضافة اداة وضع الكود بداخلها الطريقتان يعملنان بشكل جيد

 <style type='text/css'>
/* CSS Top Down Hm */
#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 #00acd6 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:#E74C3C 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:#C0392B 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;}
</style>
<script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').fadeIn(); } else { $('#BounceToTop').fadeOut(); } });
$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); var $elem = $('body');
$('#GoToDown').click(function () {
$('html, body').animate({scrollTop: $elem.height()}, 4000);
$('#GoToDown').fadeOut()
});
$('#BounceToTop').click(function () {
$('#GoToDown').fadeIn()
});
 });
</script>
<div id='BounceToTop'></div>
<div id='GoToDown'></div>

[بلوجر] إضافة زر الصعود للأعلى و النزول للأسفل بشكل احترافي Reviewed by Ahmad Waleed on 10:05 ص Rating: 5 السلام عليكم ورحمة الله وبركاتة اليكم اليوم اضافة مميزة مميز وهي  إضافة زر الصعود للأعلى و الن...

هناك تعليقان (2):

تذكر قوله تعالى:
(( مَا يَلْفِظُ مِنْ قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ)) ‏
-----------------------------------
الان يمكنك اضافة اي مقطع فيديو الى التعليقات وايضا اضافة الصور فقط ضع رابط الصور او مقطع الفيديو في التعليقات
----------------------------------
آرائكم تسعدنا, لمتابعة التعليق حتى نرد عليك فقط ضع إشارة على إعلامي ,ويمكنك ان تستخدم الإبتسامات بالوقوف عليها لمعرفة الكود


=q =w =s =d =f =g =h =t =y =u =z =x =c =v =b =n =m =a =e =r

.