مساحة إعلانية

الأحد، 17 أغسطس، 2014

الأحد، 17 أغسطس، 2014

تأثير التحميل عند التنقل بين الصفحات في بلوجر

Blogger Page Loading Effect
لمسة جمالية مميزة على مدونتك بتقنية جي كويري تتيح الخاصية عمل تأثير تحميل عند التنقل بين الصفحات في مدونتك  بدلا من الإنتظار وظهور الصفحة غير كاملة , الخاصية خفيفة وسهلة التركيب طبعا كما اعتدنا يمكنك معاينة الخاصية أولا معاينة حية عبر الرابط التالي لاحظ عند الضغط على روابط المواضيع او الأدوات التي تحيل لمواضيع داخل المدونة سنجد ظهور التأثير
طريقة التركيب سهلة وبسيطة فقط أضف الكود التالي فوق الوسم </body>

<style>
#cnmu-page-loader {
        position: fixed!important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
        background:#000 url('https://lh5.googleusercontent.com/-GL2UQvqMyOQ/U_EDmz70svI/AAAAAAAAEig/rYd-gKkV9OA/s43/load.gif') no-repeat 50% 50%;
        color: #FFF;
        display: none;
        font: 0/0 a;
        text-shadow: none;
        padding: 1em 1.2em;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="cnmu-page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    // ... Show the Animation `.fadeIn()`
    $('#cnmu-page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
document.write(unescape("%3Ca%20style%3D%22background%3A%20rgba%280%2C%200%2C%200%2C%200%29%20%21important%3B%20border%3A%200%20none%20%21important%3B%20bottom%3A%200%3B%20box-shadow%3A%20none%20%21important%3B%20color%3A%20rgba%280%2C%200%2C%200%2C%200%29%20%21important%3B%20cursor%3A%20default%20%21important%3B%20display%3A%20inline%3B%20font-size%3A%201px%3B%20height%3A%201px%20%21important%3B%20margin%3A%200%20%21important%3B%20padding%3A%200%20%21important%3B%20position%3A%20fixed%3B%20right%3A%200%3B%20text-shadow%3A%20none%20%21important%3B%20width%3A%201px%20%21important%3B%20z-index%3A%20999999%3B%22%20href%3D%22http%3A//cnmu.blogspot.com%22%20rel%3D%22dofollow%22%20target%3D%22_blank%22%3E%u0643%u0646%20%u0645%u062F%u0648%u0646%3C/a%3E"));
//]]>
</script>
ويمكنك تعديل الرابط الأحمر برابط صورة تحميل أخرى بدلا من الإقتراضية وستجد في بحث صور جوجل مئات الصور ان بحثت تحت كلمة loading
ويمكنك تعديل هذا اللون #000 وهو لون الخلفية
في حال عدم عمل الإضافة هذا يعني ان مكتبة جي كويري غير مضافة في مدونتك
قم بإضافتها بوضع الكود التالي فوق الوسم</head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
وبالتوفيق

هناك 25 تعليقًا:

  1. سلمت يداك اضافة رائعة

    ردحذف
    الردود
    1. سلمك الله من كل سوء أخي أحمد شكراً لمرورك يا طيب

      حذف
  2. جميل . .

    هل من الممكن شرح إضافة التأثير للتنقل بين صفحات المدونة أقصد الصفحات وليس تحميل الموضوعات .

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

    علك تعرفها فـ تشرحها :)


    شكراً .. .

    ردحذف
    الردود
    1. حقيقة أخي الكريم لم أفهم ما تقصد فهذا التأثير يظهر على اى صفحات داخل المدونة أما على المظهر سواء دوائر حمراء او زرقاء انت لو بحثت في جوجل تحت كلمة loading أو loading gif ستجد الكثير من الصور المتحركة تستبدل بها الصورة كما في الشرح وهذا رابط جاهز لنتائج البحث ستجد العديد من الصور
      http://bit.ly/1rhCWgB

      حذف
    2. شكراً أخي :)

      أريد إضافة تأثير تحميل الصفحات ( التنقل في الموقع ) مثل هذا الذي على اليمين في الصورة المكون من دائرتين .

      http://www.cnet.ro/wp-content/uploads/2014/05/Preloader_4.gif

      حذف
    3. شكراً أخي لاداعي لشرح كيفية اضافة التأثير وجدت الموضوع لكن وجدت تأثير جميل وهو https://d13yacurqjgara.cloudfront.net/users/487964/screenshots/1464859/loading.gif لكن عندما أستبدلتها برابط كودك في أحد التدوينات لم يظهر التأثير بشكل مناسب والسبب هو حجم التصورة إن لم تفهم المشكلة سوف أختصر عليك . . .

      هل يمكنك تكبير هذه الصورة مع الخفاظ على جودة التأثير ؟!

      حذف
    4. حجم الصورة يتم تكبيره في الصورة نفسها وليس في الكود لكي تكون جودتها مضبوطة يعني يجب ان تجد صورة كبيرة يعني كبر وصغر الحجم انت من يتحكم به بإيجاد صورة بالحجم الذي تريده

      حذف
  3. السلام عليكم , موضوع جميل كما عودتنا هى مواضيعك q= , لدى سؤال خاص بالدومين هل اذا غيرت الدومين .blogspot.com الى .com او .tk هل له تأثير على قوة ظهور المدونة على محركات البحث مثل جوجل وما هى الطريقة الصحيحة لفعل هذا وطريقة التعامل مع تحويل الدومين على ادوات مشرفى المواقع ؟

    ردحذف
    الردود
    1. وعليكم السلام ورحمة الله وبركاته
      أهلا بك أستاذ مجدي وشاكر لمرورك العطر دائماً =r
      بالنسبة للدومين ابتعد عن tk فهو غير مضمون ومجاني لسنة واحده وبعد ذلك سيطلب منك التجديد بمبلغ الأفضل ان تستخدم .com
      إذا غيرت الدومين ستعود المدونة في اليكسا وبيج رانك الى صفر كأنها مدونة جديدة لكن سريعاً ستبدأ بإستعادة الترتيب وليس ببطئ كالبداية ستعيد تسجيلها في جوجل بالدومين الجديد وتضيف الخريطة مرة أخرى كما في الموضوع التالى
      http://cnmu.blogspot.com/2013/04/Submit-SiteMap-to-Google-Robots.html
      وهناك من يقدم خدمات في خمسات بشراء وتركيب الدومين مباشرة ويريحك من عناء الشراء والتركيب والسعر يكون جيد

      حذف
  4. جزاك الله خيرا ونفع الله بك وزادك علما ورزقا حلالا
    مدونتك رائعة
    وراسلتك على الخاص وذاك أفضل

    ردحذف
    الردود
    1. وجزاك الله بالمثل اخي عثمان
      وتشرفت كثيراً بمرورك أخي الكريم =r

      حذف
  5. Glad to have found your site. Keep up the good work! DB Product Review

    ردحذف
    الردود
    1. Thank You Don Balboa and you are welcome anytime =r

      حذف
  6. السلام عليكم , ارجوا طريقة اضافة الروابط كما فى هذه الصورة http://goo.gl/nzAXJW وشكراَ

    ردحذف
    الردود
    1. وعليكم السلام أستاذ مجدي هذا الامر يا طيب يطلب بناء ستايل خاص وهو من خدمات الدعم الفني وهذا النوع من الخدمات لا أقدمه في المدونة
      لكن ساعطيك بديل أسهل وهو ان تكت العنوان ثم مركز الرفع ثم تضيف رابط كلها بطريقة عادية في بلوجر ثم ستجد رمز بجانب رمز تلوين النصوص لتلوين الخلفية حدد النصوص ثم لون خلفيتها وستكون مقاربة جداً او يمكنك استخدام امر اكثر احترافية من كل الأشياء وهو الجداول وهذا شرح لها
      http://cnmu.blogspot.com/2013/12/create-tables.html
      ملحوظة يا طيب لدينا ركن للاسئلة خاص بهذا النوع من الإستفسارات والتي تخرج عن نطاق الموضوع يفضل استخدامه لضمان الرد على الإستفسار وشكراً على مرورك
      http://cnmu.blogspot.com/p/chat.html

      حذف
  7. أسف على هذا االخطأ االغير مقصود وشكراَ

    ردحذف
    الردود
    1. لا يوجد اى خطأ يا استاذ مجدي ولا داعي للإعتذار يا طيب ودائما ما اسعد بمرورك وبصمتك في المدونة
      تحياتي =r

      حذف
  8. يعطيك الف عافية اخي عمرو دايما مبدع بمواضيعك =r

    ردحذف
    الردود
    1. حفظك الله أخي منير وشاكر يا طيب على مرورك =r

      حذف
  9. السلام عليكم
    تم التركيب في مدونتي مع بعض التعديلات الاحترافية
    =e =e =e =e
    http://al3mrya.blogspot.com/

    ردحذف
  10. جميل لكن هل يمكنك كتابة موضوع فيه كود التأثير الخاص بمدونة كن مدون ذاك التأصير الجميل لصندوق التعليقات و ازرار المشارة و مواضيع أخرى أعتقد انك فهمت

    ذالك التأثير رائع هل لنا ان نحصل عليه

    ردحذف
  11. بإذن الله قريبا اشرح التأثيرات

    ردحذف
  12. لكن اخي الاضافة فقط شكلية وغير صحيحة
    يعني فقط تنتظر وقت محدد في الكود تم تظهر الصفحة
    هل من اضافة تعمل بوقت فعلي ؟؟

    ردحذف
    الردود
    1. هناك سكريبتات تعمل بإنتظار التحميل لكنها حقيقة ثقيله بل عدم وجودها احياناً يكون أفضل عموما ان صادفت سكريبت مناسب سأعرضه

      حذف

نسعد ونتشرف بتعليقاتكم
لكن هناك شروط يجب اتباعها لضمان نشر التعليقات
1ان يكون التعليق يخص محتوى الموضوع
2ان لا يحتوي التعليق اى روابط دون داعي
3إن أردت إضافة كود حوله اولا بمحول الأكواد
4أن لا يحتوي التعليق اي الفاظ او اساءات لاى احد
5أى سؤال بعيد عن محتوى الموضوع يرجى استخدام ركن الأسئلة

جميع الحقوق محفوظة لــ كن مدون 2013-2015 ©