Skip to main content

طريقة اضافة زر الذهاب للأعلى في الBlogger | بلوجر

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

لأضافة زر الذهاب الى اعلى الصفحة بتقنية الJQuery اتبع الخطوات التالية:


الخطوة الأولى : اذهب الى صفحة ادارة ال Blogger وأضغط على layout ثم قم بالضغط على Add a Gadget:
Step #1: Go to Blogger Dashboard then click on Layout after that click on Add a Gadget:



الخطوة الثانية : قم بأختيار القطعة HTML/JavaScript وقم بالضغط على الزر + :
Step #2: Choose HTML/JavaScript then click on Add Button + :




الخطوة الثالثة: قم بلصق الكود ادناه في خانة المحتوى وأضغط على Save:
Step #3: Paste the code in content textarea then click on save:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});

jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>

<style>
div#page {
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 20px;
}

.back-to-top {
position: fixed;
bottom: 2em;
right: 0px;
text-decoration: none;
font-size: 12px;
padding: 1em;
display: none;
}

.back-to-top {
color:#fff;
}
</style>

<a href="#" class="btn btn-default back-to-top">Back to Top  <span class="glyphicon glyphicon-triangle-top" aria-hidden="true"></span></a>


الخطوة الرابعة : النتيجة النهائية للزر تظهر بهذا الشكل:
Step #4: the final result should be like this:



شكراً لزيارتكم 
 ولا تنسوا ان تعملوا مشاركة للموضوع , وعمل اعجاب اذا كان الموضوع له اهمية بنظرك ولتواصل عملي في كل ماهو ضروري!!!

دمتم في رعاية الله

Comments

Popular posts from this blog

PART #2: Registration and Login System Tutorial Using PHP and MYSQL

PART #2: Registration and Login System Tutorial Using PHP and MYSQL Registration and login system using PHP and MySQL database, in this part you will do the following: 1- Creating the registration page. 2- Validating the registration form. 3- Sending the activation link on successful registration. note: you can find the mailserver tool here: [MailServerTool] Good luck. PHP,Mysql,Programming,web development,How to,Technology,web programming,web project ideas,safaa al-hayali,saf3al2a,Registration and login,Registration and login in php,php and mysql login system,registration system using php and mysql,login and register php,login and register php with database,database,php tutorial,learn php,tutorial

How To Play .srt Subtitles File in Windows Media Player

How To Play .srt Subtitles File in Windows Media Player links: https://sourceforge.net/projects/wmpsub/ wmp,.srt Subtitles File in Windows Media Player,How To Play .srt Subtitles File in Windows Media Player,How To,Safaa Al-Hayali,saf3al2a,srt subtitle in WMP,Windows,Windows Media Player,media,.ass,local subtitles

Virtual Box : How to Increase Disk Size - Windows

How to increase disk size or disk storage in oracle virtual box the command you have to use: vboxmanage.exe modifymedium "[YourPathToVdiFileOfYourVirtualMachine]" --resize [NUMBER] virtual,box,vbox,oracle,partition,size,disk,increase,resize,windows,10,microsoft,vdi,vboxmanage,configuration,Safaa AL-Hayali,saf3al2a,Oracle,VirtualBox,How to,windows 10