اضافة اكواد DNS Prefetch لمدونة بلوجر لتسريع تحميل المدونة وتقوية seo

dns-prefetch-seo-blogger
اكواد DNS Prefetch هي عبارة عن طريقة لتحليل DNS يقوم بحديد نوع الدومين ومعلومات عنه من خلال هذه المعلومات يستطيع المتصفح ترتيب التحميل للموقع, عادتاً نحن نستخدم روابط خارجية صور/فيديو/js/... في مدوناتنا, هذه الروابط بتأكيد لها اثر كبير في سرعة تحميل المدونة, لذالك يجب عليك ان تعمل لها حل.
 نحن في مدونات بلوجر سنستخدم اكواد DNS Prefetch , نحن استخدمنا هذه الطريقة كونها أفضل حل بنسبة لمدونات بلوجر, أم بنسبة إلى المدونات والمواقع الذي تستخدم سكربت خاص مثل الووردبريس لا تحتاج إلى اكواد DNS Prefetch لأنها بكل بساطه تعمل على تخزين الروابط ضمن نطق الدومين نفسه ,بعض مدونات الووردبريس تستخدم DNS Prefetch.

كيف تعمل اكواد  DNS Prefetch:

قبل تحميل الصفحة تقوم اكواد DNS Prefetch بإرسال معلومات إلى المتصفح عن نوع الدومين ونوع السيرفر ومعلومات عن الروابط الخارجية  وأنواع الروابط الخارجية صور/فيديو... وغيره مما يعمل ذالك على جعل المتصفح يعمل بدقه, بحيث يعمل على تسريع تحميل ملفات ضرورية وتأخير تحميل ملفات غير ضرورية (يحتاجها المشاهد بعد تحميل الصفحة). باختصار يعمل على تنظيم تحميل المدونة مما ينتج تسريع للمدونة.
ووفقاً لما قالت W3C "الد ان اس برفيتش تعمل على تحليل نوع وأصول الروابط والسيرفر المستخدم والمواقع المرشحة لجلب وتحليل منها المعلومات" [from w3c]

شرح إضافة DNS Prefetch :

1- سجل دخولك إلى مدونتك بلوجر 
2- توجه إلى "القالب" اضغط على تحرير "HTML"
3- اضغط على CTRL+F من الكيبورد وابحث عن <head> وضع الاكواد التالية أسفل
<link href='//1.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//28.2bp.blogspot.com' rel='dns-prefetch'/>
<link href='//3.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//4.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//2.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//www.blogger.com' rel='dns-prefetch'/>
<link href='//maxcdn.bootstrapcdn.com' rel='dns-prefetch'/>
<link href='//fonts.googleapis.com' rel='dns-prefetch'/>
<link href='//use.fontawesome.com' rel='dns-prefetch'/>
<link href='//ajax.googleapis.com' rel='dns-prefetch'/>
<link href='//resources.blogblog.com' rel='dns-prefetch'/>
<link href='//www.facebook.com' rel='dns-prefetch'/>
<link href='//plus.google.com' rel='dns-prefetch'/>
<link href='//twitter.com' rel='dns-prefetch'/>
<link href='//www.youtube.com' rel='dns-prefetch'/>
<link href='//feedburner.google.com' rel='dns-prefetch'/>
<link href='//www.pinterest.com' rel='dns-prefetch'/>
<link href='//www.linkedin.com' rel='dns-prefetch'/>
<link href='//feeds.feedburner.com' rel='dns-prefetch'/>
<link href='//github.com' rel='dns-prefetch'/>
<link href='//player.vimeo.com' rel='dns-prefetch'/>
<link href='//platform.twitter.com' rel='dns-prefetch'/>
<link href='//apis.google.com' rel='dns-prefetch'/>
<link href='//connect.facebook.net' rel='dns-prefetch'/>
<link href='//cdnjs.cloudflare.com' rel='dns-prefetch'/>
<link href='//www.google-analytics.com' rel='dns-prefetch'/>
<link href='//pagead2.googlesyndication.com' rel='dns-prefetch'/>
<link href='//googleads.g.doubleclick.net' rel='dns-prefetch'/>
<link href='//www.gstatic.com' rel='preconnect'/>
<link href='//www.googletagservices.com' rel='dns-prefetch'/>
<link href='//static.xx.fbcdn.net' rel='dns-prefetch'/>
<link href='//tpc.googlesyndication.com' rel='dns-prefetch'/>
<link href='//syndication.twitter.com' rel='dns-prefetch'/>
4- اضغط على حفظ

