الدرس 93: طريقة اضافة ايقونة زر الصعود الى الاعلى على مدونة بلوجر

شرح كيفية اضافة ايقونة زر الصعود بشكل صاروخي على مدونة بلوجر Animated Scroll To Top Widget عند الضعط عليها تقوم بانتقال تلقائيا الى اعلى و اول مقدمة الموضوع او اول مقال على الصفحة الرئيسية لمدونة  Blogger

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

 كيفية ادراج ايقونات رائعة على حسب اختيارك لزر الصعود على مدونة بلوجر

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

1- كود الخاص باضافة ايقونة الصعود الخاصة ببلوجر :

<div class="scroll-top"> <img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgMzEuMDc2IDMxLjA3NiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzEuMDc2IDMxLjA3NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0yMS41NDksMjAuMjI3di0zLjk0N2MwLTguODA2LTMuNzI1LTE0LjEyNS01LjI4My0xNS45NjRDMTYuMDk4LDAuMTE2LDE1Ljg1MSwwLjAwMiwxNS41OTEsMCAgICBjLTAuMjYxLTAuMDAxLTAuNTA4LDAuMTEyLTAuNjc5LDAuMzFjLTEuNTg0LDEuODM1LTUuMzg0LDcuMTU2LTUuMzg0LDE1Ljk3djMuOTQ4bC0wLjcyOSwwLjQ5MSAgICBjLTEuNDA1LDAuOTQ4LTIuMjQ4LDIuNTMzLTIuMjQ4LDQuMjI5djQuNzExYzAsMC4yNzksMC4xNTQsMC41MzcsMC40LDAuNjdjMC4yNDcsMC4xMzIsMC41NDYsMC4xMTcsMC43NzgtMC4wMzlsMi4zNjgtMS41NzcgICAgYzAuNjY1LTAuNDQyLDEuNDQ1LTAuNjc5LDIuMjQ0LTAuNjc5aDEuNzQxdjIuMjgzYzAsMC40MiwwLjM0LDAuNzYsMC43NTksMC43NmgxLjM5NGMwLjQxOSwwLDAuNzU5LTAuMzQsMC43NTktMC43NnYtMi4yODNoMS43NCAgICBjMC43OTksMCwxLjU4LDAuMjM1LDIuMjQ2LDAuNjhsMi4zNjYsMS41NzZjMC4yMzIsMC4xNTYsMC41MzEsMC4xNzEsMC43NzgsMC4wMzljMC4yNDYtMC4xMzMsMC40LTAuMzkxLDAuNC0wLjY3di00LjcxMSAgICBjMC0xLjY5NC0wLjg0NC0zLjI3OS0yLjI0OC00LjIyOUwyMS41NDksMjAuMjI3eiBNMTUuNTM5LDE0LjA0M2MtMS40NDYsMC0yLjYyLTEuMTczLTIuNjItMi42MTljMC0xLjQ0NywxLjE3NC0yLjYxOSwyLjYyLTIuNjE5ICAgIGMxLjQ0NSwwLDIuNjE5LDEuMTcyLDIuNjE5LDIuNjE5QzE4LjE1OCwxMi44NywxNi45ODQsMTQuMDQzLDE1LjUzOSwxNC4wNDN6IiBmaWxsPSIjMzMzMzMzIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==" /> <span class="flame"></span> <span class="flame"></span> <span class="flame"></span> </div><style> .scroll-top img{ height:45px; margin: -12px 0 0 5px; border:0; } .scroll-top {height: 60px; width: 60px; position: fixed; bottom: 100px; right: 30px; display: none; z-index: 9999;}.scroll-top:hover{animation-delay:0s;animation-duration:.1s;animation-iteration-count:infinite;animation-name:shake-little;animation-play-state:running;animation-timing-function:ease-in-out}.scroll-top .flame{-moz-border-bottom-colors:none;-moz-border-left-colors:none;-moz-border-right-colors:none;-moz-border-top-colors:none;border-color:#ffda44 transparent transparent;border-style:solid;border-width:25px 3px 3px;display:none;height:0;left:-4px;margin:-5px auto 0;position:absolute;right:0;top:66%;width:0}.scroll-top .flame+.flame{border-width:10px 2px 2px;left:20px;margin:0}.scroll-top .flame+.flame+.flame{border-width:10px 2px 2px;left:auto;margin:0;right:24px}.scrolling .flame{display:block}.nav-toggle,.owl-item .quote-icon,.price-box .price-box-head-shadow,.scroll-top .flame{transition:all .5s cubic-bezier(.25,.1,.25,1) 0s}@keyframes shake-little{0%{transform:translate(0,0) rotate(0)}14%,16%,2%,20%,24%,30%,48%,52%,54%,76%,8%,84%,86%,88%,92%,96%,98%{transform:translate(0,0) rotate(-.5deg)}10%,12%,22%,32%,4%,42%,44%,64%,72%,80%,90%{transform:translate(-1px,0) rotate(-.5deg)}18%,34%,36%,46%,6%,66%,68%,70%,74%,82%,94%{transform:translate(0,-1px) rotate(-.5deg)}26%,28%,38%,40%,50%,56%,58%,60%,62%,78%{transform:translate(-1px,-1px) rotate(-.5deg)}} </style> <script type="text/javascript"> // Scroll to top button wnHeight = jQuery(window).height(); //Check to see if the window is top if not then display button jQuery(window).scroll(function(){ if (jQuery(this).scrollTop() > wnHeight/2) { jQuery('.scroll-top').fadeIn(); } else { jQuery('.scroll-top').fadeOut().removeClass('scrolling'); } }); //Click event to scroll to top jQuery('.scroll-top').click(function(){ jQuery('html, body').animate({scrollTop : 0},800); jQuery(this).addClass('scrolling'); }); </script>

2- موقع الايقونات : flaticon
ان اعجبك الدرس لا تنسى التقييم و مشاركته مع اصدقائك .