اضافة زر الصعود الى اعلى في بلوجر بتقنية 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtVMXHqU6omcytsVKZMlPbTDPtgwUDTHTp7IWU7jHIbsSNlRf2eOeU1ewuNarucxMTC-flbhD0-WMISKdzUJNa4F8qw-vL1mbcXVl_JnUmbpj8ehjoep3X5YzPYNd0x2AnI34fcUZGzjo/s1600/style1.png')}

.style2 {background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3s_8P_7RehgVJXgeVbzmCXYS_Nywq-S-hT77bUxCjdg-USV0G4RgMhfOWWnU44pOIqphzDkJbq3AnV86IQdeg1VkDmvzvv_STVvNPmQKfImviucj_jl_mbMKSiOlpxe_hfgEq-ID4Fps/s1600/style2.png')}

/* End The Needed Code */</style>

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

</body>

7. نختار الشكل الذي نريده و نضيف الكود الخاص به فوق الكود السابق

الشكل 1

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