بلوجر: طريقة تسريع مدونة بلوجر و تحميل الصفحات عن طريق إضافة كود JQUERY

السلام عليكم.


مرحبا بكم أعزائي في درس جديد و هام جدا من دروس البلوجر.







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



اليوم سنتطرق معا إلى كيفية تسريع مدونة البلوجر الخاصة بنا.


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



لتسريع المدونة عن طريق كود JQUERY





1.توجه إلى Template ثم Edit Html


2.بالضغط على Ctrl+F، قم بالبحث عن الوسم التالي:

بسم الله و الحمد لله و الصلاة و السلام على محمد الأمين و على صحبه و آله الطيبين الطاهرين. السلام عليكم و رحمة الله، في هذا الموضوع سنتعرف و إياكم على إضافة ممتازة لتسريع تصفح المدونة أو أي موقع على حد سواء، مبدأ الإضافة يتلخص في تحميل ما يراه المتصفح أولا ثم تحميل بقية الصور و المحتويات عند الطلب فمثلا عند تصفح صفحة ما ستلاحظ و أنت تنزل إلى أسفل الصفحة أن الصور و المحتويات تظهر تباعا بطريقة سلسة. باختصار الإضافة تتيح تحميل ما يظهر على الشاشة و ليس صفحة الموقع كلها الشيء الذي يزيد في سرعة تحميل و تصفح موقعك.و لمشاهدة مثال حي على الإضافة زر هذه الصفحة ثم تصفحها نزولا و ستلاحظ تأثير الإضافة بشكل أدق. طريقة تركيب الإضافة بسيطة و سهلة ، و تكون بإضافة الكود الآتي فوق (قبل) وسم </body> المغلق:

هذا الكود لتطبيق الإضافة على كافة صور الموقع


كود:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/> <script src='http://sites.google.com/site/simoxooorg/Home/jquery.lazyload.mini.js?ver=1.5.0' type='text/javascript'/><script type='text/javascript'>jQuery(document).ready(function($){if (navigator.platform == &quot;iPad&quot;) return;jQuery('img').lazyload({effect:&quot;fadeIn&quot;,placeholder: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVhE3rTZoVN1bb5EueqRspwhqqKv_wWBzoQ5cV0anorkqOtLinWSvYlcfEIzemSbwqOMeO-AGwNm1t0PAwfQXLnpvcM6zqEhDpHNPfAvMex5Ez5tEIn1Zwkt94MnEaBpG3gWHk2fF5GDM/&quot;});});</script>

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

تحديث : لتطبيق الإضافة فقط على جسم الموضوع أو التدوينة فقط أضف الكلاس أو ال id المراد التطبيق عليه فقط إلى يسار ما لون بالأحمر كما توضحه الأمثلة الآتية.


فمثلا في بلوجر نطبق الإضافة على .post نستعمل الكود كما يلي:




كود:

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/> <script src='http://sites.google.com/site/simoxooorg/Home/jquery.lazyload.mini.js?ver=1.5.0' type='text/javascript'/><script type='text/javascript'>jQuery(document).ready(function($){if (navigator.platform == &quot;iPad&quot;) return;jQuery('.post img').lazyload({effect:&quot;fadeIn&quot;,placeholder: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVhE3rTZoVN1bb5EueqRspwhqqKv_wWBzoQ5cV0anorkqOtLinWSvYlcfEIzemSbwqOMeO-AGwNm1t0PAwfQXLnpvcM6zqEhDpHNPfAvMex5Ez5tEIn1Zwkt94MnEaBpG3gWHk2fF5GDM/&quot;});});</script>

و في ووردبريس نطبق الإضافة على #post-blog كما في الكود الآتي:




كود:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/> <script src='http://sites.google.com/site/simoxooorg/Home/jquery.lazyload.mini.js?ver=1.5.0' type='text/javascript'/><script type='text/javascript'>jQuery(document).ready(function($){if (navigator.platform == &quot;iPad&quot;) return;jQuery('#post-blog img').lazyload({effect:&quot;fadeIn&quot;,placeholder: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVhE3rTZoVN1bb5EueqRspwhqqKv_wWBzoQ5cV0anorkqOtLinWSvYlcfEIzemSbwqOMeO-AGwNm1t0PAwfQXLnpvcM6zqEhDpHNPfAvMex5Ez5tEIn1Zwkt94MnEaBpG3gWHk2fF5GDM/&quot;});});</script>

و في المنتديات على .tborder يصبح الكود كالآتي:

كود: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/> <script src='http://sites.google.com/site/simoxooorg/Home/jquery.lazyload.mini.js?ver=1.5.0' type='text/javascript'/><script type='text/javascript'>jQuery(document).ready(function($){if (navigator.platform == &quot;iPad&quot;) return;jQuery('.tborder img').lazyload({effect:&quot;fadeIn&quot;,placeholder: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVhE3rTZoVN1bb5EueqRspwhqqKv_wWBzoQ5cV0anorkqOtLinWSvYlcfEIzemSbwqOMeO-AGwNm1t0PAwfQXLnpvcM6zqEhDpHNPfAvMex5Ez5tEIn1Zwkt94MnEaBpG3gWHk2fF5GDM/&quot;});});</script>

و لمن يملك بعض الخبرة و الدراية في هذا المجال يمكنه تخصيص الإضافة و تعديلها عبر متابعة موقع تطويرها.

</body>

3.قبل الوسم مباشرة قم بلصق الكود التالي:

<!--Start speedup jquery code--><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/> <script src='https://sites.google.com/site/merciblogger/jquery.lazyload.mini.js' type='text/javascript'/> <script type='text/javascript'> jQuery(document).ready(function($){ if (navigator.platform == &quot;iPad&quot;) return; jQuery('img').lazyload({ effect:&quot;fadeIn&quot;, placeholder: &quot;http://lh5.ggpht.com/_XrWO8mEpDy0/TEdXIqjrAUI/AAAAAAAAAkU/3lwqSFT8IRQ /grey.gif&quot; }); }); </script><!--End speedup jquery code-->

يمكنكم تحميل الكود من هنا أو من هنا


4.قم بحفظ القالب، ولا تقم أبدا بحذف هذا الكود في المستقبل.




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




هذا كل ما في درس اليوم...أنتظر منكم المتابعة و النشر...و السلام عليكم و رحمة الله.

مسموح بنقل الموضوع بشرط ذكر المصدر : بلوجر: طريقة تسريع مدونة بلوجر و تحميل الصفحات عن طريق إضافة كود JQUERY | للابلاغ عن رابط لا يعمل هنا