هنا نكون قد أنتها ينا من تركيب اكواد DNS Prefetch وتسريع المدونة, قد تتسائل بماذا ذالك ينفع السيو "كلنا تقريباً نعرف التحديث الجديد لجوجل الذي تعتمد في ترتيب المواقع في محرك البحث على سرعة الموقع " فلذالك عندما ترتفع سرعة مدونتك يتم رفع السيو في محركات البحث. 

أفضل المواقع لتحميل الخطوط العربية و الأجنبية مجانا

Sites-Fonts-Ar-Ee
الخطوط عامل مهم في تصميمتنا, وهو ما يكمل جمالية التصميم, فلذالك نقدم لك اليوم افضل المواقع العربية والاجنبية لتوفير الخطوط المجانية سواء لأستخدامها في التصميمات او في برمجة الويب.

مواقع الخطوط العربية

1- فونت فيس

Sites-Fonts-Ar-Ee
موقع فونت فيس يقدم العديد من الخطوط العربية لأستخدامها في تصميم الويب ويعتبر الموقع فريد من نوعه حيث يقدم اكثر من 140 خط عربي جاهز للأستخدام في الويب وجميع الخطوط تعمل على جميع المتصفحات وهي خطوط أمنة ولا تشكل خطر.
ما يميز موقع فونت فيس عن باقي المواقع العربية توفير الخطوط للأستخدام في مواقع الويب حيث يتم استضافة الخطوط في موقع فونت فيس, بأمكانك استخدام الخطوط في موقعك بدون تنزيل وتنصيب فقط يتم وضع رابط الخط مباشر من فونت فيس في موقعك, الموقع مفيد للمدونات مثل بلوجر او وردبريس حيث اننا سابقاً نرفع ملفات الخطوط على دروب بوكس برابط مباشر ومن تم أغلق دروب بوكس إمكانية استخدام الملفات برابط مباشر مما شكل عائق في رفع خطوط جديده, لكن الأن يمكننا استخدام احد الخطوط الموجوده في فونت فيس بدون رفع بمجرد نسخ الرابط المباشر واستخدامه في الموقع.

2- خطوط جوجل

Sites-Fonts-Ar-Ee
صحيح ان خطوط جوجل العربية ليست كثيره لأكنها تعتبر من افضل الخطوط العربية والاكثر استخدام في المواقع, تحتوي على خطوط حصرية وكذالك جوجل توفر خاصية استخدام الخط في المواقع مثل عرب فونت وتتفوق علية في سرعة تحميل الخط على المدونة.


3-عرب فونتش

Sites-Fonts-Ar-Ee
موقع مميز يحتوي على خطوط عربية جميلة وإبداعية حيت يحتوي الموقع على اكثر من 800 مخطوطة بشكل مجانية ومفتوحة المصدر من تصميم فريق عمل عرب فونتس ومتاحه بصيغه Svg .
ويعتبر عربي فونتش الوحيد الذي يوفر لمستخدمية إمكانية تجربه كل الخطوط العربية او الخطوط الديوانيه بدون مشاكل, ويعتبر عرب فونتس الوحيد عالميا الذي يوفر هذه المميزة, كذالك يوفر مميزة "لاتقلي نسيت الموقع" حيث وفر الموقع طريقة مبتكره لدخول اليه عن طريق كاتبة خطي.com في شريط عنوان المتصفح لتسهيل الدخول إلى الموقع. لكن موقع عربي فونتش لا يحتوي على امكانية استخدام الخطوط في مواقع الويب وهذه اكبر سلبية موجودة في عربي فونتش.

