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

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

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

  1. التوجه الى لوحة التحكم اخذ نسخة احتياطية من القالب تحرير html ونبحث عن هذا الكود ]]></b:skin> ونضيف الكود التالي فوقه مباشرة .
/*-------backtotop-----*/
#backtotop:hover {background-color:#303030;color:#fff;}
#backtotop{overflow:hidden;position:fixed;z-index:90;right:30px;bottom:0;display:none;width:42px;height:40px;line-height:34px;color:#eee;text-align:center;background-color:#E83E3B;font-size:20px;text-indent:0;cursor:pointer;-webkit-transform:translateZ(0);padding:4px 0 0;text-align:center;border-radius:5px 5px 0 0!important;transition:all .5s}.carousel-control { bottom: 35px;}

#backtotop {font-size:20px;}
#backtotop{left:15px;bottom:0;display:none;width:34px;height:34px;color:#fff;text-align:center;background-color:#446faa;font-size:22px;line-height:32px;padding:0;}
  1. نبحث عن هذا الكود </body> ونضيف فوقه التالي مباشرة.
<script type='text/javascript'>
//<![CDATA[
document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://twemoji.maxcdn.com/twemoji.min.js\"></scr" + "ipt>");
$('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var 
//Pre Auto Selection
pres=document.querySelectorAll("pre,kbd,blockquote,i"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
//]]>
jQuery(document).ready(function(e){var t=e("#backtotop");e(window).scroll(function(){e(this).scrollTop()>=800?t.show(10).animate({opacity:"1"},10):t.animate({opacity:"0"},10)});t.click(function(t){t.preventDefault();e("html,body").animate({scrollTop:0},400)})})
</script>
  1. نبحث عن هذا الكود </footer> ونضيف الكود التالي فوقه مباشرة
<a href="#" id="backtotop" style="display: inline-block; opacity: 1;">
<i class="fa fa-angle-up"></i></a>
  1.  من لم يتواجد في قالب مدونتها كود خطوط لاظهار الايقونات الذي موجود عنده مسبقآ لاداعي لاضافته
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>


الى هنا نكون انتهينا اي استفسار اترك تعليق وسوف نقوم بالرد عليك في ارسع وقت ممكن 

تعليقات

إرسال تعليق