fbpx

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

المهندس الاول للتدريب تعليم كل مايخص الحاسوب من البداية للإحتراف

بلوجرتطوير المواقع

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

ضع تقييمك من فضللك
[Total: 2 Average: 3]
تركيب زر الصعود الى اعلى الصفحة في مدونات بلوجر
إضافة الصعود الى الاعلى اضافة خاصة بالمدونات و المواقع تساعد الزوار على الصعود او النزول الى الصفحات بالسرعة و تعطي شكل خاص للمدونة ، يتم اضافة هذه الاداة “اداة الصعود الى الأعلى” لتعطي نمط احترافي للمدونات و المواقع اضافة الى سرعة في التنقل بين الصفحات سواءا من الاسفل او الاعلى .
يتم ادراج هذه الاضافة بالعدة اشكال  و ذلك حسب شكل المدونة لتتلائم معها  و يتم التوافق الكامل بين اجزاء المدونة .
طريقة تركيب  زر الصعود الى اعلى الصفحة في مدونات بلوجر
تركيب اداة الصعود اعلى الصفحة سهل جدا و لا يحتاج الى خبرة فقط تابع الشرح الثالي :
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. و أخيرا نظغط على حفظ .

اترك تعليقاً

هذا الموقع يستخدم Akismet للحدّ من التعليقات المزعجة والغير مرغوبة. تعرّف على كيفية معالجة بيانات تعليقك.