BLANTERTOKOSIDEv102
6217215329334371520

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

 

أداة بلوجر لوضع المدونة تحت الصيانة

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

السلام عليكم، سابقا عندما كنت أتصفح أحد المقالات  في موقع ما، صادفت أن هناك صفحة مثبتة بمعلومة أنها قيد التجهيز وستكون متوفرة قريبا، ولذالك قبل أن تعرف أداة الموقع تحت الصيانة يجب أن نوضح بعض النقاط المهمة حولها، ما هو عمل الصيانة للموقع؟ والمقصود بهذا المصطلح ؟.

في موضوع سابق تعرفنا على :

  ما المقصود بصيانة مدونة بلوجر :
 صيانة الموقع هي نشاط إصلاح أو تحديث مكونات موقع الويب الخاص بك وذالك للحصول على أداء أفضل. وهذ شيئ يحتاجه أصحاب مطوري المواقع والقوالب وذلك عبر إخفاء محتوى الموقع والأخطاء الظاهرة حتى الإنتهاء من التصميم والتعديلات.
  ما هي أداة وضع الموقع تحت الصيانة:
تعد أداة الموقع تحت الصيانة مفيدة لإعلام القراء بأن مدونتك غير متصلة بالإنترنت لفترة من الوقت. عبر كتابة إعلان تشرح لهم الوضع .

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

تهدف هذه الأداة إلى تذكير الزوار بأن موقعك سيتوقف عن العمل لبضع ساعات. فهي تتيح لك نشر رسالة حول هذا الموضوع على مدونتك.
وهذه المرة الشكل  الذي سأشاركه معكم بسيط للغاية مع
رسوم لطيفة ومتحركة بالإضافة إلى عداد تنازلي للوقت الذي ستكون فيه المدونة جاهزة ، يمكنك معاينة الصفحة بنفسك ورؤية الشكل الكامل والتفاصيل :


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

إضافة وضع الموقع تحت الصيانة:

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

قد لا تكون تعلم أن مستخدمي WordPres يتمتعون بأدوات أكثر سهولة، عكس مستخمدي Blogge والتي يتوجب عليهم التعديل يدويا عبر html، وهنا على المستخدمين أن تكون لهم معرفة مسبقة وبسيطة بأساسيات html وcss

إن كنت مهتمًا حول هذه الأداة ، فيمكنك متابعة الشرح لتعرف طريقة تركيبها على مدونة بلوجر.

كيفية تثبيت صفحة الصيانة على المدونة
  • تسجيل الدخول إلى المدونة blogger
  • حدد قائمة المظهر
  • قم بتحرير HTML لقالبك
  • ابحث عن الوسم </ body>

ملاحظة الوسم </ body> يكون في آخر أكواد القالب

ألصق الكود التالي فوقه مباشرة :
     <div class='maintenancePage'>

  <div class='mainContainer'>

    <div class='mainBox'>

      <div id='mainCount'>

        <ul>

          <li><span id='countDays'/>يوم</li>

          <li><span id='countHours'/>ساعة</li>

          <li><span id='countMinutes'/>دقيقة</li>

          <li><span id='countSeconds'/>ثانية</li>

        </ul>

      </div>

      <div class='mainAnimation'>

        <div class='mainOne spinOne'/>

        <div class='mainTwo spinTwo'/>

        <div class='mainThree spinOne'/>

      </div>

      <div class='mainSubcontainer'>

        <h1>الموقع قيد الصيانة</h1>

        <p>.لا يزال هذا الموقع قيد التجهيز</p>

        <p>يمكنك زيارة موقعنا الرسمي<a href='https://www.tikniya.xyz' target='_blank' title='Changelog'>TIKNIYA-AR</a></p>

      </div>

    </div>

  </div>

</div>

<script>

(function(){

const second=1000,minute=second*60,hour=minute*60,day=hour*24;

let timeReach=&quot;Jan 30, 2023 00:00:00&quot;,

    mainCount=new Date(timeReach).getTime(),

    x=setInterval(function(){

      let now=new Date().getTime(),

        distance=mainCount-now;

          document.getElementById(&quot;countDays&quot;).innerText=Math.floor(distance/(day)),

          document.getElementById(&quot;countHours&quot;).innerText=Math.floor((distance%(day))/(hour)),

          document.getElementById(&quot;countMinutes&quot;).innerText=Math.floor((distance%(hour))/(minute)),

          document.getElementById(&quot;countSeconds&quot;).innerText=Math.floor((distance%(minute))/second)

    },0)

}())