4-فـ فرشز

Sites-Fonts-Ar-Ee
يعتبر موقع حديث يوفر العديد من الخطوط العربية, كذالك فـ فرشز يوفر ايضا خطوط انجليزية ولكن تعتبر ضعيفة امام المحتوى الاجنبي ويحتوي على سلبية وهي عدم توفير الخطوط للاستخدام في المواقع والمدونات.

5-آر فونت 

Sites-Fonts-Ar-Ee
موقع لابس به يوفر الخطوط العربية القديمة المشهورة مثل الثلث والديوان والكوفي ولكن يحتوي على سلبية وهي عدم توفير الخطوط للاستخدام في المواقع والمدونات.


المواقع الاجنبية

Sites-Fonts-Ar-Ee
اكبر موقع اجنبي يوفر خطوط مجانية يحتوي على الكثير من الخطوط ولكن مشكلة الموقع عدم توفير الخطوط للعمل في مواقع الويب.

2-uxfree

Sites-Fonts-Ar-Ee
موقع uxfree يوفر تقريبا 38,762 خط اجنبية, مميزة الموقع هو أن بعض الخطوط مدفوعة يقدمها الموقع مجانا وهي خطوط فخمة جداً ورائعة, ولكن لا يوفر امكانية استخدام الخط في المواقع والمدونات.

3-fontspace

موقع مميز يحتوي على خطوط احنبية رائع,حيث يحتوي على 56,319 خط اجنبي جميل وفخم ولكن لا يوفر خاصية استخدام الخط في مواقع الويب.

4-behance

Sites-Fonts-Ar-Ee
يمكنكم ايضا استخدام موقع البيهانس للبحث عن الخطوط الذي قام بتصميمها أشخاص ووضعها في معرض اعمالهم مجاناً.

نكون هنا قد سردنا بعض المواقع لتحميل الخطوط العربية والاجنبية, ويبقى افضل موقع هو جوجل لأحتوه على أفخم الخطوط ويوفر خطوط باكثر من لغة وامكانية استخدام الخطوط في المواقع والمدونات, وتقريبا اكثر المدونات والمواقع تستخدم خطوط جوجل لسرعتها وجمالها.




اعمالي قالب بلوجر شخصي بسيط مجاناً تصميم عبدالله منقوش

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

 خصائصه:

1- أمكانية إيقاف تشغيل الواجهة الرئيسية وكجعلها مدونة عادية بمجرد وضع "NO" في صندوق مخصص من التخطيط
2- التعامل يكون مع القالب من خلال التخطيط
3- يتوفر ملف PDF يشرح طريقة التركيب
4-القالب مجهز بـ SOE الداخلي

صوره من تخطيط القالب 

Free blog templates, free blog templates, free arabic template templates

ملاحظة: شرح التركيب موجود ضمن الملفات وهو ملف PDF

تأثير الطباعة او الكتابة للنص للمطورين

نقدم لكم تأثير حركة الكتابة لنص, هذه التأثير يتميز بجعل النص وكأنه يتم ألكتابه, التأثير هده مرغوب والبعض يبحث عنه فلذالك قدمنا لكم ولكن هو مقدم للمطورين فقط حيث الإضافة خالية من الستيل css يمكنك وضعها في أي مكان تم بعد ذالك تعدلها وتضيف عليها CSS .

ملاحظة: هده الإضافة مخصصة لمطورين او لمن لديه خبر في التعامل مع ملفات بلوجر.

تركيب الإضافة

تتركب الإضافة من كودين احدهم كود السكربت والأخر كود تشغيل النص, نتوجه الى لوحة التحكم في المدونة تم المظهر تم تحرير  HTML تم اتبع الخطوات التاليه.


