اضافة جاري تحميل المدونة لمدونات بلوجر


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

طريقة اضافة جاري تحميل المدونة لمدونات بلوجر :

- في البداية قم بالدخول الى لوحة تحكم مدونتك
- اذهب الى القالب
- ثم اضغط على تحرير HTML
- ابحث عن الوسم </body> عن طريق الاختضار Ctrl+F من اجل البحث السريع
- الآن قم بلصق أحد الأكواد الموجودة في الأسفل قبل/فوق الوسم

أكواد الإضافة :

الشكل الأول : المشاهدة من هنا
    <div id="loader">
        <div class="spinner">
            <div class="spinner-inner"></div>
        </div>
    </div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
    <script type="text/javascript">
        $(window).load(function () {
            setTimeout(function () {
                $(".spinner").fadeOut("slow");
                setTimeout(function () {
                    $("#loader").fadeOut("slow")
                }, 1000)
            }, 1000)
        });
    </script>
<style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(10,10,10,1);z-index:1000}.spinner{position:fixed;width:100%;top:70%;height:30px;text-align:center;font-size:10px}.spinner,.spinner-inner{position:absolute;top:0;bottom:0;right:0;left:0;border:9px solid white;border-color:transparent white;margin:auto}.spinner{width:85px;height:85px;-webkit-animation:spin 2.2s linear 0s infinite normal;-moz-animation:spin 2.2s linear 0s infinite normal;animation:spin 2.2s linear 0s infinite normal}.spinner-inner{width:40px;height:40px;-webkit-animation:spinback 1.2s linear 0s infinite normal;-moz-animation:spinback 1.2s linear 0s infinite normal;animation:spinback 1.2s linear 0s infinite normal}@-webkit-keyframes spin{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes spin{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(360deg)}}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}@-webkit-keyframes spinback{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(-360deg)}}@-moz-keyframes spinback{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(-360deg)}}@keyframes spinback{from{transform:rotate(0)}to{transform:rotate(-360deg)}}</style>
الشكل الثاني : شاهده من هنا
<div id='loader'>
<div class="wrap">
<div class="bg">
<div class="loading">
<span class="title">loading...</span>
<span class="text"><data:blog.title/></span>
</div> </div></div></div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
    <script type='text/javascript'>
        $(window).load(function () {
            setTimeout(function () {
                $(&quot;.wrap&quot;).fadeOut(&quot;slow&quot;);
                setTimeout(function () {
                    $(&quot;#loader&quot;).fadeOut(&quot;slow&quot;)
                }, 1000)
            }, 1000)
        });
    </script>
<style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:black;color:#eaf7ff;z-index:1000;font-family:sans-serif,arial}@-webkit-keyframes title{0%{opacity:0;right:130px}48%{opacity:0;right:130px}52%{opacity:1;right:30px}70%{opacity:1;right:30px}100%{opacity:0;right:30px}}@-moz-keyframes title{0%{opacity:0;right:130px}48%{opacity:0;right:130px}52%{opacity:1;right:30px}70%{opacity:1;right:30px}100%{opacity:0;right:30px}}@-webkit-keyframes fade{0%{opacity:1}100%{opacity:0}}@-moz-keyframes fade{0%{opacity:1}100%{opacity:0}}@-webkit-keyframes bg{0%{background-color:#306f99}50%{background-color:#19470f}90%{background-color:#734a10}}@-moz-keyframes bg{0%{background-color:#306f99}50%{background-color:#19470f}90%{background-color:#734a10}}@-webkit-keyframes blink{0%{opacity:0}5%{opacity:1}10%{opacity:0}15%{opacity:1}20%{opacity:0}25%{opacity:1}30%{opacity:0}35%{opacity:1}40%{opacity:0;right:-21px}45%{opacity:1;right:80px}50%{opacity:0;right:-21px}51%{right:-21px}55%{opacity:1}60%{opacity:0}65%{opacity:1}70%{opacity:0}75%{opacity:1}80%{opacity:0}85%{opacity:1}90%{opacity:0;right:-21px}95%{opacity:1;right:80px}96%{right:-21px}100%{opacity:0;right:-21px}}@-moz-keyframes blink{0%{opacity:0}5%{opacity:1}10%{opacity:0}15%{opacity:1}20%{opacity:0}25%{opacity:1}30%{opacity:0}35%{opacity:1}40%{opacity:0;right:-21px}45%{opacity:1;right:80px}50%{opacity:0;right:-21px}51%{right:-21px}55%{opacity:1}60%{opacity:0}65%{opacity:1}70%{opacity:0}75%{opacity:1}80%{opacity:0}85%{opacity:1}90%{opacity:0;right:-21px}95%{opacity:1;right:80px}96%{right:-21px}100%{opacity:0;right:-21px}}.wrap{font-size:18px;font-weight:700;left:25%;letter-spacing:5px;margin-left:-80px;margin-top:-40px;position:absolute;top:50%;width:68%}.bg{padding:30px 30px 30px 0;background:#306f99;-moz-animation:bg 1.5s linear infinite;-webkit-animation:bg 1.5s linear infinite;animation:bg 1.5s linear infinite;-moz-box-shadow:inset 0 0 45px 30px black;-webkit-box-shadow:inset 0 0 45px 30px black;box-shadow:inset 0 0 45px 30px black}.loading{position:relative;text-align:right;text-shadow:0 0 6px#bce4ff;height:20px;width:150px;margin:0 auto}.loading span{display:block;text-transform:uppercase;position:absolute;right:30px;height:20px;width:400px;line-height:20px}.loading span:after{content:"";display:block;position:absolute;top:-2px;right:-21px;height:20px;width:16px;background:#eaf7ff;-moz-box-shadow:0 0 15px#bce4ff;-webkit-box-shadow:0 0 15px#bce4ff;box-shadow:0 0 15px#bce4ff;-moz-animation:blink 3.4s infinite;-webkit-animation:blink 3.4s infinite;animation:blink 3.4s infinite}.loading span.title{-moz-animation:title 3.4s linear infinite;-webkit-animation:title 3.4s linear infinite;animation:title 3.4s linear infinite}.loading span.text{-moz-animation:title 3.4s linear 1.7s infinite;-webkit-animation:title 3.4s linear 1.7s infinite;animation:title 3.4s linear 1.7s infinite;opacity:0}</style>

الآن بعد اضافة الكود قم بحفظ القالب وتمتع بالاضافة الرائعة :)
ان اعجبتك الاضافة لا تنسى ان تتحفنا بتعليقك حول الموضوع وشكراا