</script>
والآن قم بالبحث عن ]]></b:skin> وألصق كود css التالي فوقه مباشرة :

 /*  This add-on is provided by Tikniya arabic
my site: https://www.tikniya.xyz
*/
html, body{overflow:hidden}
.maintenancePage{position:fixed;width:100%;height:100%;font-family:"Noto Sans",sans-serif;top:0;right:0;overflow:hidden;z-index:999}
.mainContainer{margin:auto;width:100%;height:100%;text-align:center;position:relative}
.mainSubcontainer{margin-top:50px;margin-right:15px}
.mainBox{width:100%;height:100%;background:linear-gradient(11.7deg,#FCFCFC 53%,#ffffff 47%)}
.mainAnimation{margin-top:10%;display:inline-block}
#mainCount{text-align:center;margin-right:-50px}
#mainCount ul li{display:inline-block;color:#888;font-size:14px;list-style-type:none;padding:20px;text-transform:uppercase}
#mainCount ul li span{display:block;color:#333;font-size:18px;font-weight:bold}
.maintenancePage .mainContainer h1{color:#677880;font-size:50px;letter-spacing:2px;text-transform:uppercase}
.maintenancePage .mainContainer p{font-size:15px}
.maintenancePage .mainContainer p a{color:#009ee0;font-weight:bold;text-decoration:none}
.maintenancePage .mainContainer p a:hover{color:#009ee0}
.mainOne,.mainTwo,.mainThree{display:block;float:right}
.spinOne{-webkit-animation:spinOne 1.5s infinite linear;animation:spinOne 1.5s infinite linear}
.spinTwo{-webkit-animation:spinTwo 2s infinite linear;animation:spinTwo 2s infinite linear}
.mainOne{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23989b9f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><g transform='translate(3.500000, 2.500000)'><path d='M8.5,7 C9.88088012,7 11,8.11911988 11,9.5 C11,10.8808801 9.88088012,12 8.5,12 C7.11911988,12 6,10.8808801 6,9.5 C6,8.11911988 7.11911988,7 8.5,7 Z'></path><path d='M16.6680023,4.75024695 L16.6680023,4.75024695 C15.9844554,3.55799324 14.4712377,3.15003899 13.2885153,3.83852352 C12.2597626,4.43613205 10.9740669,3.68838056 10.9740669,2.49217572 C10.9740669,1.11619444 9.86587758,0 8.4997646,0 L8.4997646,0 C7.13365161,0 6.02546233,1.11619444 6.02546233,2.49217572 C6.02546233,3.68838056 4.73976662,4.43613205 3.71199461,3.83852352 C2.52829154,3.15003899 1.01507378,3.55799324 0.331526939,4.75024695 C-0.351039204,5.94250065 0.053989269,7.46664934 1.23769234,8.15414609 C2.26546435,8.7527424 2.26546435,10.2472576 1.23769234,10.8458539 C0.053989269,11.5343384 -0.351039204,13.0584871 0.331526939,14.2497531 C1.01507378,15.4420068 2.52829154,15.849961 3.71101391,15.1624643 L3.71199461,15.1624643 C4.73976662,14.5638679 6.02546233,15.3116194 6.02546233,16.5078243 L6.02546233,16.5078243 C6.02546233,17.8838056 7.13365161,19 8.4997646,19 L8.4997646,19 C9.86587758,19 10.9740669,17.8838056 10.9740669,16.5078243 L10.9740669,16.5078243 C10.9740669,15.3116194 12.2597626,14.5638679 13.2885153,15.1624643 C14.4712377,15.849961 15.9844554,15.4420068 16.6680023,14.2497531 C17.3515491,13.0584871 16.9455399,11.5343384 15.7628176,10.8458539 L15.7618369,10.8458539 C14.7340648,10.2472576 14.7340648,8.7527424 15.7628176,8.15414609 C16.9455399,7.46664934 17.3515491,5.94250065 16.6680023,4.75024695 Z'></path></g></svg>");width:80px;height:80px;background-size:100% 100%;background-repeat:no-repeat;margin-top:-10px;margin-left:8px}
.mainTwo{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23989b9f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><g transform='translate(3.500000, 2.500000)'><path d='M8.5,7 C9.88088012,7 11,8.11911988 11,9.5 C11,10.8808801 9.88088012,12 8.5,12 C7.11911988,12 6,10.8808801 6,9.5 C6,8.11911988 7.11911988,7 8.5,7 Z'></path><path d='M16.6680023,4.75024695 L16.6680023,4.75024695 C15.9844554,3.55799324 14.4712377,3.15003899 13.2885153,3.83852352 C12.2597626,4.43613205 10.9740669,3.68838056 10.9740669,2.49217572 C10.9740669,1.11619444 9.86587758,0 8.4997646,0 L8.4997646,0 C7.13365161,0 6.02546233,1.11619444 6.02546233,2.49217572 C6.02546233,3.68838056 4.73976662,4.43613205 3.71199461,3.83852352 C2.52829154,3.15003899 1.01507378,3.55799324 0.331526939,4.75024695 C-0.351039204,5.94250065 0.053989269,7.46664934 1.23769234,8.15414609 C2.26546435,8.7527424 2.26546435,10.2472576 1.23769234,10.8458539 C0.053989269,11.5343384 -0.351039204,13.0584871 0.331526939,14.2497531 C1.01507378,15.4420068 2.52829154,15.849961 3.71101391,15.1624643 L3.71199461,15.1624643 C4.73976662,14.5638679 6.02546233,15.3116194 6.02546233,16.5078243 L6.02546233,16.5078243 C6.02546233,17.8838056 7.13365161,19 8.4997646,19 L8.4997646,19 C9.86587758,19 10.9740669,17.8838056 10.9740669,16.5078243 L10.9740669,16.5078243 C10.9740669,15.3116194 12.2597626,14.5638679 13.2885153,15.1624643 C14.4712377,15.849961 15.9844554,15.4420068 16.6680023,14.2497531 C17.3515491,13.0584871 16.9455399,11.5343384 15.7628176,10.8458539 L15.7618369,10.8458539 C14.7340648,10.2472576 14.7340648,8.7527424 15.7628176,8.15414609 C16.9455399,7.46664934 17.3515491,5.94250065 16.6680023,4.75024695 Z'></path></g></svg>");width:100px;height:100px;background-size:100% 100%;background-repeat:no-repeat} 
.mainThree{background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23989b9f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><g transform='translate(3.500000, 2.500000)'><path d='M8.5,7 C9.88088012,7 11,8.11911988 11,9.5 C11,10.8808801 9.88088012,12 8.5,12 C7.11911988,12 6,10.8808801 6,9.5 C6,8.11911988 7.11911988,7 8.5,7 Z'></path><path d='M16.6680023,4.75024695 L16.6680023,4.75024695 C15.9844554,3.55799324 14.4712377,3.15003899 13.2885153,3.83852352 C12.2597626,4.43613205 10.9740669,3.68838056 10.9740669,2.49217572 C10.9740669,1.11619444 9.86587758,0 8.4997646,0 L8.4997646,0 C7.13365161,0 6.02546233,1.11619444 6.02546233,2.49217572 C6.02546233,3.68838056 4.73976662,4.43613205 3.71199461,3.83852352 C2.52829154,3.15003899 1.01507378,3.55799324 0.331526939,4.75024695 C-0.351039204,5.94250065 0.053989269,7.46664934 1.23769234,8.15414609 C2.26546435,8.7527424 2.26546435,10.2472576 1.23769234,10.8458539 C0.053989269,11.5343384 -0.351039204,13.0584871 0.331526939,14.2497531 C1.01507378,15.4420068 2.52829154,15.849961 3.71101391,15.1624643 L3.71199461,15.1624643 C4.73976662,14.5638679 6.02546233,15.3116194 6.02546233,16.5078243 L6.02546233,16.5078243 C6.02546233,17.8838056 7.13365161,19 8.4997646,19 L8.4997646,19 C9.86587758,19 10.9740669,17.8838056 10.9740669,16.5078243 L10.9740669,16.5078243 C10.9740669,15.3116194 12.2597626,14.5638679 13.2885153,15.1624643 C14.4712377,15.849961 15.9844554,15.4420068 16.6680023,14.2497531 C17.3515491,13.0584871 16.9455399,11.5343384 15.7628176,10.8458539 L15.7618369,10.8458539 C14.7340648,10.2472576 14.7340648,8.7527424 15.7628176,8.15414609 C16.9455399,7.46664934 17.3515491,5.94250065 16.6680023,4.75024695 Z'></path></g></svg>");width:80px;height:80px;background-size:100% 100%;background-repeat:no-repeat;margin-top:-50px;margin-right:-10px}
@keyframes spinOne{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(-359deg);transform:rotate(-359deg)}}
@keyframes spinTwo{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(-359deg);transform:rotate(359deg)}}
@media screen and (max-width:768px){.mainAnimation{margin-top:40%}.mainSubcontainer{margin-bottom:0;margin-right:0}.maintenancePage .mainContainer h1{font-size:30px}#mainCount{margin-right:-40px}#mainCount ul li{font-size:13px}#mainCount ul li span{font-size:13px}}


بعدها  احفظ القالب،ولا تنسى تعديل المعلومات بالتي تناسبك.
حتى بعض  الشركات الكبرى والمشهورة مثل Google و WordPress تقوم  أحيانًا بالصيانة للحصول على أداء أفضل للمستخدمين. وصار الآن بإمكان الجميع إضافة صفحة الصيانة لمواقعهم ، يمكنك استعمال هذه الصفحة عندما تريد تغيير القوالب أو أنك تريد  تحديث المقالات.
آمل أن يكون هذا الموضع قد أعجبكم ونلتقى في مقالة أخرى، إن واجهت أي مشكلة في تركيب الأداة فيمكنك مراسلتنا عبر نموذج الإتصال مع وصف المشكلة لكي نقوم بحلها في أقرب وقت.