1- تركيب سكربت التأثير

 نبحث عن </head> تم نضع الكود التالي فوقه
<script type="text/javascript">
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.NTyped=e():t.NTyped=e()}(this,function(){return function(t){function e(n){if(r[n])return r[n].exports;var i=r[n]={exports:{},id:n,loaded:!1};return t[n].call(i.exports,i,i.exports,e),i.loaded=!0,i.exports}var r={};return e.m=t,e.c=r,e.p="",e(0)}([function(t,e,r){"use strict";function n(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0}),e.default=void 0;var i=r(1),o=n(i);e.default=o.default,t.exports=e.default},function(t,e,r){"use strict";function n(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}Object.defineProperty(e,"__esModule",{value:!0});var i=function(){function t(t,e){for(var r=0;r<e.length;r++){var n=e[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}return function(e,r,n){return r&&t(e.prototype,r),n&&t(e,n),e}}(),o=r(2),s=function(){function t(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};n(this,t),this._stringPostion=0,this._arrayPosition=0,this._element=null,this._options=null,this._strings=null,this._timeout=null,(0,o.doesElementExist)(e)&&(0,o.parseOptions)(r,t.defaultOptions)&&(this._element=e,this._options=Object.assign({},t.defaultOptions,r),this._strings=this._options.strings,this.initialize())}return i(t,[{key:"initialize",value:function(){var t=this;this._options&&this._options.showCursor&&this.addCursorElement(),this._timeout=setTimeout(function(){t.writeCharacter(t._strings[t._arrayPosition],t._stringPostion)},this._options.startDelay)}},{key:"addCursorElement",value:function(){var t="<span class="+this._options.classes.cursor+">"+this._options.cursorChar+"</span>";this._element&&this._element.insertAdjacentHTML("afterend",t)}},{key:"writeCharacter",value:function(e,r){var n=this;this._timeout=setTimeout(function(){if(n._options.stringType===t.Types.HTML){var i=e.charAt(r);if("<"===i||"&"===i){for(var o="<"===i?">":";";e.charAt(r+1)!==o&&r+1<e.length;)r++;r++}}if(r===e.length){if(!n._options.loop&&n._arrayPosition===n._strings.length-1)return;n._timeout=setTimeout(function(){n.deleteCharacter(e,r)},n._options.backDelay)}else{var s=e.substr(0,r+1);n.setElementContent(s),r++,n.writeCharacter(e,r)}},this.getCharacterWriteSpeed(this._options.typeSpeed))}},{key:"deleteCharacter",value:function(e,r){var n=this;this._timeout=setTimeout(function(){var i=e.substr(0,r);if(n._options.stringType===t.Types.HTML&&">"===e.charAt(r)){for(;"<"!==e.charAt(r-1)&&r>0;)r--;r--}n.setElementContent(i),r>0?(r--,n.deleteCharacter(e,r)):(n._arrayPosition++,n._arrayPosition===n._strings.length&&(n._arrayPosition=0),n.writeCharacter(n._strings[n._arrayPosition],r))},this.getCharacterWriteSpeed(this._options.deleteSpeed))}},{key:"setElementContent",value:function(e){var r=this._element;this._options.stringType===t.Types.HTML?r.innerHTML=e:r.textContent=e}},{key:"getCharacterWriteSpeed",value:function(t){return Math.round(70*Math.random())+t}}]),t}();s.Types={HTML:0,TEXT:1},s.defaultOptions={stringType:s.Types.HTML,strings:["This is a typing animation!","You can also add your own sentences","So go do it!"],showCursor:!0,cursorChar:"|",loop:!0,startDelay:500,backDelay:500,typeSpeed:0,deleteSpeed:0,classes:{cursor:"title__cursor"}},e.default=s,t.exports=e.default},function(t,e){"use strict";function r(t){var e={}.toString.call(t).match(/\s([a-zA-Z]+)/);return e[1].toLowerCase()}function n(t){return!(!t||!(t.nodeName||t.prop&&t.attr&&t.find))}function i(t,e){return Object.entries(t).forEach(function(t){var n=o(t,2),i=n[0],s=n[1],a=e[i],u=r(s),l=r(a);if(l!==u)throw new Error('NativeTyped: Option "'+i+'" has wrong type. Should be '+l+" but got "+u+".")}),!0}Object.defineProperty(e,"__esModule",{value:!0});var o=function(){function t(t,e){var r=[],n=!0,i=!1,o=void 0;try{for(var s,a=t[Symbol.iterator]();!(n=(s=a.next()).done)&&(r.push(s.value),!e||r.length!==e);n=!0);}catch(t){i=!0,o=t}finally{try{!n&&a.return&&a.return()}finally{if(i)throw o}}return r}return function(e,r){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return t(e,r);throw new TypeError("Invalid attempt to destructure non-iterable instance")}}();e.toType=r,e.doesElementExist=n,e.parseOptions=i}])});
</script> 
او يمكن استخدام بدل كود السكرت استدعاء السكربت من هده الرابط
<script src="https://cdn.rawgit.com/abduallah789/move/efa859d2/move.js" type="text/javascript"></script>


