ظƒظ„ظ…ط© ط§ظ„ظپط±ظٹظ‚

ظپظٹ ط¹طµط±ظ†ط§ ظٹظˆط¬ط¯ ظ…ط¦ط§طھ ط§ظ„ط¢ظ„ط§ظپ ظ…ظ† ط§ظ„ظ…ط¯ظˆظ†ظٹظ† ظˆط§ظ„ظ…ط¯ظˆظ†ط§طھ ، ط§ظ„ط¨ط¹ط¶ ظٹط¹ظ…ظ„ ط¨ط´ط؛ظپ ظˆط­ط¨ ظˆط§ظ„ط¢ط®ط± ظٹط¹ظ…ظ„ ط¨ط´ظƒظ„ ط¥ظ†طھط§ط¬ظٹ ظ„ظ„ظƒط³ط¨ ظپظ‚ط· ! ط£ظ…ط§ ظ†ط­ظ† .. ظ†ط­ط¨ ظˆظ†ط¹ط´ظ‚ ظˆظ†ط¯ظˆظˆظˆط¨ ظپظٹ ط¯ط¨ط§ط¯ظٹط¨ ط§ظ„طھط¯ظˆظٹظ† ظˆظ†ط¤ظ…ظ† ط£ظ†ظ†ط§ ط³ظ†ظ‚ظˆظ… ط¨ط¥ط¶ط§ظپط© ظƒط¨ظٹط±ط© ظ„ظ„ظ…ط­طھظˆظ‰ ط§ظ„ط¹ط±ط¨ظٹ ظˆظ„ظˆ ط¨ط´ظٹط¦ ط¨ط³ظٹط· ، ظ†طھط¹ظ„ظ… ط¨ط´ظƒظ„ ظ…ط³طھظ…ط± ظ†ط´ط§ط±ظƒظƒظ… ط¨ظƒظ„ ط¬ط¯ظٹط¯ ، ظ†ط­ط§ظˆظ„ ط§ظ„ظ…ط³ط§ط¹ط¯ط© ظ†ط­ط¨ ط£طµط¯ظ‚ط§ط،ظ†ط§ ، ظ†ظ‡طھظ… ط¨ط¥ط³طھظپط³ط§ط±ط§طھظ‡ظ… ظƒظ…ط§ ظ„ظˆ ظƒط§ظ†طھ ظ…ظ„ظƒظ†ط§، ظپط±ظٹظ‚ظ†ط§ ظپط±ظٹظ‚ ظˆط§ط­ط¯ ط±ط؛ظ… ط£ظ†ظ‡ ظ…طھظƒظˆظ† ظ…ظ† ط´ط®طµ ظˆط§ط­ط¯ :) ظ„ظƒظ†ظ‡ ظٹط¹ظ…ظ„ ط¨ط¬ظ†ظˆظ†

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

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

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

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

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

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

في البداية قم بالذهاب الى لوحة تحكم بلوجر ثم اذهب قالب ثم تحرير 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>

ط¹ظ†ظˆط§ظ† ط§ظ„طھط¯ظˆظٹظ†ط©: [بلوجر] إضافة زر الصعود للأعلى و النزول للأسفل بشكل احترافي
طھظ‚ظٹظٹظ… : 10 ظ…ظ† 10 ظ…ط±طھظƒط² ط¹ظ„ظ‰ 24 طھظ‚ظٹظٹظ….
ط§ظ„ظƒط§طھط¨ : ط£ط­ظ…ط¯ ط£ط¨ظˆط¹ط¨ظٹظ„ط© ظ…ط¯ظٹط± ظ…ظˆظ‚ط¹ ط§ظ„ظ…ط·ظˆط± .ظ†طھ
ط¹ط¯ط¯ ط§ظ„ظ…ط´ط§ظ‡ط¯ط§طھ :

طµظ†ط¯ظˆظ‚ ط§ظ„طھط¯ظˆظٹظ†ط©

ط±ط§ط¨ط· ظ…ط¨ط§ط´ط± :
ظƒظˆط¯ ظ„ظ„ظ…ظ†طھط¯ظٹط§طھ :
HTML ظƒظˆط¯ :

* ط¨ط¥ظ…ظƒط§ظ†ظƒ ط¥ط¯ط±ط§ط¬ ط§ظ„ط£ظƒظˆط§ط¯ ط§ظ„ط؛ظٹط± ظ‚ط§ط¨ظ„ط© ظ„ظ†ط´ط± ط¨طھط­ظˆظٹظ„ظ‡ ط¹ط¨ط± ظ…ط­ظˆظ„ ط§ظ„ط£ظƒظˆط§ط¯

طھط­ظˆظٹظ„ ط§ظ„ط£ظƒظˆط§ط¯ط¥ط؛ظ„ط§ظ‚ ط§ظ„طھط¹ط¨ظٹط±ط§طھط¥ط®ظپط§ط،

ط´ظƒط±ط§ ظ„طھط¹ظ„ظٹظ‚ظƒ
ظ‚ط§ظ„ط¨ ط¨ط¯ط§ظٹط© .. ظ†ظ‚ط·ط© .

ط§ظ„ظ…ط·ظˆط± .ظ†طھ © 2014, ط¬ظ…ظٹط¹ ط§ظ„ط­ظ‚ظˆظ‚ ظ…ط­ظپظˆط¸ط©