كيفية اضافة زر الصعود الى الاعلى وزر النزول الى الاسفل في مدونة بلوجر

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

عنوان الدرس : كيفية اضافة زر الصعود الى الاعلى وزر النزول الى الاسفل في مدونة بلوجر.

بسم الله الرحمان الرحيم

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

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

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

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

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

      ولجعل موقعك يستقطب العديد من الزوار و القراء يجب عليك ان تساعد زوارك في التنقل داخل مدونتك بحرية .

اخواني الكرام اترككم مع شرح كيفية اضافة زر الصعود وزر النزول داخل المدونة :

* اولا قم بتسجيل الدخول الى بلوجر .

* ثم قم باختيار المدونة التي تريد اضافة الازرار اليها . 

* بعد ذلك قم بالضغط على قالب .

* ثم تحرير html .

ثم اضغط على ctrl+f ليظهر مربع البحث ثم قم بالبحث عن الكود التالي :

]]></b:skin>

ثم قم بوضع الكود التالي فوق / قبل الكود السابق .

/* Up and Down Buttons with jQuery</p> <p style="text-align: justify;"> ----------------------------------------------- */</p> <p style="text-align: justify;"> .button_up{</p> <p style="text-align: justify;"> padding:7px; /* Distance between the border and the icon */</p> <p style="text-align: justify;"> background-color:white;</p> <p style="text-align: justify;"> border:1px solid #CCC; /* Border Color */</p> <p style="text-align: justify;"> position:fixed;</p> <p style="text-align: justify;"> background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOLlSElE-a5TDds-d4cCSppWCARON54fdX5FOxTlSffi20uXDXWI-LBrhY940IBXfKnKM70O37rmFGleczDdV0fjq8A0wCwIDrKM_YOAInBPg8blZsWWEnu8IhPvaGQReU55vEyo1hxkk/s16/arrow_up.png) no-repeat top left;</p> <p style="text-align: justify;"> background-position:50% 50%;</p> <p style="text-align: justify;"> width:20px; /* Button's width */</p> <p style="text-align: justify;"> height:20px; /* Button's height */</p> <p style="text-align: justify;"> bottom:280px; /* Distance from the bottom */</p> <p style="text-align: justify;"> right:5px; /* Change right to left if you want the buttons on the left */</p> <p style="text-align: justify;"> white-space:nowrap;</p> <p style="text-align: justify;"> cursor: pointer;</p> <p style="text-align: justify;"> border-radius: 3px 3px 3px 3px;</p> <p style="text-align: justify;"> opacity:0.7;</p> <p style="text-align: justify;"> filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);</p> <p style="text-align: justify;"> }</p> <p style="text-align: justify;"> .button_down{</p> <p style="text-align: justify;"> padding:7px; /* Distance between the border and the icon */</p> <p style="text-align: justify;"> background-color:white;</p> <p style="text-align: justify;"> border:1px solid #CCC; /* Border Color */</p> <p style="text-align: justify;"> position:fixed;</p> <p style="text-align: justify;"> background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk2Xq8Ltt54NXlj-blgyV_QsCgEG0nh_S8nFl7_0D7vNxi7I92ocuk5qAw2vfAq5cP13n00f4oDIblmVOBgGh-xCa-qRvr3K0fH7snHbCbQa7SNB8nevlfx6L2_pebNlPvS0fm4omk60U/s16/arrow_down.png) no-repeat top left;</p> <p style="text-align: justify;"> background-position:50% 50%;</p> <p style="text-align: justify;"> width:20px; /* Button's width */</p> <p style="text-align: justify;"> height:20px; /* Button's height */</p> <p style="text-align: justify;"> bottom:242px; /* Distance from the bottom */</p> <p style="text-align: justify;"> right:5px; /* Change right to left if you want the buttons on the left */</p> <p style="text-align: justify;"> white-space:nowrap;</p> <p style="text-align: justify;"> cursor: pointer;</p> <p style="text-align: justify;"> border-radius: 3px 3px 3px 3px;</p> <p style="text-align: justify;"> opacity:0.7;</p> <p style="text-align: justify;"> filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);</p> <p style="text-align: justify;"> }

بعد ذلك قم بالبحث عن الكود التالي .

</body>

وقم بوضع الكود التالي فوق / قبل الكود السابق .

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/></p> <p style="text-align: justify;"> <br></p> <p style="text-align: justify;"> <div class='button_up' id='button_up' style='display:none;'/> </p> <p style="text-align: justify;"> <div class='button_down' id='button_down' style='display:none;'/> </p> <p style="text-align: justify;"> <br></p> <p style="text-align: justify;"> <script></p> <p style="text-align: justify;"> //<![CDATA[</p> <p style="text-align: justify;"> (function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();</p> <p style="text-align: justify;"> <br></p> <p style="text-align: justify;"> $(function() {</p> <p style="text-align: justify;"> var $elem = $('body');</p> <p style="text-align: justify;"> $('#button_up').fadeIn('slow');</p> <p style="text-align: justify;"> $('#button_down').fadeIn('slow');</p> <p style="text-align: justify;"> $(window).bind('scrollstart', function(){</p> <p style="text-align: justify;"> $('#button_up,#button_down').stop().animate({'opacity':'0.2'});</p> <p style="text-align: justify;"> });</p> <p style="text-align: justify;"> $(window).bind('scrollstop', function(){</p> <p style="text-align: justify;"> $('#button_up,#button_down').stop().animate({'opacity':'1'});</p> <p style="text-align: justify;"> });</p> <p style="text-align: justify;"> $('#button_down').click(</p> <p style="text-align: justify;"> function (e) {</p> <p style="text-align: justify;"> $('html, body').animate({scrollTop: $elem.height()}, 800);</p> <p style="text-align: justify;"> } );</p> <p style="text-align: justify;"> $('#button_up').click(</p> <p style="text-align: justify;"> function (e) {</p> <p style="text-align: justify;"> $('html, body').animate({scrollTop: '0px'}, 800);</p> <p style="text-align: justify;"> } );});</p> <p style="text-align: justify;"> //]]></p> <p style="text-align: justify;"> </script>

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

ارجو ان تكونو استفدتم من درس اليوم الى درس قادم ان شاء الله.

 لا تنسى مشاركة الموضوع مع اصدقائك 

تم بعون الله