2- كود الستيل نضعه في المدونة, نبحث عن </head> ونضعها فوقه.

<style>
.mov-spa{
display: block;
margin: 13px 0;
}
.mov-div{
    text-align: center;
    display: -webkit-inline-box;
    color: #000;
    font-size: 30px;
}
.title__cursor{
    display: -webkit-inline-box;
}
</style> 

2- سكربت تشغيل النص 

<script type="text/javascript">
document.write("<span class='mov-spa'><div class='mov-div' id='d-abduallah'> </div></span>");
new NTyped(document.querySelector('#d-abduallah'), {

    strings: ['السلام عليكم ورحمة الله', 'اهلاء بكم في مدونة عبدالله منقوش', ' لاتنسوا ان تكونوا من متابعينا'],

    // show cursor
    showCursor: true,
    cursorChar: '|',

    // infinite loop
    loop: true,

    // animation options
    startDelay: 500,
    backDelay: 500,
    typeSpeed: 0,
    deleteSpeed: 0,

    // CSS classes
    classes: {
      cursor: 'title__cursor'
    }
});</script>
هده الكود مهم جداً في التعامل معه حيث في المكان الذي يتم وضع فيه الكود التالي سيشتغل النص ولتحريك نص اخر في مكان تضع نفس الكود وتغير النص وتغير اسم id مكرر مرتين.
Id   هو abduallah  غيره او اضف رقم ليصبح abduallah2  مثال

<script type="text/javascript">


document.write("<span class='mov-spa'><div class='mov-div' id='d-abduallah2'> </div></span>");

new NTyped(document.querySelector('#d-abduallah2'), {

    strings: [' حيث يمكنك أن تولد مثل هذا النص', 'لقد تم توليد هذا النص من ', 'هذا النص هو مثال لنص يمكن أن يستبدلة'],

    // show cursor
    showCursor: true,
    cursorChar: '|',

    // infinite loop
    loop: true,

    // animation options
    startDelay: 500,
    backDelay: 500,
    typeSpeed: 0,
    deleteSpeed: 0,

    // CSS classes
    classes: {
      cursor: 'title__cursor'
    }
});
</script>
لعمل فقرات في النص اقصد فقره تختفي وتاتي فقره اخر وهكذا, كل ما عليك فعله استخدام نقطة و فاصلتان بين كل فقره  في strings انظر الى المثال
    strings: ['السلام عليكم ورحمة الله', 'اهلاء بكم في مدونة عبدالله منقوش', ' لاتنسوا ان تكونوا من متابعينا']

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


نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *