الدرس 24 كيفية اضافة زر الصعود و النزول الى مدونة بلوجر

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

كثيرا ما نرى في بعض المدونات العربية او المدونات الاجنبية انها تحوي على زر الصعود و النزول بضغة واحدة و هاذا يجعل منظرها جميلا  كما انه  يزيد من سهولة التصفح و قراءة  المواضيع .

السلام عليكم اخواني الكرام في الدرس رقم "24" من سلسلة دروس بلوجر سنتطرق في هاذا الدرس الى كيفية  وضع زر  الصعود و النزول احترافي على مدونة بلوجر 

- يتم ادراج هذه الاضافة بالعدة اشكال  و ذلك حسب شكل المدونة لتتلائم معها  و يتم التوافق الكامل بين اجزاء المدونة .

تركيب اداة الصعود اعلى الصفحة سهل جدا و لا يحتاج الى خبرة فقط تابع الشرح الثالي :

1. نتوجه الى المدونة

2. نختار قالب من على القائمة

3. نختار تحرير HTML .

4. نبحث عن الكود  </head>  [استعمل CTRL+F]

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/AVvXsEj9ghazkQTzvlDHM1Nvgcb_JDGExicxcnXEXEW6rGiGeb5CuqT9F1CWRNzuZ-hU2dk8Ug8h30NMHJyEeYMwglOZa5ON8-6WIy4J082JULubAxPDiOWLM3a-noq0_1vefo_6fd3rUw9wP-w/s1600/style1.png')} .style2 {background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiraJAK6FVT6w05ijAR6nYauYU-lHKFYyCsBubktd06tEzJDDjbRD48TZuVYjYH4El7d9Bt872SLDfiWCWtsKLrpl5hIL-OPZ1aJL_2cZ6-QB447zGFd9y9bmRJjtli0IJ93ZsqiEbisvM/s1600/style2.png')} /* End The Needed Code */</style> 6. نبحث عن الكود الثالي </body>

6. نبحث عن الكود </body>
7. نختار كود احد الازرار
الزر الاول 

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

الزر الثاني  

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

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

للمزيد من المعلومات شاهد الفيديو التعليمي

تصنيف : دروس بلوجر