لا احل نقل الموضوع بدون ذكر للمصدر.
هل أعجبك الموضوع ؟
خدمة تصميم بنرات

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

  1. رائع أخي بارك الله فيك و اعانك

    ردحذف
    الردود
    1. لك جزيل الشكر على مرورك العطر أخي الكريم :)

      حذف
  2. ماا الوسم الذي تقصده ؟؟

    ردحذف
    الردود
    1. آسف اخي تم التعديل، اشكرك جزيل الشكر على الاشعار
      الوسم المقصود في الموضوع هو وسم < / body > (اعد مراجعة الموضوع)
      اتمنى ان ينال الموضوع اعجابك

      حذف
  3. لا يوجد هذا الوسم

    ماذا افعل ؟؟

    ردحذف
    الردود
    1. أخي هذا الوسم يوجد في اي قالب بلوجر، قم بنسخه كما هو في الموضوع وابحث عنه وستجده انشاء الله

      حذف
  4. مشكووووووووووووووووووووووووووووور

    ردحذف
    الردود
    1. بارك الله فيك اخي وشكراا على مرورك الكريم

      حذف
  5. الردود
    1. شكراا اخي على مرورك الطيب

      حذف
  6. الله يعطيك ألف عافية

    ردحذف

جميع الحقوق محفوضة لمدونة تدوين باحتراف 2014/2013