اهم مكتبات خطوط لمدونات بلوجر

جدول المحتويات

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

يتم تضمين المكتبات في هذه المقالة

• Font Google
• Font Awesome
• Bootstrap
• Jquery
• Button Share

اعتمادًا على أهمية المكتبة، يمكنك وضعها فوق </head> أو </body> لتنفيذ الحلقة على الفور ووضعها فوق</head> إذا لم تكن بحاجة إلى تنفيذها، فضع الحلقة على الفور فوق </body>

1 Font Google

تستخدم كل منصة ويب اليوم مكتبة الخطوط. إذا قمت باستدعاء اسم الخط ولكن لا يوجد مثل هذا الخط في نظام التشغيل Windows/Mac OS فسيؤدي ذلك إلى أخطاء خطية سيئة للغاية. لذلك، يجب علينا بشكل افتراضي أن نعلن عن الخط الخاص بموقع الويب، والخط الأكثر استخدامًا هو خط Google لأن استضافة/خادم Google قوي جدًا. إذا كنت تريد المزيد من السرعة المذهلة، فإن بعض سمات Wordpress تحتوي على خطوط مدمجة لحفظها مباشرة على الاستضافة الخاصة بك دون الحاجة إلى استدعاء الخطوط من Google. يعد Roboto خطًا شائعًا جدًا على مواقع الويب اليوم، لذا سأعلن عن هذا الخط! مكتبة:

<link href="https://fonts.googleapis.com/css?family=Roboto rel="stylesheet"/>

اذهب

---

2Font Awesome

يوجد حاليًا إصداران شائعان الاستخدام من Font Awesome: الإصدار 4.7 والإصدار 5. يدعم الإصدار العديد من تنسيقات الأيقونات والعديد من الرموز المختلفة. لكن بالنسبة للمستخدمين الأساسيين، يمكنك استخدام الإصدار V4.7 ولا بأس بذلك. Font Awesome هي مكتبة من أيقونات مواقع الويب التي تفضلها العديد من مواقع الويب نظرًا لبساطة استخدامها! مكتبة:

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css rel="stylesheet"/>

وإذا كنت تستخدم كلا من Google Font وFont Awesome، فاستبدلهما بما يلي: مكتبة:

<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");loadCSS("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,600,900")
//]]>
</script>

اذهب

---

3Bootstrap

Bootstrap هو إطار عمل HTML و CSS و JavaScript يتيح تصميم وتطوير الويب على الأجهزة المحمولة بسرعة.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"/>
<!-- Optional theme -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous"/>
<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

اذهب

---

4Jquery

jQuery هي مكتبة مبنية على Javascript لمساعدة المبرمجين على إنشاء وظائف باستخدام Javascript بسهولة أكبر. تم دمج jQuery مع العديد من الوحدات المختلفة بدءًا من وحدات التأثير وحتى وحدات استعلام المحدد. يتم استخدام jQuery في 99% من جميع مواقع الويب في العالم (باستثناء مواقع الويب التي تستخدم JS Framework). تتضمن وحدات jQuery الرئيسية ما يلي:

Ajax - التعامل مع Ajax
Atributes - يعالج سمات كائنات HTML
Effect - يعالج التأثيرات
Event - التعامل مع الحدث
Form - يعالج الأحداث المتعلقة بالنموذج
DOM - يعالج نموذج كائن البيانات Selector - يعالج التدفق بين كائنات HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

اذهب

---

5Button Share

في المواقع الإخبارية أو مواقع المبيعات، لا غنى عن زر المشاركة. بدلاً من الاضطرار إلى كتابة الكثير من التعليمات البرمجية، يمكننا استخدام مكتبة Addthis. توجد أزرار مشاركة على معظم الشبكات والتطبيقات الاجتماعية
Button Follow
Floating Button
Sticky Button
Reactions like Facebook
Image share الاستخدام بسيط للغاية، ما عليك سوى الإعلان عن مكتبة Javascript وتثبيت HTML في الموقع الذي تريد عرض الزر وHTML فيه.

 <script type='text/javascript' src='//platform-api.sharethis.com/js/sharethis.js#property=id&amp;product=inline-share-buttons' async='async'></script>

اذهب