recent
أخبار ساخنة

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

Walid Al-Bana
الصفحة الرئيسية

اضافة زر الصعود الى اعلى في بلوجر بتقنية JQUERY
إضافة الصعود الي اعلى اضافة خاصة بالمدونات و المواقع تساعد الزوار على الصعود او النزول الى الصفحات بالسرعة و تعطي شكل خاص للمدونة ، يتم اضافة هذه الاداة "اداة الصعود الى الأعلى" لتعطي نمط احترافي للمدونات و المواقع اضافة الى سرعة في التنقل بين الصفحات سواء من الاسفل او الاعلى .
يتم ادراج هذه الاضافة بعدة اشكال و ذلك حسب شكل المدونة لتتلائم معها و يتم التوافق الكامل بين اجزاء المدونة .



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

شرح طريقة التركيب

  1. 1. نتوجه الى المدونة 
  2. 2. نختار قالب من على القائمة 
  3. 3. نختار تحرير HTML .
  4. 4. نبحث عن الكود الثالي [استعمل CTRL+F]

</head>

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

<script src='https://hukmat.googlecode.com/svn/trunk/oz-scroll-up.js'/><style>/*Plugin Name : oz-scroll-upCreated By : HUKMATWebsite : 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 -->

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

ومبروك عليك


google-playkhamsatmostaqltradent