كيفية اضافة زر الصعود الى اعلى في مدونات بلوجر بتقنية JQUERY | المهندس الاول
الرئيسية / تطوير المواقع / بلوجر / كيفية اضافة زر الصعود الى اعلى في مدونات بلوجر بتقنية JQUERY

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

تركيب زر الصعود الى اعلى الصفحة في مدونات بلوجر
إضافة الصعود الى الاعلى اضافة خاصة بالمدونات و المواقع تساعد الزوار على الصعود او النزول الى الصفحات بالسرعة و تعطي شكل خاص للمدونة ، يتم اضافة هذه الاداة “اداة الصعود الى الأعلى” لتعطي نمط احترافي للمدونات و المواقع اضافة الى سرعة في التنقل بين الصفحات سواءا من الاسفل او الاعلى .
يتم ادراج هذه الاضافة بالعدة اشكال  و ذلك حسب شكل المدونة لتتلائم معها  و يتم التوافق الكامل بين اجزاء المدونة .
طريقة تركيب  زر الصعود الى اعلى الصفحة في مدونات بلوجر
تركيب اداة الصعود اعلى الصفحة سهل جدا و لا يحتاج الى خبرة فقط تابع الشرح الثالي :
1. نتوجه الى المدونة
2. نختار قالب من على القائمة
3. نختار تحرير HTML .
4. نبحث عن الكود الثالي   [استعمل CTRL+F]

</head>

5. نضيف الكود الثالي من فوق الكود السابق

<script src=’https://hukmat.googlecode.com/svn/trunk/oz-scroll-up.js’/>
<style>
/*
Plugin Name : oz-scroll-up
Created By : HUKMAT
Website : http://hukmat.blogspot.com/
*/
/* Start For Testing Only */
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:0;
margin:0
}
.notify {
position:fixed;
top:0;
right:45%;
width:10%;
padding:10px 0;
text-align:center;
color:#333;
background-color:#FFF;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
}
section {height:1400px;font-size:50px}
section:first-of-type {background:#DDD}
section:nth-of-type(2) {background:#555;color:#FFF}
section:nth-of-type(3) {background:#000;color:#FFF}
section:nth-of-type(4) {background:#FFF}
/* End For Testing Only */
/* Start The Needed Code */
#oz-scroll {
position:fixed;
bottom:15px;
left:-80px;
height:48px;
width:48px;
overflow:hidden;
display:none;
zoom:1;
filter:alpha(opacity=60);
opacity:.6;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-ms-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
}
#oz-scroll img {max-width:100%}
#oz-scroll:hover {opacity:1}
.style1 {background-image:url(&#39;http://1.bp.blogspot.com/-DJDOsix-KQ4/VFeQg2OzwaI/AAAAAAAAECo/62ooMxojiwY/s1600/style1.png&#39;)}
.style2 {background-image:url(&#39;http://1.bp.blogspot.com/-2X8CsGeT4gI/VFeQg-dauAI/AAAAAAAAECs/Zr1w5Xd3pOg/s1600/style2.png&#39;)}
/* End The Needed Code */</style>

6. نبحث عن الكود الثالي

</body>

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

<!– Start Scroll To Top Button –>
<a class=’style1′ href=’#’ id=’oz-scroll’/>
<!– End Scroll To Top Button –>

  • الشكل 2
تركيب زر الصعود الى اعلى الصفحة في مدونات بلوجر

 

<!– Start Scroll To Top Button –>
<a class=’style2′ href=’#’ id=’oz-scroll’/>
<!– End Scroll To Top Button –>

8. و أخيرا نظغط على حفظ .

عن المهندس الاول

محمد عبدالله:عربي الهوية مصري الجنسية /اعمل في مجال الانترنت و الكمبيوتر لهدف واحد ووحيد وهو مساعدة كل عربي مبتدئ وتأهيله للإعتماد علي نفسه بعد الله عز وجل وأرجو منكم مساعدتي في تحقيق الهدف بأن تكونو في عون بعضكم البعض كعرب دون النظر للجنسية أو الدين أو العرق .
المهندس الاول للتدريب تعليم كل مايخص الحاسوب من البداية للإحتراف حماية - صيانة - تصميم - انترنت - برامج كامله -دورات ......