شرح اهم اكواد بلوجر ( الجزء الثاني) للمصممين
السلام عليكم , في الموضوع السابق من اهم اكواد بلوجر للمصممين , الموضوع حاز علي مشاهدات جيدة والان درس جديد والجزء الثاني من هذه الدورة والذي يتكلم عن ماهي اكواد الميتا التي يحتاجها المصمم ؟ هل يكتفي مثلا بافضل اكواد الميتا تاج فقط ام شي اخر ؟ الاجاة نعم يحتاج لاشياء اخري بسيطة مثل المكتبات فنحن قمنا بوضع درس عن وضع مكتبة بوتستراب وهو من افضل المواضيع من حيث المشاهدات هذا الشهر وبعد هذا الموضوع قررنا ان نقول لك علي بعض الاشياء الاخري مثل اضافة اضافة مكتبة الجى كويرى واضافة مكتبة fontawesome والاضافات الاخري
لنبدأ ب
الجي كوري
هي ايضا مكتبة من جافا سكربت مفتوحة المصدر وسهل التعامل معها مع بعض المميزات الاخري مثل انا لا تبطئ الموقع لان حجمها قليل جدا ولمعرفة المزيد ستجد الرابط في المصادر اسفل الموضوع سنعتمد ايضا علي موقع w3schools في ال جي كويري وسيكون الشرح مماثل تماما لشرح البوتستراب , اليك جميع اصدارات مكتبة جي كويري , قم بوضع هذه الاكواد اسفل
<head>
<!-- Js jquery libs-->
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js' type='text/javascript'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'/>
<!-- js jquery libs versions: 3.2.1, 3.2.0, 3.1.1, 3.1.0, 3.0.0, 2.2.4, 2.2.3, 2.2.2, 2.2.1, 2.2.0, 2.1.4, 2.1.3, 2.1.1, 2.1.0, 2.0.3, 2.0.2, 2.0.1, 2.0.0, 1.12.4, 1.12.3, 1.12.2, 1.12.1, 1.12.0, 1.11.3, 1.11.2, 1.11.1, 1.11.0, 1.10.2, 1.10.1, 1.10.0, 1.9.1, 1.9.0, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.2, 1.7.1, 1.7.0, 1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.6, 1.2.3
note: 2.1.2, 1.2.5 and 1.2.4 are not hosted due to their short and unstable lives in the wild. -->
<!-- /Js jquery libs (End)-->
بعد وضع هذه الاكواد اتجه الي موقع w3schools وقم بتعلم الاشياء في الموقع وقم بتطبيق كل ماتعلمته في موقعك ومثل ما فعلت في البوتستراب نأتي الي مكتبة
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js' type='text/javascript'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js' type='text/javascript'/>
<!-- js jquery libs versions: 3.2.1, 3.2.0, 3.1.1, 3.1.0, 3.0.0, 2.2.4, 2.2.3, 2.2.2, 2.2.1, 2.2.0, 2.1.4, 2.1.3, 2.1.1, 2.1.0, 2.0.3, 2.0.2, 2.0.1, 2.0.0, 1.12.4, 1.12.3, 1.12.2, 1.12.1, 1.12.0, 1.11.3, 1.11.2, 1.11.1, 1.11.0, 1.10.2, 1.10.1, 1.10.0, 1.9.1, 1.9.0, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.2, 1.7.1, 1.7.0, 1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.6, 1.2.3
note: 2.1.2, 1.2.5 and 1.2.4 are not hosted due to their short and unstable lives in the wild. -->
<!-- /Js jquery libs (End)-->
بعد وضع هذه الاكواد اتجه الي موقع w3schools وقم بتعلم الاشياء في الموقع وقم بتطبيق كل ماتعلمته في موقعك ومثل ما فعلت في البوتستراب نأتي الي مكتبة
مكتبة fontawesome
وهي مكتبة الايقونات واي موقع حديث لابد من ان يكون به هذه المكتبة طريقة تنصيبها سهل جدا ايضا ضع هذا الكود اسفل <head> ( كل الاضافات في هذا الموضوع ستكون في هذا المكان)
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"/>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
وبعد ذلك اذهب لموقع fontawesome واختر الايقونات وقم بوضعها في قالبك بكل سهولة مثلا ان اردنت وضع ايقونة مع رابط قم بوضع الكود هكذا
<a href="#"><i class="fa fa-cog fa-fw"></i> اعدادات</a>
وقم بتغييرالايقونة من خلال الكود الاحمر
كيفية اضافة مكتبة Material Icons في مدونتك
هي ايقونات من جوجل من لغة ماتريال ديزاين التي طورتها جوجل منذ 2014 وهي ايضا لغة مستخدمة من العديد من اصحاب المواقع اليوم ستضع ايقونات الماتريال ديزاين وهي ايقونات جديدة وحديثة عن اي مكتبات اخري وايضا
طريقة وضع الماتريال ايقون هي وضع هذا الكود مثل باقي المكتبات في الاعلي
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'/>
وتقوم بالذهاب الي الموقع الرسمي للماتريال ايقون واختيار الايقونات وبعدها ستصبح الايقونة مثل هذا الكود
<i class="material-icons">home</i>
قم بنسخه واستخدامه بعدها في موقعك
اكواد DNS Prefetch
هذه ليس مكتبة ولكن هي اكواد لتسريع تحميل المدونة وبمعني اخر هو ينظم تحميل الموقع فهذا يسرعه , ايضا طريقة اضافتها مثل باقي المكتبات (اسفل <head>
<!-- DNS Prefetch -->
<meta content='on' http-equiv='x-dns-prefetch-control'/>
<link href='//www.blogger.com' rel='dns-prefetch'/>
<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='//codepen.io' rel='dns-prefetch'/>
<link href='//dribbble.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'/>
وقم بحفظ القالب بعد كل هذا وانتهي موضوع اليوم وان واجهتك اي مشكلة في هذا الموضوع او مشكلة عامة في موقعك قم بكتابتها في صفحة الاستشارة المجانية او في اي موضوع وسيقوم بالرد عليك من احد فريق الموقع او مني شخصيا , او اذا كنت تريد شرح معين عن أي شي في بلوجر او SEO لاتتردد في كتابته في التعليقات
مصادر الموضوعجي كويري - ويكيبيديا
ماتريال ديزاين - ويكيبيديا
 للمصممين السلام عليكم , في الموضوع السابق من اهم اكواد بلوجر للمصممين , الموضوع حاز علي مشاه…){kind=link}
تعليقات
إرسال تعليق