<?xml version='1.0' encoding='UTF-8'?><?xml-stylesheet href="http://www.blogger.com/styles/atom.css" type="text/css"?><feed xmlns='http://www.w3.org/2005/Atom' xmlns:openSearch='http://a9.com/-/spec/opensearchrss/1.0/' xmlns:blogger='http://schemas.google.com/blogger/2008' xmlns:georss='http://www.georss.org/georss' xmlns:gd="http://schemas.google.com/g/2005" xmlns:thr='http://purl.org/syndication/thread/1.0'><id>tag:blogger.com,1999:blog-1421699815441362866</id><updated>2024-11-20T01:56:16.595+03:00</updated><category term="تصميم مواقع"/><category term="تطوير الويب"/><category term="مقالات تقنية"/><category term="برمجة"/><category term="بلوجر"/><category term="إضافات بلوجر"/><category term="الامن والحماية"/><category term="PHP"/><category term="مواقع مفيده"/><category term="اندرويد"/><category term="css"/><category term="سيو"/><category term="قواعد بيانات"/><category term="MVC"/><category term="إضافات"/><category term="برامج"/><category term="تصميم"/><category term="سلايدر شو"/><category term="javascript"/><category term="شبكات"/><category term="free-html-template"/><category term="ايقونات"/><category term="خطوط"/><category term="دورات"/><category term="قوالب"/><category term="لينكس"/><category term="SEO"/><category term="SVG"/><category term="Visual Studio"/><category term="bootstrap"/><category term="codeigniter"/><category term="drivers"/><category term="free-codes"/><category term="htaccess"/><category term="jquery"/><category term="landing pages"/><category term="open-source-projects"/><category term="printers"/><category term="website template"/><category term="برمجة تطبيقات الاندرويد"/><category term="سي شارب"/><category term="صفحات هبوط"/><category term="صيانة"/><category term="طابعات"/><category term="كتب"/><category term="كمبيوتر"/><category term="مشاريع"/><category term="ميكروسوفت"/><title type='text'>كودكسايت | CodexAIT</title><subtitle type='html'>دوت كوم</subtitle><link rel='http://schemas.google.com/g/2005#feed' type='application/atom+xml' href='https://www.codexait.com/feeds/posts/default'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default'/><link rel='alternate' type='text/html' href='https://www.codexait.com/'/><link rel='hub' href='http://pubsubhubbub.appspot.com/'/><link rel='next' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default?start-index=26&max-results=25'/><author><name>Codex AIT</name><uri>http://www.blogger.com/profile/10277402041090003956</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFcTjVsB95C1gFAE3krg39Hdh7dmMu6QS9pXd1I3ZHOizXUXoYGUk0pFDKacxWx32H5Ni7YSdej17qiBuZnPprWuCrcLa8iorQpO_jvBm0sOqvhy2vjicX14KpOXIWOQ/s220/Codexait+Logo+2021+%284%29+-+Copy+%281%29.png'/></author><generator version='7.00' uri='http://www.blogger.com'>Blogger</generator><openSearch:totalResults>96</openSearch:totalResults><openSearch:startIndex>1</openSearch:startIndex><openSearch:itemsPerPage>25</openSearch:itemsPerPage><entry><id>tag:blogger.com,1999:blog-1421699815441362866.post-8698386071997278311</id><published>2024-08-31T18:25:00.000+03:00</published><updated>2024-08-31T18:25:12.417+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="drivers"/><category scheme="http://www.blogger.com/atom/ns#" term="printers"/><category scheme="http://www.blogger.com/atom/ns#" term="صيانة"/><category scheme="http://www.blogger.com/atom/ns#" term="طابعات"/><category scheme="http://www.blogger.com/atom/ns#" term="كمبيوتر"/><title type='text'>اهم مصادر وطرق تحميل تعاريف الطابعات وتثبيتها</title><content type='html'><p>&nbsp;كثير من المؤسسات والمنظمات والمكاتب عادة ما تمتلك العديد من الطابعات، ليس ذلك فقط بل على المستوى الشخصي خصوصا مع التطور الرقمي، حيث تحتاج كل طابعة لتعريف خاص بها للاتصال&nbsp;بالكمبيوتر وتنفيذ اوامره بشكل صحيح.</p><div class="separator" style="clear: both; text-align: center;"> <noscript><img alt="اهم مصادر وطرق تحميل تعاريف الطابعات وتثبيتها" height="460" width="840" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi91CU7-k6N1EP2kjAqxvV0tYq5ZnF_J9I9zjATWaCUhDUBPIFvxy74324siCYANdaRSNud_aWDYLfcue0BNnnlDK2x4QjP1BnhxI9AisKM0kEbWhTaKzG6B5-1dqRVEYRO7TKV_xrvjkCZMMhM5pCUm93nYQuGzY2xU4c7ehBZEvlKhexizPjAWK71J5E/s1050-rw/printers-drivers-download-resources.webp" /> </noscript> <img alt="اهم مصادر وطرق تحميل تعاريف الطابعات وتثبيتها" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi91CU7-k6N1EP2kjAqxvV0tYq5ZnF_J9I9zjATWaCUhDUBPIFvxy74324siCYANdaRSNud_aWDYLfcue0BNnnlDK2x4QjP1BnhxI9AisKM0kEbWhTaKzG6B5-1dqRVEYRO7TKV_xrvjkCZMMhM5pCUm93nYQuGzY2xU4c7ehBZEvlKhexizPjAWK71J5E/s1050-rw/printers-drivers-download-resources.webp" height="460" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="840" /> </div> <br /><p><br /></p><p>بالرغم من انه يتواجد سيدي خاص بتعريف الطابعة عند شراءها الا انه عادة مايتعرض للتلف او للفقدان، كما يجب ايضا تحديث تعريف الطابعة للحصول على افضل اداء لذلك سنتحدث اليوم عن اهم المصادر لتوفير تعاريف جميع انواع الطابعات والماسحات الضوئية بنفس الوقت، لتوفير الجهد وتحاشي البرامج الضارة.</p><h2 style="text-align: right;">اهم مصادر وطرق تحميل تعاريف الطابعات والماسحات الضوئية وتثبيتها</h2><p>اليكم قائمة بأهم المصادر الرسمية وغير الرسمية لتنزيل تعاريف الطابعات او الماسحات الضوئية بشتى انواعها، بالإضافة الى طرق تثبيتها:</p><h3 style="text-align: right;">السيدي الملحق مع الطابعة</h3><p style="text-align: right;">بكل تأكيد يأتي مع الطابعة سيدي يحتوي على تعريف الطابعة الاصلي مع برمجيات مساعدة اخرى، وهو افضل خيار للمستخدم لتثبيت تعريف الطابعة، ولكن في حال تلف السيدي او فقدانه ستضطر للبحث عن مصادر اخرى لتحميل تعريف الطابعة، لذلك انصح بتحويل السيدي الى نسخة رقمية والاحتفاظ بها في جهازك.</p><h3 style="text-align: right;">الموقع الرسمي للشركة المصنعة للطابعة</h3><p style="text-align: right;">الموقع الرسمي هو الخيار الثاني او الخيار الآمن لتنزيل تعريف الطابعات، خصوصاً اذا اردت تحديث تعريف الطابعة، في حال ظهور مشاكل في عمل الطابعة او للحصول على افضل اداء وهذه هي قائمة المواقع الرسمية لشركات الطابعات الأكثر شهرة:</p><h4 style="text-align: right;">تعاريف طابعات HP</h4><p>طابعات HP تعد من الأكثر انتشارًا بفضل أسعارها المناسبة وأدائها الجيد لتحميل تعاريف طابعات HP ادخل الى الموقع الرسمي لشركة HP لتحميل تعاريف الطابعات، يجب معرفة اسم المنتج كاملا والذي يأتي ملصق على الطابعة، وادخالة في مربع البحث.</p><p>بعد اختيار الطابعة اختر نظام التشغيل واصداره، سيتم اظهار التعريفات الخاصة بالطابعة، يفضل تنزيل التعريف الكامل&nbsp;&nbsp;Full Feature Software او الموصى به لإحتوائه على التعريف مع الملحقات بالاضافة الى تعريف الماسح الضوئي (scanner).</p><p>طريقة تثبيت التعريف سهله جدأ يجب التأكد من عدم توصيل الطابعة بالكمبيوتر وبدء تثبيت التعريف والمتابعة حسب التعليمات المعروضة الى ان يتم طلب توصيل الطابعة بالكمبيوتر قم بذلك وتابع التثبيت.</p><p style="text-align: center;"><a class="button ln extL" href="https://support.hp.com/us-en/drivers/printers" rel="nofollow" target="_blank">الموقع الرسمي لتعاريف طابعات HP</a> </p><h4 style="text-align: right;">تعاريف طابعات Epson</h4><p>تشتهر طابعات ابسون بجودة طابعاتها وخياراتها المتعددة، خاصة في طابعات الصور والمستندات، لتحميل تعاريف طابعات ابسون انتقل الى رابط الموقع الرسمي اكتب في مربع البحث اسم الطابعة او الاسكانر بالكامل كما هو ملصق عرض الطابعة، قم بتحديد نظام التشغيل، ستظهر لك تعريفات الطابعة قم بتحميل الاصدار الكامل full package او الموصى به.</p><p>بنفس الطريقة تتم عملية تثبيت التعريف بمتابعة التعليمات والمتابعة وتوصيل الطابعة عن الطلب.</p><p style="text-align: center;"><a class="button ln extL" href="https://www.epson-middleeast.com/ar_ME/support" rel="nofollow" target="_blank">الموقع الرسمي لتعاريف طابعات Epson</a></p><h4 style="text-align: right;">تعاريف طابعات Canon</h4><div><p style="text-align: right;">تتميز طابعات كانون بجودة الطباعة العالية، وخاصة في طباعة الصور، لتحميل تعاريف طابعات كانون بعد الدخول الى الموقع الرسمي يجب الحصول على اسم المنتج المعروض على الطابعة وكتابته في مربع البحث، تحديد نظام التشغيل وتنزيل التعريف الموصى به، اما بالنسبة لتثبيت التعريف شغل البرنامج واتبع التعليمات المعروضة خلال عملية التثبيت.</p><p style="text-align: center;"> <a class="button ln extL" href="https://en.canon-me.com/support/" rel="nofollow" target="_blank">الموقع الرسمي لتعاريف طابعات Canon</a></p></div> <h4 style="text-align: right;">تعاريف طابعات Brother</h4><p>تعتبر من الطابعات المتينة والمناسبة للشركات الصغيرة والمكاتب، ولكن ليست من الطابعات المنتشرة بشكل كبير في منطقة الشرق الاوسط ، يتم تحميل التعريف من خلال البحث باسم المنتج او من خلال تصفح الطابعات باختيار نوع الطابعة الى ان تصل الى الطابعة المطلوبة.</p> <p style="text-align: center;"><a class="button ln extL" href="https://www.brother.ae/en/support" rel="nofollow" target="_blank">الموقع الرسمي لتعاريف طابعات Brother</a></p><div><br /></div> <h4 style="text-align: right;">تعاريف طابعات Sharp</h4> <p>طابعات شارب تعتبر من الطابعات الضخمة والعملاقة، رغم ان لديها موقع رسمي الا انه معقد قليلا عن المواقع السابقة، يجب معرفة اسم منتج الطابعة اولا، ثم الدخول الى رابط تحميل التعاريف الرسمي اختر المنطقة Middle East &amp; Africa اذا كنت من الدول العربية او قارة افريقيا او حدد ما يناسب موقعك، في مربع البحث ادخل اسم منتج الطابعة، بعد اختيار اسم المنتج حدد اللغة ولتكن الانجليزية اضغط على التالي او "NEXT".</p><p>في الصفحة التالية يتم تحديد نظام التشغيل تلقائياً، ولكن بإمكانك اختيارنظام تشغيل آخر، ثم اضغط على التالي، الان قم بتنزيل تعريفات الطابعة، تأتي بنسختين وهما:</p><p></p><ul style="text-align: right;"><li><b>PCL6</b>: يستخدم تعريف PCL6 للطباعة اليومية للمستندات النصية والصور، وهو الخيار الأفضل لأغلب المستخدمين.</li><li><b>PS/PDD</b>: يستخدم تعريف PS/PDD إذا كنت بحاجة إلى طباعة صور عالية الجودة أو مستندات معقدة تتطلب تحكمًا دقيقًا في عملية الطباعة.</li></ul><p>عملية التثبيت سهلة جداً بمجرد الضغط على برنامج التعريف، ولكن يجب اولا توصيل الطابعة بالكمبيوتر والمتابعة اختار التثبيت المعياري "Standard Installation" سيتم البحث عن الطابعة المتصلة بالكمبيوتر سواء عبر الشبكة او مباشره عبر الـ USB ومتابعة التثبيت.</p> <p>يوجد خيار اخر وهو التثبيت المخصص "Custom Installation" والذي من خلاله يمكنك تخصيص خيارات الاتصال بالطابعة وغيره من الاعدادات.</p> <p style="text-align: center;"><a class="button ln extL" href="https://global.sharp/restricted/print/select.html?view=2&amp;" rel="nofollow" target="_blank">الموقع الرسمي لتعاريف طابعات Sharp</a></p> <h4 style="text-align: right;">تعاريف طابعات Zebra</h4><p style="text-align: right;">طابعات <strong>Zebra</strong>&nbsp;مشهورة عالميًا وتستخدم بشكل واسع في الوطن العربي، خاصة في القطاعات التجارية والصناعية، تُعرف طابعات Zebra بجودتها العالية وقدرتها على طباعة الملصقات والباركود والبطاقات بشكل احترافي، ومعظمها طابعات حرارية.</p> <p>لتحميل تعاريف طابعات زبرا انتقل للموقع الرسمي والبحث باسم المنتج او رقم الموديل، بعد ذلك سيعرض الموقع التعاريف المتاحة لنظام التشغيل الذي تستخدمه.</p><p>لاتوجد صعوبة في تثبيت تعاريف طابعات zebra، ولكن يجب اختيار البورت المناسب خلال عملية التثبيت وعادة مايكون من نوع USB.</p> <p style="text-align: center;"><a class="button ln extL" href="https://www.zebra.com/us/en/support-downloads/printers.html" rel="nofollow" target="_blank">الموقع الرسمي لتعاريف طابعات Zebra</a></p><h4 style="text-align: right;">تعاريف طابعات BIXOLON</h4><p style="text-align: right;">تتميز طابعات بيكسولون بجودة طباعتها ومتانتها، تحتوي مجموعة من انواع الطابعات مثل طابعات الإيصالات، وطابعات الملصقات، وطابعات نقاط البيع، وطابعات المكاتب.</p><p style="text-align: right;">ايضاً تتميز بسهولة استخدامها، وتثبيت برامج تشغيلها، لتحميل تعاريف طابعات بيكسولون كل ماعليك هو الدخول لرابط الشركة الرسمي وادخل اسم المنتج، او بإمكانك تصفح قائمة الطابعات للوصول لطابعتك.</p><p style="text-align: center;"><a class="button ln extL" href="https://www.bixolon.com/support.php?kind=download" rel="nofollow" target="_blank">الموقع الرسمي لتعاريف طابعات BIXOLON</a></p> <p class="note" style="text-align: center;">في حال لم يتم العثور على التعريف في الموقع الرسمي، يجب التواصل مع الدعم الفني للشركة المصنعة لتوفير التعريف.</p><h3 style="text-align: right;">استخدام برامج تحميل تعريفات الطابعات&nbsp;</h3><p style="text-align: right;">تعتر الخيار البديل للمواقع الرسمية، هذه البرامج تفحص جهاز الكمبيوتر الخاص بك وتحدد نوع الطابعة المتصلة به، ثم تبحث تلقائيًا عن أحدث تعريفات الطابعة المتوافقة مع نظام التشغيل لديك وتقوم بتنزيلها وتثبيتها بشكل آلي.<br />وهذه قائمة بأفضل برامج تحميل تعريفات الطابعات الموثوقة:</p><div><h4 style="text-align: right;">Driver Booster</h4><p style="text-align: right;">من إنتاج شركة IObit، يعد من أفضل البرامج لتحميل وتحديث تعريفات الأجهزة بشكل عام بما في ذلك الطابعات، يوفر قاعدة بيانات ضخمة ويتم تحديثها بانتظام لضمان الحصول على أحدث التعريفات.</p><h4 style="text-align: right;">Driver Easy</h4><p style="text-align: right;">برنامج سهل الاستخدام يمكنه العثور على التعريفات المفقودة أو القديمة وتثبيتها، يوفر نسخة مجانية ونسخة مدفوعة مع مزايا إضافية.</p><h4 style="text-align: right;">Snappy Driver Installer</h4><p style="text-align: right;">برنامج مفتوح المصدر ومجاني بالكامل، يسمح لك بتنزيل تعريفات الطابعات وجميع أجهزة الكمبيوتر، يتميز بسرعة التحديث وعدم وجود إعلانات.</p><h4 style="text-align: right;">DriverPack Solution</h4><p style="text-align: right;">برنامج قوي يأتي مع قاعدة بيانات شاملة لجميع التعريفات تقريبًا، يتيح التحديث دون الحاجة إلى الاتصال بالإنترنت إذا تم تنزيل الحزمة الكاملة.</p><h4 style="text-align: right;">SlimDrivers</h4><p style="text-align: right;">يقدم إمكانية تحميل وتحديث تعريفات الطابعات بشكل تلقائي، يحتوي على نسخة مجانية تقوم بتحميل التعريفات واحداً تلو الآخر.</p><p style="text-align: right;"><br /></p></div><h3 style="text-align: right;">استخدام تحديثات نظام التشغيل للحصول على التعريفات</h3><div><h4 style="text-align: right;">Windows Update (في حالة استخدام نظام Windows)</h4><p style="text-align: right;">في بعض الأحيان، يقوم نظام التشغيل Windows تلقائيًا بتثبيت التعريفات اللازمة عند توصيل الطابعة لأول مرة، في حال لم يتم تثبيت التعريف تلقائياً:</p><div>افتح قائمة "ابدأ" واذهب إلى "الإعدادات" ثم "التحديثات والأمان"، اختر "Windows Update" واضغط على "البحث عن التحديثات"، إذا كان هناك تعريف متاح لطابعتك، سيقوم Windows بتنزيله وتثبيته تلقائيًا.</div><div><br /></div><h4 style="text-align: right;">Apple Software Update (في حالة استخدام نظام macOS)</h4><p style="text-align: right;">بالنسبة لمستخدمي macOS، يمكن استخدام "Apple Software Update" لتثبيت تعريفات الطابعات، قم بتوصيل الطابعة بجهاز Mac الخاص بك. في الغالب، سيقوم macOS بالبحث تلقائيًا عن التعريف وتثبيته.</p><p style="text-align: right;">اذا لم يتم تثبيت التعريف تلقائياً، افتح "تفضيلات النظام" ثم "الطابعات والماسحات الضوئية" وأضف الطابعة يدويًا. سيقوم macOS بتنزيل التعريفات المناسبة لها.</p><p class="note wr">تحذير: يجب توخي الحذر عند تنزيل تعاريف الطابعة من مواقع غير متعارف عليها، حيث قد تحتوي بعض هذه المواقع على برامج ضارة.</p></div><h2 style="text-align: right;">الخلاصة</h2><p style="text-align: right;">قد نضيع الكثير من الوقت في البحث عن تعريف الطابعة المناسب، في حال لم يكن لدينا القرص الاصلي والذي يعتبر المصدر الاساسي للمستخدم او اردنا تحديث تعريف الطابعة الى اخر اصدار، لذلك قدمنا لكم اليوم اهم المصادر الموثوقة للحصول على تعريف الطابعات، واهمها الموقع الرسمي للشركة المصنعة للطابعة وقد ذكرنا اهم الشركات المصنعة للطابعات.</p><p style="text-align: right;">كما ذكرنا اهم برامج تحميل وتثبيت تعاريف الطابعات والتي يمكن من خلالها تثبيت تعريف الطابعة بكل سهولة ويسر، ايضا تحدثنا عن تحديث نظام التشغيل بعد توصيل الطابعة بالكمبيوتر ليتم البحث التلقائي عن تعريف الطابعة وتثبيته.</p><p style="text-align: right;">&nbsp;كانت هذه <b>اهم المصادر لتحميل تعاريف الطابعات وتثبيتها</b> التي عادةً ما استخدمها، اذا كانت لديك اي اضافات او استفسارات ... اضفها في تعليق ... دمتم في رعاية الله وحفظه.</p><p></p></content><link rel='replies' type='application/atom+xml' href='https://www.codexait.com/feeds/8698386071997278311/comments/default' title='تعليقات الرسالة'/><link rel='replies' type='text/html' href='https://www.codexait.com/2024/08/printers-drivers-resources.html#comment-form' title='0 تعليقات'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/8698386071997278311'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/8698386071997278311'/><link rel='alternate' type='text/html' href='https://www.codexait.com/2024/08/printers-drivers-resources.html' title='اهم مصادر وطرق تحميل تعاريف الطابعات وتثبيتها'/><author><name>Codex AIT</name><uri>http://www.blogger.com/profile/15646728619579743282</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmoUUCMMO5a9No09HDWHrm0-p-X-8XVYV3vsvUiC2xADeA0HuVVWTwHj826NC_TelTHWAdGqQsMPRrVhNcm4NoGTlhux8MWtclXXPtVZEN3NQ0j-HjNnk8l7zCKfe4RQ/s220/Codexait+Logo.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi91CU7-k6N1EP2kjAqxvV0tYq5ZnF_J9I9zjATWaCUhDUBPIFvxy74324siCYANdaRSNud_aWDYLfcue0BNnnlDK2x4QjP1BnhxI9AisKM0kEbWhTaKzG6B5-1dqRVEYRO7TKV_xrvjkCZMMhM5pCUm93nYQuGzY2xU4c7ehBZEvlKhexizPjAWK71J5E/s72-c-rw/printers-drivers-download-resources.webp" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1421699815441362866.post-8526106563466768195</id><published>2024-08-12T17:11:00.002+03:00</published><updated>2024-08-20T16:58:07.676+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="free-html-template"/><category scheme="http://www.blogger.com/atom/ns#" term="landing pages"/><category scheme="http://www.blogger.com/atom/ns#" term="تصميم مواقع"/><category scheme="http://www.blogger.com/atom/ns#" term="صفحات هبوط"/><category scheme="http://www.blogger.com/atom/ns#" term="قوالب"/><title type='text'>افضل 20 قالب صفحة هبوط HTML5 و CSS3 مجانية لمواقع الويب</title><content type='html'><div class="separator" style="clear: both; text-align: center;"> <noscript><img alt="افضل القوالب وصفحات الهبوط المجانية لمواقع الوبب" height="460" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhStYh97xj1FN0vI7ALLJ0Y4vAUr-RU-xrB86NK1mJ1f68DDNr0iLo0M0Hyj4hrg4apAWxX7ksIc685SlbZhyu-LQDYoJhbv1XfPg3u9fkcOZwDuJVxTZL9DODNbSG9Y2tVQOt95JTIww0GaHOqFe-HvtpbsGcZeLLhxy4Zmq8sOKzafyYysm48y2WvFZE/s840-rw/free-html5-css3-landing-pages.webp" width="840" /></noscript> <img alt="افضل القوالب وصفحات الهبوط المجانية لمواقع الوبب" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhStYh97xj1FN0vI7ALLJ0Y4vAUr-RU-xrB86NK1mJ1f68DDNr0iLo0M0Hyj4hrg4apAWxX7ksIc685SlbZhyu-LQDYoJhbv1XfPg3u9fkcOZwDuJVxTZL9DODNbSG9Y2tVQOt95JTIww0GaHOqFe-HvtpbsGcZeLLhxy4Zmq8sOKzafyYysm48y2WvFZE/s840-rw/free-html5-css3-landing-pages.webp" height="460" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="840" /> </div> <p><br /></p> <p>في حال كنت مصمم او مطور مواقع بالتأكيد ستحتاج لهذه التجمعية الرائعة من القوالب وصفحات الهبوط، قوالب مصممة بواسطة HTML5 و CSS3 والعديد من مكتبات الجافا سكريبت المختلفة.</p> <p>لنتعرف اولا على ماهية صفحات الهبوط واهميتها في العالم الرقمي، صفحات الهبوط (Landing pages) هي عبارة عن صفحة واحدة على الويب، لعرض اعمالك او خدماتك او منتجك او شركتك، وتستخدم لجلب العملاء والمشتركين من خلال الحملات التسويقية، كما تعتبر حضور لعلامتك التجارية على الويب والعالم الرقمي.</p> <p>القوالب رائعة ومنتقاه من بين آلاف القوالب المجانية، يمكنك تحميلها والتعديل عليها وتخصيصها حسب احتياجاتك ويمكنك أيضا اخذ أفكار منها كمصمم مواقع ويب.</p> <h2 style="text-align: right;">قائمة بأفضل 20 صفحة هبوط مجانية لمواقع الويب</h2> <p>اليكم قائمة بأفضل صفحات الهبوط المجانية بشتى أنواعها، سواء&nbsp;صفحة هبوط landing page لشركتك او لمنتجك او لأعمالك او لملفك الشخصي وسيرتك الذاتية.</p> <h3 style="text-align: right;">BrainwaveIO&nbsp;</h3> <div class="separator" style="clear: both; text-align: center;"> <noscript><img alt="صفحة هبوط BrainwaveIO مجاناً" height="460" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR9lgqZXRzT8MYuoobE8s9IefwWcndhBnzxVCKUtnQmQXdWjI1vQfV2o30HF8hB5V-mOGlyAjfLZriSXOWc7eQ5Z1OX7glBy0V2j_WgBz9hxgunB37KOUaDwDVF9OrttLb4a8iJYlQywp0Ly4AyC-o6DOZ7idd59w4j2Xz3gkuIKtkmZprQnTw6JZKIzs/s840-rw/Brainwave%20landing%20page%20template.webp" width="840" /></noscript> <img alt="صفحة هبوط BrainwaveIO مجاناً" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR9lgqZXRzT8MYuoobE8s9IefwWcndhBnzxVCKUtnQmQXdWjI1vQfV2o30HF8hB5V-mOGlyAjfLZriSXOWc7eQ5Z1OX7glBy0V2j_WgBz9hxgunB37KOUaDwDVF9OrttLb4a8iJYlQywp0Ly4AyC-o6DOZ7idd59w4j2Xz3gkuIKtkmZprQnTw6JZKIzs/s840-rw/Brainwave%20landing%20page%20template.webp" height="460" width="840" /> </div> <p>صفحة هبوط او قالب من صفحة واحدة يتوافق مع الاعمال البسيطة كصفحة هبوط لمنتج او خدمة او تطبيق للهواتف المحمولة كالأندرويد والايفون.</p> <p>القالب مصمم بأحدث التقنيات كالبوتستراب 5 و HTML5/CSS3 ، ومن مميزات القالب انه مجاني بشكل كامل ومتجاوب بنسبة 100%.</p><p>يحتوي القالب على عدة اقسام بالاضافة الى الهيدر والفوتر الاحترافيين، كقسم الاتصال بفريق العمل وشرح المنتج وكيفية استخدامه، وقسم آراء العملاء المتحرك، والاشتراك بالبريد الالكتروني ، وقسم الأسئلة الشائعة المصممة بشكل رائع، بالإضافة الى قسم جدول الأسعار (Pricing Cards).</p><p>يتميز القالب ايضا بالعديد من المميزات او الإضافات الضرورية كالهيدر الاحترافي الثابت وزر الصعود الى اعلى ومشغل الفيديو، مايميزه ايضاً توافقه مع مختلف المتصفحات، واكواد نظيفه.</p><p>انصح به لأصحاب المنتجات او الخدمات ذات الطابع المفرد، يمكنك تنزيل القالب بالكامل مع المكتبات والموارد المستخدمة في ملف مضغوط بكل سهولة.</p><p style="text-align: center;"><a class="button ln extL" href="https://themewagon.com/themes/brainwaveio/" rel="nofollow" target="_blank">تحميل ومعاينة القالب</a></p> <p><br /></p><h3 style="text-align: right;">SOLUTION</h3> <div class="separator" style="clear: both; text-align: center;"> <noscript><img alt="صفحة هبوط solution مجاناً" height="460" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimNJKOcjp4DlexImbQSNZb06qrkzVNlNpgX5SwELtTKHhk9BsmWgH6O0NqSAKl50Rdmz0CrJCHi7HMNUg-zuyiNQlibevJSqII5cHy3E_nVI_dRBuA9cucyY3q33WWaSpgPbkIoGlraHsDEoZS6cdJKKRLD7rGBg5-YRCc2SPMFqlzefaNEY_yLUx7V7I/s840-rw/SOLUTION-landing-page-template.webp" width="840" /></noscript> <img alt="صفحة هبوط solution مجاناً" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimNJKOcjp4DlexImbQSNZb06qrkzVNlNpgX5SwELtTKHhk9BsmWgH6O0NqSAKl50Rdmz0CrJCHi7HMNUg-zuyiNQlibevJSqII5cHy3E_nVI_dRBuA9cucyY3q33WWaSpgPbkIoGlraHsDEoZS6cdJKKRLD7rGBg5-YRCc2SPMFqlzefaNEY_yLUx7V7I/s840-rw/SOLUTION-landing-page-template.webp" height="460" width="840" /></div> <p>قالب HTML5 او صفحة هبوط مجانية مصممة بشكل احترافي وذوق رفيع يمكن استخدامها في وكالات التسويق، او شركات البرمجيات السحابية (SaaS).</p><p>يحتوي القالب على العديد من الأقسام منها كالهيدر الرائع والفوتر الذي يحتوي على فورم التواصل وروابط اضافية ومواقع التواصل الاجتماعي.</p><p>ايضاٌ يحتوي على<a href="https://www.codexait.com/2016/12/top-5-slider-show.html"> سلايدر متحرك</a> لعرض آراء العملاء، وقسم الخدمات المقدمة بالاضافة الى عداد مميز للعملاء والمشاريع وغيره.</p><p>تم بناء القالب بأحدث تقنيات ومبادئ التصميم،&nbsp; كالبوتستراب 4 و HTML5/CSS3 و مكتبة الجي كويري، يتميز القالب باللمسات الإبداعية المميزة.</p> <p style="text-align: center;"><a class="button ln extL" href="https://freehtml5.co/preview/?item=solution-free-bootstrap-4-agency-template" rel="nofollow" target="_blank">تحميل ومعاينة القالب</a></p> <h3 style="text-align: right;">Now UI Kit</h3> <div class="separator" style="clear: both; text-align: center;"> <noscript><img alt="صفحة هبوط Now UI Kit مجاناً" height="460" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKsoZkmzeaLG6iJlJYYSDmL-jCyD-gJ0jBbUnvwhDR1suLbFEo3xDJ83qSGfScvSiVWOOOOKZgEAm2bOtlRX1T-5rRrKt1yuUDG3adbViqDlZ7ms67AndJDKavcjFE-32iWfpvq4enE7EgxhoVpvhdT-xljPk3k-thP3i4HaKYXUVzU9Vh__1G9oVAR9M/s840-rw/Now-UI-Kit.webp" width="840" /></noscript> <img alt="صفحة هبوط Now UI Kit مجاناً" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKsoZkmzeaLG6iJlJYYSDmL-jCyD-gJ0jBbUnvwhDR1suLbFEo3xDJ83qSGfScvSiVWOOOOKZgEAm2bOtlRX1T-5rRrKt1yuUDG3adbViqDlZ7ms67AndJDKavcjFE-32iWfpvq4enE7EgxhoVpvhdT-xljPk3k-thP3i4HaKYXUVzU9Vh__1G9oVAR9M/s840-rw/Now-UI-Kit.webp" height="460" width="840" /></div> هذا القالب يعتبر اطار عمل تصميمي يحتوي على العديد من مكونات التصميم، ويمكن تخصيصه بسهولة كصفحة هبوط لأعمالك، بالإضافة الى ذلك يمكن تخصيصه كموقع متكامل لشركتك.<div><br /><div>القالب يحتوي على العديد من مكونات التصميم الجاهزة مثل الأزرار والنماذج والبطائق وغيرها، مما يسهل عملية التصميم بإعادة استخدام هذه المكونات وتخصيصها.</div><div><br /></div><div>يحتوي القالب على توثيق شامل وهو مفتوح المصدر، حيث تم تصميم القالب بواسطة اطار العمل بوتستراب 4، يتميز بتصميم عصري حديث وانيق.<br /> <p></p> <p style="text-align: center;"><a class="button ln extL" href="https://github.com/creativetimofficial/now-ui-kit" rel="nofollow" target="_blank">تحميل ومعاينة القالب</a></p><br /> <h3 style="text-align: right;">KARMA</h3> <div class="separator" style="clear: both; text-align: center;"> <noscript><img alt="صفحة هبوط KARMA مجاناً" height="460" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7i6zr6Gp1ao45__z2Y4xKLeOAcHsMAMOsx4BlJM8J4BZtJB6mDMx8s8i2YEy90JkjzLC04m6YQDDixJOg4NSqcuJW1D7Rx7mqaHLEGz-PCYbrY6iFEOmD8WkYCNH-ggFYoNFG3UoFUs97acM2ctzQRAWLVHyGY2rQj13yU6ywYIn0rHT6TwFaZH6GEns/s840-rw/KARMA%20landing%20page%20template.webp" width="840" /></noscript> <img alt="صفحة هبوط KARMA مجاناً" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7i6zr6Gp1ao45__z2Y4xKLeOAcHsMAMOsx4BlJM8J4BZtJB6mDMx8s8i2YEy90JkjzLC04m6YQDDixJOg4NSqcuJW1D7Rx7mqaHLEGz-PCYbrY6iFEOmD8WkYCNH-ggFYoNFG3UoFUs97acM2ctzQRAWLVHyGY2rQj13yU6ywYIn0rHT6TwFaZH6GEns/s840-rw/KARMA%20landing%20page%20template.webp" height="460" width="840" /></div> <p>هو قالب مجاني مصمم خصيصاً لمواقع التجارة الالكترونية ، قالب ذات تصميم عصري وحديث، ما يميز القالب انه يمكن تخصيصه كصفحة هبوط لعرض خدماتك ومنتجاتك، ومع ذلك ينصح به للمتاجر ومواقع التجارة الالكترونية، لاحتوائه على مكونات التجارة الالكترونية.</p><p>تم تصميم القالب بواسطة HTML5/CSS3 والبوتستراب 4، وهو متجاوب بنسبة 100%، حيث يحتوي القالب على توثيق شامل لإمكانية تخصيصه واستخدام مكوناته.</p> <p style="text-align: center;"><a class="button ln extL" href="https://themewagon.com/themes/free-reponsive-bootstrap-4-html5-ecommerce-website-template-karma/" rel="nofollow" target="_blank">تحميل ومعاينة القالب</a></p><br /> <h3 style="text-align: right;">DAZZLE</h3> <div class="separator" style="clear: both; text-align: center;"> <noscript><img alt="صفحة هبوط DAZZLE مجاناً" height="460" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKj9tzJ-x61EhjYJ83ng67t_P9tRPLtXPWFJKPIV8RdnbjhyxCthMjW-Ibjz0OdgfRyW7yMQtXFOmYFjqRbVBBzSxomzzBPLJ-j3LlNHPihYAgUD__CJMT7NVm1A6WrQLm3CPRWWj33t51u3F_j4jwu1et_BX_f_1dxQ1J7taEGEW_O_gE4tUbE5OONNQ/s840-rw/DAZZLE-landing-page-template.webp" width="840" /></noscript> <img alt="صفحة هبوط DAZZLE مجاناً" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKj9tzJ-x61EhjYJ83ng67t_P9tRPLtXPWFJKPIV8RdnbjhyxCthMjW-Ibjz0OdgfRyW7yMQtXFOmYFjqRbVBBzSxomzzBPLJ-j3LlNHPihYAgUD__CJMT7NVm1A6WrQLm3CPRWWj33t51u3F_j4jwu1et_BX_f_1dxQ1J7taEGEW_O_gE4tUbE5OONNQ/s840-rw/DAZZLE-landing-page-template.webp" height="460" width="840" /></div> <p>هو قالب صفحة هبوط&nbsp; مجاني للتطبيقات، مصمم بواسطة HTML5/CSS3، القالب ذو مظهر جذاب وعصري ومتجاوب مع مختلف الشاشات والأجهزة، ويحتوي على العديد من مكونات صفحات الهبوط، يمكنك استخدامه في تسويق التطبيقات اوغيرها من المنتجات ذات الطابع المفرد.</p><p>يحتوي القالب على قسم التعريف بالتطبيق واستخدامه ، وقسم اراء العملاء المتحرك، وبطائق الأسعار، وقسم تحميل التطبيق، كما يحتوي على فوتر رائع وجذاب، القالب مجاني ويحتوي على توثيق كامل</p> <p style="text-align: center;"><a class="button ln extL" href="https://themewagon.com/themes/dazzle-free-responsive-html5-app-landing-page-template/" rel="nofollow" target="_blank">تحميل ومعاينة القالب</a></p><br /> <h3 style="text-align: right;">FOI App</h3> <div class="separator" style="clear: both; text-align: center;"> <noscript><img alt="صفحة هبوط FOI App مجاناً" height="460" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivdOcRiGdbDELl3kqFS9YTZ8JF1UTdhgREn-LzMLIP2qbbOKLZ0aJUX-LLUzspAEMFdtg5gSPNJKhRnLzYUYF9kS7zmOUqC6QMC0ABiUW3YKmRF8yEocS2tYmqczVG5xKt9vFQJY-GJFDEEYxJWHutq7OlnaJPNIx12JMD_Ei6O6qd6L_DZbJvQyAucx8/s840-rw/FOI-App.webp" width="840" /></noscript> <img alt="صفحة هبوط FOI App مجاناً" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivdOcRiGdbDELl3kqFS9YTZ8JF1UTdhgREn-LzMLIP2qbbOKLZ0aJUX-LLUzspAEMFdtg5gSPNJKhRnLzYUYF9kS7zmOUqC6QMC0ABiUW3YKmRF8yEocS2tYmqczVG5xKt9vFQJY-GJFDEEYxJWHutq7OlnaJPNIx12JMD_Ei6O6qd6L_DZbJvQyAucx8/s840-rw/FOI-App.webp" height="460" width="840" /></div> <p>هو قالب مخصص لصفحات الهبوط لتطبيقات الويب والموبايل، قالب ذو تصميم عصري جذاب ومهني يعزز من فعالية تسويق خدماتك وتطبيقاتك ومنتجاتك عبر الانترنت.</p><p>القالب مرن قابل للتخصيص والتعديل بكل سهولة لاستخدامه حسب احتياجات مشروعك، ويقدم تجربة مستخدم ممتازة، وهو مصمم بواسطة البوتستراب، ايضا <a href="https://www.codexait.com/2016/03/design-responsive-web-site.html">متجاوب على كافة الشاشات والأجهزة</a>.</p> <p style="text-align: center;"><a class="button ln extL" href="https://www.bootstrapdash.com/product/foi-app-landing-page" rel="nofollow" target="_blank">تحميل ومعاينة القالب</a></p><br /> <h3 style="text-align: right;">EdgeCut</h3> <div class="separator" style="clear: both; text-align: center;"> <noscript><img alt="صفحة هبوط EdgeCut مجاناً" height="460" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPhHf0KN1vHJ-43vdw1em86QMFraK2nVOjwesYeZqrKaFbhoRtRVsVQ7E3i1jZk5AbIAmhC7niFto0k7RgKwyUtlTlSnEGEynReFY2mm59rFNBFjY51_oGQmytlt7iyb0g51lPyjoJUK_g8Bw6Ea-OmDbLSNTMtvGA8dNFdPVqqmeWW3-uLMzocPe2B8Y/s840-rw/EDGECUT-landing-page-template.webp" width="840" /></noscript> <img alt="صفحة هبوط EdgeCut مجاناً" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPhHf0KN1vHJ-43vdw1em86QMFraK2nVOjwesYeZqrKaFbhoRtRVsVQ7E3i1jZk5AbIAmhC7niFto0k7RgKwyUtlTlSnEGEynReFY2mm59rFNBFjY51_oGQmytlt7iyb0g51lPyjoJUK_g8Bw6Ea-OmDbLSNTMtvGA8dNFdPVqqmeWW3-uLMzocPe2B8Y/s840-rw/EDGECUT-landing-page-template.webp" height="460" width="840" /></div> <p>هو قالب صفحة هبوط مجانية مصمم بأحدث تقنيات التصميم مثل البوتستراب والـ HTML5 و CSS3، يحتوي القالب على العديد من الأقسام مثل المنتجات وآخر المقالات، وآراء العملاء المتحرك، وفورم الاتصال والموقع، كما يحتوي على قسم نبذه عن الصفحة، وقسم الاشتراك بالقائمة البريدية.</p><p>القالب يمكن استخدامه كصفحة هبوط لشخص يقدم منتجات متعددة بالإضافة الى مدونة لعرض المحتوى عليها، حيث ان القالب مميز ومبني على مبدأ التصميم المادي فهو مناسب لك ان كنت من محبي هذا النوع من التصاميم، يمكنك توظيفه كما تريد لسهولة تخصيصة.</p> <p style="text-align: center;"><a class="button ln extL" href="https://themewagon.com/themes/edgecut/" rel="nofollow" target="_blank">تحميل ومعاينة القالب</a></p><br /> <h3 style="text-align: right;">New Age</h3> <div class="separator" style="clear: both; text-align: center;"> <noscript><img alt="صفحة هبوط New Age مجاناً" height="460" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8e0wJ2-pVxkzb5Q37HjQnTNJIdqV2AEFJvbyGuIHQp3qztbCj3kIaEQ5HC0ZgsvRzfeElsoImXItqz20w4MrXX0ZR9u5mLmCo4ighLThciQWFIRAu0eGLxosGbNTjELXmtpcBHU-1EP-A6O8RRKgIpLmcTTVqkTihXZrLwEnpI1Dvb8KklDnB1NzWO2Y/s840-rw/Start-Bootstrap-Landing-page-template.webp" width="840" /></noscript> <img alt="صفحة هبوط New Age مجاناً" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8e0wJ2-pVxkzb5Q37HjQnTNJIdqV2AEFJvbyGuIHQp3qztbCj3kIaEQ5HC0ZgsvRzfeElsoImXItqz20w4MrXX0ZR9u5mLmCo4ighLThciQWFIRAu0eGLxosGbNTjELXmtpcBHU-1EP-A6O8RRKgIpLmcTTVqkTihXZrLwEnpI1Dvb8KklDnB1NzWO2Y/s840-rw/Start-Bootstrap-Landing-page-template.webp" height="460" width="840" /></div> <p>هو قالب صفحة هبوط بسيطة ومفتوحة المصدر لتساعدك في عرض تطبيقك او منتجك او اي شي آخر، يتميز القالب بتصميمه القوي وتعدد الأقسام، وهو نموذج رائع لتبدأ بتصميم قالب بواسطة البوتستراب.</p><p>يحتوي القالب على موك اب سهل التغيير فهو يعتمد على HTML5 و CSS3، كما يحتوي على ملفات SASS/SCSS مضمنة عند تحميل القالب.&nbsp;</p> <p style="text-align: center;"><a class="button ln extL" href="https://github.com/startbootstrap/startbootstrap-new-age" rel="nofollow" target="_blank">تحميل ومعاينة القالب</a></p><br /> <h3 style="text-align: right;">FitApp</h3> <div class="separator" style="clear: both; text-align: center;"> <noscript><img alt="صفحة هبوط FitApp مجاناً" height="460" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtEU5CVcknKqNPLO3GJLETS-MiCoQK3wo-oRwcw_GR0IeRvfpIrpHa6kpE1lQZ2QYcfjgrptirD57vd5OX7b3-QCVwVqg8AVdlOWL4bYP_EP1sPKq5RNPeMV8Od5hyBMWSCkzmqeC6WsNaV6QAgwPqcW0LoLWTIfSJ2KFIUo-3A0B4R_eunxaq-VNOdMw/s840-rw/FitApp-landing-Page-Template.webp" width="840" /></noscript> <img alt="صفحة هبوط FitApp مجاناً" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtEU5CVcknKqNPLO3GJLETS-MiCoQK3wo-oRwcw_GR0IeRvfpIrpHa6kpE1lQZ2QYcfjgrptirD57vd5OX7b3-QCVwVqg8AVdlOWL4bYP_EP1sPKq5RNPeMV8Od5hyBMWSCkzmqeC6WsNaV6QAgwPqcW0LoLWTIfSJ2KFIUo-3A0B4R_eunxaq-VNOdMw/s840-rw/FitApp-landing-Page-Template.webp" height="460" width="840" /></div> <p>قالب صفحة هبوط ممتازة لترويج واشهار أي تطبيق سواء كان تطبيق كمبيوتر او موبايل او غيره، قالب FitApp مصمم بالبوتسراب 5 و HTML5/CSS3، هو ويعطي افضل تجربة على مختلف الأجهزة الحديثة.&nbsp;</p><p>يتميز القالب بالتصميم العصري الجذاب، والحركات الانسيابية للمكونات عند تصفحه،&nbsp; وهو متجاوب مع كافة الشاشات ويحتوي على مكونات رائعة الجمال، متعدد الأقسام، يمكنك استخدامه كما هو، او تعديله حسب متطلبات مشروعك، فهو مجاني بالكامل.</p> <p style="text-align: center;"><a class="button ln extL" href="https://themewagon.com/themes/responsive-free-bootsrap5-html5-landing-page-template-fitapp/" rel="nofollow" target="_blank">تحميل ومعاينة القالب</a></p><br /> <h3 style="text-align: right;">ARSHA</h3> <div class="separator" style="clear: both; text-align: center;"> <noscript><img alt="صفحة هبوط ARSHA مجاناً" height="460" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPGx7TfNW9rQ4TS2pHk-VJAVQ19meCCoH6_bGOWVBRXw9E0EVSzWZQESCs03hE2dLZ_wEZ_BudEoaTF5I44m4h20PAdvCsbeG5BWOfvHCDxz68bXRrXJYCpvo1GDPIPIUWF_D1MkR5tL3YtmC24Ws2XBQGLbEHhYzijSOanZIleJBsPgGN390Wx7u09BY/s840-rw/ARSHA-landing-page-template.webp" width="840" /></noscript> <img alt="صفحة هبوط ARSHA مجاناً" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPGx7TfNW9rQ4TS2pHk-VJAVQ19meCCoH6_bGOWVBRXw9E0EVSzWZQESCs03hE2dLZ_wEZ_BudEoaTF5I44m4h20PAdvCsbeG5BWOfvHCDxz68bXRrXJYCpvo1GDPIPIUWF_D1MkR5tL3YtmC24Ws2XBQGLbEHhYzijSOanZIleJBsPgGN390Wx7u09BY/s840-rw/ARSHA-landing-page-template.webp" height="460" width="840" /></div> <p>هو قالب او صفحة هبوط يمكن استخدامه للشركات الناشئة ومقدمي الخدمات التقنية وتطوير البرمجيات، لاحتوائه على كافة الأقسام المطلوبة لتنفيذ ذلك، القالب يتميز بتصميم جذاب رسمي ومتكامل لتأسيس موقع متكامل لمثل هذه الفئة من المواقع.</p><p>تم تصميم القالب بواسطة بوتستراب 5 و HTML5/CSS3، وهو غني بمكونات صفحات و واجهات الويب، بإمكانك إعادة استخدامها، او تخصيصها، وهو متجاوب مع كافة احجام الشاشات، يستخدم القالب <a href="https://www.codexait.com/2016/12/css3-animation-libraries.html">الانيميشن</a> بشكل فعال وجذاب، وهو قالب مجاني يمكنك تخصيصه وتعديله حسب احتياجاتك.</p> <p style="text-align: center;"><a class="button ln extL" href="https://themewagon.com/themes/free-bootstrap-5-html-5-business-website-template-arsha/" rel="nofollow" target="_blank">تحميل ومعاينة القالب</a></p><br /> <blockquote> <b>اقرأايضا:</b> <a href="https://www.codexait.com/2021/12/web-design-template-free-download.html">افضل المصادر لتحميل قوالب وصفحات المواقع (HTML+CSS+JS) جاهزة مجانا</a> </blockquote> <h3 style="text-align: right;">Uoni</h3> <div class="separator" style="clear: both; text-align: center;"> <noscript><img alt="صفحة هبوط Uoni مجاناً" height="460" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3exnYN2anGDLrgbxMQwJTKOK6Hej37CFjI_HJv5zpn-g0a4vi7hL6cS78wl3e37WtkdhMzyFYcIWrMYt0YEw5Ml_kSUh3jCLHvQ6vQi5C6KlqYM70hp731E8pu_GNr5eFil52vpByJllcrjUqNLBNpQWygC85SzmUdDZsTgsbiIa5CEPL1v8utcqHqac/s840-rw/Uoni-landing-page.webp" width="840" /></noscript> <img alt="صفحة هبوط Uoni مجاناً" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3exnYN2anGDLrgbxMQwJTKOK6Hej37CFjI_HJv5zpn-g0a4vi7hL6cS78wl3e37WtkdhMzyFYcIWrMYt0YEw5Ml_kSUh3jCLHvQ6vQi5C6KlqYM70hp731E8pu_GNr5eFil52vpByJllcrjUqNLBNpQWygC85SzmUdDZsTgsbiIa5CEPL1v8utcqHqac/s840-rw/Uoni-landing-page.webp" height="460" width="840" /></div> <p>هو قالب بسيط متعدد الأغراض مصمم بواسطة بوتستراب 4،يمكن استخدامه لمواقع الشركات والأعمال، ويمكن استخدامه كصفحة هبوط&nbsp;&nbsp;لترويج منتج او خدمة،&nbsp;يحتوي القالب على سلايدر مميز، القالب ملفت للنظر مع تصميمه الداكن.</p> <p style="text-align: center;"><a class="button ln extL" href="https://themewagon.com/themes/uoni/" rel="nofollow" target="_blank">تحميل ومعاينة القالب</a></p><br /> <h3 style="text-align: right;">Titian</h3> <div class="separator" style="clear: both; text-align: center;"> <noscript><img alt="صفحة هبوط Titian مجاناً" height="460" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDy5FcXLH1vzHhIFu8IyvVZz28f5cXHLv33rayzW2YIVlAr9aLmj9sHO-TFHwUGWVhxpQNSJWc90J4EkrM9GJ3H7nHWSU370GXmSzUbXKhuryCC62H-2F_xkjiPUoZNWd69SaFRnyt2iTOWOAbyv8-MzE87QwpZ2MSQrCadeZS6Yv06KIuQ0UT3LhBUms/s840-rw/Titian-landing-Pages.webp" width="840" /></noscript> <img alt="صفحة هبوط Titian مجاناً" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDy5FcXLH1vzHhIFu8IyvVZz28f5cXHLv33rayzW2YIVlAr9aLmj9sHO-TFHwUGWVhxpQNSJWc90J4EkrM9GJ3H7nHWSU370GXmSzUbXKhuryCC62H-2F_xkjiPUoZNWd69SaFRnyt2iTOWOAbyv8-MzE87QwpZ2MSQrCadeZS6Yv06KIuQ0UT3LhBUms/s840-rw/Titian-landing-Pages.webp" height="460" width="840" /></div> <p>هو قالب صفحة هبوط متعددة الأغراض، مصممة بأحدث تقنيات التصميم، متعددة الأشكال والتنسقات، يقدم القالب افضل تجربة مستخدم (UX)،ويحتوي على توثيق متكامل.</p><p>بالإضافة الى كونه صفحة هبوط رائعة، أيضا يعتبر القالب متعدد الاستخدامات لذلك يمكن استخدامه كقالب اخبار او ملف شخصي لأعمالك او متجر، فهو يحتوي على تخطيط متجر ومدونة وملف شخصي.</p><p>القالب يحتوي على 10 اشكال مختلفة للهيدر، لذلك اذا كنت مطور مواقع وليس لديك وقت للتصميم ضع هذا القالب في اعلى قائمة مشاريعك يمكنك استخدامه وتخصيصه كيفما شئت.</p> <p style="text-align: center;"><a class="button ln extL" href="https://themewagon.com/themes/titan/" rel="nofollow" target="_blank">تحميل ومعاينة القالب</a></p><br /> <h3 style="text-align: right;">MASSIVELY</h3> <div class="separator" style="clear: both; text-align: center;"> <noscript><img alt="صفحة هبوط massively مجاناً" height="460" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCbxtKAYNk6EhqSxpucWU-K9cqDBMwCzvF1bg5dZF0UP4Rxs6uytXIM6VaNwzciX4MSmdBreY_ZxRyMBvRDjqkVOE8V_hdYisBVbCze0XhaqJ40VIXCEaOhgWbf79KnDtwAS4IueyxRLuYakQeWQY-TZ3Z-N00kfyzasVoRbEMWLgfhLzuemRXIagvS4M/s840-rw/MASSIVE-landing-page-template.webp" width="840" /></noscript> <img alt="صفحة هبوط massively مجاناً" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCbxtKAYNk6EhqSxpucWU-K9cqDBMwCzvF1bg5dZF0UP4Rxs6uytXIM6VaNwzciX4MSmdBreY_ZxRyMBvRDjqkVOE8V_hdYisBVbCze0XhaqJ40VIXCEaOhgWbf79KnDtwAS4IueyxRLuYakQeWQY-TZ3Z-N00kfyzasVoRbEMWLgfhLzuemRXIagvS4M/s840-rw/MASSIVE-landing-page-template.webp" height="460" width="840" /></div> <p>هو قالب مجاني او صفحة هبوط بسيطة لعرض المنتجات مع نموذج الاتصال والربط بحسابات الشبكات الاجتماعية ، أيضا يمكن استخدامه للتدوين، مصمم بواسطة HTML5/CSS3، وهو متجاوب مع كافة احجام الشاشات.</p> <p style="text-align: center;"><a class="button ln extL" href="https://html5up.net/massively" rel="nofollow" target="_blank">تحميل ومعاينة القالب</a></p><br /> <h3 style="text-align: right;">Tivo</h3> <div class="separator" style="clear: both; text-align: center;"> <noscript><img alt="صفحة هبوط Tivo مجاناً" height="460" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDDybKAyvXsNi5hpkF16MpNcwcmFs1ta5E7CIGp52dXX91RG4ig0ZDv5RtIMy2sGubSnFOCV5LuD-ktatceKzdvixYW3OW2spTtM_dR7x3EaWWK41Qyjs01U0uJA_mYnrTuAiVuO8kr-fQXDV_4-NRKkp8asV3sut3UuUmKRo8UDk2MkVlJqhSurtwlXc/s840-rw/Tivo-App-HTML-Landing-Page.webp" width="840" /></noscript> <img alt="صفحة هبوط Tivo مجاناً" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDDybKAyvXsNi5hpkF16MpNcwcmFs1ta5E7CIGp52dXX91RG4ig0ZDv5RtIMy2sGubSnFOCV5LuD-ktatceKzdvixYW3OW2spTtM_dR7x3EaWWK41Qyjs01U0uJA_mYnrTuAiVuO8kr-fQXDV_4-NRKkp8asV3sut3UuUmKRo8UDk2MkVlJqhSurtwlXc/s840-rw/Tivo-App-HTML-Landing-Page.webp" height="460" width="840" /></div> <p>Tivo هو صفحة هبوط احترافية بتصميم عصري، تم تصميمها بواسطة البوتستراب 5، وهو قالب مناسب للمنتجات والتطبيقات ومواقع الشركات الناشئة، تقدم&nbsp; الصفحة افضل مكونات مفيدة لعرض تقديمي لمشروعك على الانترنت.</p><p>بالإضافة الى ان القالب يمتلك العديد من الميزات الفعالة والتفاعلية يمكنك أيضا تخصيص وتطوير القالب على حسب متطلبات مشروعك، يعتبر القالب متجاوب على كافة الأجهزة ومتوافق مع كافة المتصفحات، يحتوي القالب على صفحات متعددة فرعية غير صفحة الهبوط الرئيسية، لذلك انصح به لأصحاب الشركات الناشئة.</p> <p style="text-align: center;"><a class="button ln extL" href="https://themewagon.com/themes/tivo-free-bootstrap-4-html5-landing-page-website-template/" rel="nofollow" target="_blank">تحميل ومعاينة القالب</a></p><br /> <h3 style="text-align: right;">YogaDay</h3> <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto;"><tbody><tr><td style="text-align: center;"><img alt="صفحة هبوط YogaDay مجاناً" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLvIUI6a2ZQKnSUtgH1p89FS7ytiN2mLcPL-RiCwMjHZ1X7-CRPaxq_qNBh2O7GQcUh3YWNCBVZlrcZaciB5Uv2LMcJ_rja3nbbvCExfhKs1mmR6DoI6vD6ejxtxMIL-jnfiRERorPyqp9JjAS1xPMyQplmzKU6y26QVBsy6AdH3BG-bLxZSpEl9X6z0/s1567/yoga-landing-page.webp" height="460" style="margin-left: auto; margin-right: auto;" width="840" /></td></tr><tr><td class="tr-caption" style="text-align: center;"></td></tr></tbody></table><div class="separator" style="clear: both; text-align: center;"> <noscript><img alt="صفحة هبوط YogaDay مجاناً" height="460" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWLvIUI6a2ZQKnSUtgH1p89FS7ytiN2mLcPL-RiCwMjHZ1X7-CRPaxq_qNBh2O7GQcUh3YWNCBVZlrcZaciB5Uv2LMcJ_rja3nbbvCExfhKs1mmR6DoI6vD6ejxtxMIL-jnfiRERorPyqp9JjAS1xPMyQplmzKU6y26QVBsy6AdH3BG-bLxZSpEl9X6z0/s1567/yoga-landing-page.webp" width="840" /></noscript> </div> <p>قالب YogaDay مجاني ومناسب لمواقع الخدمات الاحترافية، تم تصميم القالب بواسطة بوتستراب 4 و HTML5/CSS3، ويمكن استخدام القالب كصفحة هبوط مع قليل من التخصيص كونه قالب متعدد الأغراض وسهل التطوير والتعديل.</p><p>يحتوي القالب على صفحات فرعية متعددة، ويقدم سرعة تحميل ممتازة، أيضا تم تحسين القالب مع محركات البحث، يمتلك القالب العديد من مكونات واجهات الويب متعددة الأغراض لتحسين تجربة المستخدم.</p> <p style="text-align: center;"><a class="button ln extL" href="https://themewagon.com/themes/yogaday/" rel="nofollow" target="_blank">تحميل ومعاينة القالب</a></p><br /> <h3 style="text-align: right;">MOSH</h3> <div class="separator" style="clear: both; text-align: center;"> <noscript><img alt="صفحة هبوط MOSH مجاناً" height="460" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6U-7Rl31_FKIyM4rF0fUS2wc4cmriWzvN-6xNE6uM_ZgqMna96kK1_S8qo746MZdNOWr3sgJ3SFqXzZL3CK8UubTzVM3Jp5d4CEYPTioceyF-G3vx5WIJVe1R4AMBMd3CP04LTj-fKxFIAHq1pXjOeOrjtc8aJgvhY8HuWBG5IhhO8dh7R0S8F04imgQ/s840-rw/MOSH-landing-page-Template.webp" width="840" /></noscript> <img alt="صفحة هبوط MOSH مجاناً" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6U-7Rl31_FKIyM4rF0fUS2wc4cmriWzvN-6xNE6uM_ZgqMna96kK1_S8qo746MZdNOWr3sgJ3SFqXzZL3CK8UubTzVM3Jp5d4CEYPTioceyF-G3vx5WIJVe1R4AMBMd3CP04LTj-fKxFIAHq1pXjOeOrjtc8aJgvhY8HuWBG5IhhO8dh7R0S8F04imgQ/s840-rw/MOSH-landing-page-Template.webp" height="460" width="840" /></div> <p>اذا كانت لديك شركة او كنت تدير عملا بالتأكيد ستعجب ب MOSH، وذلك لانه مجهز بأحدث التقنيات، وهو بالفعل تصميم رائع، كما انه متوافق مع كافة المتصفحات ومتجاوب على كافة الشاشات.</p> <p style="text-align: center;"><a class="button ln extL" href="https://themewagon.com/themes/free-bootstrap-4-html5-agency-website-template-mosh/" rel="nofollow" target="_blank">تحميل ومعاينة القالب</a></p><br /> <h3 style="text-align: right;">Argon</h3> <div class="separator" style="clear: both; text-align: center;"> <noscript><img alt="صفحة هبوط Argon مجاناً" height="460" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZhljLU0fZYdTm_VZWYldKX-32OhcIyDGA4UzCnZ-Efi2i5KYSWKaX_3CjUOELC5kisPjLl6EIaFzClFlOQYnYrrdJfCiBGLYh_XFJx2rbHplSzBxA7UNgFzJ5CbMk4xaS_T18kV-RVwObprXUzwJ4vFTn22qGtL0Kje0CuN3QcSq0sKPHCbC4elV7g4g/s840-rw/argon-website-template.webp" width="840" /></noscript> <img alt="صفحة هبوط Argon مجاناً" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZhljLU0fZYdTm_VZWYldKX-32OhcIyDGA4UzCnZ-Efi2i5KYSWKaX_3CjUOELC5kisPjLl6EIaFzClFlOQYnYrrdJfCiBGLYh_XFJx2rbHplSzBxA7UNgFzJ5CbMk4xaS_T18kV-RVwObprXUzwJ4vFTn22qGtL0Kje0CuN3QcSq0sKPHCbC4elV7g4g/s840-rw/argon-website-template.webp" height="460" width="840" /></div> <p>ارجون ليس صفحة هبوط بالفعل او قالب عام بل يعتبر نظام او اطار تصميم متكامل يحتوي على كافة مكونات التصميم المطلوبة لأي موقع، مبني على البوتستراب 4، ولكن بتصميم حديث وجديد، لهذا يقدم تصميم رائع الجمال.</p><p>من هذا القالب يمكنك بناء آلاف القوالب المميزة من صفحات الهبوط الى المشاريع المعقدة والضخمة حسب احتياجاتك، القالب يحتوي على العديد من الأمثلة والصفحات مع توثيق متكامل.</p> <p style="text-align: center;"><a class="button ln extL" href="https://github.com/creativetimofficial/argon-design-system" rel="nofollow" target="_blank">تحميل ومعاينة القالب</a></p><br /> <h3 style="text-align: right;">Landwind</h3> <div class="separator" style="clear: both; text-align: center;"> <noscript><img alt="صفحة هبوط Landwind مجاناً" height="460" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUCNIpwd42GhCJ9Sz3irml291ORBUMAL7BaSk15tApOrAiRAVlTj_npnaAzfdu1lJi-w0p0rf1hgUIV7Efo2cClXrghPV0jUG1ACArkwuFN0WU2zBTO2bmop_yFGS9-H5egCxZML7zaJ7bITQlwlNs1iWFVBiQJvXxrDA8v4eFOInfSUCuX6IssyJk6xE/s840-rw/landwind%20landing%20page%20template.webp" width="840" /></noscript> <img alt="صفحة هبوط Landwind مجاناً" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUCNIpwd42GhCJ9Sz3irml291ORBUMAL7BaSk15tApOrAiRAVlTj_npnaAzfdu1lJi-w0p0rf1hgUIV7Efo2cClXrghPV0jUG1ACArkwuFN0WU2zBTO2bmop_yFGS9-H5egCxZML7zaJ7bITQlwlNs1iWFVBiQJvXxrDA8v4eFOInfSUCuX6IssyJk6xE/s840-rw/landwind%20landing%20page%20template.webp" height="460" width="840" /></div> <p>Landwind هو قالب صفحة هبوط مجانية ومفتوحة المصدر مصمم بواسطة اطار العمل Tailwind CSS&nbsp; ومكتبة&nbsp; Flowbite، كما يحتوي القالب على كافة المكونات المطلوبة لإنشاء صفحة هبوط احترافية.</p> <p style="text-align: center;"><a class="button ln extL" href="https://github.com/themesberg/landwind" rel="nofollow" target="_blank">تحميل ومعاينة القالب</a></p><br /> <h3 style="text-align: right;">Consult Lite</h3> <div class="separator" style="clear: both; text-align: center;"> <noscript><img alt="صفحة هبوط Consult Lite مجاناً" height="460" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJYHLbmIroWx12b_qQPRDeIuQylJrqsihOLxArR8bHmCl-Oi1GEAoyYhOulP2c9KW6cil0hNVhCU4DGGc_1JjRP2eJWdZw2Pm93Pqf5MFhm-KuEz5vAbV3jbiz3WwjxiLqZPoljn-cPo-1My8re0Igp7Q_eR8YWbZcLVb0c9-nWd_NNu7ib5dNYXeuq24/s840-rw/Consult-Lite.webp" width="840" /></noscript> <img alt="صفحة هبوط Consult Lite مجاناً" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJYHLbmIroWx12b_qQPRDeIuQylJrqsihOLxArR8bHmCl-Oi1GEAoyYhOulP2c9KW6cil0hNVhCU4DGGc_1JjRP2eJWdZw2Pm93Pqf5MFhm-KuEz5vAbV3jbiz3WwjxiLqZPoljn-cPo-1My8re0Igp7Q_eR8YWbZcLVb0c9-nWd_NNu7ib5dNYXeuq24/s840-rw/Consult-Lite.webp" height="460" width="840" /></div> <p>هو قالب بوتستراب مجاني مقدم لمواقع أصحاب استشارات الأعمال مثل الاستشاريين الماليين، ومحللي السوق، والمسوقين الرقميين، والضرائب ودعم المستثمرين.</p><p>يحتوي القالب على كافة الأقسام والمكونات المطلوبة لإنشاء موقع استشارات او شركة، يمكنك تعديل القالب والوسائط حسب احتياجاتك، كما انه يمكن استخدامه كصفحة هبوط متعددة الأغراض مع قليل من التخصيص.</p> <p style="text-align: center;"><a class="button ln extL" href="https://onepagelove.com/consult-lite" rel="nofollow" target="_blank">تحميل ومعاينة القالب</a></p><br /> <blockquote> <b>اقرأايضا:</b> <a href="https://www.codexait.com/2017/01/open-source-codes-and-projects.html">افضل المواقع للحصول على اكواد مجانية ومشاريع برمجية مفتوحة المصدر</a> </blockquote> <h3 style="text-align: right;">Nova</h3> <div class="separator" style="clear: both; text-align: center;"> <noscript><img alt="صفحة هبوط Nova مجاناً" height="460" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC9J8lZD0sWxJosZiv_jc_B6epDIpFot5HCh9PRJW31mpBQ4JKVPWw-edy2MFRHRCvcf1fu5nXfm7ELDJDTB7zN-jIYqJUJMWseavZ_3sjue0tjkrHwJqOewfdVZVQrVuP8dKJFJnfFvayIh9pQn3TvsJSfd3e6k5htYJVevqFL7iPy3gvTegkRMRNt28/s840-rw/NOVA2-landing-page-template.webp" width="840" /></noscript> <img alt="صفحة هبوط Nova مجاناً" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC9J8lZD0sWxJosZiv_jc_B6epDIpFot5HCh9PRJW31mpBQ4JKVPWw-edy2MFRHRCvcf1fu5nXfm7ELDJDTB7zN-jIYqJUJMWseavZ_3sjue0tjkrHwJqOewfdVZVQrVuP8dKJFJnfFvayIh9pQn3TvsJSfd3e6k5htYJVevqFL7iPy3gvTegkRMRNt28/s840-rw/NOVA2-landing-page-template.webp" height="460" width="840" /></div> <p>Nova هو قالب مواقع او صفحة هبوط مجانية لأصحاب الأعمال، مبني بواسطة البوتستراب 5، تم تصميم القالب بشكل خاص للشركات الناشئة والوكالات التجارية ومواقع الأعمال ذات الصلة.</p><p>القالب يقدم تصميم حديث عالي الجودة متجاوب مع كافة الشاشات، اذا كنت تبحث عن قالب بسيط مع كافة الأقسام المختلفة <b>فنوفا </b>هو الخيار الأمثل لك، القالب سهل الاستخدام والتخصيص حسب احتياجاتك.</p><p><br /></p> <p style="text-align: center;"><a class="button ln extL" href="https://uideck.com/templates/nova" rel="nofollow" target="_blank">تحميل ومعاينة القالب</a></p></div></div> <h2 style="text-align: right;">الخاتمة</h2><p>كانت هذه <a href="https://www.codexait.com/2024/08/html5-css3-landing-page-templates.html">مجموعة مميزة من صفحات هبوط وقوالب&nbsp;HTML5 و CSS3 المجانية المميزة والرائعة لمواقع الويب</a>، التي يمكنك الاستفادة منها بشتى الطرق كتخصيصها واعادة استخدامها، او الاستفادة من مكوناتها، كونك مصمم او مطور مواقع بالتأكيد ستستفيد منها ولو بأخذ الالهام منها، وفي حال كان لديك قالب مجاني مذهل يمكنك مشاركته في التعليقات .... دمتم في رعاية الله.</p></content><link rel='replies' type='application/atom+xml' href='https://www.codexait.com/feeds/8526106563466768195/comments/default' title='تعليقات الرسالة'/><link rel='replies' type='text/html' href='https://www.codexait.com/2024/08/html5-css3-landing-page-templates.html#comment-form' title='0 تعليقات'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/8526106563466768195'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/8526106563466768195'/><link rel='alternate' type='text/html' href='https://www.codexait.com/2024/08/html5-css3-landing-page-templates.html' title='افضل 20 قالب صفحة هبوط HTML5 و CSS3 مجانية لمواقع الويب'/><author><name>Codex AIT</name><uri>http://www.blogger.com/profile/15646728619579743282</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmoUUCMMO5a9No09HDWHrm0-p-X-8XVYV3vsvUiC2xADeA0HuVVWTwHj826NC_TelTHWAdGqQsMPRrVhNcm4NoGTlhux8MWtclXXPtVZEN3NQ0j-HjNnk8l7zCKfe4RQ/s220/Codexait+Logo.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhStYh97xj1FN0vI7ALLJ0Y4vAUr-RU-xrB86NK1mJ1f68DDNr0iLo0M0Hyj4hrg4apAWxX7ksIc685SlbZhyu-LQDYoJhbv1XfPg3u9fkcOZwDuJVxTZL9DODNbSG9Y2tVQOt95JTIww0GaHOqFe-HvtpbsGcZeLLhxy4Zmq8sOKzafyYysm48y2WvFZE/s72-c-rw/free-html5-css3-landing-pages.webp" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1421699815441362866.post-5399127996829135677</id><published>2024-07-15T06:11:00.014+03:00</published><updated>2024-07-21T06:46:04.311+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="الامن والحماية"/><category scheme="http://www.blogger.com/atom/ns#" term="برمجة"/><title type='text'>اهم لغات البرمجة المستخدمة في الاختراق وأمن المعلومات</title><content type='html'><p class="separator" style="clear: both; text-align: center;"> <noscript> <img alt="اهم لغات البرمجة المستخدمة في الاختراق وأمن المعلومات" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjleAZ9Z3T7KHIiThY9ACgsf8Ifk9ZS_DsGD9e1e7J3qk-g6QRbZCvOYOPVDv0wLzBprOzkYCijzQ3smL3BJQmJaPa9LAC7aC4uhM5YdV0PXny8DOOzkJI1vEHjvpVkn9ZtQRvgJRpYKbETc0JJabwaaq27g6RAX8haAFVuGRsCNxEJAzxqKP1QipPltBM/s840-rw/programming-language-used-in-hacking.webp" height="444" width="780" /> </noscript> <img alt="اهم لغات البرمجة المستخدمة في الاختراق وأمن المعلومات" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjleAZ9Z3T7KHIiThY9ACgsf8Ifk9ZS_DsGD9e1e7J3qk-g6QRbZCvOYOPVDv0wLzBprOzkYCijzQ3smL3BJQmJaPa9LAC7aC4uhM5YdV0PXny8DOOzkJI1vEHjvpVkn9ZtQRvgJRpYKbETc0JJabwaaq27g6RAX8haAFVuGRsCNxEJAzxqKP1QipPltBM/s840-rw/programming-language-used-in-hacking.webp" height="444" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="780" /> </p> <p><br/></p> <p> تتعدد الأساليب وتتنامى الأدوات المستخدمة في الاختراق وأمن المعلومات، إلا انه لا يمكن الاستغناء عن تعلم لغات البرمجة لأداء العديد من المهام واكتشاف الثغرات لتصبح هكر وباحث امني حقيقي تبتكر طرقك الخاصة في هذا المجال. </p> <p>فمجال امن المعلومات يعتبر من اهم مجالات تكنولوجيا المعلومات والأعلى دخلا في العالم لأهميته الكبرى في حماية بيانات الشركات والحفاظ عليها من الاختراق والعبث والتسريب او التخريب.</p> <h2 style="text-align: right;">لماذا لغات البرمجة مهمة في الاختراق وأمن المعلومات؟</h2> <p>هناك سؤال يطرح نفسه لماذا لغات <b>البرمجة</b> مهمة في الاختراق، يجب ان نتطرق للإجابة على هذا السؤال أولا قبل سرد اهم لغات البرمجة للهاكر، وتأتي الاجابة على هذا السؤال في النقاط التالية: </p> <h3 style="text-align: right;">ضرورة فهم الكود البرمجي</h3> <p>يعتمد الهاكينج او الاختراق على كسر البروتوكولات واستغلال الشبكات ، لهذا يجب معرفة لغة البرمجة التي تم كتابة التطبيق او النظام بها، للتمكن من إعادة كتابة هذه الاكواد وإيجاد نقاط الضعف واستغلالها، لذلك يجب عليك معرفة لغات البرمجة لتكون خبير امن معلومات ناجح.</p> <h3 style="text-align: right;">تحليل الكود</h3> <p>تحليل الكود البرمجي ومعرفة كيف يعمل ومعرفة الجزء او التعليمة البرمجية التي يمكن ان تستغلها للدخول الى هذا البرنامج وإنشاء كود خاص بك لاستغلال الكود البرمجي، لهذا يجب وبكل تأكيد تعلم لغات البرمجة ومن المستحيل ان تصبح هكراً حقيقياً بدون معرفة لغات البرمجة.</p> <h3 style="text-align: right;">البرمجة تساعدك في تحديد المجال المستهدف</h3> <p>فمن خلال البرمجة يمكنك تحديد أي مجال انت بصدد استهدافه أنظمة&nbsp; التشغيل او سيرفرات الويب او سيرفرات قواعد البيانات ، وماهي الآلية المستخدمة لعمل ذلك واللغة البرمجية التي يجب معرفتها لإنجاز ذلك.</p><h3 style="text-align: right;">تطوير أدوات اختبار واستغلال الثغرات</h3><p>من خلال تعلم لغات البرمجة يمكنك بناء أدوات خاصة باكتشاف الثغرات، وبنفس الوقت استغلالها. وهنا تكمن الأهمية القصوى للغات البرمجة واستخدامها في الأمن والحماية والاختراق.</p> <hr /> <h2 style="text-align: right;"> <b>ماهي اهم لغات البرمجة التي يجب تعلمها لكي تصبح هاكر حقيقي</b> </h2> <p>بعد ان تعرفنا على أهمية <b>لغات البرمجة في الاختراق</b> حان الوقت لنتكلم عن اللغات البرمجية المطلوبة في الاختراق وأمن المعلومات. </p> <p>بالطبع يعتمد هذا على المجال الذي تهتم به في مجال <b>الاختراق </b>ومن هذه المجالات اختراق الويب وقواعد البيانات او اختراق الأنظمة وبنيتها التحتية بالإضافة الى مجال انشاء أدوات كشف واستغلال الثغرات وهذه هي اهم لغات البرمجة التي يجب تعلمها لتصبح خبير امن معلوماتي محترف او هكراً حقيقياً: </p> <h3>Python</h3> <p class="separator" style="clear: both; text-align: center;"><img alt="بايثون لغة هامة جدا ومطلوبة في احتراف الاختراق" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5t-6uXcIcFvcSZ18N4neeqbe0UEG9Km8q4paexftq1YYfUF4j8WaMFzUz38k0HT-CmW6ypUoMaHCtnxUDT-qSu1Sc8M0NM_0jvKuKQlkN2RyBfzNMgQmENV8OE_r5B7VebkX9IHdhIeQnHHuKrR-2Pq5zfV3Z0uvfgClnjgwjGaejWBCTcTysb9CuawA/s400-rw/Python-logo-notext.svg.webp" height="400" width="365" /></p> <p> تعتبر لغة بايثون من اللغات سهلة التعلم وكثيرة الاستخدام في <b>مجال الاختراق</b>، ومن اهم لغات البرمجة متعددة الاستخدام في يومنا هذا، أيضا تعتبر من اهم لغات البرمجة في كتابة سكريبتات كشف الثغرات واستغلالها وكتابة البرامج الخبيثة ، حيث توجد العديد من الأدوات في الكالي لينكس مكتوبة بلغة بايثون.</p> <p>تحتوي لغة البايثون على العديد من المكتبات الجاهزة سواء كانت مكتبات خاصة بالتعامل مع أنظمة التشغيل او الشبكات او الامن المعلوماتي بالاضافة الى مكتبات تطوير مواقع الويب، وهذا ما يساعد الهكر من برمجة أدوات الكشف عن نقاط الضعف، واستغلال الثغرات بسهولة عالية.</p> <p>تحتوي لغة البايثون على الكثير من المجتمعات والمصادر المعلوماتية وذلك لكونها مفتوحة المصدر وهي لغة عالية المستوى.. لمعرفة المزيد حول لغة بايثون شاهد&nbsp; <a href="https://www.codexait.com/2015/12/blog-post_4.html" target="">ماهي لغة بايثون وما إستخداماتها</a>. </p> <h3>C /C++</h3> <p class="separator" style="clear: both; text-align: center;"><img alt="c/c++ best for system hacking" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh86kCzsTJkALjPgtG7IBuR62MJK0h_v_bQa7KJmVUJxOs-G6FiscGJQo9o-gBIipbjPkbb4N6evVL5LLTXFrstcgdq81_xsVnIe8O0es5_ANOADKlm80EVNZ_eBO2GLMmen7BBa-7kZIs8yyLjdQQlLVAwcfryZYFifveK3kTw6nYYeCUXV4OMsVnGNyM/s400-rw/cplusplus.webp" height="400" width="400" /></p><br /><p>تعتبر لغة السي هي اللغة الأم لكافة لغات البرمجة ولكونها من اللغات منخفضة المستوى تعتبر من اللغات المهمة للتعامل مع الهاردوير، لهذا لغة السي تستخدم في بناء معظم&nbsp;&nbsp;أنظمة التشغيل، ولهذا تعتبر من اللغات المهمة لمعرفة واكتشاف الثغرات في الأنظمة والبنية التحتية للهاردوير ومعرفة كيفية استغلالها.</p> <p>طبعا لغة C++ هي وليدة للغة السي ولكن تم تطويرها لتكون لغة عالية المستوى ، وبإمكانها انجاز العديد من المهام التي تقوم بعملها لغة السي.</p> <p>تستخدم كثيراً أيضا&nbsp; في مجال الهندسة العكسية وهو تحليل نظام او برنامج الى عناصره الأولية (لغة الآلة) وفهم الية عمله وإعادة بناءه كالنظام الأصلي ، ومثال ذلك عمل كراكات للبرامج الغير مجانية. </p> <p>في حين تفشل في&nbsp; <b>اكتشاف ثغرات امنية</b>&nbsp;، حتما ستستخدم هذه الطريقة ، ولاستخدام هذه الطريقة بشكل احترافي يجب عليك استخدام لغات برمجة مثل&nbsp; <b>C /C++.</b> </p> <p>تعتبر لغتي C/C++ من اللغات القديمة والأساسية التي يجب على كل مبرمج البدء بها وهذه&nbsp; <b>اللغات&nbsp;</b>هي لغات تم بناء نظام لينكس ونظام ويندوز بواسطتها.. تتميز بسرعة تنفيذها وسهولة ترجمتها الى لغة&nbsp; <b>الأسمبلي Assembly</b>&nbsp;التي تتعامل مع الهاردوير بشكل تلقائي ومباشر، وهذا ما يميزها. </p> <h3 style="text-align: right;">Javascript&nbsp;</h3> <p class="separator" style="clear: both; text-align: center;"><img alt="javascript مطلوبة في اختراق مواقع وتطبيقات الويب" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeecPQdOFHQsQMpfHSYEqjWnFHNPmVQL3hpnvNQ0JLdgbfq0DyoErKgkYBLGqo1mBV-I2s_IRPuP17P2usTn-ZcrQlWgbEWDt5rMiGt9zoC8ScHAbvILhEPxB8Iy4J3eJMF7hWvgFCowbkrt_3jfDh7koFkF3Yw7cYi2MyXIx-Q2hcvf1l-n_fTx2Ssn0/s400-rw/js.webp" height="400" width="400" /></p> <p>تعتبر لغة&nbsp; <a href="https://www.codexait.com/2016/11/javascript-is-future.html" rel="" target="">الجافاسكربت (Javascript) مستقبل الويب</a> وهي من افضل لغات البرمجة في مجال اختراق تطبيقات الويب، فهي تستخدم لبرمجة سكربتات استكشاف الثغرات واستغلالها في مواقع الويب.</p> <p>الجافاسكربت لغة برمجة تعمل على جهاز المستخدم في المتصفح لتنفيذ احداث معينة والتعامل مع عناصر HTML ، بالإضافة الى تقنية الأجاكس ، وما ستستفيده من هذه اللغة هو فهم خوارزميات وآلية عمل الموقع على المتصفح، واستخراج الكوكيز وتاريخ موقع الويب في المتصفح لان معظم المواقع صارت تستخدم الجافاسكربت او احد مكتباتها.</p> <p> <a href="https://www.codexait.com/2015/12/xss.html">ثغرات Cross Site Scripting(XSS)</a> : تعتبر لغة الجافا سكربت اللغة الأقوى لاكتشاف واستغلال هذه الثغرة، بالإضافة الى انشاء ونشر البرامج الضارة والفيروسات على الويب بسرعة عالية. </p> <p>مع انتشار وتطور لغة الجافا سكربت صارت الآن تعمل على جهة الخادم من خلال NodeJS، وهذا ما جعلها اكثر توسعا في القدرة على كتابة سكربتات اكتشاف الثغرات واستغلالها. <br /> </p> <h3 style="text-align: right;">PHP&nbsp;</h3> <p class="separator" style="clear: both; text-align: center;"><img alt="php مطلوبه في اختراق مواقع الويب جهة السيرفر" class="lazy" data-original-height="163" data-original-width="309" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEited9FJTJ6ZLW6LaGlGXy0LhDYZDGD9PXTvMbvLSzs7aIY9wz-o99rzozaejyFKb29e3yD_W5A6pzqptDYj2CaoX79pZbNnYysjKurcNXP1Xz8IJzbaX7I673vT7-upyIYW41zJI7aWb_h3xQ2vzwhkMxbKftEwrW7d5zFl6VTxk0YMW1ZgjC8noopyKM/s400-rw/php.webp" /></p><br /><p>هي لغة ديناميكية تعمل في جهة السيرفر وتقوم بتنفيذ ومعالجة طلبات المستخدم وارسال النتائج اليه ، حيث تعتبر المتحكم الأساسي بموقع الويب ، ومسئولة عن التعامل مع قواعد البيانات.</p> <p>تستخدم لغة PHP في تطوير معظم مواقع الويب وفي نطاقات الويب وأنظمة إدارة المحتوى مثل الورد برس وغيره .. لهذا لها أهمية قصوى في مجال اختراق الويب.</p> <p>مع تعلم واحتراف لغة <a href="https://www.codexait.com/2016/11/is-php-dying.html" rel="" target="">PHP </a>يمكنك اكتشاف الثغرات واستخدامها سواء في حماية الموقع وسد الثغرات او استغلالها، توجد ثغرات كثيرة يمكن استغلالها بواسطة لغة PHP ومن هذه ثغرة&nbsp; <a href="https://www.codexait.com/2016/02/file-include.html">File Include</a> التي يتم استغلالها بواسطة <b>Shell مكتوب بلغة PHP </b>.. يتم رفعة الى الموقع من خلال الثغرة والتحكم الكلي بالموقع ... للمزيد اطلع على&nbsp; <a href="https://www.codexait.com/2019/12/PHP-security.html" rel="" target="">تأمين وحماية المواقع المطورة بلغة PHP</a> </p> <h3 style="text-align: right;">SQL&nbsp;</h3> <p class="separator" style="clear: both; text-align: center;"><img alt="sql لغة انظمة قواعد البيانات المعيارية لاغنى عنها في احتراف الهاكينج" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVMVegqrUS1DLlsiCd75XttUCZm7TCiuAXrJuZsIIXVoKTiE_wfjASP3QkO-Ttev41TsIAd0_Y0QapBlVdK3FLPWS-4NcQD-s1cH_vHEhQWXDfoIjWEYetDNvAf0O38EHY4v9uVtMvQJxUjCfbw95_N6ZaI_KM8A2rVi_BRwvVOSgLax4Bki6P_4XLwzY/s400-rw/Sql_data_base_with_logo.webp" height="186" width="400" /></p><br /><p>لغة الاستعلام الهيكلية ، مسئولة عن تخزين ومعالجة المعلومات في قاعدة البيانات ، لهذا تعتبر لغة هامة جدا للهكر عادة ما يكون هدفة الأساسي هو الوصول والسيطرة على قاعدة البيانات ، لغة الاستعلام الهيكلية تعتبر لغة أساسية لكافة أنواع قواعد البيات مثل sql server,oracle ,mysql وغيرها.</p> <p>لذلك لغة SQL&nbsp;&nbsp;يجب ان تتعلمها للتعامل مع سيرفر قواعد البيانات ومعرفة هيكل قاعدة البيانات المستهدفة وبنيتها ومعرفة الأداة التي يجب استخدامها وكيفية استخراج المعلومات الهامة منها واخذ الصلاحيات واكتشاف&nbsp; <a href="https://www.codexait.com/2016/10/sql-injection.html">ثغرات SQL Injection</a> <b>واستغلالها او حمايتها </b> . </p> <p> <span>مع العلم ان مواقع الويب تستخدم قواعد البيانات بالإضافة الى الكثير من الأنظمة المعلوماتية، يجب عليك ان تتعمق بهذه اللغة للوصول لهدفك المطلوب، فلا فائدة من الهجوم عليها من غير معرفة التعامل معها.</span> </p> <h3 style="text-align: right;">Ruby</h3> <p>&nbsp;تعتبر لغة روبي من اللغات الحديثة وتستخدم البرمجة الهدفية الموجهة ،وتعتبر ثاني <b>لغة</b> لكتابة و <b>برمجة</b> أدوات استغلال الثغرات، حيث اكبر مشروع في امن المعلومات واختبار الاختراق الميتاسبلويت (Metasploit) مكتوب بلغة روبي بالإضافة الى العديد من الأدوات الأخرى. </p> <h3 style="text-align: right;">Bash&nbsp;</h3> <p>تعتبر <b>Bash </b>اللغة الأساسية لموجة الأوامر في لينوكس وكافة أنظمة لينكس ، وبما ان كافة السيرفرات على الانترنت تستخدم نظام لينكس. </p> <p>سيكون لهذه اللغة أهمية كبيرة في الوصول والتحكم بالسيرفر أيضا تعتبر لغة أساسية للتعامل مع نظام التشغيل المستخدم في عملية الاختراق مثل كالي لينكس وغيرها من توزيعات الحماية الأخرى.</p> <p>أيضا تستخدم لغة باش لكتابة shell يمكن تضمينه او استخدامه مع لغة أخرى مثل بايثون وروبي ولغتي سي وسي بلس بلس.</p> <h2 style="text-align: right;">الخلاصة:&nbsp;اهم لغات البرمجة المستخدمة في الاختراق وأمن المعلومات</h2> <p> مما سبق نستخلص ان أي مجال تهتم&nbsp; ان تتخصص باختراقه وأمنيته يجب ان تتعمق في هذا المجال وتتعلم لغات البرمجة المستخدمة فيه لفهم الية عمله واكتشاف نقاط الضعف فيه. </p> <p>فمثلا <b>اختراق </b>مواقع الويب يجب ان تتعلم اللغات التالية الجافاسكربت وال PHP ولغة الاستعلام الهيكلية(SQL)، اما اذا كنت تطمح في اختراق و <b>قرصنة</b> الأنظمة والشبكات والهندسة العكسية يجب ان تتعلم لغتي C/C++ ,Bash ولكن يجب ان تتعلم لغة البايثون (Python) في شتى مجالات الاختراق او الامن المعلوماتي. </p> <p>ثم بعد ذلك تبحث عن <b>لغات البرمجة </b>مثل البايثون او غيرها&nbsp;التي تساعدك في بناء أدوات وبرامج واسكربتات خاصة باستغلال نقاط الضعف في هذا المجال او بناء أدوات اختبار خاصة بك وهذا ما سيجعلك تبدع وتتميز في <b>الهكر الأخلاقي وامن المعلومات</b>. </p> <p> الى هنا انتهى المقال ،واتمنى انك استفدت اخي الكريم ، واذا كان لديك لغات برمجة اخرى يجب تعلمها لإحتراف <b>الهكر</b> اضيفها في تعليق ، دمتم في رعاية الله وحفظه. </p></content><link rel='replies' type='application/atom+xml' href='https://www.codexait.com/feeds/5399127996829135677/comments/default' title='تعليقات الرسالة'/><link rel='replies' type='text/html' href='https://www.codexait.com/2024/07/requested-programming-languages-for-hacking.html#comment-form' title='0 تعليقات'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/5399127996829135677'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/5399127996829135677'/><link rel='alternate' type='text/html' href='https://www.codexait.com/2024/07/requested-programming-languages-for-hacking.html' title='اهم لغات البرمجة المستخدمة في الاختراق وأمن المعلومات'/><author><name>Codex AIT</name><uri>http://www.blogger.com/profile/15646728619579743282</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmoUUCMMO5a9No09HDWHrm0-p-X-8XVYV3vsvUiC2xADeA0HuVVWTwHj826NC_TelTHWAdGqQsMPRrVhNcm4NoGTlhux8MWtclXXPtVZEN3NQ0j-HjNnk8l7zCKfe4RQ/s220/Codexait+Logo.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjleAZ9Z3T7KHIiThY9ACgsf8Ifk9ZS_DsGD9e1e7J3qk-g6QRbZCvOYOPVDv0wLzBprOzkYCijzQ3smL3BJQmJaPa9LAC7aC4uhM5YdV0PXny8DOOzkJI1vEHjvpVkn9ZtQRvgJRpYKbETc0JJabwaaq27g6RAX8haAFVuGRsCNxEJAzxqKP1QipPltBM/s72-c-rw/programming-language-used-in-hacking.webp" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1421699815441362866.post-621964173561177900</id><published>2022-03-06T01:58:00.009+03:00</published><updated>2024-06-17T08:04:18.033+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="Visual Studio"/><category scheme="http://www.blogger.com/atom/ns#" term="برمجة"/><category scheme="http://www.blogger.com/atom/ns#" term="مقالات تقنية"/><category scheme="http://www.blogger.com/atom/ns#" term="ميكروسوفت"/><title type='text'>تعرف على المميزات الجديدة في فيجوال استوديو 2022 Visual Studio</title><content type='html'>أصدرت شركة ميكروسوفت الإصدار الجديد من بيئة التطوير الرائعة Visual Studio 2022، رسميا في أغسطس 2021، حيث ينصب التركيز الأساسي على إنتاجية المطورين وتحسين جودة الحياة.<div><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEiRRrB3JOdSu9XHiDqFYI0a7VLWor-kScZdO9badduNVEEx6CVEDV5bz9cvlA3deuR7lYEz5x9dQN4PhClxno-u4l9cZ9n33ddyDmnc1SOAwPT0ghP5RKNktgXuMDmOsh6GCCqyjCD5GGUHX8gIa3JlFMq4w_A8MkSs9oEhvHN9aQFpdt6mxNejM_eC=s955" style="margin-left: 1em; margin-right: 1em;"><img alt="تعرف على المميزات الجديدة في 2022 Visual Studio" border="0" data-original-height="539" data-original-width="955" height="362" src="https://blogger.googleusercontent.com/img/a/AVvXsEiRRrB3JOdSu9XHiDqFYI0a7VLWor-kScZdO9badduNVEEx6CVEDV5bz9cvlA3deuR7lYEz5x9dQN4PhClxno-u4l9cZ9n33ddyDmnc1SOAwPT0ghP5RKNktgXuMDmOsh6GCCqyjCD5GGUHX8gIa3JlFMq4w_A8MkSs9oEhvHN9aQFpdt6mxNejM_eC=w640-h362" title="تعرف على المميزات الجديدة في 2022 Visual Studio" width="640" /></a></div><div><br /></div><h2 style="text-align: right;">اهم المميزات في Visual Studio 2022</h2><h3 style="text-align: right;">بيئة التطوير 64 بت</h3><div>كتطبيق x64 جعل البرنامج يتمتع بسرعة كبيرة، حيث يمكنك رؤية تحسن كبير في تحميل المشروع وتنفيذه مقارنة بالإصدارات السابقة، يمكنك الآن العمل على مشاريع كبيرة مهما كان حجمها تعقيدها.</div><div>ستلاحظ في الصورة الآتية مدى تحسن سرعة التحميل، في&nbsp;تحميل 1،601 مشروعًا مع 298326 ملفًا على Visual Studio 2022.</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEhY5RFvY9z7LcBdRCxTCknQb7VbFK_DRSOo2vkJqSyxv-mKUK1LXmcIqsTqKrJQM3pgB4zgnpSB2aHyfcUaxzpMNW1imnwaZZltK87Bh5cHV1F37eSWcMzk46hA93fwNxfsbH6ZvTrnCK5I12TiDb5hr_mcfUcTrsaS0nJ4su9MgRST5Pndl8D4geeQ=s640" style="margin-left: 1em; margin-right: 1em;"><img alt="سرعة تحميل وتنفيذ Visual Sudio 2022" border="0" data-original-height="360" data-original-width="640" src="https://blogger.googleusercontent.com/img/a/AVvXsEhY5RFvY9z7LcBdRCxTCknQb7VbFK_DRSOo2vkJqSyxv-mKUK1LXmcIqsTqKrJQM3pgB4zgnpSB2aHyfcUaxzpMNW1imnwaZZltK87Bh5cHV1F37eSWcMzk46hA93fwNxfsbH6ZvTrnCK5I12TiDb5hr_mcfUcTrsaS0nJ4su9MgRST5Pndl8D4geeQ=s16000" title="سرعة تحميل وتنفيذ Visual Sudio 2022" /></a></div><br /><h3 style="text-align: right;">تطوير وتحسين IntelliCode</h3><div>يتميز الإصدار الجديد من فيجوال استوديو 2022 بتحسين الذكاء الاصطناعي في <a href="https://www.codexait.com/2016/11/free-code-editors.html">محرر الأكواد</a>، حيث صار يتميز بإكمال تلقائي للكود&nbsp;</div><div>البرمجي بناءاَ على سياق الكود كالمتغيرات والدوال والكلاسات وغيرها، الذي يصل الى سطر كامل او اكثر مرة واحدة حسب تنبؤات الذكاء الاصطناعي.</div><div>بالإضافة الى ذلك، عند القيام بمهمة شائعة يتم اكتشافها من الذكاء الاصطناعي ويعطيك توصيات سريعة على الإجراءات الصحيحة.</div><div>يمكنك ملاحظة ذلك في الصورة الآتية:</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEh3eVKoy9oBUxaeABD5R1FVhHeC6yxRTfRI67NWODxulK8XWZ512eG37U1H5IHfOtbkbHzEhkGH4SNCTJuzo9v912RXOxGRXo0VI0bjrIUuPhZF3hnd4bfXTmPqPDaWVEzy3Y-FiCuVAXeOGVtM-iwBKq_-JloDiu6e7ZNEo2BgnyfHJUGqrIEmz4-G=s600" style="margin-left: 1em; margin-right: 1em;"><img alt="تطوير الذكاء الإصطناعي في محرر الأكواد" border="0" data-original-height="313" data-original-width="600" src="https://blogger.googleusercontent.com/img/a/AVvXsEh3eVKoy9oBUxaeABD5R1FVhHeC6yxRTfRI67NWODxulK8XWZ512eG37U1H5IHfOtbkbHzEhkGH4SNCTJuzo9v912RXOxGRXo0VI0bjrIUuPhZF3hnd4bfXTmPqPDaWVEzy3Y-FiCuVAXeOGVtM-iwBKq_-JloDiu6e7ZNEo2BgnyfHJUGqrIEmz4-G=s16000" title="تطوير الذكاء الإصطناعي في محرر الأكواد" /></a></div><br /><div><br /></div><h3 style="text-align: right;">دعم .NET 6 بشكل كامل</h3><div>الدعم الكامل لإطار العمل الموحد .NET 6، حيث يدعم تطوير برامج سطح المكتب وتطبيقات الويب والجوال على كل من نظامي التشغيل ويندوز وماك.</div><div><br /></div><h3 style="text-align: right;">إعادة التحميل الساخنة Hot Reload</h3><div>تتيح ميزة إعادة التحميل السريع للمستخدمين تسريع تطويرهم، حيث يقلل من الوقت اللازم لإعادة إنشاء التطبيق ونشره لكل تغيير يتم اجراؤه في الكود.</div><div><br /></div><div><h3 style="text-align: right;">البحث في الملفات أسرع</h3></div><div>تم تطوير عملية البحث في ملفات المشروع، حيث يمكنك ملاحظة سرعة البحث بشكل كبير مقارنة بالإصدارات السابقة، حيث زادت السرعة بثلاثة اضعاف.</div><div><br /></div><h3 style="text-align: right;">تحسين واجهات بيئة التطوير</h3><div>هناك تحسينات في <a href="https://www.codexait.com/2021/12/top-free-flat-icons-packs.html">الأيقونات </a>التي جعلت الواجهات اكثر عصرية وحداثة، ايضاً تم تغيير <a href="https://www.codexait.com/2016/10/best-arabic-fonts-2017.html">خط </a>الأكواد بخط جديد cascadia-code.</div><div>حيث يمكنك الان تغيير واجهة التطوير بما يناسب طابعك الشخصي.</div><div><br /> <p>اقرأ ايضاَ: <a href="https://www.codexait.com/2017/01/open-source-codes-and-projects.html">افضل المواقع للحصول على اكواد ومشاريع مفتوحة المصدر في البرمجة</a></p><br/> </div><h2 style="text-align: right;">الخاتمة</h2><div>كانت هذه المميزات الجديدة في Visual Studio 2022 والتي أهمها السرعة الفائقة وذلك بدعم نظام التشغيل X64 أيضا تطوير الذكاء الاصطناعي في محرر الأكواد والتي جعلت إنتاجية التطوير تتحسن كثيراَ، هنالك ايضاً مميزات أخرى في التصميم والدعم الكامل لإطار العمل الموحد .NET 6، وسرعة البحث في الملفات.</div><div>يمكنك الأن تحميل <a href="https://visualstudio.microsoft.com/downloads/" rel="nofollow" target="_blank">فيجوال استوديو 2022 Visual Studio</a>.</div></div></content><link rel='replies' type='application/atom+xml' href='https://www.codexait.com/feeds/621964173561177900/comments/default' title='تعليقات الرسالة'/><link rel='replies' type='text/html' href='https://www.codexait.com/2022/03/top-features-in-visual-studio-2022.html#comment-form' title='0 تعليقات'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/621964173561177900'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/621964173561177900'/><link rel='alternate' type='text/html' href='https://www.codexait.com/2022/03/top-features-in-visual-studio-2022.html' title='تعرف على المميزات الجديدة في فيجوال استوديو 2022 Visual Studio'/><author><name>Codex AIT</name><uri>http://www.blogger.com/profile/15646728619579743282</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmoUUCMMO5a9No09HDWHrm0-p-X-8XVYV3vsvUiC2xADeA0HuVVWTwHj826NC_TelTHWAdGqQsMPRrVhNcm4NoGTlhux8MWtclXXPtVZEN3NQ0j-HjNnk8l7zCKfe4RQ/s220/Codexait+Logo.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/a/AVvXsEiRRrB3JOdSu9XHiDqFYI0a7VLWor-kScZdO9badduNVEEx6CVEDV5bz9cvlA3deuR7lYEz5x9dQN4PhClxno-u4l9cZ9n33ddyDmnc1SOAwPT0ghP5RKNktgXuMDmOsh6GCCqyjCD5GGUHX8gIa3JlFMq4w_A8MkSs9oEhvHN9aQFpdt6mxNejM_eC=s72-w640-h362-c" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1421699815441362866.post-2830495946910177402</id><published>2022-02-25T22:47:00.004+03:00</published><updated>2024-05-17T07:47:37.986+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="إضافات"/><category scheme="http://www.blogger.com/atom/ns#" term="تصميم مواقع"/><category scheme="http://www.blogger.com/atom/ns#" term="تطوير الويب"/><title type='text'>اضافة رائعة لإستعراض جداول البيانات DataTables على صفحات الويب</title><content type='html'>تعتبر البيانات المصدر الأساسي للمعلومات التي تساعد اصحاب القرار على اتخاذ القرارات المناسبة والصحيحة على اسس واضحة&nbsp;&nbsp;في اعمالهم، والحصول على المعرفة الكافية من هذه المعلومات المعروضة.<div><br /><div class="separator" style="clear: both; text-align: center;"><img alt="اضافة رائعة لإستعراض جداول البيانات DataTables على صفحات الويب" border="0" data-original-height="533" data-original-width="800" height="266" src="https://blogger.googleusercontent.com/img/a/AVvXsEi-HUTLKkU213kT8ulKaKULo-e10MluPXvoKBw8_c1gCLAIRIo7nZ687rQVG6ZkjHKxk4Rghuv9q8WpkQoQby9ae-nTL5WOXX26ojWfzrWIU8A_fXhzEUSNFLjdtgr1wP2heL0aDudM3tsIb349VZ7DVkyjjzW_mrfLKcHyZ4DgQBy-02P0twuQ2RG4=w400-h266" title="اضافة رائعة لإستعراض جداول البيانات DataTables على صفحات الويب" width="400" /></div><div><br /><div>مع تطور الحوسبة السحابية ، تحولت او انتقلت الكثير من الأنظمة المعلوماتية سواء الإدارية او المحاسبية الى الشبكة العنكبوتية حيث يمكن الدخول اليها من اي مكان، مخزنة على سيرفرات ضخمة.</div><div><br /></div><div>لهذا صار استعراض جداول البيانات على مواقع الويب شيء اساسي ، والتعديل عليها مع العديد من الوظائف مثل البحث والفرز والتنقل ، سنقدم لكم اليوم افضل واضخم اضافة لأداء هذه المهمة والتي يستخدمها ملايين المبرمجين في اعمالهم على مواقع الويب وهي اضافة جي كويري JQuery DataTables Plug-ins.</div><div><br /></div><div>DataTables Plug-ins هي عبارة عن اضافة حديثة مبنية بمكتبة الجي كويري تعمل على اضافة <b>جداول بيانات تفاعلية</b> - على شكل اعمدة وصفوف - مع ادوات تحكم متقدمة على صفحات الويب، ولديها العديد من المميزات والوظائف في استعراض البيانات على صفحات الويب.</div><div><br /></div><h2 style="text-align: right;"><span>مميزات اضافة جداول البيانات&nbsp;</span>DataTables Plugin</h2><div><ol style="text-align: right;"><li>سهولة الإعداد والتثبيت على صفحات الويب.</li><li>المرونة وتعدد الخيارات، التي تمكنك من تخصيص الأدوات وتغييرها.</li><li>يدعم الاتجاه من اليمين الى اليسار واللغة العربية.</li><li>يدعم جميع <a href="https://www.codexait.com/2016/10/best-10-web-design-frameworks.html">اطارات عمل تصميم مواقع الويب</a>&nbsp;&nbsp;، كالبوتستراب وماتريال ديزين و foundation وغيرها، حيث يحتوي على ملف CSS لكل اطار لتطابق التصميم مع تصميم موقع الويب، وذلك لما تتمتع به الإضافة من تصميم مميز.</li><li>يحتوي على العديد من الأدوات المتقدمة كالبحث والفلتره في الوقت الحقيقي Real Time Searcher ، والترتيب او الفرز المتعدد على حسب العمود المختار واداة التنقل وتضمين عناصر HTML في جدول البيانات.</li><li>التعامل مع لغات البرمجة في جهة الخادم Server-Side كلغة PHP والبايثون وغيرها.</li><li>امكانية جلب البيانات والتعامل معها بواسطة تقنية الأجاكس.</li><li>قابلية التوسع والتطوير حيث توجد العديد من الإضافات المطورة من هذه الإضافة والتي منها اضافة wpDataTables للوردبرس، وايضا حزم Packages عديدة للعمل في <a href="https://www.codexait.com/2016/11/laravel-php-framework.html">اطار العمل لارافيل Laravel</a>&nbsp;والذي يعتبر الأكثر شهرة واستخداما في المواقع الخدمية على الويب.</li><li>يحتوي على العديد من الملحقات التي يمكن اضافتها لزيادة امكانيات الإضافة.&nbsp;</li><li>يوجد على شبكة توصيل المحتوى CDN لتضمينه مباشرة في موقعك.</li></ol></div></div><h2 style="text-align: right;">كيفية تثبيت اضافة DataTables في صفحة الويب</h2><div>بما أن الإضافة مبنية بواسطة مكتبة&nbsp;<a href="https://www.codexait.com/2016/06/best-jquery-arabic-course.html">الجي كويري jQuery</a> يجب استدعاء المكتبة اذا لم تكن مستخدمة في الموقع كالتالي:</div> <pre><code>&lt;script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"&gt;&lt;/script&gt;</code></pre> <div>اسدعاء ملف الـ CSS:</div> <pre><code>&lt;link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.4/css/jquery.dataTables.css"&gt; </code></pre> <div><br /></div><div>استدعاء ملف الجافا سكربت JS:</div> <pre><code>&lt;script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.js"&gt;&lt;/script&gt;</code></pre> <div>اضافة اكواد HTML في صفحة الويب :</div> <pre><code>&lt;table id="table_data" class="display"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Column 1&lt;/th&gt; &lt;th&gt;Column 2&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;Row 1 Data 1&lt;/td&gt; &lt;td&gt;Row 1 Data 2&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Row 2 Data 1&lt;/td&gt; &lt;td&gt;Row 2 Data 2&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt;</code></pre> <div>اضافة كود الجافاسكربت لتطبيق وتشغيل الإضافة:</div> <pre><code>&lt;script&gt; $(document).ready( function () { $('#table_data').DataTable(); } ); &lt;/script&gt;</code></pre> <div>ايضاَ توجد إضافة DataTables على NPM&nbsp; يمكن تثبيها بالاعدادات الافتراضية بالكود التالي:</div> <pre><code>npm install datatables.net # Core library npm install datatables.net-dt # Styling</code></pre> <div>كما ايضاَ يمكن تثبيتها من خلال Bower كالتالي:</div> <pre><code>bower install --save datatables.net bower install --save datatables.net-dt</code></pre> <div>تعتبر الإضافة من الإضافات الاساسية التي يعتمد عليها الكثير من المطورين في استعراض البيانات وفلترتها على الويب، والتي عادةَ ما تأتي مضمنة في كثير من <a href="https://www.codexait.com/2021/12/web-design-template-free-download.html">قوالب لوحات التحكم&nbsp; Admin Dashboard</a>.</div><div><br /></div><div><div>فالإضافة تحتوي على العديد من الخيارات التي يمكن تخصيصها حسب احتياجات عملك ومتطلباته، لذا يمكنك الدخول الى الموقع الخاص بالإضافة <a href="https://datatables.net" rel="nofollow">datatables.net</a> لتتعرف اكثر على اعدادات وتخصيص الإضافة، ومعرفة مصادر البيانات المدعومة التي يمكن جلب البيانات منها وكيف يتم ذلك.</div><div><br /></div><div>كانت هذه <b><span style="color: #990000;">اضافة رائعة لإستعراض&nbsp; جداول البيانات&nbsp;على مواقع الويب</span></b> يجب على كل مطور ويب معرفتها واستخدامها، والى اضافة اخرى بإذن الله، دمتم بخير.</div></div> </div></content><link rel='replies' type='application/atom+xml' href='https://www.codexait.com/feeds/2830495946910177402/comments/default' title='تعليقات الرسالة'/><link rel='replies' type='text/html' href='https://www.codexait.com/2022/02/datatables-advanced-jquery-plug-ins.html#comment-form' title='0 تعليقات'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/2830495946910177402'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/2830495946910177402'/><link rel='alternate' type='text/html' href='https://www.codexait.com/2022/02/datatables-advanced-jquery-plug-ins.html' title='اضافة رائعة لإستعراض جداول البيانات DataTables على صفحات الويب'/><author><name>Codex AIT</name><uri>http://www.blogger.com/profile/15646728619579743282</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmoUUCMMO5a9No09HDWHrm0-p-X-8XVYV3vsvUiC2xADeA0HuVVWTwHj826NC_TelTHWAdGqQsMPRrVhNcm4NoGTlhux8MWtclXXPtVZEN3NQ0j-HjNnk8l7zCKfe4RQ/s220/Codexait+Logo.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/a/AVvXsEi-HUTLKkU213kT8ulKaKULo-e10MluPXvoKBw8_c1gCLAIRIo7nZ687rQVG6ZkjHKxk4Rghuv9q8WpkQoQby9ae-nTL5WOXX26ojWfzrWIU8A_fXhzEUSNFLjdtgr1wP2heL0aDudM3tsIb349VZ7DVkyjjzW_mrfLKcHyZ4DgQBy-02P0twuQ2RG4=s72-w400-h266-c" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1421699815441362866.post-1605181961129246343</id><published>2022-01-31T17:53:00.015+03:00</published><updated>2024-05-17T07:49:28.627+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="الامن والحماية"/><category scheme="http://www.blogger.com/atom/ns#" term="مقالات تقنية"/><title type='text'>بحث في امن المعلومات و التهديدات الأمنية والهجمات الالكترونية</title><content type='html'><p></p><div class="separator" style="clear: both; text-align: center;"><img alt="بحث في امن المعلومات والتهديدات الأمنية والهجمات الالكترونية وكيفية الحماية منها" border="0" data-original-height="601" data-original-width="960" height="250" src="https://blogger.googleusercontent.com/img/a/AVvXsEi-mu-8RVpRJXK3vt9xWvQ6QRKQLwnxcFTCQZLbwPmfH0rQ8GdKKU42j5PWINrU_Quru0FPF7oRUbU67Bb4601-2hyGPFB4YfG2rmx2GWrDRj4p2vM7xGSWlUqOhVX6CR94UYLeLS7cS-EW-XrRiV8zs2nF2F4azxwEQgvZa25QGM67q5ktW4Lf-ebS=w400-h250" title="التهديدات الأمنية والهجمات الالكترونية وكيفية الحماية منها" width="400" /></div><br />&nbsp;<p></p><p>صارت الاعتمادية على الحلول التقنية تتزايد يوما بعد يوم في تسيير المنشآت الصغيرة والكبيرة على حد سواء، بل تعدى الأمر ذلك الى المستوى الفردي، فكل شخص اليوم صار لديه هاتف ذكي او كمبيوتر لأداء اعماله المختلفة وتصفح الشبكة العنكبوتية.</p><p>لذا ظهرت العديد من <b>التهديدات الأمنية</b>، فصارت الحاجة لأمن المعلومات ملحة جدا، لحماية وتأمين المعلومات الحرجة من الضياع والخراب والسرقة، وخصوصية بياناتنا..</p><div><h2 style="text-align: right;">تعريف أمن المعلومات</h2><div>هو العلم الذي يُعنى بحماية المعلومات من المخاطر التي تتعرض لها، ويمكن تعريف امن المعلومات بشكل مختصر هو: (<b>حماية المعلومات من الوصول الغير مسموح به</b>).</div><div>أيضا يمكن تعريف امن المعلومات بشكل من التفصيل على انه المفاهيم والتقنيات والتدابير التقنية والإدارية المستخدمة لحماية أصول المعلومات من الوصول غير المأذون به.</div><div>سواء عمداً او سهواً او حيازتها او الإضرار بها، او كشفها، او التلاعب بها، او تعديلها او فقدها او إساءة استخدامها.</div></div><div><br /></div><h2 style="text-align: right;">اهمية امن المعلومات</h2><div>تتمثل اهمية امن المعلومات في النقاط الاتية:</div><div><ol style="text-align: right;"><li>حماية معلومات الأفراد وخصوصيتهم من الاستغلال والسرقة.</li><li><b>حماية الأصول المعلوماتية الحرجة</b>، كمراكز البيانات وقواعد البيانات والخوادم وانظمة التشغيل والشبكات والبرامج التطبيقية ووسائط تخزين المعلومات والمواقع الالكترونية.</li><li>مواجهة الهجمات الالكترونية والتصدي لها.</li><li>حماية معلومات المؤسسات والشركات من السرقة والتلف.</li><li>حماية سلامة المعلومات وسريتها بشكل عام.</li><li>الحد من الوصول الغير مصرح به للمعلومات الخاصة.</li><li>تقليل الخسائر في المنظمات والمؤسسات والشركات.</li></ol></div><h2 style="text-align: right;">التهديدات الأمنية والهجمات الإلكترونية</h2><div style="text-align: right;"><b><span style="color: #073763;">1. الفيروسات</span></b></div><div>هي عبارة عن برمجيات خبيثة صغيرة الحجم، تقوم بالتضاعف بنسخ وتكرار نفسها بين وسائط اجهزة الكمبيوتر، وتنفيذ نفسها بشكل تلقائي، ويقوم بالإضرار بأنظمة الكمبيوتر ، والتحكم فيها ، ويعمل على اتلاف البيانات وتخريبها او سرقتها.</div><div>يعمل الفيروس بمجرد انتقاله الى جهاز الكمبيوتر، او يتم تشغيله فور تشغيل البرنامج او الملف المصاب بالفيروس، بالإضافة الى ذلك توجد فيروسات متقدمة ، تقوم بإعادة بناء نفسها ، وتنشئ نسخ متعددة تقوم بمهام تخريبية متعددة.</div><div>تنتشر <a href="https://www.codexait.com/2016/01/batch-file-programming.html">الفيروسات</a> عبر البريد الإلكتروني ضمن الملفات المرفقة ، والروابط، او عن طريق مواقع مصابة بالفيروسات، او عبر البرامج والملفات المصابة ، او عن طريق الأقراص المحمولة كالفلاشات والذواكر الخارجية.</div><div>تأتي الفيروسات بأشكال متعددة والتي منها المرتبطة ببرامج اخرى، وفيروسات متعددة المهام ، والفيروسات التي تقوم بالكتابة فوق الملفات ، وفيروسات تسرق البيانات من المتصفح، وفيروسات مضمنة كأكواد خبيثة داخل صفحات الويب وغيرها.</div><div style="text-align: right;"><b><span style="color: #073763;">2. هجمات الأبواب الخلفية (Back Door Attacks)</span></b></div><div>في بعض الأحيان يترك المبرمجون طرقاً خفية، تسمى الأبواب الخلفية، للوصول للشبكات والأنظمة من اجل تطويرها لاحقاً، وصيانتها عن بعد، ويستغل المهاجمون هذه الأبوب الخلفية للإضرار بالأجهزة والشبكة وما الى ذلك.</div><div style="text-align: right;"><b><span style="color: #073763;">3. كسر كلمات المرور (Passwords Cracks)</span></b></div><div>وهي عملية إعادة حساب كلمات المرور من البصمات الرقمية (Hash Values) لهذه الكلمات التي تحفظ عادة في ملفات خاصة، ويتم تنفيذ ذلك عبر طرق رياضية معقدة، مع المقارنة بكلمات سر القاموس، وهي مجموعة من الكلمات المتوقعة.&nbsp;</div><div style="text-align: right;"><b><span style="color: #073763;">4. الهجوم الأعمى(الاستقصائي) Brute Force Attacks</span></b></div><div>وهو عبارة عن تجريب جميع كلمات السر المحتملة او المتوقعة، او اي معلومة يحتاجها المهاجم في عملية الهجوم، وسمي بالهجوم الأعمى لأنه لا يعتمد على اي عملية حسابية.</div><div style="text-align: right;"><b><span style="color: #073763;">5. هجمات المعجم (Dictionary Attacks)</span></b></div><div>تعتبر هجمات المعجم من انواع الهجوم الأعمى ، لأنها بنفس الطريقة تتم عن تجربة كلمات من المعجم اي كلمات ذات معنى بدلاً عن كلمات عشوائية، لتضييق نطاق المحاولات.</div><div><div><div style="text-align: right;"><b><span style="color: #073763;">6. هجمات الرجل في الوسط (Man-In-The-Middle Attacks)</span></b></div></div><div>يطلق على هذا الهجوم ايضا اختطاف&nbsp;<a href="https://www.codexait.com/2016/01/tcp.html">بروتوكول النقل</a>&nbsp;(TCP Hijacking) (TCP Attack)، ويحدث في هذا الهجوم التقاط حزم البيانات(Data Packets) المارة في الشبكة.</div><div>ثم تغييرها او الحذف منها او التعديل عليها، ثم اعادتها الى الشبكة لتكمل مسارها، ولكن بشمل، ويمكن ايضا تزويرها او توجيهها الى جهاز اخر.</div><div style="text-align: right;"><span style="color: #073763;"><b>7. هجمات الخداع(Spoofing Attacks)</b></span></div><div>هي طريقة للتمكن من الوصول الى الأجهزة بطريقة غير شرعية عن طريق خداع الأجهزة، بإرسال رسالة مزيفة تحتوي على <a href="https://www.codexait.com/2015/12/blog-post.html" rel="" target="">عنوان الانترنت (IP)</a>، يجعل الرسالة كأنها تبدو من جهة موثوقة.</div><div>ولإتمام هذا النوع من الهجوم يجب على المهاجم استخدام طرق وأدوات للحصول على عنوان الانترنت المناسب الذي من خلال يستطيع خداع الجهاز الضحية.</div><div style="text-align: right;"><b><span style="color: #073763;">8. الرسائل الغير مرغوب فيها (او المزعجة) Spam</span></b></div><div>يرد الكثير من الرسائل المزعجة الى البريد الإلكتروني، وغالبا ما تكون هذه عبارة عن هجمات الكترونية، وتحتوي هذه الرسائل على ملفات او روابط&nbsp; ضارة.</div><div>لهذا يجب تفعيل عملية الفلترة في خوادم البريد الإلكتروني، وكذلك ننصح بعدم فتح هذه الرسائل الإلكترونية.</div></div><div style="text-align: right;"><b><span style="color: #073763;">9. تفجير البريد الإلكتروني (Mail Bombing)</span></b></div><div>وهو ايضا هجوم على البريد الإلكتروني، حيث يقوم المهاجم يإرسال كم هائل من الرسائل الى البريد الإلكتروني الضحية ، عن طريق استخدام اوامر بروتوكول ال نقل البريد الإلكتروني (Simple Mail Transport Protocol).</div><div>او عن طرق الهندسة الإجتماعية، و التي يمكن من خلالها إغراق البريد الإلكتروني بكم هائل من الرسائل حتى الوصول الى درجة عدم القدرة على معالجتها ومن ثم يدخل في مرحلة تعطيل الخدمة.</div><div style="text-align: right;"><b><span style="color: #073763;">10. هجمات التشمم او الالتقاط (ٍSniffer Attacks)</span></b></div><div>المتشمم هو برنامج او يراقب البيانات المارة عبر الشبكة ويلتقطها، ويمكن ان يكون هناك تشمم او التقاط شرعي لمراقبة الشبكة وإدارتها، ويمكن ان يكون غير شرعي لسرقة البيانات.</div><div>ويعد هذا الهجوم خطير جدا على الشبكة لأنه يمكن وضعه في اي مكان ولا&nbsp; يمكن اكتشافه بسهولة.</div><div style="text-align: right;"><b><span style="color: #073763;">11. هجمات الهندسة العكسية (Social Engineering Attacks)</span></b></div><div>يخلط هذا النوع من الهجوم بين النواحي الاجتماعية واهتمامات الناس وبين المهارات الفنية في خداع الضحايا وكسب ثقتهم للإدلاء، بمعلومات سرية يتم استغلالها لسرقة المعلومات والأموال الكترونيا.</div><div>وقد انتشر هذا النوع من الهجوم مؤخراً، لانه لا يعتمد على قوة الحماية او ضعفها، وانما يعتمد على كسب ثقة الضحايا وخداعهم، ومن الأمثلة الشهيرة على هذا النوع من الهجوم هو هجمات الاصطياد الإلكتروني.</div><div style="text-align: right;"><b><span style="color: #073763;">12. هجمات المعلومات الجانبية (Side channel Attacks)</span></b></div><div>ظهر هذا النوع مؤخراً ويعد خطير جداً، يعتمد هذا النوع من الهجوم على المعلومات الجانبية التي يجمعها الهاكر من أجهزة التشفير التي تعمل بأنظمة التشفير بالمفتاح العام، ثم يحللها للحصول على المعلومات السرية كمفاتيح التشفير.</div><div>&nbsp;وما يحدث ليس كسر الأنظمة&nbsp;&nbsp;بشكل مباشر، وانما جمع المعلومات الجانبية مثل الوقت المستغرق واستهلاك الطاقة الكهربائية، ومن هنا ظهر هجوم الوقت، الذي يعتمد على حساب الوقت المستهلك في عملية التشفير وفك التشفير، ومعرفة طول المقتاح.</div><div style="text-align: right;"><b><span style="color: #073763;">13. هجوم تصفح الكتف (Shoulder Surfing Attack)</span></b></div><div>في هذا الهجوم من خلال اطلاع المهاجم من خلف كتف الضحية وينظر ما يضغط من ازرار على لوحة المفاتيح، وما يعرض من معلومات على الشاشة.</div><div><h2 style="text-align: right;">عناصر امن المعلومات&nbsp;</h2><div>وهي مجموعة العناصر الواجب توافرها لحماية المعلومات الثابتة والمنقولة، بحيث يغطي كل عنصر من هذه العناصر جانبا من جوانب الحماية، المطلوبة، ومعنى ذلك ان تتكامل هذه العناصر حتى توفر الحماية المطلوب.</div><div>ويمكن سرد عناصر امن المعلومات كالتالي:</div><h3 style="text-align: right;">التحقق من الهوية (Authentication)&nbsp;</h3><div>تعني الخدمة التي يمكن من خلالها التحقق من الشخص او الجهة وأنه الشخص المعني ولا غيره، فعند اتصال شخصين او جهتين، فلابد من ان يتعرف كل منهما الى الاخر، لضمان ان يتخاطب كل منهما مع الشخص او الجهة المعنية وليس مع غيرها.</div><div>حيث تبدأ عملية التحقق من الهوية بالتعريف بالهوية (Identification)، ويمكن ذلك من خلال اسم المستخدم او رقم الحساب، لذا يجب ان تتوافر في طريقة تحديد الهوية المعايير الاتية:</div><div><ul style="text-align: right;"><li>ان تكون الهوية فريدة</li><li>ان تكون غير مفصحة عن معلومات المستخدم ووظيفته والغرض من وصوله للمعلومة.</li><li>استخدام طريقة التسمية المعتمدة عند المنشأة عند انشاء الحسابات</li></ul></div><h3 style="text-align: right;">التحكم بالوصول (Access Control)</h3><div>ويأتي التحكم بالوصول بعد التحقق من هوية المستخدم والتصريح له بالدخول يأتي دور التحكم بوصول المستخدم للموارد المحددة سواء التصريح له للوصول لموارد معينة او منع الوصول لبعض الموارد.</div><div>ويشمل ذلك منع الاستخدام غير المرخص به لأي معلومة، وكذلك تحديد صلاحيات محددة للأشخاص المصرح لهم بالوصول للمعلومات، لاستخدامها والاطلاع عليها او تحت شروط معينة، سواء كان قراءة او طباعة او تعديل او حذف.</div><div>وتتكون عملية التحكم بالوصول من ثلاث مراحل:</div><div><ul style="text-align: right;"><li>التحقق من الهوية (Authentication).</li><li>التخويل او الترخيص (Authorization).</li><li>التدقيق والمتابعة (Auditing).</li></ul></div><h3 style="text-align: right;">السرية (Confidentiality).</h3><div>يمكن ان يطلق على هذا العنصر أيضا الخصوصية (Privacy)، وتعني الحفاظ على المعلومات من ان يُطلع عليها (يقرأها ويفهمها)، غير الأشخاص المصرح لهم، او منع الكشف غير المصرح به.</div><h3 style="text-align: right;">سلامة المعلومة وتكاملها (Data Integrity)</h3><div>وهي الخدمة التي من خلالها يمكن الحفاظ على سلامة المعلومة من التعديل والحذف او الإضافة او إعادة التركيب، او إعادة التوجيه، وهذا امر مهم جدا لضمان الثقة بالمعلومة.</div><div><br /></div><h3 style="text-align: right;">عدم الإنكار (Non-Repudiation)</h3><div>هي الخدمة التي من خلالها يمكلن منع أي شخص أو جهة من انكار أي عملية قاموا بها وكشفهم.</div><div>ويتم ذلك من خلال توفير سجل احداث آلي لجميع العمليات التي تتم في النظام، بالتاريخ والوقت، وتتبع كافة المستخدمين بكل عملية يقوموا بها.</div></div><div><br /></div><h3 style="text-align: right;">توافر المعلومة (Availability)</h3><div>ان تكون المعلومة قابلة للوصول واستخدامها حين الطلب من قبل اي شخص مصرح به وفي اي وقت، وهذا يعني ان يكون النظام محمي من الهجمات التي تؤدي الى حجب الخدمة (Denial of Service-DoS).</div><div>الهدف العام من هذا عنصر توافر من توافر المعلومة هو ان تكون الشبكة والأجهزة، والأنظمة والبرامج والخدمات متاحة في جميع الأوقات التي يحتاجها المستخدم.</div><h3 style="text-align: right;">المتابعة (أو التدقيق) (Auditing)</h3><div>تهدف المتابعة الى مراقبة عمليات المستخدمين والتحقق من فرض سياسات امن المعلومات، وانها تطبق بشكل صحيح ودقيق.</div><div><br /></div><h2 style="text-align: right;">كيفية تحقيق عناصر امن المعلومات</h2><div>تتم <b>الحماية من التهديدات الأمنية، والهجمات الإلكترونية</b> من خلال تحقيق عناصر امن المعلومات المذكورة سابقا.</div><div>ويتم تحقيقها عادة من خلال تطبيق <b>تقنيات التشفير</b> والبصمة الرقمية، وانظمة كشف الهجمات والتطفل والتصدي لها، وغيرها من تقنيات الأمن والحماية، والتي سيتم تناولها في السياق الآتي:</div><h3 style="text-align: right;">تحقيق عنصري التحقق من الهوية وعدم الإنكار</h3><div>يستخدم التشفير الغير متناظر مع التصديق الرقمي لتحقيق عنصري التحقق من الهوية وعدم الانكار، ويتم ذلك من خلال انتاج التوقيع الرقمي باستخدام الرقم السري للمستخدم، وبهذا يتم تحقيق عنصر التحقق من الهوية.</div><div>كذلك يتم تحقيق عنصر عدم الانكار حيث لا يستطيع المستخدم انكار انه ارسل الرسالة لانه وقع عليها برقمه السري الذي لا يملكه غيره.</div><h3 style="text-align: right;">تحقيق عنصر التحكم بالوصول</h3><div>يتم تحقيق عنصر التحكم من الوصول من خلال النقاط الآتية:</div><div style="text-align: right;"><span style="color: #0b5394; font-size: medium;">1. تسجيل الدخول الواحد (Single Sign-on)</span></div><div>ويتم ذلك من خلال عمل حساب واحد بكلمة مرور واحدة، لتسجيل الدخول لجميع الموارد المتاحة لك في المنشأة او الشركة.</div><div>&nbsp;سواء الخوادم او الشبكة او انظمة قواعد البيانات، سيتم حفظ وتذكر كلمة المرور بعكس وجود حساب مخصص لكل خدمة.</div><div style="text-align: right;"><span style="color: #0b5394; font-size: medium;">2. مصفوفة التحكم بالوصول (Access Control Matrix)</span></div><div>وهي عبارة عن جدول يحتوي المستخدمين كصفوف، والموارد كأعمدة، ويحدد ما لعمليات الممكنة لكل مستخدم على كل مورد، يحتوي كل صف امكانات المستخدم كتحكم كامل او قراءة وكتابة او قراءة فقط اولا يوجد، ومثال ذلك نظام الصلاحيات.</div><div style="text-align: right;"><span style="color: #0b5394; font-size: medium;">3. انظمة كشف الوصول (Intrusion Detection Systems-IDSs)</span></div><div>تقوم انظمة كشف الوصول بالكشف عن الوصول غير الشرعي او الهجوم على الأجهزة والشبكات وانظمة الإتصالات، ومهمتها الأساسية هي التقاط اي شيء مريب او مشكوك فيه يحدث داخل الشبكة.</div><div>والعمل على اشعار الإدارة بذلك من خلال اشعار على جهاز المدير او ارسال رسالة نصية او بريد الكتروني.</div><div>ويتم ذلك بتتبع سيل البيانات وسجلات الأحداث وكشف اي بيانات غير طبيعية والتنبيه عليها، حيث تتكون انظمة التطفل من خلال الحساسات وادوات التحليل وواجهات التواصل مع مديري الأنظمة.</div><div>يوجد نوعان من اجهزة كشف التطفل وهما:</div><div><ul style="text-align: right;"><li>انظمة كشف التطفل الشبكية: وهو عبارة عن جهاز يتم ربطة بالشبكة من خلال كرت الشبكة الذي يلتقط جميع البيانات المارة في الوسط الناقل، وارسالها الى ادوات التحليل لتحليلها وكتشاف التطفل ومن ثم ارسال التنبيه عند وجوده.</li><li>انظمة كشف الكذب على الأجهزة وذلك يتم من خلال برامج توضع على اجهزة الكمبيوتر او السيرفر لمراقبة اي شيء مريب يحدث.</li></ul><div style="text-align: right;"><span style="color: #0b5394; font-size: medium;">4. انظمة منع التطفل (Intrusion Prevention Systems-IPSs)</span></div></div><div>تقوم انظمة منع التطفل بالكشف عن الأنشطة المريبة التي تتم خلال الشبكة ثم بعد ذلك تقوم بمنع او قطع الاتصال عن المهاجم عن الشبكة، حيث يقوم بتعديل قوائم التحكم بالوصول (ACLs) لجدار الحماية.</div><h3 style="text-align: right;">تحقيق عنصر السرية</h3><div>لتحقيق هذا العنصر يمكن استخدام تقنيات التشفير سواء المتناظر او غير المتناظر، وسيتحقق هذا العنصر بدرجة تتناسب مع قوة نظام التشفير المستخدم.</div><h3 style="text-align: right;">تحقيق عنصر سلامة المعلومة وتكاملها</h3><div>يمكن التحقق من المعلومات وخلوها من اي تعديل او حذف او اضافة من خلال تطبيق البصمة الرقمية فبمجرد تحقيق ذلك سيتم كشف اي تعديل او حذف او اضافة وبذلك يتم تحقيق عنصر سلامة المعلومة وتكاملها.</div><h3 style="text-align: right;">تحقيق عنصر توفر المعلومة</h3><div>بعد ظهور هجمات تعطيل الخدمة (DOS) اصبح عنصر توفر المعلومات عنصراً اساسياً، في امن المعلومات، ومع تقدم استخدام الانترنت وانتشاؤها اصبح توافر مواقع الخدمات امراً ضرورياَ.</div><div>وهناك وسائل اساسية لتحقيق عنصر توفر المعلومات، وهي:</div><div><ol style="text-align: right;"><li>ان يكون هناك كافية في الشبكة والخوادم ووسائط التخزين ومركز البيانات.</li><li>القدرة على العودة بعد حدوث الأعطال او الوقفات بطريقة سريعة وآمنة.</li><li>اخذ نسخة احتياطية من البيانات والأنظمة والبرامج.</li><li>توفير اجهزة وانظمة وتقنيات احتياطية تعمل الى جنباً الى جنب الأجهزة والأنظمة والتقنيات الأساسية، حسب الحاجة.</li><li>الحماية من التأثيرات الطبيعية كالحرارة والرطوبة والغبار والكهرباء الساكنة.</li><li>توفير مركز بيانات احتياطي (Disaster Recovery Data Center)، لإستخدامه عند وقوع الكوارث.</li><li>تدريب الجيد المستخدمين على التعامل مع الأعطال، والتحويل الى الأجهزة الإحتياطية.</li><li>استخدام مكافحات الفيروسات.</li><li>استخدام انظمة كشف هجمات تعطيل الخدمة (DOS) ومكافحتها.</li></ol><h3 style="text-align: right;">تحقيق عنصر المتابعة</h3></div><div>يمكن تحقيق عنصر المتابعة والتدقيق على عدة مستويات، من مستوى الأجهزة الشخصية الى مستوى مراكز البيانات، حيث توجد وسائل تدقيق ومتابعة وتدقيق لكل مستوى، منها:</div><div><ol style="text-align: right;"><li>سجلات احداث النظام (Operating System Events Log).</li><li>سجلات احداث الشبكة (Network Events log).</li><li>سجلات احداث قواعد البيانات (Database Events Log).</li><li>إجراء عملية تدقيق ومتابعة تاريخية.</li><li>إجراء عملية تدقيق ومتابعة حية مباشرة.</li><li>إجراء عملية تدقيق وقائية.</li></ol></div><div><br /></div><h2 style="text-align: right;">الخلاصة</h2><div>صار لأمن المعلومات اهمية كبيرة في عالم الثورة التقنية، حيث ان امن المعلومات تعني حماية المعلومات من الوصول&nbsp; الغير المصرح به.</div><div>توجد العديد من التهديدات الأمنية والهجمات الإلكترونية التي علينا مكافحتها كالفيروسات، والهجمات الالكترونية بأنواعها والتصيد والاحتيال وهجمات الهندسة العكسية.</div><div>عناصر امن المعلومات هي التحقق من الهوية والتحقق من الوصول وعدم الانكار والسرية وسلامة المعلومة وتكاملها والتوفر والتدقيق والمتابعة.</div><div>يتم تحقيق عناصر امن المعلومات من خلال التشفير والبصمة الرقمية وانظمة كشف التطفل ومنعها، وانظمة كشف هجوم تعطيل الخدمة ومكافحتها، وانظمة مكافحات الفيروسات، والنسخ الاحتياطي للبينات وتوفير منظومة احتياطية الى جنب المنظومة الأساسية.</div><div><br /></div><div>كان هذا <b>بحث في&nbsp;أمن المعلومات</b>، حيث تناولنا تعريق امن المعلومات، وتطرقنا الى اهم <b>التهديدات الأمنية والهجمات الالكترونية وكيفية الحماية منها؟</b>&nbsp;الى مقال جديد في أمن المعلومات والأمن السيبراني.</div></content><link rel='replies' type='application/atom+xml' href='https://www.codexait.com/feeds/1605181961129246343/comments/default' title='تعليقات الرسالة'/><link rel='replies' type='text/html' href='https://www.codexait.com/2022/01/research-in-information-security-and-protection-of-threads-and-attacks.html#comment-form' title='0 تعليقات'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/1605181961129246343'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/1605181961129246343'/><link rel='alternate' type='text/html' href='https://www.codexait.com/2022/01/research-in-information-security-and-protection-of-threads-and-attacks.html' title='بحث في امن المعلومات و التهديدات الأمنية والهجمات الالكترونية'/><author><name>Codex AIT</name><uri>http://www.blogger.com/profile/15646728619579743282</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmoUUCMMO5a9No09HDWHrm0-p-X-8XVYV3vsvUiC2xADeA0HuVVWTwHj826NC_TelTHWAdGqQsMPRrVhNcm4NoGTlhux8MWtclXXPtVZEN3NQ0j-HjNnk8l7zCKfe4RQ/s220/Codexait+Logo.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/a/AVvXsEi-mu-8RVpRJXK3vt9xWvQ6QRKQLwnxcFTCQZLbwPmfH0rQ8GdKKU42j5PWINrU_Quru0FPF7oRUbU67Bb4601-2hyGPFB4YfG2rmx2GWrDRj4p2vM7xGSWlUqOhVX6CR94UYLeLS7cS-EW-XrRiV8zs2nF2F4azxwEQgvZa25QGM67q5ktW4Lf-ebS=s72-w400-h250-c" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1421699815441362866.post-1433206607358572254</id><published>2021-12-30T23:57:00.017+03:00</published><updated>2024-06-06T06:59:40.619+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="ايقونات"/><category scheme="http://www.blogger.com/atom/ns#" term="تصميم مواقع"/><title type='text'>أفضل حزم الايقونات المجانية لتصميم واجهات الويب والهاتف</title><content type='html'><p>&nbsp;</p><div class="separator" style="clear: both; text-align: center;"><img alt="أفضل حزم الايقونات المجانية لتصميم واجهات الويب والهاتف" border="0" data-original-height="464" data-original-width="850" height="219" src="https://blogger.googleusercontent.com/img/a/AVvXsEilRNqnoTIbAbuaEeTj-hrnVYRyiYDNhyxotKTGzs-8de5wXm82C4g_N2MnVnj5T7MzL5JlQYPb4_3tnLPEOis1lpO1ksV7tLlmnC9sV-Fdknngy2O7kAxsYxS0VgOo6xxSthOFqx0zP-eL9_bjQFtpVUif6J0fb4RkSO7t-yULfCvkJeLYcnUaSaxa=w400-h219" title="أفضل حزم الايقونات المجانية لتصميم واجهات الويب والهاتف" width="400" /></div><br /><p></p><p></p><p>هل انت مصمم واجهات UI Design ؟ اذا مالذي تنتظره ، دعنا نتعرف على افضل <b>حزم الأيقونات المجانية</b> لنستخدمها في مواقع تصميم الواجهات ، سواء كنت مصمم مواقع اومصمم واجهات للهاتف المحمول او واجهات لتطبيقات سطح المكتب ، بالتأكيد ستحتاج لهذه الأيقونات ، ايقونات متنوعة بعدة اشكال وبأنماط متعددة.</p><p>هذه مجموعة من افضل حزم الأيقونات المجانية :</p><h2><a href="https://icons8.com/line-awesome" rel="nofollow" target="_blank"><span style="color: #0b5394;">Line Awesome Icon Font</span></a></h2><p>من افضل حزم <b>الأيقونات الفلاتية Flat Icons</b> التي تستخدم بعدة مجالات ، تعتبر البديل المجاني لآخر اصدار من Fontawesome 5.11.2، حيث يحتوي على 1380 ايقونة فلاتية ، والذي يغطي معظم تصنيفات ايقونات fontawesome.</p><p>يأتي بصيغة خط وايضا بصغة SVG ، مصمم من قبل Icons8 بنمط او ستايل windows 10 والذي يحتوي على حوالي 40000 ايقونة ، يأتي بثلاثة استايلات&nbsp;regular, solid or brand .</p><h2><a href="https://github.com/kenangundogan/fontisto" rel="nofollow" target="_blank"><span style="color: #0b5394;">Fontisto</span>&nbsp;</a></h2><p>يقدملك ايقونات متجهة يمكن تخصيصها وتعديلها بشكل آني بواسطة CSS ، حيث يحتوي على اكثر من&nbsp; 616 ايقونة فلاتية لجميع المجالات وخصوصا الماركات والتقنيات الحديثة ولغات البرمجة.</p><p>تأتي حزمة الأيقونات بصيغة خط icon font وايضا ملفات SVG ،تتميز الحزمة بسهولة التعامل معها بواسطة اكواد CSS ، وتعتبر مجانية ومفتوحة المصدر ، ايقونات متجهة قابلة للتطوير ، تبدو رائعة وجميلة بكافة الأحجام.</p><h2><a href="https://ionic.io/ionicons" rel="nofollow" target="_blank"><span style="color: #0b5394;">Ionicons</span></a>&nbsp;</h2><p>ايقونات&nbsp;&nbsp;Ionicons&nbsp; هي الأيقونات الخاصة بإطار العمل ايونيك Ionic Framework ، تعتبر حزمة متكاملة وتحتوي على اكثر من 1100&nbsp; من الأيقونات&nbsp; الخاصة بتصميم واجهات مواقع الويب والهواتف الذكية.</p><p>&nbsp;فهناك ايقونات التحرير والمقالات وايقونات مواقع التواصل الإجتماعي والشركات الشهيرة وغيرها ، حيث بإمكانك استخدامها مع اي موقع ويب منفصلة عن الإطار المخصص له.</p><p>وتأتي بصيغة SVG , Iconfont ، ايضا تحتوي على ثلاث انماط رئيسية للتصميم هي ممتلئ Filled ، وحاد sharp و outline.</p><p><br /></p><h2><a href="https://tablericons.com/" rel="nofollow" target="_blank"><span style="color: #0b5394;">Tabler Icons</span></a></h2><p>ايقونات مجانية مفتوحة المصدر لتطبيقات الويب والموبايل ، وهي ألأيقونات الأساسية المستخدمة في تطبيق انستجرام ، تحتوي الجزمة على&nbsp;1424 ايقونة بصيغة SVG قابلة للتعديل والتخصيص بشكل كامل.</p><h2 style="text-align: right;"><a href="https://akveo.github.io/eva-icons/" rel="nofollow" target="_blank"><span style="color: #0b5394;">Eva Icons</span></a></h2><p>هي حزمة تحتوي على اكثر من 480 أيقونة رائعة مفتوحة المصدر للعديد من أنشطة التصميم الشائعة ، تأتي بصيغتين PNG و SVG يمكنك استخدامها لتصميم مواقع الويب او لتطبيقات الأندرويد والأيفون ، كما يمكنك من استخدامها لتصميم واجهات سطح المكتب.</p><p><br /></p><h2 style="text-align: right;"><a href="https://github.com/iconic/open-iconic" rel="nofollow" target="_blank"><span style="color: #0b5394;">OPEN ICONIC</span></a></h2><p>تتميز ايقونات open ionic بجمالها الرائع وتصميمها الفلاتي ، حيث يمكن استخدامها في العديد من المجالات في التصميم لتوفيرها بالعديد من الصيغ مثل&nbsp;SVG, PNG, WebP, EOT, OTF, TTF, WOFF.</p><p>&nbsp;حيث تحتوي على نسخة بشكل خط&nbsp; icon fonts يمكنك تضمينها في موقعك بكل سهولة ، حجمها الصغير ايضا يجعلها اكثر قبولا، وتتكون من 223 ايقونة جميلة.</p><h2 style="text-align: right;"><a href="https://icons.getbootstrap.com/" rel="nofollow" target="_blank"><span style="color: #0b5394;">Bootstrap Icons</span></a></h2><div>تقدم لك بوتستراب ايقونات مجانية ومفتوحة المصدر ،تحتوي على اكثر من 1500 ايقونة عالية الجودة ، تأتي بصيغة خط webfont ، و صيغة SVG ، يمكنك استخدامها مع او بدون البوتستراب.</div><div><br /></div><h2 style="text-align: right;"><a href="https://fonts.google.com/icons" rel="nofollow" target="_blank"><span style="color: #0b5394;">Google Material Icons Font</span></a></h2><div>تقدم لك جوجل ايقونات ماتريال Material عالية الجودة تأتي بصيغ متعددة مثل :SVG,webfont,png ، الأيقونات الأكثر انتشارا على هواتف الأندرويد ومواقع جوجل.</div><div>فهي مجانية ومفتوحة المصدر يمكنك استخدامها مباشرة من التخزين السحابي لجوجل CDN ، تأتي بخمسة انماط Styles كالتالي Outlined, Filled, Rounded, sharp, Two Tone ، ايقونات مصممة على مبادئ التصميم المادي Material Design.</div><div><br /></div><div></div><blockquote><div>اقرأ ايضا:</div><div><div><a href="https://www.codexait.com/2016/09/download-icons-free-resources.html">افضل المصادر لتحميل الأيقونات المجاني</a></div></div><div><div><a href="https://www.codexait.com/2016/08/using-svg-icons.html">كيفية استخدام ايقونات svg في صفحات الويب&nbsp;</a></div></div><div><div><a href="https://www.codexait.com/2015/12/font-icons.html">اضف ايقونات رائعة الى موقعك بواسطة Font-Awesome</a></div></div></blockquote><div><div><a href="https://www.codexait.com/2015/12/font-icons.html"></a></div></div><div>كانت هذه مجموعة مميزة من افضل حزم <b>الأيقونات </b>المستخدمة في تصميم مواقع الويب وتطبيقات الهواتف الذكية ، بانماط واشكال متعددة ، اتمنى ان تنال اعجابكم.</div><div><br /></div><div><br /></div></content><link rel='replies' type='application/atom+xml' href='https://www.codexait.com/feeds/1433206607358572254/comments/default' title='تعليقات الرسالة'/><link rel='replies' type='text/html' href='https://www.codexait.com/2021/12/top-free-flat-icons-packs.html#comment-form' title='0 تعليقات'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/1433206607358572254'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/1433206607358572254'/><link rel='alternate' type='text/html' href='https://www.codexait.com/2021/12/top-free-flat-icons-packs.html' title='أفضل حزم الايقونات المجانية لتصميم واجهات الويب والهاتف'/><author><name>Codex AIT</name><uri>http://www.blogger.com/profile/15646728619579743282</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmoUUCMMO5a9No09HDWHrm0-p-X-8XVYV3vsvUiC2xADeA0HuVVWTwHj826NC_TelTHWAdGqQsMPRrVhNcm4NoGTlhux8MWtclXXPtVZEN3NQ0j-HjNnk8l7zCKfe4RQ/s220/Codexait+Logo.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/a/AVvXsEilRNqnoTIbAbuaEeTj-hrnVYRyiYDNhyxotKTGzs-8de5wXm82C4g_N2MnVnj5T7MzL5JlQYPb4_3tnLPEOis1lpO1ksV7tLlmnC9sV-Fdknngy2O7kAxsYxS0VgOo6xxSthOFqx0zP-eL9_bjQFtpVUif6J0fb4RkSO7t-yULfCvkJeLYcnUaSaxa=s72-w400-h219-c" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1421699815441362866.post-3120482368881559087</id><published>2021-12-06T06:18:00.007+03:00</published><updated>2022-04-28T07:48:23.246+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="مواقع مفيده"/><title type='text'>افضل الأدوات لتحسين وتكبير الصور دون فقدان جودتها اونلاين</title><content type='html'><p>&nbsp;</p><div class="separator" style="clear: both; text-align: center;"><img alt="افضل المواقع لتحسين الصور وتكبيرها دون فقدان الجودة" border="0" data-original-height="517" data-original-width="800" height="259" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbHQSXZhl4ULI7Mb3lebmxWfoQvPEEgQtdV1TZHwvtSZa2h-wZBGOZuj7RVYhTTYg9KfkZ7JFpaoOkoZLBW7hTifqERDnM41MvfUc8mm0m1wBgUTpBOEXBOBFk4ON35K95pNgNTb-qoV8/s640-rw/enlarge+Image.jpg" title="افضل المواقع لتحسين الصور وتكبيرها دون فقدان الجودة" width="400" /></div><br /><p></p><p>عادة مانحتاج لتحسين جودة الصور الضعيفة او الصور التي تم تصويرها باحد الهواتف القديمة ، لهذا الغرض ظهرت العديد من الأدوات على الأنترنت التي تساعدك بتوضيح الصور الضعيفة او الصغيرة مجانا.</p><p>&nbsp;تستخدم هذه الأدوات تقنيات الذكاء الإصطناعي لمعالجة الصور بفصل البكسلات عن بعضها البعض ثم يتم مضاعفة كل بكسل من الصورة واعادة دمجها من جديد لانشاء صورة مكبره من الصورة الأصلية بدون فقدان الجودة.</p><p>&nbsp;فبعض الأدوات تقدم لك عدة صور مجانا والتي ستنجز بها مهمتك ، والبعض الأخر مجانا ولكن توجد خدمات متطوره مدفوعة او تحتاج لإنشاء حساب في الموقع ، هذه قائمة بالمواقع التي تحتوي على <b>ادوات </b>توضيح جودة الصور وتكبيرها بدون فقدان وضوح الصورة وجودتها</p><h2 style="text-align: right;">موقع <a href="https://bigjpg.com/" rel="nofollow" target="_blank">Big Jpg</a></h2><p>يحتوي على اداة تتميز بواجهة سهلة الإستخدام كل ماعليك فعله فقط رفع الصورة واختيار حجم <b>التكبير</b> نسبة او بالبكسل والتي تصل 8 اضعاف الصورة الأصلية ،والضغط على زر البدء لبدء عملية تكبير الصورة.</p><p>&nbsp;يستخدم الموقع خوارزميات الشبكات العصبية والذكاء الإصطناعي، كما يحتوي الموقع على تطبيقات خاصة بالويندوز والماك والأندرويد.</p><p><br /></p><h2>موقع&nbsp;<a href="https://imglarger.com/" rel="nofollow" target="_blank">AI Image Enlarger</a></h2><div>يقدم الموقع العديد من الأدوات الخاصة <b>بتحسين الصور</b> والتي في مقدمتها <b>تكبير الصورالصغيرة</b>&nbsp; وترقيتها دون فقدان جودة الصورة يكبر بنسبة 200% ،400% ، 800% ، بالإضافة الى ذلك تنميق الوجوه وإزالة الخلفية و!زالة التشويش في الصورة .</div><div><br /></div><div><h2>موقع&nbsp;<a href="https://upscalepics.com/" rel="nofollow" target="_blank">upscalepics</a></h2><div>موقع متميز&nbsp;<b>لتوضيح الصور</b>&nbsp;ويحتوي على العديد الخيارات مثل تحسين جودة الصورة وخيار ازالة التشويش من الصورة ايضا يوفر تقنية ضغط الصورة مع المحافظة على جودة الصورة.</div></div><div><br /></div><div><h2>موقع&nbsp;<a href="https://www.posterburner.com/makecustomposters" rel="nofollow" target="_blank">posterburner</a></h2><p>موقع رائع يساعدك على<b>&nbsp;تحسين جودة الصور</b>&nbsp;يتميز بسهولة الاستخدام ، تعتبر أداة مجانية ولكن لديه خيارات متطورة مدفوعة.</p><p><br /></p><h2 style="text-align: right;">موقع <a href="https://www.resizepixel.com" rel="nofollow" target="_blank">Resize Pixel</a></h2><p>يقدملك&nbsp; اداة بسيطه&nbsp;<b>لتكبير الصور</b> بكل سهولة&nbsp; ، فقط اختار الصورة التي تريد تكبيرها&nbsp; وحدد الحجم الذي تريدة وابدأ عملية المعالجة .</p><p><br /></p></div><h2 style="text-align: right;">موقع <a href="https://deep-image.ai" rel="nofollow" target="_blank">Deep Image</a></h2><p>موقع رائع متخصص بأدوات&nbsp;<b>ترقية الصور</b> وإزالة القطع الأثرية و<b>تحسين جودة الصورة</b> ، ولكن يوفر لك فقط خمس صور لتحسينها وتكبيرها مجانا، واذا اردت المزيد من الصور عليك الدفع على ذلك.</p><p><br /></p><h2 style="text-align: right;">موقع <a href="https://enhance.pho.to/" rel="nofollow" target="_blank">EnhancePho</a></h2><div>موقع يحتوي على العديد من الأدوات&nbsp;<b>لتحسين جودة الصورة</b> وازالة التشويش والعين الحمراء مع <b>تكبيرها</b> ولكن ليس بنسبة كبيره كالمواقع السابقة .</div><div><br /></div><div>تتنوع المواقع التي تحتوي على أدوات معالجة الصور والذكاء الإصطناعي لتحسين جودة الصور وتكبيرها ، ولكن التنتائج متقاربة نوعا ما ، الإختلاف يكون في تجربة المستخدم ، واتاحة الخدمة كمجاني او جزء من الخدمة مدفوع.</div><div><br /></div><div>كانت هذه مجموعة من ادوات&nbsp;<span style="color: #741b47;">تكبير الصور الضعيفة او الصغيرة بدون فقدان جودتها اونلاين</span> ، حيث تعتمد هذه العملية على تقنيات متقدمة في الذكاء الاصطناعي وعلم معالجة الصور Image Processing، دمتم في حفظ الله ورعايته.</div></content><link rel='replies' type='application/atom+xml' href='https://www.codexait.com/feeds/3120482368881559087/comments/default' title='تعليقات الرسالة'/><link rel='replies' type='text/html' href='https://www.codexait.com/2021/12/increase-image-resolution-online-tools.html#comment-form' title='0 تعليقات'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/3120482368881559087'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/3120482368881559087'/><link rel='alternate' type='text/html' href='https://www.codexait.com/2021/12/increase-image-resolution-online-tools.html' title='افضل الأدوات لتحسين وتكبير الصور دون فقدان جودتها اونلاين'/><author><name>Codex AIT</name><uri>http://www.blogger.com/profile/15646728619579743282</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmoUUCMMO5a9No09HDWHrm0-p-X-8XVYV3vsvUiC2xADeA0HuVVWTwHj826NC_TelTHWAdGqQsMPRrVhNcm4NoGTlhux8MWtclXXPtVZEN3NQ0j-HjNnk8l7zCKfe4RQ/s220/Codexait+Logo.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbHQSXZhl4ULI7Mb3lebmxWfoQvPEEgQtdV1TZHwvtSZa2h-wZBGOZuj7RVYhTTYg9KfkZ7JFpaoOkoZLBW7hTifqERDnM41MvfUc8mm0m1wBgUTpBOEXBOBFk4ON35K95pNgNTb-qoV8/s72-c-rw/enlarge+Image.jpg" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1421699815441362866.post-6465907012950799176</id><published>2021-12-05T04:18:00.012+03:00</published><updated>2024-05-17T07:51:04.464+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="إضافات بلوجر"/><category scheme="http://www.blogger.com/atom/ns#" term="بلوجر"/><title type='text'>اضافة جدول التنقل او المحتوى في مقالات بلوجر بثلاث طرق</title><content type='html'><div class="separator" style="clear: both; text-align: center;"><img alt="جدول التنقل المحتوى لبلوجر" border="0" data-original-height="500" data-original-width="800" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5eM_5peK-pmzC7JJ-oMhyePFNSi2Uv3H4wkb5s4yhS14wFujqyzqZ3Dy6PTD7aaYcOuxCuZir7rh78ySJUNXWD0xCo16FfUlfOMzOyr-obQVuO9I_sxuMa5Y5aTzvnVTg7dbRHIEq1TA/s640-rw/Content-Of-Table.jpg" title="اضافة جدول التنقل او المحتوى لبلوجر" width="400" /></div><h2 style="text-align: right;">ماهو جدول التنقل Table Of content؟</h2><p><b>جدول التنقل او المحتوى</b> Table Of content للمقال هو عباره عن <b>فهرس </b>او قائمة تحتوي على العناوين الفرعية التي يتضمنها مقالك ، الذي يمكن الزائر من قراءة عناوين محتويات المقال والانتقال مباشرة الى الفقرة المطلوبة التي تبحث عنها ..</p><h2 style="text-align: right;">ما أهمية جدول التنقل في المحتوى لبلوجر؟</h2><p></p><ul style="text-align: right;"><li>تحسين <b>تجرية المستخدم </b>، حيث يمكن الزائر من تصفح محتويات المقال بسهولة.</li><li>تحسين <b>السيو </b>، يقدم لجوجل موجز لمقالك يدل على التنظيم وخصوصا مع امكانية التنقل في محتوى المقال بسهولة وهذا مايفضلة جوجل وكافة محركات البحث.</li><li>الأرشفة المثلى للمقال عند ارشفة مقالتك جوجل تضع العناوين دائما في الإعتبار لهذا يكون مقالك جاهز.</li></ul><h2 style="text-align: right;">تركيب جدول المحتويات او التنقل لبلوجر بثلات طرق</h2><h3 style="text-align: right;">1. اضافة جدول المحتوى بشكل يدوي&nbsp;</h3><div>ويكون كود محتويات الجدول بالشكل التالي</div><div><br /></div><div> </div> <pre><code> &lt;div class="toc"&gt; &lt;summary&gt;محتويات المقال:&lt;/summary&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="<span style="color: red;">#<span>head1</span></span>"&gt; العنوان الاول &lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="<span style="color: red;">#<span>head2</span></span>"&gt; العنوان الثاني&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="<span style="color: red;">#<span>head3</span></span>"&gt; العنوان الثالث&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="<span style="color: red;">#<span>head4</span></span>"&gt; العنوان الرابع&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre>في كل عنوان اضفته في جدول المحتويات يجب ان يحتوي على عنوان ال id المحدد باللون الاحمر كالتالي: <pre><code>&lt;h2 <span style="color: red;">id</span>="<span style="color: #93c47d;">head1</span>"&gt;العنوان الأول&lt;/h2&gt; &lt;h2 <span style="color: red;">id</span>="<span style="color: #93c47d;">head2</span>"&gt;العنوان الثاني&lt;/h2&gt; &lt;h2 <span style="color: red;">id</span>="<span style="color: #6aa84f;">head3</span>"&gt;العنوان الثالث&lt;/h2&gt; &lt;h2 <span style="color: red;">id</span>="<span style="color: #6aa84f;">head4</span>"&gt;العنوان الرابع&lt;/h2&gt;</code></pre> <h3 style="text-align: right;">2. استخدام اداة انشاء جدول المحتويات لمقالك بشكل تلقائي</h3><div>هذه الطريقة المثلى لإنشاء <b>جدول التنقل للمحتوى</b> بضغطة زر مع تفادي الأخطاء فقط كل ماعليك فعله بعد الانتهاء من كتابتك لمشاركتك هو تحويل عرض محرر المشاركات الى عرض HTML وتحديد كافة محتويات المقال ونسخه بالكامل والدخول الى <b><a href="https://www.codexait.com/p/table-of-content-creator.html">اداة انشاء جدول التنقل في المحتوى</a> </b>ولصق محتويات مقالتك واضغط على زر انشاء جدول التنقل ... بعد ذلك انسخ المحتويات والصقها في مدونتك واحفظ المشاركة .</div><div><br /></div><h4 style="text-align: right;">مالذي يميز اداة انشاء جدول المحتوى عن الاضافة التلقائية في بلوجر؟</h4> <div> <ol style="text-align: right;"><li>توفير بعض السرعة على مدونتك ، وذلك بتوفير في حجم التحميل وعمل الجافاسكريبت بعد التحميل، وبهذا يتم تخفيض قيمة CLS.</li><li>جدول المحتوى يكون منشأ مسبقا ضمن المحتوى وكأنه انشئ بلغات في جهة السيرفر كالوردبرس.</li><li>يساعد محرك البحث بالتعرف على جدول المحتوى بشكل تلقائي بدون تأخير وانتظار الجافا سكربت لكي تنشئة.</li><li>يمكنك من القدرة على تحديد المقال الذي تريد انشاء جدول تنقل في المحتوى له خصوصا المحتوى الطويل.</li></ol></div> <div><br /></div><div>وبالأخير اذا اردت تنسيق شكل جدول المحتوى ادخل للقالب تحرير HTML&nbsp; وابحث عن الكود التالي&nbsp;</div> <pre><code>]]&gt;&lt;/b:skin&gt;</code></pre> <div>واضف قبله الكود التالي قبله مباشره:</div> <pre><code>ol#tocList { padding: 10px 30px 0; margin-top: 0; } ol#tocList li:before { display: none; } ol#tocList li a { color: #333; } ol#tocList li { list-style: decimal; font-size: 15px; line-height: 1.7; margin-bottom: 5px; padding-bottom: 5px; color: #3c4041; } ol#tocList li:hover, ol#tocList li a:hover { color: rgb(0, 140, 255); }</code></pre> <div><br /></div><div>ومن مميزات الطريقتين السابقتين هو ان جدول التنقل يكون&nbsp; اساسا مدمج مسبقا في مشاركتك مما يجعل محركات البحث تتعرف عليه تلقائيا كما في مدونات وردبرس الذي يتم انشاءه مسبقا في جهة السيرفر.</div><div><br /></div><h3 style="text-align: right;">3.اضافة جدول التنقل او المحتوى التلقائي في بلوجر&nbsp;</h3><div>من مميزات هذه الطريقة انك لن تحتاج لعمل اي شيء عند كتابة المشاركة غير اضافة كود بسيط لايتعدى سطر .. ستقوم الاضافة بعد اضافتها لقالبك من انشاء جدول التقل بشكل تلقائي ، ايضا من عيوب جدول التنقل التلقائي انها ستنظاف اكواد الإضافة للقالب وتزيد من حجم القالب ، ولكن لاتقلق احظرت لك اكواد مختصره وخفيفة ، ايضا سيتم انشاء الجدول بعد تحميل المقالة للمتصفح.</div><h4 style="text-align: right;">تركيب اضافة جدول المحتويات الى قالبك</h4><div>1.إضافة اكواد ال CSS ، افتح محرر HTML لقالبك وابحث عن الكود التالي:</div> <pre><code>]]&gt;&lt;/b:skin&gt;</code></pre> <div>واضف الكود التالي قبله مباشره:</div> <pre><code>.toctitle:before{background:url("data:image/svg+xml;charset=utf8,%3Csvg%20aria-hidden%3D%22true%22%20data-prefix%3D%22fas%22%20data-icon%3D%22list%22%20class%3D%22svg-inline--fa%20fa-list%20fa-w-16%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%0A%20%20%3Cpath%20fill%3D%22%23333%22%20d%3D%22M80%20368H16a16%2016%200%200%200-16%2016v64a16%2016%200%200%200%2016%2016h64a16%2016%200%200%200%2016-16v-64a16%2016%200%200%200-16-16zm0-320H16A16%2016%200%200%200%200%2064v64a16%2016%200%200%200%2016%2016h64a16%2016%200%200%200%2016-16V64a16%2016%200%200%200-16-16zm0%20160H16a16%2016%200%200%200-16%2016v64a16%2016%200%200%200%2016%2016h64a16%2016%200%200%200%2016-16v-64a16%2016%200%200%200-16-16zm416%20176H176a16%2016%200%200%200-16%2016v32a16%2016%200%200%200%2016%2016h320a16%2016%200%200%200%2016-16v-32a16%2016%200%200%200-16-16zm0-320H176a16%2016%200%200%200-16%2016v32a16%2016%200%200%200%2016%2016h320a16%2016%200%200%200%2016-16V80a16%2016%200%200%200-16-16zm0%20160H176a16%2016%200%200%200-16%2016v32a16%2016%200%200%200%2016%2016h320a16%2016%200%200%200%2016-16v-32a16%2016%200%200%200-16-16z%22%2F%3E%0A%3C%2Fsvg%3E%0A") no-repeat center} .toctitle:after{background:url("data:image/svg+xml;charset=utf8,%3Csvg%20aria-hidden%3D%22true%22%20data-prefix%3D%22fas%22%20data-icon%3D%22chevron-down%22%20class%3D%22svg-inline--fa%20fa-chevron-down%20fa-w-14%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%0A%20%20%3Cpath%20fill%3D%22%23333%22%20d%3D%22M207%20381%2013%20187c-10-9-10-24%200-34l22-22c10-10%2025-10%2034-1l155%20155%20155-155c9-9%2024-9%2034%201l22%2022c10%2010%2010%2025%200%2034L241%20381c-9%2010-25%2010-34%200z%22%2F%3E%0A%3C%2Fsvg%3E") no-repeat center} .tocHolder{display:inline-block;background:#f7f8fa;border:1px solid #dce0e1;margin:15px 0} div#tocHolder{width:100%;clear:both;margin-bottom:15px} .toctitle{position:relative;height:38px;background-color:#f7f9fa;font-size:16px;color:#333;display:flex;align-items:center;justify-content:flex-start;padding:0 10px;margin:0;min-width:250px;width:300px} ol#tocList{display:none} .tocHolder.closed ol#tocList{display:block} .toctitle:before{content:"";transform:revert;margin-left:10px;right:15px;text-align:center;line-height:26px;background-size:17px;height:24px;width:27px;border-radius:3px;border:1px solid #dce0e1;padding:4px;background-color:#eee} .toctitle:after{content:"";float:left;margin-right:10px;position:absolute;left:15px;text-align:center;line-height:26px;background-size:12px;height:12px;width:12px} ol#tocList{padding:15px 30px 0} ol#tocList li:before{display:none} ol#tocList li a{color:#333} ol#tocList li{list-style:decimal;font-size:15px;line-height:1.7;margin-bottom:5px;padding-bottom:5px;color:#3c4041} ol#tocList li:hover,ol#tocList li a:hover{color:#008cff}</code></pre> <div>2.اضافة اكواد الجافا سكربت قبل اغلاق وسم body ، ابحث عن الكود التالي في قالبك :</div> <pre><code>&lt;/body&gt;</code></pre> <div>والصق الكود التالي قبله مباشرة&nbsp;</div> <pre><code>&lt;b:if cond='data:blog.pageType == &amp;quot;static_page&amp;quot;'&gt; &lt;script&gt; //&lt;![CDATA[ if(document.querySelector("#tocHolder")){var t=null,a=null,html="",e=0;document.querySelectorAll(".post-amp h2").forEach(function(t){t.setAttribute("id","point"+e);var o=t.innerText;html+="&lt;li&gt;&lt;a class='ScrolingTopoint' href='#point"+e+"'&gt;"+o+"&lt;/a&gt;&lt;/li&gt;",e++});var tochtml="&lt;div class='tocHolder'&gt;&lt;div class='toctitle'&gt;جدول التنقل&lt;/div&gt;&lt;ol id='tocList'&gt;"+html+"&lt;/ol&gt;&lt;/div&gt;";document.querySelector("#tocHolder").innerHTML=tochtml,document.querySelectorAll(".ScrolingTopoint").forEach(function(e){e.addEventListener("click",function(t){t.preventDefault(),document.querySelector(e.getAttribute("href")).scrollIntoView({behavior:"smooth"})})}),0==document.querySelectorAll(".post-amp h2").length&amp;&amp;(document.querySelector("#tocList").innerHTML="&lt;div class='no3nwen'&gt;لا يوجد عناوين&lt;/div&gt;"),document.querySelector(".toctitle").addEventListener("click",function(e){document.querySelector(".tocHolder").classList.toggle("closed")})} //]]&gt; &lt;/script&gt; &lt;/b:if&gt; </code></pre> <div>وأخيرا اضافة كود HTML&nbsp; في بدابة المشاركة التي تريد اظهار جدول التقل اليها، افضل اضافته في المشاركة عند الحاجة لإضافة جدول التنقل للمقالة ... وليس اجباريا لكل المقالات ...&nbsp;</div><div><br /></div> <pre><code>&lt;div id="tocHolder"&gt;&lt;/div&gt; </code></pre> <div><br /></div><div>ولكن اذا اردته اظهاره في كافة المقالات ابحث عن الكود التالي في القالب واضفته قبله مباشره</div><div><br /></div> <pre><code>&lt;/data:post.body&gt;</code></pre> <div>كانت هذه ثلاث طرق لإضافة <b>جدول التنقل في المحتوى لمدونات بلوجر</b>&nbsp;، وأتمنى ان تستفيد من الشرح دمتم في رعاية الله وحفظه.</div> <br /></content><link rel='replies' type='application/atom+xml' href='https://www.codexait.com/feeds/6465907012950799176/comments/default' title='تعليقات الرسالة'/><link rel='replies' type='text/html' href='https://www.codexait.com/2021/12/add-table-of-content-for-blogger-in-three-ways.html#comment-form' title='0 تعليقات'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/6465907012950799176'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/6465907012950799176'/><link rel='alternate' type='text/html' href='https://www.codexait.com/2021/12/add-table-of-content-for-blogger-in-three-ways.html' title='اضافة جدول التنقل او المحتوى في مقالات بلوجر بثلاث طرق'/><author><name>Codex AIT</name><uri>http://www.blogger.com/profile/15646728619579743282</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmoUUCMMO5a9No09HDWHrm0-p-X-8XVYV3vsvUiC2xADeA0HuVVWTwHj826NC_TelTHWAdGqQsMPRrVhNcm4NoGTlhux8MWtclXXPtVZEN3NQ0j-HjNnk8l7zCKfe4RQ/s220/Codexait+Logo.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5eM_5peK-pmzC7JJ-oMhyePFNSi2Uv3H4wkb5s4yhS14wFujqyzqZ3Dy6PTD7aaYcOuxCuZir7rh78ySJUNXWD0xCo16FfUlfOMzOyr-obQVuO9I_sxuMa5Y5aTzvnVTg7dbRHIEq1TA/s72-c-rw/Content-Of-Table.jpg" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1421699815441362866.post-6978083586427284655</id><published>2021-12-02T09:08:00.079+03:00</published><updated>2024-09-03T15:33:58.061+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="free-html-template"/><category scheme="http://www.blogger.com/atom/ns#" term="website template"/><category scheme="http://www.blogger.com/atom/ns#" term="تصميم مواقع"/><category scheme="http://www.blogger.com/atom/ns#" term="قوالب"/><category scheme="http://www.blogger.com/atom/ns#" term="مواقع مفيده"/><title type='text'>افضل المصادر لتحميل قوالب وصفحات المواقع HTML5 و CSS3 مجانا</title><content type='html'><div dir="rtl" trbidi="on"> <p class="separator" style="clear: both; text-align: center;"> <noscript><img alt="افضل المواقع لتحميل قوالب وتصاميم مواقع HTML5 وCSS3 جاهزة مجانا" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqTmsNZzBLSD5APwJyxpD_CLq3EcMfpMkvg-VtBGraDtbDdcM8BXxPwVbBV6F5iGjOsotvyBlmB_pcdVNsDM7Ut4_FoWo0q2bJWdRhGunHZF86H_UM-T7yTinmWQ0rouxJAJrkUy0cQMHvSj_Dh7cF2qwqWW-Fvb9UUgtQSmP18tIIrSuqj2Lg4lahPok/s1024-rw/free-download-web-templates.webp' height="533" width="800"/></noscript> <img alt="افضل المواقع لتحميل قوالب وتصاميم مواقع HTML5 وCSS3 جاهزة مجانا" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqTmsNZzBLSD5APwJyxpD_CLq3EcMfpMkvg-VtBGraDtbDdcM8BXxPwVbBV6F5iGjOsotvyBlmB_pcdVNsDM7Ut4_FoWo0q2bJWdRhGunHZF86H_UM-T7yTinmWQ0rouxJAJrkUy0cQMHvSj_Dh7cF2qwqWW-Fvb9UUgtQSmP18tIIrSuqj2Lg4lahPok/s1024-rw/free-download-web-templates.webp" height="533" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="800" /> </p> <p>هل انت مصمم او مطور مواقع؟ او تتعلم ذلك ؟ بالتأكيد ستحتاج لهذه القوالب والتصميمات، هناك آلاف القوالب والصفحات الجاهزة والمجانية لمواقع الويب على الانترنت ، صفحات مصممة بواسطة <em class="emcode">HTML5, CSS3, JAVASCRIPT</em>&nbsp;.</p><p>سنقدم لكم اليوم مجموعة رائعة من المواقع للحصول على قوالب <b>وثيمات</b> وصفحات <b>ولوحات التحكم Admin Dashboard</b> لمواقع الويب&nbsp;يمكنك تحميلها مجانا، بالتأكيد يمكنك استخدام هذه القوالب ، سواء كلي او جزئي ، خصوصا اذا كنت مطور مواقع Back-End بالتأكيد ستحتاج الى استخدامك لمثل هذه القوالب.</p><p>يمكنك أيضا اخذ الالهام من هذه التصميمات وهذه افضل الطرق للإبداع ، نعم عند الاطلاع على تصاميم لمواقع الويب وترتيب افكارك&nbsp; ستخرج بالأخير بأفكار إبداعية وجمالية بتصاميم جذابة من خيالك.</p><p><br /></p><h2><span style="font-weight: normal;">اليك افضل المواقع لتحميل&nbsp;قوالب وصفحات المواقع HTML5 وCSS3&nbsp;مجانية</span></h2> <h3><span style="color: #990000;"><span>Free CSS</span></span></h3> <p class="separator" style="clear: both; text-align: center;"> <img alt="موقع FreeCss لتحميل قوالب وواجهات html,css,javascript" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI-CEkXiDkbn_cWPk5CME8OdNUD6CCtcwQLVZs8b6FLjPGy8ghfcfAOoO86JnkzUyKva2Rbxn3Wb5G8ScJeo5zXzbktKtueoc5O9xlapVh07L9tcMqKOZ8gomlLIcs7Q3yzOJtlq7SY0e9nx5nSHZ4Y-BvYuePvkPyMmYY3-cb18y9IhdmykUhYo9w0C8/s840-rw/Free-CSS.webp" height="410" width="840" /></p> <p>يحتوي&nbsp; موقع FreeCSS على ما يقارب&nbsp;<span>3275 قالب مجاني مصممة بواسطة <b>HTML5 CSS3</b> ،&nbsp; في شتى المجالات سواء كانت صفحات هبوط او مدونات او قوالب خاصة بمجال معين.</span></p><p><span>بالإضافة الى ذلك يحتوي الموقع على أدوات ومصادر وأكواد&nbsp; لبناء صفحات الويب ، الموقع متميز جدا وذلك لاحتوائه على قوالب متعددة الاستخدام ، أفكار بسيطة وصفحات رائعة الجمال.&nbsp;</span></p><p style="text-align: center;"><span><a class="button ln extL" href="https://www.free-css.com/free-css-templates" rel="nofollow" target="_blank">www.free-css.com</a></span></p><p style="text-align: center;"><span><br /></span></p> <h3><span style="color: #990000;"><span>Templatemo</span></span></h3><p class="separator" style="clear: both; text-align: center;"><img alt="موقع Templatemo لتحميل قوالب وواجهات html,css,javascript" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9HR8JtimB4JU9lWx_eX2qMaQroAmoKhJa6mqxKciUxl3V1g33ES-nDrI4KCA-SMeYWjAwr06Ip2MS-Zda0UKhzZVOjPaLkN8PLUFbbob-lUrbVpR7vZgFYun1jQGftwl5tjQAndjrfz0H0bMjOu439J8nQjEOAOHrwoGPZimPwqaMpNmY5ozIkjR7Tm0/s840-rw/templatemo.webp" height="410" width="840" /></p><p>موقع رائع يحتوي على آلاف القوالب المجانية بشتى أنواعها<b> قوالب للشركات وقوالب التطبيقات وصفحات الهبوط والمدونات</b> ، ستتعلم منها وتفيدك كثيرا ، يتميز بقوالب الصفحات الشخصية والمنمقة.</p><p style="text-align: center;"><a class="button ln extL" href="https://templatemo.com" rel="nofollow" target="_blank">templatemo.com</a></p><p style="text-align: center;"><span style="text-align: left;"><br /></span></p><h3><span style="color: #990000;"><span>w3layouts</span></span></h3><p class="separator" style="clear: both; text-align: center;"><img alt="موقع W3Layouts لتحميل قوالب وواجهات html,css,javascript" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixTx8vjp1jOdzfK0rk2FepGnD1bE0P8KC8lYGlI0sqAigLbtLX7evqPmsP08wRbZcPxy7SAoVIFN5D-rMBhBzcU6H9vrL6NbXHkctDaWeYFdHHT-5Os_d8Z_q5yGU-muc2Ra9_hHsST1DoWDRC3vsyKI6EeWjgqm_YApUZjEHkb3rq2H7PuPOO-gZTGds/s840-rw/W3Layout.webp" height="410" width="840" /></p><p>يحتوي الموقع على كمية ضخمة من تصاميم مواقع الويب المجانية ، <b>مواقع مصممة بواسطة البوتستراب متعددة الاستخدام</b> ،ويحتوي على اكثر من 4000 قالب مصمم بواسطة الورد برس ، وقوالب خاصة بالتجارة الالكترونية.</p><p>كما يتميز الموقع بتخصصه الفريد ، حيث يحتوي على قوالب لعرض الألعاب ، والفيديو ، وقوالب لعرض الصور ، وقوالب خاصة بالرياضة ، وقوالب للشركات بكافة أنواعها كشركات الاستضافة وغيرها.</p><p style="text-align: center;"><a class="button ln extL" href="https://w3layouts.com" rel="nofollow" target="_blank">w3layouts.com</a></p><p style="text-align: center;"><br /></p> <h3><span style="color: #990000;"><span>Html5Up</span></span></h3><p class="separator" style="clear: both; text-align: center;"><img alt="موقع Html5Up لتحميل قوالب وواجهات html,css,javascript" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU_6pGUWwnFYf9Iui0di2EMCry4pFNbVmb0j7t53jG345zljzXZxAGFEM7o54CTVEdVZqNxJUUCEPXdxa7FhuwE8Z1W-jNnHY2o7gHl71YdXOn0iC2WAngWrulaGr3tkLklA1PCmTV71ZEd_Nn6tEQMxA9SNuPrfb_UL-5yIJf4f0AQn48ZKSBRQcmeT8/s840-rw/HTML5UP.webp" height="410" width="840" /></p><p>يقدم الموقع تصاميم مواقع ويب متجاوبة 100% ، مصممة بواسطة بأحدث تقنيات الويب HTML5 و CSS3&nbsp; &nbsp;و Javascript بالتأكيد لا يوجد موقع يخلو من الجافا سكريبت.</p><p>ما يميزه سهولة تصفحه ، فالقوالب قابلة للتعديل بكل سهولة ويرجع ذلك لترتيب الكود ونقاوته من الأكواد الغير ضرورية وغير المستخدمة فهي مجانية بشكل كامل.</p><p style="text-align: center;"><a class="button ln extL" href="https://html5up.net" rel="nofollow" target="_blank">html5up.net</a></p><p style="text-align: center;"><br /></p><h3><span style="color: #990000;"><span>UIdeck</span>&nbsp;</span></h3><p class="separator" style="clear: both; text-align: center;"><img alt="موقع UIdeck لتحميل قوالب وواجهات html,css,javascript" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ0EdH0YJQQUGWtHpDFq9qXb64Tx12dMUSYweAm48RL13vT8BmiaCkPHOvNoo5kxt575lvYZVNitWZnvfXKe_YHpn8OpEPAvRCoSPCALD4DhPgqeBztRlqTFGVwAEZTlEAkEIB0kuVb1p8scBmERW1TNRRpz2tCnk4nx22XPjHxjxdhp4EriKZX9WrRIo/s840-rw/UI-Deck.webp" height="410" width="840" /></p><p>موقع UIdeck&nbsp; موقع بسيط ستجد فيه صفحات هبوط رائعة ومجانية مصممة بواسطة البوتستراب ، وقوالب ريكت React ، ايضا يحتوي على UI Components جاهزة لإضافتها في موقعك او تصاميمك يوجد منها المدفوع والمجاني.</p><p style="text-align: center;"><a class="button ln extL" href="https://uideck.com" rel="nofollow" target="_blank">uideck.com</a></p><p style="text-align: center;"><br /></p><h3><span style="color: #990000;"><span>One Page Love</span></span></h3><p class="separator" style="clear: both; text-align: center;"><img alt="موقع OnePageLove لتحميل قوالب وواجهات html,css,javascript" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiACNaZ9a8dBtk9JlzuY8i15_JAYrYcvNQ0nn5MSBD_soZb4CE_lWGR4-xp_zLk3H8Qegtjz-MmwdjJEaG44KvDVqQ7Zl7deyQYQE4ajryOFAtUFonOLc6Ex35jnd5LD0VgEGxLmNYUsPmlPp7Kq34mhv8BHDgGaIYPIBqnB7gpxyOhVIIncEWsbggGSwc/s840-rw/One-Page-Love.webp" height="410" width="840" /></p><p class="separator" style="clear: both; text-align: center;"><br /></p><p>يحتوي الموقع على اكثر من 80 قالب&nbsp;متجاوب على كافة الشاشات والأجهزة ، يحتوي الموقع على قوالب عصرية مصممة بأحدث مبادئ التصميم.</p><p>&nbsp;تصاميم فلاتيه وتصاميم على مبدأ التصميم المادي Material Design، معظم تصاميم هذا الموقع عباره عن قوالب من صفحة واحدة لعرض منتجك او سيرتك الذاتية او غيره.</p><p style="text-align: center;"><a class="button ln extL" href="https://onepagelove.com" rel="nofollow" target="_blank">onepagelove.com</a></p><p style="text-align: center;"><br /></p><h3><span style="color: #990000;"><span>Creative Tim</span></span></h3><p class="separator" style="clear: both; text-align: center;"><img alt="موقع CreativeTeam لتحميل قوالب وواجهات html,css,javascript" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7ux9gjKzg5SrAnH5k7ESncBb9OLgsTbf7TCDdHcos01B5Eeikhd2H1lHE7HS9OeomqGOQLwWnVm3DgJJjLsXwQHPGcmoxlgmOE6xyJ7X_KXoWdQtVLDMedzsQDPJUxDozWXJOQZn52jXkhYihEU2ugmR2wKtpvxSZ0zZF-FK_L0Tzh42Vnyac8_vx3VE/s840-rw/Cretive-Team.webp" height="410" width="840" /></p><p><br /></p><p>موقع رائع جدا يقدم تصاميم خرافية وخصوصا في <b>لوحات التحكم Dashboard</b>&nbsp; ومشاريع جاهزة في تطوير الويب، يستخدم في تصميماته العديد من المكاتب واطارات عمل التصميم كالبوتستراب وال Vue.JS&nbsp; و React و AnjularJS والعديد.</p><p>&nbsp;بالإضافة الى ذلك أيضا يحتوي على العديد من أدوات ومكونات وإضافات جاهزة للاستخدام في تصاميمك وإضافات رائعة للمواقع ... فقط كل ما عليك هو انشاء حساب والذهاب الى قسم التصاميم المجانية ، أيضا بإمكانك مشاهدة التصاميم المدفوعة وأخذ الإلهام منها.</p><p style="text-align: center;"><a class="button ln extL" href="https://www.creative-tim.com/templates/free" rel="nofollow" target="_blank">www.creative-tim.com</a></p><p><br /></p> <h3><span style="color: #990000;"><span>HTMLrev</span></span></h3> <p class="separator" style="clear: both; text-align: center;"> <img alt="موقع HTMLrev لتحميل قوالب وواجهات مواقع الويب مجانا" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG3qBBmAO8Q7YTXJ6Dn9ybVLX3e9wNGv2moHRg_WfVn8tj0umwWtpauevm5c832Pc8-XnzZ3hQOO2Ra2p5HJx18pthmdhbTMY2ILy94hbOQUTv14g-VDPeWjjggSy1kwhJkJjg7aSuzY34fzLqf-xdmMdcF2eB1S263u8M1_NGwBd9ctBvNYghVLNQKs0/s840-rw/HTMLrev.webp" height="410" width="840" /></p><p>يحتوي الموقع على اكثر من 1500 قالب في لغة HTML/CSS مبرمجة بالعديد من مكتبات الجافا سكربت مثل VueJs و React مع والبوتستراب.</p><p>الموقع&nbsp; منظم بشكل رائع على حسب التقنية او الاطار المستخدم، ويحتوي على العديد من القوالب المجانية، بمختلف تصنيفاتها على حسب احتياجك.</p><p style="text-align: center;"><a class="button ln extL" href="https://HTMLrev.com" rel="nofollow" target="_blank">HTMLrev.com</a></p><blockquote><p>اقرأ ايضا:</p><p><a href="https://www.codexait.com/2017/01/open-source-codes-and-projects.html">افضل المواقع للحصول على اكواد ومشاريع مفتوحة المصدر في البرمجة</a></p><p>&nbsp;<a href="https://www.codexait.com/2016/09/download-icons-free-resources.html">افضل المصادر لتحميل الأيقونات المجانية</a></p></blockquote> <h3><span style="color: #990000;"><span>FreeHtml5</span></span></h3><p></p><p class="separator" style="clear: both; text-align: center;"><img alt="موقع FreeHTML5 لتحميل قوالب وواجهات مواقع الويب مجانا" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRfiF8cAa_x6Q5s6jpgcRDhynzPmatGc8toG6YjBetZjNUnWr6s7c9If-bw4qQcA1XMVKLkgEw1IP67cgABCAhTV4DUq6dahrpZZGJhewFqsgDO_fGeuUDpbb3JoWI_QqOqR3jMM51vpp9zu0hu3mFd6nrnG77W6hYeHLH__bsgo0dK6Rs2fevuFP2F40/s840-rw/FreeHTML5.webp" height="410" width="840" /></p><p>موقع يحتوي على العديد من التصميمات وقوالب مواقع الويب الجاهزة والمجانية&nbsp; وأيضا توجد تصاميم مدفوعة ، قوالب مصممة بواسطة البوتستراب وال HTML5 ،باللإضافة الى لغة CSS3.</p><p></p><p>يقدم مواقع جاهزة لمصممي ومطوري المواقع يمكنهم تعديلها واستخدامها في أعمالهم.</p><p style="text-align: center;"><a class="button ln extL" href="https://freehtml5.co" rel="nofollow" target="_blank">freehtml5.co</a></p><p><br /></p><h3><span style="color: #990000;"><span>Tooplate</span></span></h3><p class="separator" style="clear: both; text-align: center;"><img alt="موقع Tooplate لتحميل قوالب وواجهات مواقع الويب مجانا" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcyT2RMpgNp-RR2wmaQHPcKJMAGGnWm8XbesDDZW73-ycMusLTxsIq39apqOFawqeRGjdn357KQElfhrA3ZJX51EljFOqcQEJ13f-SmWO-z6G6MMlPWmWNHDVgo7jqV1l-sm9srcYFNpX5vfzONpo0fvabLbI7rk2K-iQaJkUQR9KL-zGpO9T7OOJ4bTc/s840-rw/Tooplate.webp" height="410" width="840" /></p><p>يقدم الموقع مجموعة من <b>القوالب المجانية</b> الخاصة بالتجارة والتسويق الإلكتروني والصفحات الشخصية ، قوالب مصممة بواسطة ال CSS3 والبوتستراب ، يمكنك تعديلها بكل سهولة بأي <a href="https://ar.codexait.com/2016/11/free-code-editors.html">محرر اكواد</a> واستخدامها حسب متطلباتك.</p><p style="text-align: center;"><a class="button ln extL" href="https://www.tooplate.com" rel="nofollow" target="_blank">www.tooplate.com</a></p><p><br /></p><h3><span style="color: #990000;">Colorlib</span></h3><p class="separator" style="clear: both; text-align: center;"><img alt="موقع Colorlib لتحميل قوالب وواجهات مواقع الويب مجانا" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja3mIiB3BnV4jpUUiXjhCXlXutdXZHHpo_a5BpoIJaE2QqCbqrXnQpTCXOMHv86JuBpVykgbNqnxYRzmlAmxQQSaatxRm5ANehaII9Cc5GYLs79x_AJf5BHeeZh4yJfoAfYHEOPe-kqxB2hTZdz953RhBBI7aENi5M4sEv_y_EV0osrfy8JGAxNTnSfPA/s840-rw/ColorLib.webp" height="410" width="840" /></p><p>يعتبر من المواقع الشائعة لتحميل قوالب مجانية لكافة أنواع المواقع ، فهو يحتوي على قائمة من الأعمال المجانية في تصميم مواقع الويب.</p><p>&nbsp;بإمكانك الحصول على مجموعة نادرة من تصنيفات او أنواع قوالب مواقع الويب كقوالب خاصة بالسفر وقوالب خاصة بالعقارات وأخرى بالمصورين وأيضا الفنادق وغيرها.</p><p>يحتوي الموقع على قوالب مصممة بـ HTML CSS وقوالب خاصة بالورد برس ، فالموقع يقدم لك مجموعة مميزة من القوالب المجانبة ، يمكنك أيضا معاينة القوالب على شاشات متعددة.</p><p style="text-align: center;"><a class="button ln extL" href="https://colorlib.com/wp/templates/" rel="nofollow" target="_blank"><b>colorlib.com</b></a></p> <h3><span style="color: #990000;">Theme Wagon</span></h3><p class="separator" style="clear: both; text-align: center;"><img alt="موقع Theme wagon لتحميل قوالب وواجهات html,css,javascript" class="lazy" data-class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVRCg_qo1zvca7xr47YJLzYVkO1eRK7MOkrBkLF_TT_RsqlCvVwYSdwhoq2SgNEoWRPbSIDTBmKB9PXaTxeDfyrpzUXikjhTVbTtQuUTIjPTFsU6oZdLVcvMmwVVJCTMdH5qiZUwm_eJWPvKtfUwmMxnRlhoxBf3dMrislTreHTc0NKLhV78Jmz8ZN2p4/s840-rw/Theme-Wagon.webp" height="410" width="840" /></p><p>من المواقع المميزة بتقديم قوالب عصرية مجانية في شتى المجالات مصممة بالبوتستراب&nbsp; و HTML5، قوالب متجاوبة مع كافة الشاشات.</p><p>&nbsp;أيضا يحتوي على لوحات تحكم Admin Dashboard مميزة ورائعة يمكنك استخدامها في موقعك بكل سهولة، كما ان الموقع سهل الاستخدام، ويقدم معاينة القوالب على موقع Github، بالاضافة الى ذلك يقدم لك الموقع شرح عن القالب من التقنيات والمكتبات المستخدمة واهم مميزات القالب، كما يتيح لك تحميل القالب بضغطة زر واحدة.</p><p style="text-align: center;"><a class="button ln extL" href="https://themewagon.com/" rel="nofollow" target="_blank">themewagon.com</a></p> <blockquote> <b>اقرأايضا:</b> <a href="https://www.codexait.com/2024/08/html5-css3-landing-page-templates.html">افضل 20 قالب صفحة هبوط HTML5 و CSS3 مجانية لمواقع الويب</a> </blockquote> <h3><span style="color: #990000;">Bootstrap Themes</span></h3><p class="separator" style="clear: both; text-align: center;"><img alt="موقع Bootstrap Themes لتحميل قوالب وواجهات html,css,javascript" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3ZqPAlW6D27aVa2goZXF5Nx7qWPmObYKBUEcjYcV-IH0LzmvmpkZUKPse4VtfeF9NdmPMbZHICl1Ir76SYcI6fFWmZeXGOuRkKF93qEp2xJ102nW4HuhPZ-t1WFWa1CObz4aRlY29JKGtkdVC1l5eo5tPAVjMaE-cOQMf8747458Flua71QhPei9njGs/s840-rw/Bootstrap-Themes.webp" height="410" width="840" /></p><p>كذلك هذا الموقع يعتبر جيد جداً للحصول على قوالب مجانية جميلة وعصرية مصممة بواسطة <a href="https://www.codexait.com/2016/10/best-bootstrap-arabic-course.html">البوتستراب</a>، يحتوي على العديد من أنواع الثيمات لمختلف أصناف المواقع، قوالب متجاوبة، وكود نظيف ومنظم، أيضا بإمكانك معاينة الموقع ومشاهدته واختبار تجاوبه قبل البدء بتحميله.</p><p>بالإضافة الى ذلك يحتوي الموقع على العديد من مصادر تصميم واجهات مواقع الويب كالأزرار والقوائم وجداول الأسعار وغيرها الكثير.</p><p><br /></p><p style="text-align: center;"><a class="button ln extL" href="https://bootstrapthemes.co/items/free-bootstrap-templates/" rel="nofollow" target="_blank">bootstrapthemes.co</a></p><p style="text-align: center;"><br /></p> <h2>الخلاصة</h2><p>من المرجح اذا كنت مصمم او مطور مواقع ، ومهما كان خيالك وابداعك ، لكن لا يمكنك الاستغناء عن مشاهدة قوالب جاهزة او تنزيلها والتعديل عليها لما يلبي احتياجاتك واستخدامها في اعمالك.</p><p>لأن بعض الأعمال لا تعطي أهمية كبيرة للتصميم وخصوصا في اعمال مطوري الويب BackEnd Developers، تكون الأهمية لإنجاز مهام برمجية والتعامل مع قواعد البيانات والجلسات والكعكات والعمليات البرمجية الخاصة بالسيرفر وغيرها ، لهذا يجب استغلال وقتك ، <b>وتنزيل قالب جاهز</b> والتعديل عليه واستخدامه في عملك.</p><p>بالتأكيد اذا كنت مصمم مواقع ويب لن تستخدم من هذه القوالب الجاهزة لأن هذا تخصصك ويجب ان تبدع فيه، ولكن عليك خلق أفكار جديدة، غذي خيالك بمشاهدة تصاميم وقوالب جديدة، استفد أفكار وطرق جديدة للتصميم، وهذا ما سيمنحك ابداع بشكل لن تتصوره.</p><p><br /></p><p>كانت هذه&nbsp;<b>مجموعة مميزة من المصادر لتحميل قوالب وصفحات الويب المجانية</b>&nbsp;واذا كانت لديك مصادر مجانية أخرى لتحميل&nbsp; القوالب والثيمات المجانية&nbsp; الرجاء شاركها معنا بالتعليقات.</p></div></content><link rel='replies' type='application/atom+xml' href='https://www.codexait.com/feeds/6978083586427284655/comments/default' title='تعليقات الرسالة'/><link rel='replies' type='text/html' href='https://www.codexait.com/2021/12/web-design-template-free-download.html#comment-form' title='0 تعليقات'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/6978083586427284655'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/6978083586427284655'/><link rel='alternate' type='text/html' href='https://www.codexait.com/2021/12/web-design-template-free-download.html' title='افضل المصادر لتحميل قوالب وصفحات المواقع HTML5 و CSS3 مجانا'/><author><name>Codex AIT</name><uri>http://www.blogger.com/profile/10277402041090003956</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFcTjVsB95C1gFAE3krg39Hdh7dmMu6QS9pXd1I3ZHOizXUXoYGUk0pFDKacxWx32H5Ni7YSdej17qiBuZnPprWuCrcLa8iorQpO_jvBm0sOqvhy2vjicX14KpOXIWOQ/s220/Codexait+Logo+2021+%284%29+-+Copy+%281%29.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqTmsNZzBLSD5APwJyxpD_CLq3EcMfpMkvg-VtBGraDtbDdcM8BXxPwVbBV6F5iGjOsotvyBlmB_pcdVNsDM7Ut4_FoWo0q2bJWdRhGunHZF86H_UM-T7yTinmWQ0rouxJAJrkUy0cQMHvSj_Dh7cF2qwqWW-Fvb9UUgtQSmP18tIIrSuqj2Lg4lahPok/s72-c-rw/free-download-web-templates.webp" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1421699815441362866.post-7674023950813171141</id><published>2019-12-31T23:17:00.012+03:00</published><updated>2024-05-17T07:52:34.538+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="PHP"/><category scheme="http://www.blogger.com/atom/ns#" term="الامن والحماية"/><category scheme="http://www.blogger.com/atom/ns#" term="تطوير الويب"/><title type='text'>تأمين وحماية المواقع المطورة بلغة PHP</title><content type='html'><div dir="rtl" style="text-align: right;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <img alt="تأمين وحماية المواقع المطورة بلغة PHP" border="0" data-original-height="840" data-original-width="1600" height="336" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0_8TQUkbj7ouSpByyCgTurdOHANDgeNHE05XMn-mYvtPEOh1LjP3cRQqIsUknNLaI0c3vNSJkvn-Rz8uvfLISjT_kJapr-BMtGVHpxJp4DiX8vQvo-fFUrQAApfL1L6x-svE8d5DR2M4/w640-h336/post-1540205838-image_file-user_id_65.jpg" title="تأمين وحماية المواقع المطورة بلغة PHP" width="640" /></div> <br /> كثير من المواقع المطورة بلغة&nbsp; PHP&nbsp; يتم اختراقها بسهولة وذلك لكثرة المبتدئين الذين يطوروا مواقع الويب بلغة PHP&nbsp; وذلك لسهولتها وامكانية تطوير موقع بتعلم الاساسيات بدون التعرف على الأساليب والطرق البرمجية الصحيحة لبناء موقع ويب خالي من الثغرات .<br /> ومع التطور التقني في شتى المجالات وخصوصا في مجال الهاكر والقرصنة انتشرت كثير من البرمجيات المجانية والتي مكنت الكثير من الهاويين استخدامها في اختراق المواقع لأجل المتعة والتباهي ، وبذلك صار لابد من بناء طرق حديثة وقوية <b>لتطوير مواقع خالية من الثغرات</b>.<br /> <div> <br /></div> <div> سيتم في هذا المقال&nbsp;دراسة الثغرات الامنية والحد من انتشارها وتواجدها&nbsp; في المواقع الصغيرة والكبيرة ، واستخدام شتى المعارف والطرق الحديثة والمتطورة في <b>تأمين وحماية المواقع المطورة بلغة PHP</b>، وبناء مواقع قوية خالية من الثغرات.</div> <div> <br /></div> <h2 style="text-align: right;"> مجموعة من الثغرات الامنية في مواقع الويب وكيفية الحد من انتشارها</h2> <h3 style="text-align: right;">الحد من ثغرات الــ <a href="https://www.codexait.com/2015/12/xss.html">xss</a></h3><div>وذلك بالتحقق من المدخلات او فلترتها في جهة المستخدم عن طريق الجافا سكريبت او مكتبة الجي كويري ايضا توجد العديد من الإضافات الجاهزة التي يمكن استخدامها بسهولة ،</div><div>ايضا تعتبر&nbsp; &nbsp;جهة الخادم هي المكان الأساسي للتنفيذ لهذا يجب عليك استخدام دوال الفلترة والتحقق التي توفرها لغة PHP .</div><div><br /><h3 style="text-align: right;">الحد من ثغرات حقن البيانات <a href="https://www.codexait.com/2016/10/sql-injection.html">SQL Injection</a></h3></div><div> وذلك باستخدام الكلاس PDO&nbsp; للتعامل مع قواعد البيانات وذلك بالطريقة المثلى و المعيارية للتعامل مع قواعد البيانات والتي تمر بالمراحل التالية الاتصال والاعداد واضافة البارامترات واخيرا اضافة البيانات والتنفيذ ، وبهذه الطريقة يتم الحد من ثغرة حقن البيانات والتحقق من الاكواد المضمنة بشكل آلي.<h3 style="text-align: right;">الحد من ثغرات <a href="https://www.codexait.com/2016/02/file-include.html">File&nbsp; Remote Inclusion</a>&nbsp; في لغة PHP</h3>&nbsp;وذلك عن طريق اضافة مصفوفة تحتوي على الصفحات المسموح بها&nbsp; عمل تضمين داخل السكريبت&nbsp; وتعمل تحقق من وجود هذه الصفحة في المصفوة فبل تضمينها او استدعائها من خلال الدالة include(); ،&nbsp;</div><div>الطريقة الثانية وهي ايقاف عملية استدعاء ملفات خارجية داخل اكواد الــ php&nbsp; &nbsp;وذلك بتحويل قيمة المتغير allow_url&nbsp; في ملف php.ini&nbsp; على السيرفر الى OFF ، وبهذا سيتم منع تنفيذ كود التضمين بشكل نهائي .<br /><ol> <div> <br /></div> </ol><h3 style="text-align: right;">تشفير كلمات السر في قاعدة البيانات</h3></div><div>يجب تشفير&nbsp; كلمة السر باستخدام احدى خوارزميات الهاش مثل md5&nbsp; او sha2&nbsp; وافضل استخدام sha2 لأنها تعتبر اخر اصدار من خوارزميات الهاش ، والتشفير بالهاش يتم من جهة واحدة فقط تشفير ولا يمكن ارجاعها لأصلها.</div><div>ولكن يجب ايضا استخدام كلمة سر معقدة&nbsp; ،&nbsp; تحتوي على الرموز والأرقام والحروف الكبيرة والصغيرة ، لأنه هناك بعض الأدوات تقوم باستعادة كلمة المرور الأصلية اذا كانت كلمة السر سهلة ومعتادة ، ففي لغة الـ PHP نستخدم الدالة:&nbsp; <br /><pre><code>password_hash($password,$hash algorithm);</code></pre><div><br /></div> :ايضا استخدم الدالة التالية للمقارنة بين الهاش وكلمة السر الأصلية للتحقق من ذلك <pre><code>password_verify($password , $hash);</code></pre><ol> <div> <br /></div> </ol><h3 style="text-align: right;">يجب كتابة الدلة exit(); بعد استخدام دالة التوجيه header();&nbsp;</h3></div><div>لأنه في حال عدم استخدامها يعمل على طباعة جميع التعليقات المضافة بعدها.</div><div><br /></div><h3 style="text-align: right;">تعطيل امكانية تنفيذ الملفات على السيرفر التي يرفعها المستخدم</h3><div>وذلك عن طريق ملف الـ .htaccess ويتم ذلك من خلال الكود التالي:&nbsp;&nbsp; <br /><pre><code>&lt;filesMatch "\.{php|rb|py|inc|txt}$"&gt; Order allow, deny Deny from all &lt;/filesMatch&gt; </code></pre><h3 style="text-align: right;">تعطيل خاصية عرض الاخطاء من السيرفر</h3></div><div>&nbsp;لانها تمكن الهاكر من استنتاج اكوادك البرمجية وقواعد البيانات من تحليل الأخطاء وذلك من خلال جعل قيمة عرض الأخطاء تساوي صفر كالتالي: <div><br /></div><pre><code>error_reporting(0);</code></pre><div><br /> او عن طريقة تغييره من ملف اعدادات php باسم php.ini كالتالي: </div><pre><code>display_errors : Off</code></pre><h3 style="text-align: right;">منع المستخدم من دخول المجلدات الفرعية للموقع التي تستخدم لتخزين الصور والملفات بشكل&nbsp; مباشر</h3></div><div>وذلك عن طريق اضافة الكود التالي في ملف <a href="https://www.codexait.com/2016/08/remove-php-ext-with-htaccess.html">htaccess</a> : <div><br /></div><pre><code>IndexIgnore * </code></pre><ol> <li>استخدام استضافة قوية وذات امنية عالية.</li> <li>استخدام بروتوكول HTTPS.</li> <li>حذف الملفات الهامشية وملفات التثبيت من المشروع.</li> <li>تحديث اصدار PHP لآخر اصدار.</li> </ol> <h2 style="text-align: right;"> <span><span style="color: #990000;">دور استخدام اطار عمل في PHP لتطوير تطبيقات الويب في امن وحماية الموقع.</span></span></h2> </div> <div> يعتبر استخدام <a href="https://www.codexait.com/2016/02/build-your-php-mvc.html">اطار عمل php framework</a> من اكثر الادوات التي توفر عليك الكثير من الاكواد البرمجية التي يجب ان تستخدمها في الفلتره والحد من ثغرات الحقن Sql Injection و file Remote Inclusion&nbsp;وغيرها الكثير من الكلاسات الجاهزة لتوفير الحماية والتشفير.</div><div>&nbsp;ومن اهم اطارات العمل والاكثر شهرة ودعما في يومنا هذه <a href="https://www.codexait.com/2016/11/laravel-php-framework.html">اطار العمل لارافيل PHP Laravel Framework</a>&nbsp;، لهذا تعتبر من اسهل الطرق <b>لبناء مواقع بلغة PHP ذات امنية وحماية عالية</b>.</div> <div> <span style="font-weight: normal;"><br /></span></div> <div> كانت هذه مقاله جديده للمهتمين بتطوير مواقع php خالية من الثغرات ... واذا كانت لديكم اضافات اخرى اتركوها في التعليقات لتعم الفائدة للجميع ... تابعونا على مواقع التواصل الاجتماعي للمزيد من المقالات&nbsp;.... دمتم في رعاية الله وحفظة.</div> </div> </content><link rel='replies' type='application/atom+xml' href='https://www.codexait.com/feeds/7674023950813171141/comments/default' title='تعليقات الرسالة'/><link rel='replies' type='text/html' href='https://www.codexait.com/2019/12/PHP-security.html#comment-form' title='0 تعليقات'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/7674023950813171141'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/7674023950813171141'/><link rel='alternate' type='text/html' href='https://www.codexait.com/2019/12/PHP-security.html' title='تأمين وحماية المواقع المطورة بلغة PHP'/><author><name>Codex AIT</name><uri>http://www.blogger.com/profile/10277402041090003956</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFcTjVsB95C1gFAE3krg39Hdh7dmMu6QS9pXd1I3ZHOizXUXoYGUk0pFDKacxWx32H5Ni7YSdej17qiBuZnPprWuCrcLa8iorQpO_jvBm0sOqvhy2vjicX14KpOXIWOQ/s220/Codexait+Logo+2021+%284%29+-+Copy+%281%29.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0_8TQUkbj7ouSpByyCgTurdOHANDgeNHE05XMn-mYvtPEOh1LjP3cRQqIsUknNLaI0c3vNSJkvn-Rz8uvfLISjT_kJapr-BMtGVHpxJp4DiX8vQvo-fFUrQAApfL1L6x-svE8d5DR2M4/s72-w640-h336-c/post-1540205838-image_file-user_id_65.jpg" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1421699815441362866.post-1000544039377417440</id><published>2017-01-29T02:24:00.013+03:00</published><updated>2024-07-21T21:04:21.979+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="برمجة"/><category scheme="http://www.blogger.com/atom/ns#" term="كتب"/><title type='text'>افضل المواقع لتحميل الكتب المجانية في البرمجة وتقنية المعلومات</title><content type='html'><div dir="rtl" style="text-align: right;" trbidi="on"> <div dir="rtl" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <img alt="تحميل كتب مجانية في البرمجة وتقنية المعلومات" border="0" height="391" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHgkeW8lVpCbpJaFc6QZSZqf2wWK7vD5KEeo4fqqycKXUT7idxlyFMInqBgmZ-vRhBawLRjYG7l3PYOyJAggmLed2GzaNlQwmgI1tU_ETctDB5bgUxPTgFDCt1loVNrYQUnN7PQ3anrn0/w640-h391/itbooks.jpg" title="تحميل كتب مجانية في البرمجة وتقنية المعلومات" width="640" /></div> </div> الكتاب من اهم وسائل التعليم الاساسية سواء في العصر الحجري او عصر التقنية ، فقط تطورت وسائل العرض والقراءة ، فالكتاب يظل خير صديق ، وافضل مرجع ، نعم انه الكتاب الذي لاغنى عنه&nbsp; ومن يستغني عن الكتاب فهو فاشل.</div><div dir="rtl" style="text-align: right;" trbidi="on">لهذا في هذا المقال سنستعرض مجموعة من المواقع او المكتبات الالكترونية لتحميلها ، التي توفر مجموعة هائلة من <b>الكتب الالكترونية المجانية&nbsp; في البرمجة وتقنية المعلومات</b> ، في اللغة العربية والانجليزية .<br /> <br /> <h2><a href="https://books-library.net/t-Programming-best-download" rel="nofollow" target="_blank">مكتبة الكتب</a></h2> اذا تكلمنا عن الكتب في اللغة العربية فهي تفتقد للكثير وخاصة في المجال التقني ، ولكن في السنوات الأخيرة تحرك بعض الشباب بتأليف وترجمة وتجميع بعض الكتب الرائعة.</div><div dir="rtl" style="text-align: right;" trbidi="on">وتأتي في المقدمة اكاديمية حسوب التي قدمت كتب رائعة في مجال <b>البرمجة وتقنية المعلومات</b> وبشكل مجاني.</div><div dir="rtl" style="text-align: right;" trbidi="on">لهذا يجب الإطلاع على الكتب االمتوفرة في مجال البرمجة وتقنية المعلومات باللغة العربية من هذا الموقع&nbsp; ، والذي يعتبر مكتبة شاملة وخاصة للمجال التقني.<br /> <br /> <h2><a href="https://www.kutub.info/library/category/1" rel="nofollow" target="_blank">موقع كتب</a></h2> موقع عربي اخر ، ويعتبر من المواقع المميزة لتحميل كتب لغات البرمجة وتقنية المعلومات بشكل خاص ، وجميع الجوانب الاخرى سواءا العلمية او الثقافية.<br /> <br /> <h2><a href="https://ebooks-it.org/" rel="nofollow" target="_blank">ebooks-IT</a></h2> &nbsp;يعتبر الموقع الاول في هذا المجال ويوفر عدد هائل من الكتب الرائعة والمجانية ، ويتميز بمحرك بحث رائع ، يمنحك القدرة على البحث وفلترة النتائج على حسب المؤلف او تاريخ الاصدار.</div><div dir="rtl" style="text-align: right;" trbidi="on">&nbsp;ويحتوي على عدة اقسام في البرمجة وتقنية المعلومات ، من لغات البرمجة وهندسة البرمجيات الى الشبكات وامن المعلومات وانظمة التشغيل ، بالاضافة الى تصميم وتطوير المواقع و <a href="https://www.codexait.com/2016/08/learn-android-development.html" target="_blank">كتب في برمجة تطبيقات الهاتف</a> ، وغيرها من مجالات تقنية المعلومات.<br /> <br /> <h2><a href="https://www.freebookcentre.net/" rel="nofollow" target="_blank">freebookcentre.net</a></h2> موقع هو الأخر&nbsp; يحتوي على مجموعة من الكتب في عدة لغات برمجة وقواعد البيانات&nbsp; ، بالاضافة الى اللينكس والشبكات، و يمنحك تحميل الكتب بصيغة PDF او استعراضها وقراءتها على الموقع.<br /> <br /> <h2><a href="https://itbookshub.com/" rel="nofollow" target="_blank">itbokshub.com</a></h2> يعتبر مكتبة ضخمة تشمل مجموعة كبيرة من الكتب في عدة لغات برمجة وقواعد البيانات ،تصميم وتطوير مواقع الويب ، ايضا برمجة تطبيقات الموبايل ،الخوارزميات والذكاء الاصطناعي والجرافيكس ، بالاضافة الى اللينكس والشبكات ، وكل مايخص التقنية وامن المعلومات.<br /> <br /> <blockquote> <p>اقرأ ايضا: </p> <p><a href="https://www.codexait.com/2017/01/open-source-codes-and-projects.html" target="_blank"> 7 مواقع للحصول على اكواد ومشاريع مفتوحة المصدر في البرمجة</a></p> <p><a href="https://www.codexait.com/2021/12/web-design-template-free-download.html">افضل 10 مصادر لتحميل قوالب و صفحات مواقع (HTML+CSS+JS) جاهزة مجانا</a></p> </blockquote> <br /> كانت هذه مجموعة من المواقع المميزة التي تقدم مجموعة هائلة من <b>الكتب المجانية للتحميل في البرمجة وتقنية المعلومات</b> ، واذا كانت هناك مواقع اخرى استفدت منها شاركها معنا في التعليق اسفله، دمتم في رعاية الله وحفظه!</div> </content><link rel='replies' type='application/atom+xml' href='https://www.codexait.com/feeds/1000544039377417440/comments/default' title='تعليقات الرسالة'/><link rel='replies' type='text/html' href='https://www.codexait.com/2017/01/free-programming-books.html#comment-form' title='4 تعليقات'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/1000544039377417440'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/1000544039377417440'/><link rel='alternate' type='text/html' href='https://www.codexait.com/2017/01/free-programming-books.html' title='افضل المواقع لتحميل الكتب المجانية في البرمجة وتقنية المعلومات'/><author><name>Codex AIT</name><uri>http://www.blogger.com/profile/10277402041090003956</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFcTjVsB95C1gFAE3krg39Hdh7dmMu6QS9pXd1I3ZHOizXUXoYGUk0pFDKacxWx32H5Ni7YSdej17qiBuZnPprWuCrcLa8iorQpO_jvBm0sOqvhy2vjicX14KpOXIWOQ/s220/Codexait+Logo+2021+%284%29+-+Copy+%281%29.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHgkeW8lVpCbpJaFc6QZSZqf2wWK7vD5KEeo4fqqycKXUT7idxlyFMInqBgmZ-vRhBawLRjYG7l3PYOyJAggmLed2GzaNlQwmgI1tU_ETctDB5bgUxPTgFDCt1loVNrYQUnN7PQ3anrn0/s72-w640-h391-c/itbooks.jpg" height="72" width="72"/><thr:total>4</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1421699815441362866.post-232985622742063260</id><published>2017-01-12T02:10:00.119+03:00</published><updated>2024-07-29T04:57:35.788+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="free-codes"/><category scheme="http://www.blogger.com/atom/ns#" term="open-source-projects"/><category scheme="http://www.blogger.com/atom/ns#" term="برمجة"/><category scheme="http://www.blogger.com/atom/ns#" term="مشاريع"/><title type='text'>افضل المواقع للحصول على اكواد مجانية ومشاريع برمجية مفتوحة المصدر</title><content type='html'><p class="separator" style="clear: both; text-align: center;"> <noscript> <img alt="افضل المواقع للحصول على اكواد ومشاريع مفتوحة المصدر في البرمجة" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQpjvYw4enI9rFTvIrZxdm7ntRYPOnsyjHYBlwKC2KQok1L6NXYoKuYTINay6a48mANT8XuIfTCGAON83pZReaLAs310-anbBkA2ER19j217EgKJd4tJCkZbyg3FDTL2yFXDH3K90MkDOoS6rApup8mmhT-tmSwLCXhEIt1sdcVC2nfzkwvTYQ1kq2n8I/s840-rw/free-codes-and-open-source-projects.webp' height="467" width="780"/> </noscript> <img alt="افضل المواقع للحصول على اكواد ومشاريع مفتوحة المصدر في البرمجة" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQpjvYw4enI9rFTvIrZxdm7ntRYPOnsyjHYBlwKC2KQok1L6NXYoKuYTINay6a48mANT8XuIfTCGAON83pZReaLAs310-anbBkA2ER19j217EgKJd4tJCkZbyg3FDTL2yFXDH3K90MkDOoS6rApup8mmhT-tmSwLCXhEIt1sdcVC2nfzkwvTYQ1kq2n8I/s840-rw/free-codes-and-open-source-projects.webp" height="467" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="780" /> </p> <p> من الاعتيادي كمبرمج ان تبحث عن اكواد ومشاريع مفتوحة المصدر لتستفيد منها في برمجة مشاريعك، او ان تتعلم منها أداء بعض المهام المتقدمة والتي لا تتواجد شروحات لها بشكل مباشر. </p> <p>وبالتأكيد انك قد حاولت البحث في محرك البحث جوجل عن مشاريع معينة او اكواد محددة ، وبنسبة كبيرة لن تجد ما تريده بالضبط ، ولكن لا تقلق هناك مصادر خاصة ستقدم لك العديد من <b> المشاريع والاكواد مفتوحة المصدر</b>، لتستفيد منها وتوظفها حسب احتياجاتك. </p> <p> في هذا المقال سنقدم لك مجموعة مميزة من المواقع التي توفر عنك الكثير من الوقت والجهد في البحث عن مشاريع واكواد مفتوحة المصدر. </p> <h2 style="text-align: right;">افضل المصادر للحصول على اكواد مجانية ومشاريع برمجية مفتوحة&nbsp;المصدر</h2> <h3 style="text-align: right;"><span style="color: maroon;"><span>Github</span></span></h3> <p class="separator" style="clear: both; text-align: center;"><img alt="موقع github للاكواد المجانية والمشاريع مفتوجة المصدر" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZKPNczGTiNf_DJQ7EyCZBXz_b5ZTVIo-7ioSqpp04EkFhuSVLclPCWwdTMVyvIz2_rnNEx06SOOToWcBYJIgtWbdYxzuUyH7Ms3-O3F_7SQluA3uyrvP2GwNHVirmWKBtXnkHn9oLgcI3XWB4PKqpN0pVPQ7HTWVg3Gr7dNlqGcNAmXzqqCc6mAroO_o/s840-rw/github.webp" height="420" width="860" /></p> <p> بالتأكيد ان موقع github ليس بالجديد عليك ، او قد سمعت به سابقا فهو موقع يتيح للمبرمجين والمطورين مشاركة مشاريعهم في الموقع <b>مفتوحة المصدر.</b> </p> <p>ويتواجد ملايين المطورين على هذا المجتمع ، حيث بإمكانك البحث في الموقع عن <b>مشاريع واكواد جاهزة</b> ، وبإمكانك تنزيلها او إضافة نسخة خاصة بك من أي مشروع على الموقع والتعديل عليها كما تريد.</p> <p>&nbsp;بالإضافة الى ذلك اذا كان لديك مشروع لامع ، يمكنك انشاء صفحة خاصة به بدومين فرعي من الموقع ، ومشاركته مع العالم ، والكثير الكثير.</p> <p>أيضا من الخدمات الرائعة الأخرى على الموقع كمحرر الاكواد لتحرير اكوادك مباشرة على الموقع ، وغيرها.</p> <p style="text-align: center;"><a class="button ln extL" href="https://github.com" rel="nofollow" target="_blank">github.com</a></p> <p><br /></p> <h3> <span style="color: maroon;">searchcode</span> </h3> <p class="separator" style="clear: both; text-align: center;"><img alt="موقع searchcode للاكواد المجانية والمشاريع مفتوجة المصدر" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyrCaaf2HBCGdCItcnfOBCl2I89obHTjo5yYoerMAO98F6mS_CLrflLppuxhlBDgMcTnmmTdsYkStFhp_Z2UPWqu3QIpgZbHYZGoFBBGq7wnh6HB4qusiDbjl5VINStsQa7YxcrBtJ_TNQzdNvsQzHPowA4biE6KKHAvHfUlHit1d10kF3Q0bCZF13Fc4/s840-rw/searchcode.webp" height="420" width="860" /></p> <p> هو عبارة عن محرك بحث عن <b>الأكواد البرمجية</b> في معظم لغات البرمجة ، حيث يحتوي على اكثر من 40 بليون سطر برمجي في 75 مليون مشروع ، لذا فهو كنز ضخم لكل مبرمج. </p> <p>&nbsp;فهو يوفر عنك الجهد في البحث عن اكواد والتنقل بين عدة مواقع ، يساعدك الموقع في البحث عن امثلة واقعية للدوال وواجهات برمجة التطبيقات والمكتبات لأكثر من 243 لغة برمجة، من خلال اكثر من 10 مصادر للأكواد المجانية،</p> <p style="text-align: center;"> <a class="button ln extL" href="https://searchcode.com" rel="nofollow" target="_blank">searchcode.com</a> </p> <p style="text-align: center;"><br /></p> <h3><span style="color: maroon;">Open Hub</span></h3> <p class="separator" style="clear: both; text-align: center;"><img alt="موقع openhub للاكواد المجانية والمشاريع مفتوجة المصدر" height="420" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3vC0CuGT5ZlIoPkmpYswqsdtewNXXbDDexbDgiX5cVbagIges9-YYpOuMG2PVrtjHJ0XgSZKP1n56FF0k5mv6tBGMGBQBPmtoYh2SU2UehQHxE-hgioaKQo0Ih79d9CN33FXDVD_PwZXp9hv8BLOuiD40nup0Tv-_L5HY1E1mCtttMygvnU4SuSRlAgo/s840-rw/openhub.webp" width="860" /></p> <p> هو ايضا محرك بحث خاص بالأكواد <b>البرمجية</b> ويحتوي على كمية ضخمة من&nbsp;<b>الأكواد&nbsp;</b>مفتوحة المصدر ما يعادل 35 بليون سطر برمجي. </p> <p style="text-align: center;"><a class="button ln extL" href="https://www.openhub.net" rel="nofollow" target="_blank">www.openhub.net</a></p> <p><br /></p> <p> </p><h3 style="text-align: right;"><span style="color: maroon;"><span>CodeProject</span></span></h3> <p class="separator" style="clear: both; text-align: center;"><img alt="موقع codeproject للاكواد المجانية والمشاريع مفتوجة المصدر" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeOxijr29v3UfKyI4Y5XFOMArYLnp8_kf8ZIvehkz1CrB9AUzsO39Gl40h6T2jPlRGNn6A8sLIuV1YxYnMHAwS5n1kHoVrQNGzU6HCcZqtXPshg16NFNltzmlqXbPHbkWnjh8kc0mCvQkxNsHm4_5aBIY9Z5JpvyKNrKlusmLrr3x3TxiO3uMMmFv0emQ/s840-rw/codeproject.webp" height="420" width="840" /></p> <p> من افضل المواقع التي تقدم <b>اكواد وحلول متكاملة&nbsp;في عدة لغات برمجة</b> ، فهو عبارة عن مجتمع تابع لشركة ميكروسوفت للمبرمجين لهذا معظم حلول لغات الدوت نت DotNet ستجدها في هذا الموقع، حيث يحتوي على ملايين المطورين من جميع انحاء العالم. </p> <p>يتميز أيضا بكونه مرجع للأسئلة ، أيضا يحتوي على مقالات لحل معظم المشاكل البرمجية يتضمن في هذه المقالة مثال تطبيقي لتحميله مع السورس كود.</p> <p>يمكنك التسجيل في الموقع وتحميل <b>مشاريع مجانية Open Source</b>&nbsp;، أيضا يمكنك الاستفادة من خبرات المطورين في المجتمع بطرح استفساراتك.</p> <p style="text-align: center;"><a class="button ln extL" href="https://www.codeproject.com" rel="nofollow" target="_blank">www.codeproject.com</a></p> <p><br /></p> <h3 style="text-align: right;"><span style="color: maroon;">CodePlex Archive</span></h3> <p class="separator" style="clear: both; text-align: center;"><img alt="موقع codeplex archive للاكواد المجانية والمشاريع مفتوجة المصدر" class="lazy" data-original-height="915" data-original-width="1893" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyghm87bjCAgfxDV0Qj7DZIUJYrGH2XVECaaam-evRViGUkzBn-iRwvK7qpW9hM1yeNiu5pHVkcpYM2lx1U6p83Klyh9e1_JJcSGFk5uz7hnh7zX9ooOn725wvr2XNPz-Ip2filFQw0nSYhine1NOy2iG8tSBH0vYcT1Aomw8BxWVWmAaMyu1J05JRVcc/s840-rw/codeplex.webp" height="420" width="860" /></p> <p>أرشيف كود بلكس (CodePlex) هو عبارة عن أرشيف ضخم لمشاريع منصة Code Plex التي انشأتها شركة ميكروسوفت في 2006 بغرض مشاركة مشاريعك كمشاريع مفتوحة المصدر والقدرة على العمل في مشاريع الآخرين. </p> <p>ولكن في العام 2017 تم اغلاق CodePlex رسميا من شركة ميكروسوفت بعد استحواذها على موقع Github، وتم نقل جميع المشاريع الى أرشيف CodePlex.</p> <p>وهو موقع ضخم يحتوي على مشاريع ضخمة مجانية ومفتوحة المصدر من لحظة انشاء CodePlex حتى 2017 وقت إغلاقه.</p> <p>يعتبر الموقع مصدر ضخم للأكواد البرمجية والمشاريع المجانية، وقيمة تاريخية لجميع المطورين.</p> <p>يتيح لك الموقع فقط الوصول للمشاريع ومستنداتها وقراءتها وتحميلها، من غير التعديل عليها او انشاء مشاريع جديدة.</p> <p>حيث ان الموقع يعتبر مخزن للمشاريع والأكواد البرمجية على مدى 11 عاماً لمختلف اللغات البرمجية. يمكنك تصفح الموقع من خلال البحث عن اسم المشروع او وصفة او الوسوم الخاصة به كاسم لغة البرمجة.</p> <p style="text-align: center;"><a class="button ln extL" href="https://codeplexarchive.org" rel="nofollow" target="_blank">codeplexarchive.org</a></p> <p><br /></p> <hr /> <blockquote> اقرأ أيضا: <a href="https://www.codexait.com/2016/08/learn-android-development.html">دورات ومصادر تعلم برمجة تطبيقات الاندرويد من الصفر للإحتراف</a> </blockquote> <p><br /></p> <h3 style="text-align: right;"><span style="color: maroon;"><span>CodePen</span></span></h3> <p class="separator" style="clear: both; text-align: center;"><img alt="موقع codepen للاكواد المجانية والمشاريع مفتوجة المصدر" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNTXvGR_oRHoYVum4naN7KJoPyhB7iIPHSr2Xyb0KHgafIdOZocSBGMSwgEnPanfgNWMdebjcqZQ4pntCeOdjNCGyuHl9lDo_6yeB2NREEzTunygassqSOhEw6_0xBSf8Bl_qUbjC-SUKB7r2L1IqWId5B4jYB3Tlxl0NwYenSJIVugJodH8ETu_cU92k/s840-rw/codepen.webp" height="420" width="860" /></p> <p> هو عبارة عن موقع شبيه بشبكة تواصل ، خاص بمصممي مواقع الويب ، اذا كنت مصمم مواقع فهذا الموقع هو مبتغاك ، حيث يمكنك من <b>مشاركة اكوادك</b> ومعاينتها ونشرها في الموقع والاستفادة من تصاميم الأخرين. </p> <p>يحتوي الموقع على كمية ضخمة من المصممين ، لهذا ستجد أفكار مذهلة وجديدة في تصميم المواقع ، وستستفيد كثير جدا من خلال انضمامك لهذا الموقع الرائع ، أيضا يحتوي على محرر اكواد Real Time Editor رائع يمكنك من تحرير اكواد <em class="emcode">HTML/CSS/JS</em> ، وعرض النتيجة بشكل مباشر. </p> <p>ايضا يمكنك ان تحصل على تقييم وانتقادات بناءة على مشروعك لتحسين مهاراتك ،وللمزيد يمكن الاطلاع على <a href="https://www.codexait.com/2021/12/web-design-template-free-download.html">افضل المواقع لتحميل قوالب وتصاميم مواقع html5 و css3 جاهزة مجانا</a> ، قوالب مصممة بالبوتستراب، ولوحات تحكم احترافية لإدارة المواقع والكثير غير ذلك.</p> <p style="text-align: center;"><a class="button ln extL" href="https://CodePen.io" rel="nofollow" target="_blank">CodePen.io</a></p> <p style="text-align: center;"><br /></p> <h3><span style="color: maroon;">AwesomeOpenSource</span></h3> <p class="separator" style="clear: both; text-align: center;"><img alt="موقع awesomeopensource للاكواد المجانية والمشاريع مفتوجة المصدر" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1AabEfFI1oZVwsFMhRuU8oS1HQSbwS1POeza3FQOi1MgBhfYrz6_v9FRupMQgUiLcnaWvU4Oyzjgt6kAy7bvJb72ciF6AEAXcGH4lVkUdyyGgsED5nHA9GKz-EolY42Y0jojJTiJbWlmcFZnCT05joMBN-1w6WbEtNnszMFoC4VoR_P-tcPx9Jryo4Gc/s840-rw/awesome-open-source.webp" height="420" width="860" /></p> <p>هو منصة تجمع المشاريع مفتوحة المصدر من مختلف المجالات. يوفر الموقع قوائم منسقة بعناية لمشاريع برمجية مفتوحة المصدر يمكن للمطورين والمهتمين بالمساهمة فيها أو استخدامها في مشاريعهم الخاصة. </p> <p>يتم تنظيم المشاريع بناءً على الفئات ولغات البرمجة والتقنيات المستخدمة، مما يسهل على المستخدمين العثور على المشاريع التي تناسب احتياجاتهم واهتماماتهم.<br /> ويحتوي الموقع على كمية ضخمة من <b>الاكواد والمشاريع الجاهزة</b>، التي بوسعك تنزيلها والاستفادة منها. </p> <p style="text-align: center;"><a class="button ln extL" href=" https://awesomeopensource.com/" rel="nofollow" target="_blank">awesomeopensource.com</a></p> <p><br /></p> <blockquote style="text-align: right;">اقرأ أيضا:<br /> <a href="https://www.codexait.com/2016/03/code-compilers-online.html" target="_blank">نفذ اكوادك على الانترنت بدون تثبيت أي تطبيقات</a><br /> <a href="https://www.codexait.com/2017/01/free-programming-books.html" target="_blank">افضل المواقع لتحميل الكتب المجانية في البرمجة وتقنية المعلومات</a> </blockquote> <hr /> <h3 style="text-align: right;"><span style="color: #990000;">Stack Overflow</span></h3> <p class="separator" style="clear: both; text-align: center;"><img alt="موقع stackoverflow للاكواد المجانية والمشاريع مفتوجة المصدر" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjobBpq3WwqNg_cH6bOg7Up1sn_Ve695E-ENl_2yj4LWrMzLcy8vsiVvRFCOVdfDXnHF3Gwfh6-u0b8WGOVY08PBX-_x8tD8hRqiJn7V0T8DNSXRfQummxbbekic675J1FefMgSoubAjO0/s840-rw/stackoverflow.webp" height="420" width="860" /></p> <p> يعتبر الموقع الأول الذي يلجأ اليه كافة المبرمجين عند مواجهة أي مشكلة برمجية ، لاسيما مطوري تطبيقات سطح المكتب ولكن أيضا مطوري الويب وتطبيقات الهاتف المحمول وبكافة اللغات البرمجية ... </p> <p>الموقع مجاني بشكل كامل أنشئ حسابك شارك مشاكلك لحلها ، او ابحث عن مشكلتك البرمجية التي تواجهها في الموقع فبالتأكيد ستجد لها الحل المناسب ، الموقع سهل الاستخدام ومهيكل بشكل يسهل استخدامه.</p> <p style="text-align: center;"><a class="button ln extL" href="http://stackoverflow.com" rel="nofollow" target="_blank">stackoverflow.com</a></p> <p style="text-align: center;"><br /></p> <h3 style="text-align: right;"><span style="color: #660000;">SourceForge</span></h3> <p class="separator" style="clear: both; text-align: center;"><img alt="موقع sourceforge للاكواد المجانية والمشاريع مفتوجة المصدر" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZalMfB0mB8Gj9cEPTY7jNYNQmlsB7aMxpZ2WqFvaOAlFfBg2x5UXB43GftK1zsIegddTzHcW9G0GdNh9TOrkt1BnR92iIqNl7_M3kyoxqTxouPrNoFT3f7tY8wHhOZrxydZCcbjeEjhwirL3i-w-FvqzUcPLzIVnun5WJx0ImCYP-2zhvm7ix-5Q-9ho/s840-rw/sourceforge.webp" height="420" width="860" /></p> <p>موقع يدعم ويساعد المطورين على جعل مشاريعهم مفتوحة المصدر مشاريع ناجحة ومتداولة ، يحتوي الموقع على اكثر من 502.000 مشروع مفتوح المصدر ومجاني للتحميل من قبل 2.1 مليون مطور.</p> <p style="text-align: center;"><a class="button ln extL" href="https://sourceforge.net" rel="nofollow" target="_blank">sourceforge.net</a></p> <h3 style="text-align: right;"><span style="color: #990000;">Source Code &amp; Projects</span></h3> <p class="separator" style="clear: both; text-align: center;"><img alt="موقع source code &amp; projects للاكواد المجانية والمشاريع مفتوجة المصدر" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFtQaS6-rB9mkxLFiKlj30NNoWE5Zec05sFMEFGzz3GJtBi7DRScly4An9H3x1SbtnUV_G8CjsUNqUkXuzsk8vWr8vBrdY_I4vuawOXMS-fMXrQ7d8VDSXUnmtYuExYM6xH3ssOaHQFM_XCjs5R3KQwd9nqJlNqnHImorOwvP7D4ygjYJqQm86Q5OutSc/s840-rw/source-code-_-projects.webp" height="500" width="860" /></p> <p>يحتوي موقع&nbsp;Source Code &amp; Projects كمية مشاريع ضخمة مع السورس كود ، يعتبر هذا الموقع مفيد جداً للطلاب والمطورين، كما يحتوي الموقع على شرح كل مشروع وكيفية تنفيذه وتشغيله وهيكلته وهذا مفيد جدأ للطلاب والمبتدئين.</p><p>يقدم الموقع مشاريع مكتوبة بعدة لغات برمجة مثل C, C++, C#,PHP, JavaScript, Python ، ابتداءاً من المشاريع البسيطة الى المعقدة، مرتبة ومنظمة وكلها مفيدة.</p><p>يقدم الموقع تجربة مستخدم رائعة لسهولة استخدام الموقع وتحميل المشاريع بسهوله لتعديلها وتشغيلها بسهولة على جهازك، كما انه يحث على مشاركة المشاريع في الموقع لاستفادة الجميع.</p> <p style="text-align: center;"><a class="button ln extL" href="https://code-projects.org/" rel="nofollow" target="_blank">code-projects.org</a></p> <h2 style="text-align: right;">كيف استفيد من الاكواد المجانية والمشاريع البرمجية مفتوحة المصدر</h2> <p>في تعلم البرمجة تعتبر الأكواد المجانية مفتوحة المصدر من افضل المصادر للتعمق في البرمجة وذلك لأن المشاريع المفتوحة المصدر تعطيك حلول للمشاكل البرمجية المعقدة، وتطور خبراتك، بالإضافة الى التعلم المستمر ومواكبة التقنيات الحديثة، وفي هذه النقاط سنتكلم عن <b>فوائد الأكواد المجانية والمشاريع مفتوحة المصدر في البرمجة</b>:</p> <h3 style="text-align: right;">تعلم افضل طريقة لأداء المهام البرمجية</h3> <p>بما ان <b>اكواد البرمجيات مفتوحة المصدر</b> مؤسسة على مجموعة كبيرة من الخبراء، وبنفس الوقت موثقة، فالاطلاع على اكواد المشاريع يعلمك افضل طريقة لأداء المهام البرمجية (Best Practice)، لتحسين أداء البرمجيات والقدرة على بناء مشاريع ضخمة بنفسك،&nbsp; وهذا ما يضعك بمرحلة متقدمة في البرمجة.</p> <h3 style="text-align: right;">إيجاد حلول للمشاكل البرمجية</h3> <p>تمكنك اكواد المشاريع مفتوحة المصدر من القدرة على إيجاد حلول للمشاكل البرمجية (|Problem Solving)،حلول منطقية على أسس متينة، وهذا هو الغرض الأساسي من البرمجة.</p> <h3 style="text-align: right;">بناء مشاريع على الواقع</h3> <p>المشاريع البرمجية مفتوحة المصدر تعلمك كيفية بناء مشاريع على ارض الواقع، تعلمك هيكلية بناء المشاريع، تمنحك القدرة على البداية الصحيحة في هيكلة وتقسيم ملفاتك بطريقة صحيحة، لكي لا تتعقد عليك الأمور عندما يكبر مشروعك، ويسهل عليك تعديله وتطويره.</p> <h3 style="text-align: right;">الاستفادة من الخبراء وتوثيق المشاريع&nbsp;</h3> <p>بما أن المشاريع مفتوحة المصدر تحتوي على توثيق دقيق، يمكنك الاطلاع عليها ومعرفة المزيد، ايضً يمكنك من توثيق مشاريعك، بالإضافة الى ذلك يمكنك من سؤال الخبراء المطورين للمشاريع مفتوحة المصدر.</p> <h3 style="text-align: right;">تطوير سيرتك المهنية</h3> <p>عند العمل في مشاريع مفتوحة المصدر، تعتبر هذه إضافة الى خبراتك البرمجية وسيرتك المهنية، كثير من الشركات تركز على الخبرات اكثر من الشهادات.</p> <h2 style="text-align: right;">الخلاصة</h2> <p> كانت هذه مجموعة مميزة من المواقع التي تقدم <b>اكواد ومشاريع جاهزة ومجانية</b> في جميع مجالات البرمجة، التي ستفديك كمطور ومصمم مواقع ، او كمبرمج في مختلف المجالات البرمجية، وكافة لغات البرمجة، </p> <p>يمكنك الاستفادة من الاكواد المجانية والمشاريع مفتوحة المصدر في اتقان البرمجة على أسس متينة وأداء المهام البرمجية بأفضل الطرق، وإيجاد افضل الحلول البرمجية وانشاء مشاريع ضخمة على ارض الواقع والاستفادة من الخبراء، ويحسب كل هذا في رصيد سيرتك المهنية.</p> <p>أتمنى اني وفقت بطرح هذه المواقع ، واذا كانت هناك مواقع أخرى استفدت منها لا تتردد بمشاركتها في تعليق ليستفيد منها الجميع، دمتم في رعاية الله وحفظه!</p><p></p></content><link rel='replies' type='application/atom+xml' href='https://www.codexait.com/feeds/232985622742063260/comments/default' title='تعليقات الرسالة'/><link rel='replies' type='text/html' href='https://www.codexait.com/2017/01/open-source-codes-and-projects.html#comment-form' title='5 تعليقات'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/232985622742063260'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/232985622742063260'/><link rel='alternate' type='text/html' href='https://www.codexait.com/2017/01/open-source-codes-and-projects.html' title='افضل المواقع للحصول على اكواد مجانية ومشاريع برمجية مفتوحة المصدر'/><author><name>Codex AIT</name><uri>http://www.blogger.com/profile/10277402041090003956</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFcTjVsB95C1gFAE3krg39Hdh7dmMu6QS9pXd1I3ZHOizXUXoYGUk0pFDKacxWx32H5Ni7YSdej17qiBuZnPprWuCrcLa8iorQpO_jvBm0sOqvhy2vjicX14KpOXIWOQ/s220/Codexait+Logo+2021+%284%29+-+Copy+%281%29.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQpjvYw4enI9rFTvIrZxdm7ntRYPOnsyjHYBlwKC2KQok1L6NXYoKuYTINay6a48mANT8XuIfTCGAON83pZReaLAs310-anbBkA2ER19j217EgKJd4tJCkZbyg3FDTL2yFXDH3K90MkDOoS6rApup8mmhT-tmSwLCXhEIt1sdcVC2nfzkwvTYQ1kq2n8I/s72-c-rw/free-codes-and-open-source-projects.webp" height="72" width="72"/><thr:total>5</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1421699815441362866.post-7313778077025714955</id><published>2016-12-20T02:10:00.005+03:00</published><updated>2021-12-27T03:43:51.467+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="إضافات بلوجر"/><category scheme="http://www.blogger.com/atom/ns#" term="بلوجر"/><title type='text'>اضافة زر الصعود الى اعلى لمدونات بلوجر مع امكانية التخصيص</title><content type='html'><div dir="rtl" style="text-align: right;" trbidi="on"> <div dir="rtl" style="text-align: right;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3nAdFVnV3g0Cd_pcWRrFG1ShOVtWT0lqze3W-Xo0yAFUy1rjVjntDFaE0FDU4jTZb-LpMcCStYCkLUsC8KjA64bxkxk2q5QBXIExujB1ZuEjbcOE_97CwjlAGrvJLGDrJ3NaMSqVMnVE/s1600-rw/top+scroll.png" style="margin-left: 1em; margin-right: 1em;"><img alt="اضافة زر الصعود الى اعلى لمدونات بلوجر" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3nAdFVnV3g0Cd_pcWRrFG1ShOVtWT0lqze3W-Xo0yAFUy1rjVjntDFaE0FDU4jTZb-LpMcCStYCkLUsC8KjA64bxkxk2q5QBXIExujB1ZuEjbcOE_97CwjlAGrvJLGDrJ3NaMSqVMnVE/s640-rw/top+scroll.png" title="اضافة زر الصعود الى اعلى لمدونات بلوجر" width="640" /></a></div> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> </div> </div> <b>اضافة زر الصعود الى اعلى</b> من الاضافات الثانوية <b>لمدونات بلوجر</b> ، ولكن تعتبر ذات اهمية كبيرة وخاصة اذا كنت تنشر محتوى طويل او اذا كان لديك تعليقات كثيرة.</div><div dir="rtl" style="text-align: right;" trbidi="on">&nbsp;فهي من الاضافات التي ترفع تجربة المستخدم ، لهذا اقدم لكم اليوم اضافة زر <b>الصعود </b>الى اعلى لمدونات بلوجر ، بطريقة سهلة جدا مع امكانية التخصيص لما يتناسب مع لون مدونتك.</div><div dir="rtl" style="text-align: right;" trbidi="on"><h2 style="text-align: right;">تركيب اضافة زر الصعود على قالب بلوجر كمايلي</h2> 1 - ابحث عن الكود <span class="code">]]&gt;&lt;/b:skin&gt;</span> في محرر HTML من لوحة تحكم بلوجر واضف الكود التالي قبله :<code> </code><br /> <pre><code>#scroll-top{ overflow: hidden; position: fixed; z-index: 9999; right: 30px; bottom: 15px; width: 40px; height: 40px; color: #EEE; background-color: #<span style="color: red;">059fc5</span>; font-size: 20px; text-indent: 0px; cursor: pointer; text-align: center; border-radius: 50% !important; transition: all 0.5s ease 0s; } #scroll-top i{ height:40px; line-height: 36px; }</code></pre> <br /> <br /> للتعديل غير لون الخلفية المحدد بالون الأحمر مع مايتناسب مع لون مدونتك&nbsp; :<br /> <br /> 2&nbsp; - ابحث عن الكود <span class="code">&lt;/body&gt;</span> واضف قبله الكود التالي :<br /> <pre><code>&lt;div id="scroll-top" style="display:none;"&gt; &lt;i class="fa fa-angle-up"&gt;&lt;/i&gt; &lt;/div&gt; <span style="color: red;">&lt;script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/&gt;</span> &lt;script type="text/javascript"&gt; /*&lt;![CDATA[*/ var scrollbtn = $("#scroll-top"); $(window).scroll(function(){ $(this).scrollTop() &gt;= 700 ? scrollbtn.show(): scrollbtn.hide(); }); scrollbtn.click(function() { $("html,body").animate({scrollTop : 0},600 ); }); //]]&gt; &lt;/script&gt;</code></pre> بالنسبة لمكتبة jquery المحددة باللون الأحمر اذا كانت موجودة سابقا في مدونتك ، احذفها ، ايضا خط font Awesome يجب ان يتواجد على مدونتك مالم اضف هذا الكود قبل الوسم التالي <span class="code">&lt;/head&gt;</span>:<br /> <pre><code>&lt;link href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/&gt; </code></pre> <br /> وبهذا تكون اضفت <b>زر الصعود الى اعلى على مدونتك</b> بنجاح ، واذا واجهت اي مشكلة في التركيب لاتتردد بتركها في تعليق ، دمتم في رعاية الله وحفظه!</div> </content><link rel='replies' type='application/atom+xml' href='https://www.codexait.com/feeds/7313778077025714955/comments/default' title='تعليقات الرسالة'/><link rel='replies' type='text/html' href='https://www.codexait.com/2016/12/button-top-scroll-blogger.html#comment-form' title='1 تعليقات'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/7313778077025714955'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/7313778077025714955'/><link rel='alternate' type='text/html' href='https://www.codexait.com/2016/12/button-top-scroll-blogger.html' title='اضافة زر الصعود الى اعلى لمدونات بلوجر مع امكانية التخصيص'/><author><name>Codex AIT</name><uri>http://www.blogger.com/profile/10277402041090003956</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFcTjVsB95C1gFAE3krg39Hdh7dmMu6QS9pXd1I3ZHOizXUXoYGUk0pFDKacxWx32H5Ni7YSdej17qiBuZnPprWuCrcLa8iorQpO_jvBm0sOqvhy2vjicX14KpOXIWOQ/s220/Codexait+Logo+2021+%284%29+-+Copy+%281%29.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3nAdFVnV3g0Cd_pcWRrFG1ShOVtWT0lqze3W-Xo0yAFUy1rjVjntDFaE0FDU4jTZb-LpMcCStYCkLUsC8KjA64bxkxk2q5QBXIExujB1ZuEjbcOE_97CwjlAGrvJLGDrJ3NaMSqVMnVE/s72-c-rw/top+scroll.png" height="72" width="72"/><thr:total>1</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1421699815441362866.post-2175706435583100044</id><published>2016-12-18T02:31:00.014+03:00</published><updated>2024-08-16T20:44:49.751+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="css"/><category scheme="http://www.blogger.com/atom/ns#" term="إضافات"/><category scheme="http://www.blogger.com/atom/ns#" term="تصميم مواقع"/><title type='text'>افضل 5 مكتبات Animation لعمل تأثيرات رائعة في مواقع الويب</title><content type='html'> <div class="separator" style="clear: both; text-align: center;"><img alt="افضل 5 مكتبات Animation لعمل تأثيرات رائعة في مواقع الويب" border="0" data-original-height="177" data-original-width="284" height="399" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKI-oMl4m-_043Eni41c7iOqplgT59TFzAu0SmJ1VGSc2mvISMRkMkQUqduhnRAJg02WdrcOyb7wVhGwFPAoEEdD0Bq2z5ZTqK9PM5CzxPtNjK5K_pC6HfHII5DNS8ZziPKoqwuZjolqM/s640-rw/Css+Animation+Library.jpg" title="افضل 5 مكتبات Animation لعمل تأثيرات رائعة في مواقع الويب" width="640" /> </div> <br /> <p> <b>التأثيرات الحركية او الــ Animation</b> يعتبر من التقنيات الحديثة في عالم الويب ، التي تعتمد على <b>CSS3 </b>، وبهذه التقنية تجعل الموقع اكثر تفاعلا واشراقا لدى الزائر. </p> <p>حيث كان سابقا يتم الاعتماد على ادوب فلاش لصناعة التأثيرات والحركات ، ولكن مع ظهور تقنية CSS3 مكنت مصممي المواقع من عمل تأثيرات رائعة، مع توفير الجهد والمصادر.</p> <p>ايضا توفرت العديد من مكتبات الـ Animation المجانية التي يمكن استخدامها في تصميم مواقع الويب لعمل العديد من التأثيرات الجميلة وهذه مجموعة مميزة من المكتبات الشهيرة.</p><p><br /></p> <h2 style="text-align: right;"><b>افضل مكتبات الـ Animation المبنية بواسطة CSS3</b></h2> <h3 style="text-align: right;"><a href="https://daneden.github.io/animate.css/" rel="nofollow" target="_blank">Animate.css</a></h3> <p> &nbsp; Animate.css واحدة من <b>افضل مكتبات الـ Animation المبنية بواسطة CSS3</b> والأكثر استخداما، ايضا تحتوي على عدد كبير من التأثيرات الحركي.</p><p> وتقدم افضل اداء للمستخدم وخاصة مع الهاتف مع امكانية ضغط اكوادها التي تبلغ 55 كيلو بت ، وتعتبر سهلة الاستخدام مع امكانية استدعاء كلاسات الـ CSS بواسطة الجي كويري.<br /></p> <br /> <h3 style="text-align: right;"><a href="https://ianlunn.github.io/Hover/" rel="nofollow" target="_blank">Hover.css</a></h3> <p> مجموعة ضخمة من <b>اكواد CSS3 Animation</b> لعمل تأثيرات ثنائية الأبعاد عند مرور الماوس على الأزرار والروابط والصور والعديد من العناصر ، وهي مكتبة مفتوحة المصدر ويمكن التعديل عليها.</p> <p>&nbsp;حيث توجد نسخة مع التوثيق الكامل بالتعليقات على كلاسات CSS3 ، يمكنك ايضا اخذ التأثيرات المناسبة لمشروعك في ملف مستقل لتوفير المصادر ، حيث حجمها 108 كيلو بت تقريبا ، وهي بحد ذاتها مكتبة متكاملة لعمل تأثيرات مذهلة.</p><br /> <blockquote> <b>اقرأايضا:</b> <a href="https://www.codexait.com/2024/08/html5-css3-landing-page-templates.html">افضل 20 قالب صفحة هبوط HTML5 و CSS3 مجانية لمواقع الويب</a> </blockquote> <br /> <h3 style="text-align: right;"><a href="https://www.minimamente.com/example/magic_animations/" rel="nofollow" target="_blank">Magic Animations</a></h3> <p> واحدة من اكثر مكتبات الـ Animation اذهالا ، حيث تتميز بتأثيرات فريدة ورائعة جدا ، وتتميز بحجمها الصغير&nbsp; مقارنة بالمكتبات السابقة ، الذي يبلغ 36 كيلو بت.</p> <p>وبنفس الوقت تعتمد على CSS3 مع امكانية استدعاء التأثيرات عند حدث ما بواسطة الجي كويري.<br /> </p> <br /> <h3 style="text-align: right;"><a href="https://github.com/vzaccaria/DynCSS" rel="nofollow" target="_blank">DynCSS</a></h3> <p> مكتبة بسيطة وصغيرة الحجم -اقل من 20 كيلو بت - لعمل Animation وتأثيرات حركية خاصة بها ، وتعتبر من الأدوات الحديثة ، ولكن تحتاج هذه الأداة الى مكتبة&nbsp; <a href="https://www.codexait.com/2016/06/best-jquery-arabic-course.html">jquery</a>.</p><br /> <br /> <h3 style="text-align: right;"><a href="http://bouncejs.com/" rel="nofollow" target="_blank">Bounce.js</a></h3> <p> مكتبة جافا سكريبت لعمل تأثيرات CSS3 Animation ، وتحتوي على 10 تأثيرات معدة مسبقا ، ايضا صغيرة الحجم 16 كيلو بت.<br /> </p> <br /> <blockquote> اقرأ ايضا: <br /> <a href="https://www.codexait.com/2016/12/wysiwyg-html-editors.html" target="_blank"> افضل 5 اضافات محرر نصوص WYSIWYG لمواقع الويب </a><br /> <a href="https://www.codexait.com/2016/12/top-5-slider-show.html" target="_blank"> اشهر 5 اضافات سلايد شو لمواقع الويب </a> </blockquote> <br /> <p> كانت هذه مجموعة مميزة من <b>المكتبات </b>لعمل<b> تأثيرات حركية</b> متنوعة<b> CSS3 Animation</b> على مواقع الويب.</p><p>واذا كانت هناك مكتبة او مكتبات اخرى تستخدمها شاركها معنا في تعليق ، دمتم في رعاية الله وحفظه.</p> </content><link rel='replies' type='application/atom+xml' href='https://www.codexait.com/feeds/2175706435583100044/comments/default' title='تعليقات الرسالة'/><link rel='replies' type='text/html' href='https://www.codexait.com/2016/12/css3-animation-libraries.html#comment-form' title='4 تعليقات'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/2175706435583100044'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/2175706435583100044'/><link rel='alternate' type='text/html' href='https://www.codexait.com/2016/12/css3-animation-libraries.html' title='افضل 5 مكتبات Animation لعمل تأثيرات رائعة في مواقع الويب'/><author><name>Codex AIT</name><uri>http://www.blogger.com/profile/10277402041090003956</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFcTjVsB95C1gFAE3krg39Hdh7dmMu6QS9pXd1I3ZHOizXUXoYGUk0pFDKacxWx32H5Ni7YSdej17qiBuZnPprWuCrcLa8iorQpO_jvBm0sOqvhy2vjicX14KpOXIWOQ/s220/Codexait+Logo+2021+%284%29+-+Copy+%281%29.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKI-oMl4m-_043Eni41c7iOqplgT59TFzAu0SmJ1VGSc2mvISMRkMkQUqduhnRAJg02WdrcOyb7wVhGwFPAoEEdD0Bq2z5ZTqK9PM5CzxPtNjK5K_pC6HfHII5DNS8ZziPKoqwuZjolqM/s72-c-rw/Css+Animation+Library.jpg" height="72" width="72"/><thr:total>4</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1421699815441362866.post-317730648551206568</id><published>2016-12-16T04:11:00.009+03:00</published><updated>2022-04-28T09:22:19.340+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="إضافات بلوجر"/><category scheme="http://www.blogger.com/atom/ns#" term="بلوجر"/><title type='text'>اضافة مواضيع ذات صلة بثلاث طرق احترافية لمدونات بلوجر</title><content type='html'><div dir="rtl" style="text-align: right;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaRUijHgfsQmy0TKA7ZHbfGRdBUD9If_SgmWlb7jggwlgZ3U8DBew92u1apTUdWyp9HrBm4rFxCtiB-I7Tn0o7Gb3MzbOQSWPU-NXsMFfdU-rvKLTIVhHQ8NCBCqPSJRKuMZcR8Pl08SM/s640-rw/relatedposts.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="اضافة مواضيع ذات صلة بثلاث طرق احترافية لمدونات بلوجر" border="0" data-original-height="400" data-original-width="640" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaRUijHgfsQmy0TKA7ZHbfGRdBUD9If_SgmWlb7jggwlgZ3U8DBew92u1apTUdWyp9HrBm4rFxCtiB-I7Tn0o7Gb3MzbOQSWPU-NXsMFfdU-rvKLTIVhHQ8NCBCqPSJRKuMZcR8Pl08SM/s640-rw/relatedposts.jpg" title="اضافة مواضيع ذات صلة بثلاث طرق احترافية لمدونات بلوجر" width="400" /></a></div><br />من اهم الإضافات التي تعتمد على تغذية RSS هي <b>إضافة مواضيع ذات صلة</b> التي تعتبر من اهم إضافات بلوجر لجعل الزائر يتصفح ويقرأ مقالاتك التي تتحدث حول نفس السياق او الموضوع الذي دخل لقراءته، لهذا سنتكلم اليوم عن ثلاث طرق احترافية لإضافة مواضيع ذات صلة الى مدونتك.</div><div dir="rtl" style="text-align: right;" trbidi="on"> <br /> <br /> <h2 class="r" style="text-align: right;"> <span style="color: #660000;"> الطريقة الأولى :إضافة مواضيع ذات صلة على شكل سلايد شو </span></h2> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPeGcRcdqWgMh62tPGZ_xI7XPwqevXsTO_vh67GiYezuc2lyCxI2RJGY7wDzejUZzvxycjgEsn6MvVjGCgHNZke7wqrR-GQkUFZxb5x0mOFymXP7AUUi4guJz3py09poXogcoFDGWKTdM/s645-rw/slider+related+post+for+blogger.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="slider related post for blogger" border="0" data-original-height="189" data-original-width="645" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPeGcRcdqWgMh62tPGZ_xI7XPwqevXsTO_vh67GiYezuc2lyCxI2RJGY7wDzejUZzvxycjgEsn6MvVjGCgHNZke7wqrR-GQkUFZxb5x0mOFymXP7AUUi4guJz3py09poXogcoFDGWKTdM/s16000-rw/slider+related+post+for+blogger.jpg" title="slider related post for blogger" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div> إضافة مواضيع ذات صلة على شكل سلايدر شو او صور متحركة تعتبر من الإضافات الاحترافية لمدونات بلوجر . للمعاينة :<br /> <a class="fdownload demo" href="http://devwebtechno.blogspot.com/2016/11/blog-post_76.html" rel="nofollow" target="_blank"> معاينة </a> <br /> <div style="text-align: right;"><b> طريقة التركيب : </b></div> 1 – ابحث عن الكود <span class="code"> &lt;/head&gt; </span> في محرر HTML واضف الكود التالي قبله: <br /> <pre><code>&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt; &lt;style type="text/css"&gt; .owl-carousel .owl-wrapper:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0} .owl-carousel{display:none;position:relative;width:100%;-ms-touch-action:pan-y} .owl-carousel .owl-wrapper{display:none;position:relative;-webkit-transform:translate3d(0px,0px,0px)} .owl-carousel .owl-wrapper-outer{overflow:hidden;position:relative;width:100%} .owl-controls .owl-page,.owl-controls .owl-buttons div{cursor:pointer} .owl-controls{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);position:absolute;top:15px;right:15px;} .grabbing,.grabbing a,.grabbing *{cursor:e-resize!important} .owl-carousel .owl-wrapper,.owl-carousel .owl-item{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)} .owl-prev,.owl-next{width:28px;height:22px;background-color:transparent;text-align:center;line-height:22px;font-size:12px;margin-top:5px;color:#fff;text-shadow:0 0 6px rgba(0,0,0,.3);display:inline-block} .owl-next:before{font-family:fontawesome} .owl-prev:before{font-family:fontawesome} .owl-carousel .owl-item{float:right} .owl-next:before{content:"\f053";font-family:fontawesome;font-size:25px;background:transparent;} .owl-prev:before{content:"\f054";font-family:fontawesome;font-size:25px;background:transparent;} .related{ border-bottom:1px solid #ecf0f1; } .related h2{ border-bottom:1px solid #ecf0f1; border-top:1px solid #ecf0f1; font-size:17px; font-family:dev-techno,"Droid Arabic Naskh",tahoma; tex-align:right; background:#ecf0f1; color:#777; height:40px; line-height:40px;; text-indent:10px; } #related-posts{display:block;width:auto;margin:auto;position:relative;padding:5px;height:200px} #related-posts ul{list-style-type:none;} .related-thumb{display:block;height:200px;position:reltive;} .related-thumb img{width:100%;height:100%;} .related-title-thumb{transition:all .5s ease-in-out;position:absolute;bottom:0;right:0;width:100%;color:#eee;height:auto;text-align:center;margin:0 0;font:lighter 12px Kreon,,tahoma;font-weight:lighter;line-height:27px;padding:7px 0;;background-image:-webkit-linear-gradient(transparent,rgba(100,100,100,0.5));background-image:-moz-linear-gradient(transparent,rgba(100,100,100,0.5));background-image:linear-gradient(transparent,rgba(100,100,100,0.5));} .related-title-thumb:hover{padding-bottom:15px;} &lt;/style&gt; &lt;script type="text/javascript"&gt; //&lt;![CDATA[ var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array(); function related_results_labels_thumbs(json){for(var i=0;i&lt;json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("&lt;img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&amp;&amp;(b!=-1)&amp;&amp;(c!=-1)&amp;&amp;(d!="")){thumburl[relatedTitlesNum]= d.replace(/\/s[0-9]+(\-c)?/,"/s540");}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDGnbxafmJvjB8K4REKeYw7EJG4d9Y-rL3H5MlveWrAORWx8E2J2T7w-frgFS2k_DVafnSDkNZBCLdG4az6PstVURHpAy08mh_EhpOGsI8YsUemxZ5ttxwqWw-R7X7pZ452DD7xobCqKI/s640/picture_not_available.png'}if(relatedTitles[relatedTitlesNum].length&gt;55)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,55)+"...";for(var k=0;k&lt;entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum] = entry.link[k].href;relatedTitlesNum++}}}} function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i&lt;relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j&lt;a.length;j++)if(a[j]==e)return true;return false} function printRelatedLabels_thumbs(){document.write('&lt;ul&gt;'); for(var i=0;i&lt;relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){ relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random()); var i=0;if(relatedTitles.length&gt;0)while(i&lt;relatedTitles.length&amp;&amp;i&lt;20&amp;&amp;i&lt;maxresults){document.write('&lt;li class="related-thumb"&gt;&lt;a ');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"&gt;&lt;img src="'+thumburl[r]+'" alt="'+relatedTitles[r]+'"/&gt;&lt;br/&gt;&lt;div class="related-title-thumb"&gt;'+relatedTitles[r]+'&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;');if(r&lt;relatedTitles.length-1){r++}else{r=0}i++}relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length);document.write('&lt;/ul&gt;');} //]]&gt; &lt;/script&gt; &lt;/b:if&gt;</code></pre> 2 – ابحث عن الكود <span class="code"> &lt;/body&gt; </span> وأضف الكود التالي قبله : <br /> <a class="redirect" href="https://www.dropbox.com/s/8okc9zkxj7r5j3i/relsted%20slider%20post%20dev-techno.com.zip" rel="nofollow" target="_blank"> حمل الكود من هنا </a> <br /> <br /> 3 – ابحث عن الكود <span class="code"> &lt;div class='post-footer'&gt; </span> وأضف الكود التالي بعده : <br /> <pre><code>&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt; &lt;div class="related"&gt; &lt;h2&gt; مواضيع ذات صلة &lt;/h2&gt; &lt;div id="related-posts"&gt; &lt;b:loop values='data:post.labels' var='label'&gt; &lt;b:if cond='data:label.isLast != &amp;quot;true&amp;quot;'&gt; &lt;/b:if&gt; &lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt; &lt;script expr:src='&amp;quot;/feeds/posts/default/-/&amp;quot; + data:label.name + &amp;quot;?alt=json-in-script&amp;amp;callback=related_results_labels_thumbs&amp;amp;max-results=5&amp;quot;' type='text/javascript'/&gt; &lt;/b:if&gt; &lt;/b:loop&gt; &lt;script type='text/javascript'&gt; var currentposturl=&amp;quot;&lt;data:post.url/&gt;&amp;quot; var maxresults=15; var relatedpoststitle=&amp;quot;&amp;quot;; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); &lt;/script&gt; &lt;/div&gt; &lt;/div&gt; &lt;/b:if&gt;</code></pre> <br /> <br /> <h2 class="r" style="text-align: right;"> <span style="color: #660000;"> الطريقة الثانية :إضافة مواضيع ذات صلة بصورة المقالة وعنوانها </span></h2> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_5qTSVgAq7rZ-kn6kFVTkeTIH5WKLTHBcB6kppCg_lPPxEAmZJXqhtBPV3mYjEo5sWyFNHrYHMYaslKm4Aui33jNmIVmNC5QND2X5df60FCFLYoPbOEVVV15IPRklFGvJAgLRCtUmjVI/s1600-rw/related+posts-2.PNG" style="margin-left: 1em; margin-right: 1em;"><img alt="إضافة مواضيع ذات صلة بصورة المقالة وعنوانها" border="0" height="93" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_5qTSVgAq7rZ-kn6kFVTkeTIH5WKLTHBcB6kppCg_lPPxEAmZJXqhtBPV3mYjEo5sWyFNHrYHMYaslKm4Aui33jNmIVmNC5QND2X5df60FCFLYoPbOEVVV15IPRklFGvJAgLRCtUmjVI/s400-rw/related+posts-2.PNG" title="إضافة مواضيع ذات صلة بصورة المقالة وعنوانها" width="400" /></a></div> هذه الطريقة التي افضلها واستخدمها حاليا في مدونتي لخفتها وعرض صورة مصغرة للمقالة وعنوانها . <br /> <div style="text-align: right;"><b> تركيب الإضافة : </b></div> 1 – ابحث عن الكود <span class="code"> &lt;/head&gt; </span> في محرر HTML واضف الكود التالي قبله: <br /> <pre><code>&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt; &lt;style type="text/css"&gt; .related h2{ border-bottom: 1px solid #ecf0f1; font-size: 17px; font-family: arial; background: #fff; color: #777; height: 40px; line-height: 40px; text-indent: 10px; margin-bottom: 0; } .relate span{margin-right:10px;margin-left:10px;} .related-post{display:inline;width:auto;margin:auto;position:relative;} .related-post .related_img:hover{opacity:0.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7;} .related-thumb{ display: block; height: 155px; width: 17%; min-width: 120px; -webkit-box-sizing: border-box; box-sizing: border-box; float: right; padding: 5px; margin-right: 5px; background: #fff; border: 1px solid #e5e5e5; margin-bottom: 7px; } .related-thumb img{width:100%;height:80px;} .related-title-thumb{ width: 100%; padding: 0 0; color: #333; height: 15px; text-align: center; margin: 0 0; font: lighter 12px tahoma; font-weight: lighter; line-height: 20px; } .related-title-thumb:hover{color:#057fa5;transition:all 0.8s;} #related-posts{ margin-left: auto; margin-right: auto; font: 12px devt2,devt3,sans-serif; margin-bottom: 10px; padding: 10px; overflow: hidden; padding-bottom: 10px; background: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; } &lt;/style&gt; &lt;script type="text/javascript"&gt; //&lt;![CDATA[ var relatedTitles=new Array(); var relatedTitlesNum=0; var relatedUrls=new Array(); var thumburl=new Array(); function related_results_labels_thumbs(json) { for(var i=0; i&lt;json.feed.entry.length; i++) { var entry=json.feed.entry[i]; relatedTitles[relatedTitlesNum]=entry.title.$t; try { thumburl[relatedTitlesNum]=entry.gform_foot.url } catch(error) { s=entry.content.$t; a=s.indexOf("&lt;img"); b=s.indexOf("src=\"", a); c=s.indexOf("\"", b+5); d=s.substr(b+5, c-b-5); if((a!=-1)&amp;&amp;(b!=-1)&amp;&amp;(c!=-1)&amp;&amp;(d!="")) { thumburl[relatedTitlesNum]=d.replace(/\/s[0-9]+(\-c)?/, "/s540"); } else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDGnbxafmJvjB8K4REKeYw7EJG4d9Y-rL3H5MlveWrAORWx8E2J2T7w-frgFS2k_DVafnSDkNZBCLdG4az6PstVURHpAy08mh_EhpOGsI8YsUemxZ5ttxwqWw-R7X7pZ452DD7xobCqKI/s640/picture_not_available.png' } if(relatedTitles[relatedTitlesNum].length&gt;55)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 55)+"..."; for(var k=0; k&lt;entry.link.length; k++) { if(entry.link[k].rel=='alternate') { relatedUrls[relatedTitlesNum]=entry.link[k].href; relatedTitlesNum++ } } } } function removeRelatedDuplicates_thumbs() { var tmp=new Array(0); var tmp2=new Array(0); var tmp3=new Array(0); for(var i=0; i&lt;relatedUrls.length; i++) { if(!contains_thumbs(tmp, relatedUrls[i])) { tmp.length+=1; tmp[tmp.length-1]=relatedUrls[i]; tmp2.length+=1; tmp3.length+=1; tmp2[tmp2.length-1]=relatedTitles[i]; tmp3[tmp3.length-1]=thumburl[i] } } relatedTitles=tmp2; relatedUrls=tmp; thumburl=tmp3 } function contains_thumbs(a, e) { for(var j=0; j&lt;a.length; j++)if(a[j]==e)return true; return false } function printRelatedLabels_thumbs() { for(var i=0; i&lt;relatedUrls.length; i++) { if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))) { relatedUrls.splice(i, 1); relatedTitles.splice(i, 1); thumburl.splice(i, 1); i--; } } var r=Math.floor((relatedTitles.length-1)*Math.random()); var i=0; if(relatedTitles.length&gt;0)document.write('&lt;h4&gt;'+relatedpoststitle+'&lt;/h4&gt;'); document.write('&lt;div style="clear: both;"/&gt;'); while(i&lt;relatedTitles.length&amp;&amp;i&lt;20&amp;&amp;i&lt;maxresults) { document.write('&lt;a class="related-thumb'); if(i!=0)document.write('"'); else document.write('"'); document.write(' href="'+relatedUrls[r]+'"&gt;&lt;img src="'+thumburl[r]+'" alt="'+relatedTitles[r]+'"/&gt;&lt;br/&gt;&lt;div class="related-title-thumb"&gt;'+relatedTitles[r]+'&lt;/div&gt;&lt;/a&gt;'); if(r&lt;relatedTitles.length-1) { r++; } else { r=0; } i++; } document.write('&lt;/div&gt;'); relatedUrls.splice(0, relatedUrls.length); thumburl.splice(0, thumburl.length); relatedTitles.splice(0, relatedTitles.length) } //]]&gt; &lt;/script&gt; &lt;/b:if&gt; </code></pre> <br /> 2 – ابحث عن الكود <span class="code"> &lt;div class='post-footer'&gt; </span> وأضف الكود التالي بعده : <br /> <pre><code>&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt; &lt;div class="related"&gt; &lt;h2&gt; مواضيع ذات صلة &lt;/h2&gt; &lt;div id="related-posts"&gt; &lt;b:loop values='data:post.labels' var='label'&gt; &lt;b:if cond='data:label.isLast != &amp;quot;true&amp;quot;'&gt; &lt;/b:if&gt; &lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt; &lt;script expr:src='data:blog.homepageUrl + &amp;quot;/feeds/posts/default/-/&amp;quot; + data:label.name + &amp;quot;?alt=json-in-script&amp;amp;callback=related_results_labels_thumbs&amp;amp;max-results=5&amp;quot;' type='text/javascript'/&gt; &lt;/b:if&gt; &lt;/b:loop&gt; &lt;script type='text/javascript'&gt; var currentposturl=&amp;quot;&lt;data:post.url/&gt;&amp;quot; var maxresults=15; var relatedpoststitle=&amp;quot;&amp;quot;; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); &lt;/script&gt; &lt;/div&gt; &lt;/div&gt; &lt;/b:if&gt;</code></pre> <br /> <h2 class="r" style="text-align: right;"> <span style="color: #660000;"> الطريقة الثالثة : إضافة مواضيع ذات صلة بعنوان المقالة فقط. </span></h2> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLoWQWmGYNT5rmLy7QjnK54i45YeWcRLwwbrV1SmnFibw2qHNtXWKy-Ki9uZb4Cp16Xply4lssvNKDHAFvaX-WrKzYaTcsEtTDQAvA4Fuf0ADb2LzlvIDEfTDkzUvg6rkaVeMdEgAL7-Y/s499-rw/simple-related-posts.png" style="margin-left: 1em; margin-right: 1em;"><img alt="simple related post" border="0" data-original-height="303" data-original-width="499" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLoWQWmGYNT5rmLy7QjnK54i45YeWcRLwwbrV1SmnFibw2qHNtXWKy-Ki9uZb4Cp16Xply4lssvNKDHAFvaX-WrKzYaTcsEtTDQAvA4Fuf0ADb2LzlvIDEfTDkzUvg6rkaVeMdEgAL7-Y/s16000-rw/simple-related-posts.png" title="مقالات ذات صلة خفيفة" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div> هذه الطريقة شكلها جيد جدا ومفيدة اذا كان لديك كم هائل من المقالات وتريد استعراض اكبر قدر من المقالات :<br /> <div style="text-align: right;"><b> تركيب الإضافة: </b></div> 1 – ابحث عن الكود <span class="code"> &lt;/head&gt; </span> في محرر HTML واضف الكود التالي قبله: <br /> <pre><code>&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt; &lt;style type="text/css"&gt; .related{ border-bottom:1px solid #ecf0f1; } .related h2{ border-bottom:2px solid #ecf0f1; font-size:17px; font-family:"Droid Arabic Naskh",tahoma; tex-align-right; background:#fff; color:#777; height:40px; line-height:40px;; text-indent:10px; } #related-posts{width:100%;margin-left:auto;margin-right:auto;font:12px devt2,devt3,sans-serif;margin-bottom:10px;} #related-posts a{text-decoration:none;color:#07a8c0;font-family:tahoma , sans-serif;} #related-posts a:hover{color:#2a5e79;transition:all .8s ease;} #related-posts ul{background:#fff no-repeat 0 0;padding:0;} #related-posts ul li{display:block;color:#0088b8;background:#fff;margin-right:15px;padding-top:0;padding-right:15px;padding-bottom:1px;padding-left:10px;margin-left:10px;line-height:35px;border-bottom:1px dotted #ccc;position:relative;} #related-posts ul li a{font-size:14px;color:#07a8c0;margin-right:5px;} #related-posts ul li::before{content:"\f104";display:inline-block;position:absolute;right:0;top:0;height:100%;background:transpatent;color:#999;font-family:fontawesome;font-size:20px;line-height:35px;} &lt;/style&gt; &lt;script type='text/javascript'&gt; /* &lt;![CDATA[ */ var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i&lt;json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k&lt;entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break;}}}} function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i&lt;relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length- 1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length- 1]=relatedTitles[i];}} relatedTitles=tmp2;relatedUrls=tmp;} function contains(a,e){for(var j=0;j&lt;a.length;j++)if(a[j]==e)return true;return false;} function printRelatedLabels(){var r=Math.floor((relatedTitles.length- 1)*Math.random());var i=0;document.write('&lt;ul&gt;');while(i&lt;relatedTitles.length&amp;&amp;i&lt;20){document.write('&lt;li&gt;&lt;a href="'+ relatedUrls[r]+'"&gt;'+ relatedTitles[r]+'&lt;/a&gt;&lt;/li&gt;');if(r&lt;relatedTitles.length- 1){r++;}else{r=0;} i++;} document.write('&lt;/ul&gt;');document.write('&lt;a href="" target="_blank"&gt;&lt;font size="1" color="black"&gt;&lt;/font&gt;&lt;/a&gt;');} /*]]&gt;*/ &lt;/script&gt; &lt;/b:if&gt;</code></pre> <br /> 2 – ابحث عن الكود <span class="code"> &lt;div class='post-footer'&gt; </span> وأضف الكود التالي بعده : <br /> <pre><code>&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt; &lt;div class="related"&gt; &lt;h2&gt; مواضيع ذات صلة &lt;/h2&gt; &lt;div id="related-posts"&gt; &lt;b:loop values='data:post.labels' var='label'&gt; &lt;b:if cond='data:label.isLast != &amp;quot;true&amp;quot;'&gt; &lt;/b:if&gt; &lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt; &lt;script expr:src='&amp;quot;/feeds/posts/default/-/&amp;quot; + data:label.name + &amp;quot;?alt=json-in-script&amp;amp;callback=related_results_labels&amp;amp;max-results=6&amp;quot;' type='text/javascript'/&gt; &lt;/b:if&gt; &lt;/b:loop&gt; &lt;script type='text/javascript'&gt; removeRelatedDuplicates(); printRelatedLabels(); &lt;/script&gt; &lt;/div&gt; &lt;/div&gt; &lt;/b:if&gt;</code></pre> <br /> <br /> كانت هذه ثلاث طرق احترافية <b>لإضافة مواضيع ذات صلة</b> لمدونات <b>بلوجر</b> ، ونترك لك الخيار لتختار الطريقة التي تناسبك ، واي مشكلة تواجهها اثناء تركيب الإضافة لاتتردد بتركها في تعليق دمتم بخير! <br /> <br /></div> </content><link rel='replies' type='application/atom+xml' href='https://www.codexait.com/feeds/317730648551206568/comments/default' title='تعليقات الرسالة'/><link rel='replies' type='text/html' href='https://www.codexait.com/2016/12/related-posts-blogger.html#comment-form' title='10 تعليقات'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/317730648551206568'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/317730648551206568'/><link rel='alternate' type='text/html' href='https://www.codexait.com/2016/12/related-posts-blogger.html' title='اضافة مواضيع ذات صلة بثلاث طرق احترافية لمدونات بلوجر'/><author><name>Codex AIT</name><uri>http://www.blogger.com/profile/10277402041090003956</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFcTjVsB95C1gFAE3krg39Hdh7dmMu6QS9pXd1I3ZHOizXUXoYGUk0pFDKacxWx32H5Ni7YSdej17qiBuZnPprWuCrcLa8iorQpO_jvBm0sOqvhy2vjicX14KpOXIWOQ/s220/Codexait+Logo+2021+%284%29+-+Copy+%281%29.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaRUijHgfsQmy0TKA7ZHbfGRdBUD9If_SgmWlb7jggwlgZ3U8DBew92u1apTUdWyp9HrBm4rFxCtiB-I7Tn0o7Gb3MzbOQSWPU-NXsMFfdU-rvKLTIVhHQ8NCBCqPSJRKuMZcR8Pl08SM/s72-c-rw/relatedposts.jpg" height="72" width="72"/><thr:total>10</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1421699815441362866.post-4052119383671611012</id><published>2016-12-15T03:39:00.012+03:00</published><updated>2024-05-17T07:56:50.576+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="تطوير الويب"/><title type='text'>افضل 10 استضافات مجانية لمواقع الويب </title><content type='html'><div dir="rtl" style="text-align: right;" trbidi="on"> <div dir="rtl" style="text-align: right;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg76Pxm7aqxkf7WuGzC53it8e0GZdNum4M5PfhF9bwUdfqJ_zk_TpQemJfS5T2uPN0cRaoXL_PTUBiJ1BI8PqtyF5Yd0omwFiSebD0N08ltlzdQdGOS5BbBsVp5T7XfNL59kpBtDeaZU3M/s640-rw/12.png" style="margin-left: 1em; margin-right: 1em;"><img alt="افضل 10 استضافات مجانية لمواقع الويب" border="0" data-original-height="400" data-original-width="640" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg76Pxm7aqxkf7WuGzC53it8e0GZdNum4M5PfhF9bwUdfqJ_zk_TpQemJfS5T2uPN0cRaoXL_PTUBiJ1BI8PqtyF5Yd0omwFiSebD0N08ltlzdQdGOS5BbBsVp5T7XfNL59kpBtDeaZU3M/s640-rw/12.png" title="افضل 10 استضافات مجانية لمواقع الويب" width="640" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div> </div> في حال كنت مطور مواقع ، بالتأكيد ستحتاج الى <b>استضافة مجانية</b> لإختبار مشاريعك ، او لعرضها عليه ، هناك العديد من الإستضافات المجانية ، رغم تفاوت امكانياتها واختلاف عروضها.</div><div dir="rtl" style="text-align: right;" trbidi="on">&nbsp;فمنها ماهو مجاني لفترة محدودة ومنها ماهو غير محدود ، والبعض الأخر يعرض اعلان على موقعك ، ايضا تختلف مساحة القرص والباندويدث من استضافة الى اخرى.</div><div dir="rtl" style="text-align: right;" trbidi="on"><h2 style="text-align: right;">مجموعة مميزة من افضل&nbsp;<b>الاستضافات المجانية</b> بمختلف مميزاتها وعروضها&nbsp;</h2> <h3 style="text-align: right;"><a href="http://hostinger.ae/" rel="nofollow" target="_blank">Hostinger.ae </a></h3> من اشهر الاستضافات المجانية ايضا تعتبر استضافة عالمية وتدعم اللغة العربية وتستضيف اكثر من 5 مليون موقع، مع امكانيات رائعة جدا ، وتوفر خطة مجانية بالمميزات الاتية :<br /> <table style="width: 400px;"> <tbody> <tr> <td>مساحة تخزينية</td> <td>2جيجا بت</td> </tr> <tr> <td>معدل نقل البيانات</td> <td>100 جيجا بت</td> </tr> <tr> <td>الدعم</td> <td>PHP/MYSQL</td> </tr> <tr> <td>نطاقات فرعية</td> <td>2</td> </tr> <tr> <td>عدد قواعد البيانات MYSQL</td> <td>2</td> </tr> <tr> <td>مستخدمي FTP</td> <td>2</td> </tr> <tr> <td>حسابات بريد الكتروني</td> <td>2</td> </tr> <tr> <td>اعلانات</td> <td>لاتوجد</td> </tr> </tbody> </table> <h3 style="text-align: right;"><a href="https://www.000webhost.com/" rel="nofollow" target="_blank">000webhosting.com</a></h3> استضافة مجانية تقدم خدمات استضافة المواقع منذ 2007 ، تمتلك مايقارب 14 مليون مستخدم ، والجدول التالي يوضح الخدمات المقدمة للخطة المجانية :<br /> <table style="width: 400px;"> <tbody> <tr> <td>مساحة تخزينية</td> <td>1.5جيجا بت</td> </tr> <tr> <td>معدل نقل البيانات</td> <td>100 جيجا بت</td> </tr> <tr> <td>الدعم</td> <td>PHP/MYSQL</td> </tr> <tr> <td>عدد قواعد البيانات MYSQL</td> <td>2</td> </tr> <tr> <td>مستخدمي FTP</td> <td>1</td> </tr> <tr> <td>حسابات بريد الكتروني</td> <td>5</td> </tr> <tr> <td>اعلانات</td> <td>لاتوجد</td> </tr> </tbody> </table> <br /> <h3 style="text-align: right;"><a href="https://www.freehostia.com/" rel="nofollow" target="_blank">Freehostia</a></h3> هذه الاستضافة ضعيفة نوعا ما ، ولكن في حال كان لديك موقع للتجربة والعرض فهي مناسبة جدا ، وهذه مميزات خطة الاستضافة المجانية :<br /> <table style="width: 400px;"> <tbody> <tr> <td>مساحة تخزينية</td> <td>250 ميجا بت</td> </tr> <tr> <td>معدل نقل البيانات</td> <td>6 جيجا بت</td> </tr> <tr> <td>الدعم</td> <td>PHP/MYSQL</td> </tr> <tr> <td>عدد قواعد البيانات MYSQL</td> <td>1</td> </tr> <tr> <td>مستخدمي FTP</td> <td>1</td> </tr> <tr> <td>حسابات بريد الكتروني</td> <td>3</td> </tr> <tr> <td>اعلانات</td> <td>لاتوجد</td> </tr> </tbody> </table> <br /> <h3 style="text-align: right;">5GBfree.com</h3> استضافة مجانية مع خدمات كويسة جدا ، مع مساحة تخزين 5 جيجابت.</div><div dir="rtl" style="text-align: right;" trbidi="on">ولكن المشكلة في معدل نقل البيانات ضعيف نوعا ما ،ولكن الرائع فيها انها تمنحك انشاء 3 قواعد بيانات، وهذه امكانيات الخطة المجانية:<br /> <table style="width: 400px;"> <tbody> <tr> <td>مساحة تخزينية</td> <td>5 جيجا بت</td> </tr> <tr> <td>معدل نقل البيانات</td> <td>20 جيجا بت</td> </tr> <tr> <td>الدعم</td> <td>PHP/MYSQL</td> </tr> <tr> <td>عدد قواعد البيانات MYSQL</td> <td>3</td> </tr> <tr> <td>مستخدمي FTP</td> <td>1</td> </tr> <tr> <td>حسابات بريد الكتروني</td> <td>لايوجد</td> </tr> <tr> <td>اعلانات</td> <td>لاتوجد</td> </tr> </tbody> </table> <h3 style="text-align: right;"><a href="https://www.freehosting.com/client/cart.php" rel="nofollow" target="_blank">FreeHosting.com</a></h3> استضافة مجانية مع مساحة تخزين عالية ومعدل نقل البيانات خيالي جدا واتمنى ان يكون فعلي.</div><div dir="rtl" style="text-align: right;" trbidi="on">والجدول التالي يوضح امكانيات الخطة المجانية :<br /> <table style="width: 400px;"> <tbody> <tr> <td>مساحة تخزينية</td> <td>10 جيجا بت</td> </tr> <tr> <td>معدل نقل البيانات</td> <td>250 جيجا بت</td> </tr> <tr> <td>الدعم</td> <td>PHP/MYSQL</td> </tr> <tr> <td>عدد قواعد البيانات MYSQL</td> <td>1</td> </tr> <tr> <td>مستخدمي FTP</td> <td>1</td> </tr> <tr> <td>حسابات بريد الكتروني</td> <td>لايوجد</td> </tr> <tr> <td>اعلانات</td> <td>لاتوجد</td> </tr> </tbody> </table> <br /> <h3 style="text-align: right;">Zymic</h3> استضافة شبيهة بالسابقة حيث توفر لك انشاء 5 قواعد بيانات على نفس الاستضافة.</div><div dir="rtl" style="text-align: right;" trbidi="on">&nbsp;مع امكانيات رائعة في التخزين والباندويدث ، هذه مواصفات الخطة المجانية :<br /> <table style="width: 400px;"> <tbody> <tr> <td>مساحة تخزينية</td> <td>6 جيجا بت</td> </tr> <tr> <td>معدل نقل البيانات</td> <td>50 جيجا بت</td> </tr> <tr> <td>الدعم</td> <td>PHP/MYSQL</td> </tr> <tr> <td>عدد قواعد البيانات MYSQL</td> <td>5</td> </tr> <tr> <td>مستخدمي FTP</td> <td>1</td> </tr> <tr> <td>حسابات بريد الكتروني</td> <td>لايوجد</td> </tr> <tr> <td>اعلانات</td> <td>لاتوجد</td> </tr> </tbody> </table> <br /> <h3 style="text-align: right;"><a href="https://byet.host/free-hosting" rel="nofollow" target="_blank">Byethost</a></h3> استضافة مجانية بخدمات مقبولة جدا ، وهذه مواصفات الخطة المجانية :<br /> <table style="width: 400px;"> <tbody> <tr> <td>مساحة تخزينية</td> <td>1 جيجا بت</td> </tr> <tr> <td>معدل نقل البيانات</td> <td>50 جيجا بت</td> </tr> <tr> <td>الدعم</td> <td>PHP/MYSQL</td> </tr> <tr> <td>عدد قواعد البيانات MYSQL</td> <td>5</td> </tr> <tr> <td>مستخدمي FTP</td> <td>1</td> </tr> <tr> <td>حسابات بريد الكتروني</td> <td>5</td> </tr> <tr> <td>اعلانات</td> <td>لاتوجد</td> </tr> </tbody> </table> <br /> <h3 style="text-align: right;">Awardspace</h3> الخطة المجانية لللإستضافة تقدم الامكانيات الاتية:<br /> <table style="width: 400px;"> <tbody> <tr> <td>مساحة تخزينية</td> <td>1 جيجا بت</td> </tr> <tr> <td>معدل نقل البيانات</td> <td>5 جيجا بت</td> </tr> <tr> <td>الدعم</td> <td>PHP/MYSQL</td> </tr> <tr> <td>عدد قواعد البيانات MYSQL</td> <td>1</td> </tr> <tr> <td>مستخدمي FTP</td> <td>1</td> </tr> <tr> <td>حسابات بريد الكتروني</td> <td>1</td> </tr> <tr> <td>اعلانات</td> <td>لاتوجد</td> </tr> </tbody> </table> <br /> <h3 style="text-align: right;"><a href="https://www.freehostingeu.com/web-hosting-page.php" rel="nofollow" target="_blank">FreeHostingEU</a></h3> استضافة تقدم في خطتها المجانية الامكانيات الاتية:<br /> <table style="width: 400px;"> <tbody> <tr> <td>مساحة تخزينية</td> <td>200 ميجا بت</td> </tr> <tr> <td>معدل نقل البيانات</td> <td>4 جيجا بت</td> </tr> <tr> <td>الدعم</td> <td>PHP/MYSQL</td> </tr> <tr> <td>عدد قواعد البيانات MYSQL</td> <td>1</td> </tr> <tr> <td>مستخدمي FTP</td> <td>1</td> </tr> <tr> <td>حسابات بريد الكتروني</td> <td>1</td> </tr> <tr> <td>اعلانات</td> <td>لاتوجد</td> </tr> </tbody> </table> <br /> <h3 style="text-align: right;"><a href="http://freehostingnoads.net/webhosting.php" rel="nofollow" target="_blank">Free Web Hosting No Ads</a></h3> استضافة مجانية بمساحة تخزينية ومعدل نقل بيانات عالي جدا ولكن معدل الزيارات اليومية 1000 زيارة ، وهذه مميزات الخطة المجانية:<br /> <table style="width: 400px;"> <tbody> <tr> <td>مساحة تخزينية</td> <td>20 جيجا بت</td> </tr> <tr> <td>معدل نقل البيانات</td> <td>200 جيجا بت</td> </tr> <tr> <td>الدعم</td> <td>PHP/MYSQL</td> </tr> <tr> <td>عدد قواعد البيانات MYSQL</td> <td>3</td> </tr> <tr> <td>مستخدمي FTP</td> <td>3</td> </tr> <tr> <td>حسابات بريد الكتروني</td> <td>3</td> </tr> <tr> <td>اعلانات</td> <td>لاتوجد</td> </tr> </tbody> </table> <br /> <br /> <blockquote class="tr_bq"> اقرأ ايضا: <a href="https://www.codexait.com/2016/12/get-website-info.html" target="_blank">موقع رائع يعطيك معلومات هامة عن اي موقع (الدوماين + الاستضافة)</a></blockquote> <br /> كانت هذه مجموعة مميزة من <b>الأستضافات</b> التي تقدم خطة <b>مجانية </b>وخالية من الاعلانات ، والتي تتفاوت امكانياتها بين ومميزاتها.</div><div dir="rtl" style="text-align: right;" trbidi="on">ايضا يمكنك ترقية حسابك الى خطة مدفوعة على نفس الاستضافة&nbsp;في حالة ارتفاع عدد الزوار ، واتمنى ان اكون افدتكم.</div><div dir="rtl" style="text-align: right;" trbidi="on">واذا كانت لديكم تجارب مع الاستضافات المجانية لاتترددوا بمشاركتها معنا في تعليق ، دمتم في رعاية الله وحفظه!</div> </content><link rel='replies' type='application/atom+xml' href='https://www.codexait.com/feeds/4052119383671611012/comments/default' title='تعليقات الرسالة'/><link rel='replies' type='text/html' href='https://www.codexait.com/2016/12/free-web-hosting.html#comment-form' title='0 تعليقات'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/4052119383671611012'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/4052119383671611012'/><link rel='alternate' type='text/html' href='https://www.codexait.com/2016/12/free-web-hosting.html' title='افضل 10 استضافات مجانية لمواقع الويب '/><author><name>Codex AIT</name><uri>http://www.blogger.com/profile/10277402041090003956</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFcTjVsB95C1gFAE3krg39Hdh7dmMu6QS9pXd1I3ZHOizXUXoYGUk0pFDKacxWx32H5Ni7YSdej17qiBuZnPprWuCrcLa8iorQpO_jvBm0sOqvhy2vjicX14KpOXIWOQ/s220/Codexait+Logo+2021+%284%29+-+Copy+%281%29.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg76Pxm7aqxkf7WuGzC53it8e0GZdNum4M5PfhF9bwUdfqJ_zk_TpQemJfS5T2uPN0cRaoXL_PTUBiJ1BI8PqtyF5Yd0omwFiSebD0N08ltlzdQdGOS5BbBsVp5T7XfNL59kpBtDeaZU3M/s72-c-rw/12.png" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1421699815441362866.post-1429742789670366013</id><published>2016-12-14T03:19:00.009+03:00</published><updated>2024-05-17T07:57:10.831+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="SEO"/><category scheme="http://www.blogger.com/atom/ns#" term="سيو"/><category scheme="http://www.blogger.com/atom/ns#" term="مواقع مفيده"/><title type='text'>موقع رائع يعطيك معلومات هامة عن اي موقع(الدوماين + الاستضافة)</title><content type='html'><div dir="rtl" style="text-align: right;" trbidi="on"> <div dir="rtl" style="text-align: right;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMjJSDGHkHojgoFuqPY07xTonVMLMdkHOJ0o9uDSUR8bjplDkR6HkQYgnXh6W-Nuxn1R-mIW6hKkf1jrRvsNCGPJnFBy1epyRwpb4OVIS-ljQcFCPkAr4KEolfkoj9L2R26gK12rszkK0/s1340-rw/Any+Website+information.PNG" style="margin-left: 1em; margin-right: 1em;"><img alt="موقع رائع يعطيك معلومات هامة عن اي موقع(الدوماين + الاستضافة)" border="0" data-original-height="653" data-original-width="1340" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMjJSDGHkHojgoFuqPY07xTonVMLMdkHOJ0o9uDSUR8bjplDkR6HkQYgnXh6W-Nuxn1R-mIW6hKkf1jrRvsNCGPJnFBy1epyRwpb4OVIS-ljQcFCPkAr4KEolfkoj9L2R26gK12rszkK0/s640-rw/Any+Website+information.PNG" title="موقع رائع يعطيك معلومات هامة عن اي موقع(الدوماين + الاستضافة)" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div> </div> توجد العديد من المواقع التي توفر خدمة لمعرفة <b>معلومات عن اي موقع ويب</b> ،وبغض النظر عن الهدف الذي يدفعك لمعرفة معلومات الموقع او <b>الدوماين</b> سواءا كنت تريد التأكد من موقع ستشتريه او كنت مدير موقع تريد معرفة معلومات اكثر عن موقعك او غير ذلك ، وما سأقدمه لكم اليوم موقع رائع جدا يوفر لك العديد من المعلومات حول أي موقع ويب سوآءا <b>الدومين </b>او <b>الاستضافة.</b></div><div dir="rtl" style="text-align: right;" trbidi="on"><h2 style="text-align: right;">&nbsp;اهم المعلومات التي يمكن الحصول عليها عن الدومين والاستضافة</h2> <ol> <li dir="rtl">معلومات عن صاحب الموقع الاسم والايميل ورقم الهاتف والبلد ...الخ.</li> <li dir="rtl">ملخص عن اهتمام الموقع وصورة مصغرة للموقع</li> <li dir="rtl">عمر الموقع ، وتاريخ التسجيل والتجديد ووقت الانتهاء.</li> <li dir="rtl">الشركة التي تقدم اسم النطاق Domain name</li> <li dir="rtl">الشركة التي تقدم الاستضافة.</li> <li dir="rtl">احصائيات لعدد الزيارات اليومية مع ترتيب اليكسا.</li> <li dir="rtl">رقم الايبي.</li> <li dir="rtl">ايضا يعرض مواقع شبيهة بالموقع.</li> </ol> وكما نعرف ان الخدمة المقدمة تسمى&nbsp; <b>whios </b>وهذا عبارة عن بروتوكول يعرض معلومات عن الـ DNS ، وهذا ماتقدمه معظم المواقع ولكن مايقدمه لك هذا الموقع معلومات اكثر من ذلك ، في مكان واحد، بالاضافة الى سهولة استخدامه ، رابط الموقع&nbsp; <a href="http://website.informer.com/" rel="nofollow" target="_blank">website.informer.com</a><br /> <br /> <blockquote> اقرأ ايضا: <br /> <a href="https://www.codexait.com/2016/12/free-web-hosting.html" target="_blank"> افضل 10 استضافات مجانية لمواقع الويب </a> </blockquote> <br /> كان هذا <b>موقع </b>رائع لعرض <b>معلومات </b>عن اي موقع تريد ، او <b>دوماين </b>تبحث عنه ، اذا كان لديك موقع يقدم خدمات افضل شاركه معنا في تعليق، دمتم في رعاية الله وحفظه!</div> </content><link rel='replies' type='application/atom+xml' href='https://www.codexait.com/feeds/1429742789670366013/comments/default' title='تعليقات الرسالة'/><link rel='replies' type='text/html' href='https://www.codexait.com/2016/12/get-website-info.html#comment-form' title='0 تعليقات'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/1429742789670366013'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/1429742789670366013'/><link rel='alternate' type='text/html' href='https://www.codexait.com/2016/12/get-website-info.html' title='موقع رائع يعطيك معلومات هامة عن اي موقع(الدوماين + الاستضافة)'/><author><name>Codex AIT</name><uri>http://www.blogger.com/profile/10277402041090003956</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFcTjVsB95C1gFAE3krg39Hdh7dmMu6QS9pXd1I3ZHOizXUXoYGUk0pFDKacxWx32H5Ni7YSdej17qiBuZnPprWuCrcLa8iorQpO_jvBm0sOqvhy2vjicX14KpOXIWOQ/s220/Codexait+Logo+2021+%284%29+-+Copy+%281%29.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMjJSDGHkHojgoFuqPY07xTonVMLMdkHOJ0o9uDSUR8bjplDkR6HkQYgnXh6W-Nuxn1R-mIW6hKkf1jrRvsNCGPJnFBy1epyRwpb4OVIS-ljQcFCPkAr4KEolfkoj9L2R26gK12rszkK0/s72-c-rw/Any+Website+information.PNG" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1421699815441362866.post-7367652859980766347</id><published>2016-12-14T03:11:00.003+03:00</published><updated>2021-12-27T03:26:46.741+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="إضافات بلوجر"/><category scheme="http://www.blogger.com/atom/ns#" term="بلوجر"/><title type='text'>اضافة ازرار مواقع التواصل الاجتماعي لمدونات بلوجر بطريقتين احترافيتين</title><content type='html'><div dir="rtl" style="text-align: right;" trbidi="on"> <div dir="rtl" style="text-align: right;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNUWY4qH2jFMzuMrgjYubIWLtdLn1-blhGpL8__-VYG_PbbWHcz8EchoWFfTvwj119QHXAoUm6Q7s3d8KqZFNZV3nuy4LFINhJs9SsnsTn8TJd0NJE7vP-kLZiWHKdCvqj_m7ns9vHNQ4/s640-rw/social+icons.PNG" style="margin-left: 1em; margin-right: 1em;"><img alt="ازرار الشبكات الاجتماعية لبلوجر" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNUWY4qH2jFMzuMrgjYubIWLtdLn1-blhGpL8__-VYG_PbbWHcz8EchoWFfTvwj119QHXAoUm6Q7s3d8KqZFNZV3nuy4LFINhJs9SsnsTn8TJd0NJE7vP-kLZiWHKdCvqj_m7ns9vHNQ4/s640-rw/social+icons.PNG" title="ازرار الشبكات الاجتماعية لبلوجر" /></a></div> </div> <b>اضافة ازرار مواقع التواصل الاجتماعي</b> يجب توافرها على كل موقع ، لإعتبارها اهم طريقة لإشهار موقعك على الشبكة العنكبوتية ، وايضا الشبكات الاجتماعية تعتبر مصدر رئيسي للزوار في بداية كل موقع او مدونة ، لهذا سأقدم لكم اليوم افضل اضافتين بربط مدونات <b>بلوجر </b>بمواقع التواصل الاجتماعي بتأثيرات احترافية.<br /> <br /> <h2 style="text-align: right;"> الطريقة الأولى : اضافة ازرار مواقع التواصل الاجتماعي مع العداد بشكل رائع</h2> توفر هذه الاضافة الأزرار الشائعة لمواقع التواصل الاجنماعي مع عدد المتابعين اوالمشتركين في كل منها ، مع امكانية تعديل هذا العدد&nbsp; ،كما هو موضح بالصورة ،<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoqO8z09gL46gTU0gG54KBsO1BH9XMfxbpctq9Vcis9HS0uXQrhVuPgXLmYpw4XUGSjWqFtoFfI36A1vzAUTHY56iGw9tk8IwEsLKE0CoRKOLmoOlYAzOaCrnCvlifOFXrW3g2K1bxu8o/s1600/social+counter.png" style="margin-left: 1em; margin-right: 1em;"><img alt="ازرار التواصل الاجتماعي مع عداد المتابعين لبلوجر" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoqO8z09gL46gTU0gG54KBsO1BH9XMfxbpctq9Vcis9HS0uXQrhVuPgXLmYpw4XUGSjWqFtoFfI36A1vzAUTHY56iGw9tk8IwEsLKE0CoRKOLmoOlYAzOaCrnCvlifOFXrW3g2K1bxu8o/s320/social+counter.png" title="ازرار التواصل الاجتماعي مع عداد المتابعين لبلوجر" width="265" /></a></div> لتركيب الاضافة اتبع الخطوات التالية :<br /> 1 - افتح تحرير HTML وابحث عن الكود <span class="code">]]&gt;&lt;/b:skin&gt;</span> وأضف كود CSS التالي قبله :<br /> <pre><code>.social-counter ul{list-style-type:none;} .social-counter.col1 li{width:100%;border:0 none !important;} .social-counter.col2 li, .social-counter.col4 li{width: 153px;border-width:0 0 1px 0 !important;} .social-counter.col2 li:nth-child(2n+2) , .social-counter.col4 li:nth-child(2n+2){border-left:1px solid #DDD !important;} .social-counter li{ line-height:15px; float:left; width:102px; padding:7px 0; border-bottom:1px solid #ddd; -moz-transition:.4s linear; -webkit-transition:.4s ease-out; transition:.4s linear; } .social-counter.col2 li:nth-child(6n) ,.social-counter.col2 li:nth-child(6n-1){ border-bottom:0px; } .social-counter li:nth-child(3n-1) { border-right:1px solid #DDD; border-left:1px solid #DDD;} .social-counter li a{display:block;text-align:center;} .social-counter li a strong{opacity:0.9;display:block; height:51px; margin-bottom:5px; -webkit-transition: all ease-in-out 0.2s; -moz-transition: all ease-in-out 0.2s; -o-transition: all ease-in-out 0.2s; transition: all ease-in-out 0.2s; font-size: 28px; margin: 8px auto; width: 50px; color: #FFF; height: 50px; display: block; text-align: center; background: #183f4e; -webkit-border-radius: 50px; moz-border-radius: 50px; border-radius: 50px; } .social-counter li a strong:before{height: 50px;width: 50px;font-size: 26px;line-height: 50px;} .social-counter li a:hover strong{opacity:1;} .social-counter li:hover{ background-color:#F8F8F8;} .social-counter li:hover a{text-decoration: none;} .social-counter li.rss-subscribers a:hover strong{ background: #f8bc2e; } .social-counter li.facebook-fans a:hover strong {background: #39599f;} .social-counter li.twitter-followers a:hover strong{ background: #45b0e3;} .social-counter li.youtube-subs a:hover strong{ background: #cc181e; } .social-counter li.google-subs a:hover strong{ background: #bc282e; } .social-counter li.instagram-followers a:hover strong{ background: #517fa4;} .social-counter li span{display:block;font-size:21px;} .social-counter li a small{color:#777;} </code></pre> 2 - من التخطيط اضف اداة&nbsp;&nbsp; html/javascript جديدة في المكان المناسب لك والأفضل ان يكون في السيدبار واضف الكود التالي فيه :<br /> <pre><code>&lt;div class="social-counter col2"&gt; &lt;ul&gt; &lt;li class="twitter-followers"&gt; &lt;a href="<span style="color: lime;">#</span>" target="_blank"&gt; &lt;strong class="fa fa-twitter"&gt;&lt;/strong&gt; &lt;span&gt;<span style="color: red;">28</span>&lt;/span&gt; &lt;small&gt;متابعون&lt;/small&gt; &lt;/a&gt; &lt;/li&gt; &lt;li class="facebook-fans"&gt; &lt;a href="<span style="color: lime;">#</span>" target="_blank"&gt; &lt;strong class="fa fa-facebook"&gt;&lt;/strong&gt; &lt;span&gt;<span style="color: red;">1,145</span>&lt;/span&gt; &lt;small&gt;معجب&lt;/small&gt; &lt;/a&gt; &lt;/li&gt; &lt;li class="google-subs"&gt; &lt;a href="<span style="color: lime;">#</span>" target="_blank"&gt; &lt;strong class="fa fa-google-plus"&gt;&lt;/strong&gt; &lt;span&gt;<span style="color: red;">500</span>&lt;/span&gt; &lt;small&gt;متابع&lt;/small&gt; &lt;/a&gt; &lt;/li&gt; &lt;li class="youtube-subs"&gt; &lt;a href="<span style="color: lime;">#</span>" target="_blank"&gt; &lt;strong class="fa fa-youtube"&gt;&lt;/strong&gt; &lt;span&gt;<span style="color: red;">2100</span>&lt;/span&gt; &lt;small&gt;مشترك&lt;/small&gt; &lt;/a&gt; &lt;/li&gt; &lt;li class="instagram-followers"&gt; &lt;a href="<span style="color: lime;">#</span>" target="_blank"&gt; &lt;strong class="fa fa-instagram"&gt;&lt;/strong&gt; &lt;span&gt;<span style="color: red;">208</span>&lt;/span&gt; &lt;small&gt;متابع&lt;/small&gt; &lt;/a&gt; &lt;/li&gt; &lt;li class="rss-subscribers"&gt; &lt;a href="<span style="color: lime;">#</span>" target="_blank"&gt; &lt;strong class="fa fa-rss"&gt;&lt;/strong&gt; &lt;span&gt;<span style="color: red;">28</span>&lt;/span&gt; &lt;small&gt;مشترك&lt;/small&gt; &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt;</code></pre> مع تغيير الهاش # باللون الأخضر برابط شبكتك الاجتماعية ، وايضا عدد المتابعين للشبكات الاجتماعية باللون الأحمر<br /> <br /> <h2 style="text-align: right;"> الطريقة الثانية : اضافة ازرار 16 من مواقع التواصل الاجتماعي ومواقع اخرى هامة لمدونتك.</h2><div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4DHdlX0OKqmvnM6XrqbrGuFyhR8kfjqvAbTqYtBHPSeuiI2ew1QKt1RO8f0vrsFXlGyDXZLpdpSM5zO0KRxIOOEq-RkLv5TvM_dZLv_D6lgEca9u56z1e2w03C4eEVjUoo2k1us9lpnY/s1600/16+social+icons.PNG" style="margin-left: 1em; margin-right: 1em;"><img alt="16 ازرار التواصل الاجتماعي لبلوجر" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4DHdlX0OKqmvnM6XrqbrGuFyhR8kfjqvAbTqYtBHPSeuiI2ew1QKt1RO8f0vrsFXlGyDXZLpdpSM5zO0KRxIOOEq-RkLv5TvM_dZLv_D6lgEca9u56z1e2w03C4eEVjUoo2k1us9lpnY/s1600/16+social+icons.PNG" title="16 ازرار التواصل الاجتماعي لبلوجر" /></a></div> تتوفر هذه الاضافة على اهم مواقع التواصل الاجتماعي ومواقع اخرى هامة لمدونتك ، بشكل جميل وجذاب جدا ، كما في الصورة ، يمكنك اختيار الشبكات التي تناسبك وحذف الشبكات الأخرى كل شبكة في سطر.<br /> لتركيب الإضافة اتبع الخطوات التالية:<br /> 1 - افتح تحرير HTML وابحث عن الكود <span class="code">]]&gt;&lt;/b:skin&gt;</span> وأضف كود CSS التالي قبله :<br /> <pre><code>/* social icon by dev-techno.com ---------*/ .social-icons { text-align: center; } .social-icons a { margin: 2px; position: relative; text-shadow: none; display: inline-block; } .social-icons i:before { display: inline-block; width: 32px; height: 32px; line-height: 32px; font-size: 18px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .social-icons a { color: #555 !important; } .social-icons.social-colored a { color: #FFF !important; } .social-icons.social-colored a i{ -moz-transition:all 0.4s ease-in-out; -webkit-transition:all 0.4s ease-in-out; transition:all 0.4s ease-in-out; } .social-icons.social-colored a:hover{ opacity: 0.7; } .social-icons.social-colored .fa-delicious:before{ background: #2567ee; } .social-icons.social-colored .fa-digg:before { background: #b2b2b2 } .social-icons.social-colored .fa-reddit:before { background: #ff915c } .social-icons.social-colored .fa-play:before { background: #a0b532 } .social-icons.social-colored .fa-github:before { background: #666666 } .social-icons.social-colored .fa-dribbble:before{ background: #d875a2 } .social-icons.social-colored .fa-rss:before{ background: #f8bc2e } .social-icons.social-colored .fa-facebook:before { background: #39599f } .social-icons.social-colored .fa-twitter:before { background: #45b0e3 } .social-icons.social-colored .fa-google-plus:before{ background: #fa0101 } .social-icons.social-colored .fa-linkedin:before { background: #65b7d2 } .social-icons.social-colored .fa-pinterest:before{ background: #E00707 } .social-icons.social-colored .fa-youtube:before { background: #cc181e } .social-icons.social-colored .fa-instagram:before{ background: #517fa4 } .social-icons.social-colored .fa-behance:before { background: #1769ff } .social-icons.social-colored .fa-flickr:before { background: #ff0084 } .social-icons.social-colored a i:hover{ -ms-transform: scale(1.2, 1.2); /* IE 9 */ -webkit-transform: scale(1.2, 1.2); /* Safari */ -moz-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); }</code></pre> 2 - من التخطيط اضف اداة&nbsp;&nbsp; html/javascript جديدة في المكان المناسب لك والأفضل ان يكون في السيدبار او الفوتر واضف الكود التالي فيه :<br /> <pre><code>&lt;div class="social-icons social-colored"&gt; &lt;a class="ttip-none" title="Rss" href="#" target="_blank"&gt;&lt;i class="fa fa-rss"&gt;&lt;/i&gt;&lt;/a&gt; &lt;a class="ttip-none" title="Google+" href="#" target="_blank"&gt;&lt;i class="fa fa-google-plus"&gt;&lt;/i&gt;&lt;/a&gt; &lt;a class="ttip-none" title="Facebook" href="#" target="_blank"&gt;&lt;i class="fa fa-facebook"&gt;&lt;/i&gt;&lt;/a&gt; &lt;a class="ttip-none" title="Twitter" href="#" target="_blank"&gt;&lt;i class="fa fa-twitter"&gt;&lt;/i&gt;&lt;/a&gt; &lt;a class="ttip-none" title="Youtube" href="#" target="_blank"&gt;&lt;i class="fa fa-youtube"&gt;&lt;/i&gt;&lt;/a&gt; &lt;a class="ttip-none" title="Google Play" href="#" target="_blank"&gt;&lt;i class="fa fa-play"&gt;&lt;/i&gt;&lt;/a&gt; &lt;a class="ttip-none" title="linkedin" href="#" target="_blank"&gt;&lt;i class="fa fa-linkedin"&gt;&lt;/i&gt;&lt;/a&gt; &lt;a class="ttip-none" title="Delicious" href="#" target="_blank"&gt;&lt;i class="fa fa-delicious"&gt;&lt;/i&gt;&lt;/a&gt; &lt;a class="ttip-none" title="pinterest" href="#" target="_blank"&gt;&lt;i class="fa fa-pinterest"&gt;&lt;/i&gt;&lt;/a&gt; &lt;a class="ttip-none" title="behance" href="#" target="_blank"&gt;&lt;i class="fa fa-behance"&gt;&lt;/i&gt;&lt;/a&gt; &lt;a class="ttip-none" title="flickr" href="#" target="_blank"&gt;&lt;i class="fa fa-flickr"&gt;&lt;/i&gt;&lt;/a&gt; &lt;a class="ttip-none" title="instagram" href="#" target="_blank"&gt;&lt;i class="fa fa-instagram"&gt;&lt;/i&gt;&lt;/a&gt; &lt;a class="ttip-none" title="dribbble" href="#" target="_blank"&gt;&lt;i class="fa fa-dribbble"&gt;&lt;/i&gt;&lt;/a&gt; &lt;a class="ttip-none" title="github" href="#" target="_blank"&gt;&lt;i class="fa fa-github"&gt;&lt;/i&gt;&lt;/a&gt; &lt;a class="ttip-none" title="reddit" href="#" target="_blank"&gt;&lt;i class="fa fa-reddit"&gt;&lt;/i&gt;&lt;/a&gt; &lt;a class="ttip-none" title="digg" href="#" target="_blank"&gt;&lt;i class="fa fa-digg"&gt;&lt;/i&gt;&lt;/a&gt; &lt;/div&gt;</code></pre> استبدل الهاش # برابط صفحتك او حسابك على الشبكة الاجتماعية التي اخترتها مع حذف ايقون الشبكة التي لم تناسبك.<br /> <br /> كانت هذه اضافتين رائعتين <b>لأزرار مواقع التواصل الاجتماعي</b> لمدونات <b>بلوجر </b>، مع العلم انه يمكنك استخدام هذه الايقونات على اي موقع اخر غير بلوجر ، لمتابعتنا على بلوجر من <a href="https://www.blogger.com/follow-blog.g?blogID=1421699815441362866" rel="nofollow" target="_blank">هنـــا </a>، دمتم بخير!</div> </content><link rel='replies' type='application/atom+xml' href='https://www.codexait.com/feeds/7367652859980766347/comments/default' title='تعليقات الرسالة'/><link rel='replies' type='text/html' href='https://www.codexait.com/2016/12/social-icons-blogger.html#comment-form' title='1 تعليقات'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/7367652859980766347'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/7367652859980766347'/><link rel='alternate' type='text/html' href='https://www.codexait.com/2016/12/social-icons-blogger.html' title='اضافة ازرار مواقع التواصل الاجتماعي لمدونات بلوجر بطريقتين احترافيتين'/><author><name>Codex AIT</name><uri>http://www.blogger.com/profile/10277402041090003956</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFcTjVsB95C1gFAE3krg39Hdh7dmMu6QS9pXd1I3ZHOizXUXoYGUk0pFDKacxWx32H5Ni7YSdej17qiBuZnPprWuCrcLa8iorQpO_jvBm0sOqvhy2vjicX14KpOXIWOQ/s220/Codexait+Logo+2021+%284%29+-+Copy+%281%29.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNUWY4qH2jFMzuMrgjYubIWLtdLn1-blhGpL8__-VYG_PbbWHcz8EchoWFfTvwj119QHXAoUm6Q7s3d8KqZFNZV3nuy4LFINhJs9SsnsTn8TJd0NJE7vP-kLZiWHKdCvqj_m7ns9vHNQ4/s72-c-rw/social+icons.PNG" height="72" width="72"/><thr:total>1</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1421699815441362866.post-6677289560523584359</id><published>2016-12-12T00:49:00.010+03:00</published><updated>2024-05-17T07:58:02.884+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="الامن والحماية"/><category scheme="http://www.blogger.com/atom/ns#" term="شبكات"/><category scheme="http://www.blogger.com/atom/ns#" term="لينكس"/><title type='text'>افضل 8 ادوات لاختبار اختراق الشبكات اللاسلكية واي فاي على الكالي لينكس</title><content type='html'><div dir="rtl" style="text-align: right;" trbidi="on"> <div dir="rtl" style="text-align: right;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <img alt="افضل ادوات اختبار اختراق الواي فاي على الكالي لينكس" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaFMB2jtdi70oNiwb0V6uKaA3AqfzGpGZf6LRXRFtZ1yF2koM0U2VLWJZOFl-ysM4ysS0nA3QcKvVH3EJpLKbMN0yNq3BFj8D4njK6bx6rs2lk0592V826hyphenhyphenUNctCUheAmm3eXVOpCwUM/s640-rw/wifi+hacking.JPG" title="افضل ادوات اختبار اختراق الواي فاي على الكالي لينكس" /></div> <div class="separator" style="clear: both; text-align: center;"> </div> <br /></div> لاشك ان الشبكات اللاسلكية وعلى وجه التخصيص الواي فاي صارت جزء اساسي من حياتنا اليومية فهي تتواجد في كل مكان ، وعادة مانستخدمها على اجهزة الكمبيوتر والهاتف المحمول للإتصال بشبكة الانترنت ، ولهذا العديد منا يمتلك نقطة وصول Access Point في منزله لتوزيع الانترنت ، لهذا هل فكرنا في حماية هذا الجهاز من الوصول غير المصرح او بالأصح اختراقه ،لهذا&nbsp; سنقدم لكم اليوم افضل مجموعة من الأدوات لإختبار<b> اختراق شبكات الواي فاي</b> من نظام الكالي لينكس.<br /> <br /><h2 style="text-align: right;">افضل&nbsp; الأدوات لاختبار اختراق الشبكات اللاسلكية واي فاي على الكالي لينكس</h2> <h3 style="text-align: right;"><span style="color: maroon;"><a href="http://www.aircrack-ng.org/" rel="nofollow" target="_blank">AirCrack-ng</a></span></h3> هي مجموعة متكاملة من <b>الأدوات الخاصة بإختراق الشبكات اللاسلكية واي فاي</b> وهي تتخصص بمراقبة مرور البيانات على الشبكات اللاسلكية واي فاي ، وفحص امكانيات كرت الشبكة ونوع التشفير المستخدم في الشبكة ، ثم الهجوم على الشبكة .</div><div dir="rtl" style="text-align: right;" trbidi="on">ويمكنك ايضا من انشاء نقطة وصول Access Point مزيفة لجلب الضحية للارتباط بها بدلا عن الشبكة الأصلية وجلب كلمة السر للشبكة الأصلية بهذه الطريقة، تتوفر هذه <b>الأداة </b>على <b>الكالي لينكس</b> وايضا توجد نسخ خاصة بالويندوز وماكينتوش.</div><div dir="rtl" style="text-align: right;" trbidi="on"> <br /> <h3 style="text-align: right;"><span style="color: maroon;"><a href="https://code.google.com/archive/p/reaver-wps/" rel="nofollow" target="_blank">Reaver </a></span></h3> من الأدوات الشائعة في اختبار اختراق شبكات الواي فاي ،حيث تهاجم الروترات المفعلة خاصية WPS والتي عادة ماتكون مفعلة بالإعدادات الافتراضية في معظم الرواتر.</div><div dir="rtl" style="text-align: right;" trbidi="on">&nbsp;وتعتمد على اختبار العديد من كلمات السر المخزنة مسبقا في القاموس ، وهذا الهجوم يعرف ب Brute force ، لهذا تحتاج هذه الأداة للكثير من الوقت مايقارب من 4-10 ساعات على حسب قوة كلمة السر.<br /> <br /> <h3 style="text-align: right;"><span style="color: maroon;"><a href="https://github.com/wiire/pixiewps/" rel="nofollow" target="_blank">pixiewps </a></span></h3> اداة جديدة على الكالي لينكس مكتوبة بلغة السي ، وهي ايضا تستهدف الروترات المصابة بثغرات&nbsp; <b>WPS </b>وتستخدم الهجوم ب&nbsp; <b>Brute force</b> ، ولكن تستخدم هذه الأداة للأغراص التعليمية فقط وتعمل من دون اتصال بالانترنت offline.<br /> <br /> <h3 style="text-align: right;"><span style="color: maroon;"><a href="https://github.com/derv82/wifite" rel="nofollow" target="_blank">Wifite </a></span></h3> اداة رائعة على الكالي لينكس لاختبار <b>اختراق عدة انواع من&nbsp; الشبكات اللاسلكية المشفرة</b> بإحدى التشفيرات الاتية&nbsp; WEP/WPA/WPA2/WPS .<br /> <br /> <h3 style="text-align: right;"><span style="color: maroon;"><a href="https://www.wireshark.org/download.html" rel="nofollow" target="_blank">WireShark </a></span></h3> من اهم الأدوات على الكالي لينكس لتحليل برتكولات الشبكات او البيانات المنقولة عبر الشبكة بشكل دقيق، ولكن لكي تستخدمة يجب ان يكون لديك معرفة تامة في الشبكات وخاصة بمكونات برتوكولات الشبكات ومالغرض من كل جزء فيها.</div><div dir="rtl" style="text-align: right;" trbidi="on">&nbsp;وهي اداة ذات واجهة رسومية ، تتوافر هذه الأداة على نظام الكالي لينكس وايضا على الويندوز وماكينتوش.</div><div dir="rtl" style="text-align: right;" trbidi="on"> <br /> <h3 style="text-align: right;"><span style="color: maroon;"><a href="https://github.com/savio-code/fern-wifi-cracker" rel="nofollow" target="_blank">Fern Wifi Cracker</a></span></h3> اداة ذات واجهة رسومية ومكتوبة بلغة بايثون ، تستخدم للهجوم على شبكات الواي فاي.<br /> <br /> <h3 style="text-align: right;"><span style="color: maroon;"><a href="https://github.com/sophron/wifiphisher" rel="nofollow" target="_blank">WifiPhisher </a></span></h3> اداة رائعة<b> لاختراق شبكات الواي فاي</b> عن طريق الاحتيال بحيث تقوم بإنشاء نقطة اتصال مزيفة شبيهة بالأصلية ، وجعل المستخدمين يرتبطوا بها بدلا من الشبكة الأصلية ومن ثم جلب <b>كلمة السر</b> لنقطة الوصول الأصلية .<br /> <br /> <h3 style="text-align: right;"><span style="color: maroon;"><a href="https://hashcat.net/hashcat/" rel="nofollow" target="_blank">oclHashcat </a></span></h3> هذه الأداة من افضل الأدوات لإختراق كلمات السر بواسطة <b>هجوم brute force </b>، بشكل عام ، وذلك لاستخدامها معالج الرسومات والفيديو والصور GPU بدلا عن وحدة المعالجة المركزية CPU.</div><div dir="rtl" style="text-align: right;" trbidi="on">&nbsp;لهذا هي سريعة جدا ، ويمكن ايضا استخدامها مع شبكات الوي فاي ، وهي ايضا لاتأتي بشكل افتراضي مع الكالي لينكس ولكن يمكن اضافتها.<br /> <br /> <blockquote> اقرأايضا:<br /> <a href="https://www.codexait.com/2016/03/top-web-tools-in-kali-linux.html" target="_blank">اهم الأدوات على نظام كالي لينكس لإختبار إختراق مواقع الويب</a></blockquote> <br /> كانت هذه مجموعة من الأدوات المستخدمة في اختبار <b>اختراق الشبكات اللاسلكية واي فاي</b> على الكالي لينكس ،لهذا&nbsp; لكي <span style="color: red;"><b>تحمي شبكتك</b></span> من الاختراق&nbsp; يجب الغاء تفعيل خاصية WPS قبل استخدام الروتر او Access point.</div><div dir="rtl" style="text-align: right;" trbidi="on">وايضا استخدام كلمات سر معقدة مكونة من العديد من الحروف الصغيرة والكبيرة والأرقام والرموز كهذه الكلمة <span class="code"> Z248he*iw#18H3@7120 </span> وسيكون من الصعب اختراقها وخاصة من قبل المتطفلين ، اذا كانت لديك ادوات اخرى لاتتردد بوضعها في تعليق، دمتم بخير!</div> </content><link rel='replies' type='application/atom+xml' href='https://www.codexait.com/feeds/6677289560523584359/comments/default' title='تعليقات الرسالة'/><link rel='replies' type='text/html' href='https://www.codexait.com/2016/12/top-wifi-hacking-kali-linux-tools.html#comment-form' title='1 تعليقات'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/6677289560523584359'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/6677289560523584359'/><link rel='alternate' type='text/html' href='https://www.codexait.com/2016/12/top-wifi-hacking-kali-linux-tools.html' title='افضل 8 ادوات لاختبار اختراق الشبكات اللاسلكية واي فاي على الكالي لينكس'/><author><name>Codex AIT</name><uri>http://www.blogger.com/profile/10277402041090003956</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFcTjVsB95C1gFAE3krg39Hdh7dmMu6QS9pXd1I3ZHOizXUXoYGUk0pFDKacxWx32H5Ni7YSdej17qiBuZnPprWuCrcLa8iorQpO_jvBm0sOqvhy2vjicX14KpOXIWOQ/s220/Codexait+Logo+2021+%284%29+-+Copy+%281%29.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaFMB2jtdi70oNiwb0V6uKaA3AqfzGpGZf6LRXRFtZ1yF2koM0U2VLWJZOFl-ysM4ysS0nA3QcKvVH3EJpLKbMN0yNq3BFj8D4njK6bx6rs2lk0592V826hyphenhyphenUNctCUheAmm3eXVOpCwUM/s72-c-rw/wifi+hacking.JPG" height="72" width="72"/><thr:total>1</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1421699815441362866.post-8084483050420792614</id><published>2016-12-09T02:00:00.016+03:00</published><updated>2024-08-20T17:46:30.302+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="إضافات"/><category scheme="http://www.blogger.com/atom/ns#" term="تصميم مواقع"/><category scheme="http://www.blogger.com/atom/ns#" term="تطوير الويب"/><title type='text'>افضل 5 اضافات محرر نصوص WYSIWYG لمواقع الويب</title><content type='html'><div dir="rtl" style="text-align: right;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"><br /></div> اضافات <b>محرر النصوص</b> او بالأصح محرر محتوى صفحات الويب التي تعتمد على&nbsp;HTML تدعى&nbsp;<b>WYSIWYG </b>وهي اختصار للعبارة What You See Is What You Get وتعني ما انت تراه تحصل عليه ، وبالتأكيد اذا كنت مطور مواقع ستصادف الكثير من المواقع التي تعمل على نشر المحتوى .</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX_1ODHsa69rakvkL4kbmfNK8QhHaQpxWwmRpfJCR94JM3dx3x2XYWRYwgS3zOMaWInETjKEBN3C_e7DekDACYEiD7UhmYjqCaa1VsYgpaJOTf63So-OsvvZW7S1LEPrLTpA-IxrCWHbg/s640-rw/WYSIWYG.png" style="margin-left: 1em; margin-right: 1em;"><img alt="افضل 5 اضافات محرر نصوص WYSIWYG لمواقع الويب" border="0" data-original-height="538" data-original-width="800" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX_1ODHsa69rakvkL4kbmfNK8QhHaQpxWwmRpfJCR94JM3dx3x2XYWRYwgS3zOMaWInETjKEBN3C_e7DekDACYEiD7UhmYjqCaa1VsYgpaJOTf63So-OsvvZW7S1LEPrLTpA-IxrCWHbg/s640-rw/WYSIWYG.png" title="افضل 5 اضافات محرر نصوص WYSIWYG لمواقع الويب" /></a></div><br /><div dir="rtl" style="text-align: right;" trbidi="on"><br /></div><h2 style="text-align: right;">افضل الإضافات لمحررات النصوص WYSIWYG لمواقع الويب</h2><div dir="rtl" style="text-align: right;" trbidi="on"><br /></div><div dir="rtl" style="text-align: right;" trbidi="on">لهذا ستحتاج لمثل هذه الإضافات الجاهزة ، لتوفير كثيرا من الوقت والجهد ، توجد كثير من اضافات <b>محررات المحتوى</b> الجاهزة ، وهذه قائمة بأفضلها :<br /> <h3 style="text-align: right;"><span style="color: firebrick;">CKeditor</span></h3> <a href="http://ckeditor.com/" rel="nofollow" target="_blank">CKeditor </a>واحد من افضل محررات النصوص المتقدمة&nbsp; ، وسهل التركيب ،حيث يحتوي على ثلاثة نسخ بسيط ومتوسط ومتقدم يمكنك اختيار النسخة المناسبة لمشروعك.<br /> <div style="text-align: right;"><span style="color: darkslategrey;"><b>مميزاته:</b></span></div> <ol> <li dir="rtl"><span style="color: darkslategrey;">بإمكانك تخصيصة على حسب احتياجاتك</span></li> <li dir="rtl"><span style="color: darkslategrey;">يدعم التراجع&nbsp;</span>do/undo<span style="color: darkslategrey;"> </span></li> <li dir="rtl"><span style="color: darkslategrey;">يدعم الإتجاه من اليمين الى اليسار .</span></li> <li dir="rtl"><span style="color: darkslategrey;">يدعم اكثر من 60 لغة بما فيها العربية</span></li> </ol> <br /> <h3 style="text-align: right;"><span style="color: firebrick;">Raptor Editor</span></h3> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOo_NOpKCC3ah7HEZWdrbDSJbxF90hTz4d0tuyHuykm5f_KYu4CeuaHi-zNS1ChBWVyH3h8HgNDeSnMClZ5B2NnGROHsfOmq_kNPon3xlOs4YCTL1xH6aS9nUOrqRohfMYHT3TJstjmcE/s1600-rw/%25D9%25A2%25D9%25A0%25D9%25A1%25D9%25A6%25D9%25A1%25D9%25A2%25D9%25A0%25D9%25A8%25D9%25A0%25D9%25A4%25D9%25A1%25D9%25A1%25D9%25A3%25D9%25A6.png"><img alt="Raptor Editor" border="0" height="158" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOo_NOpKCC3ah7HEZWdrbDSJbxF90hTz4d0tuyHuykm5f_KYu4CeuaHi-zNS1ChBWVyH3h8HgNDeSnMClZ5B2NnGROHsfOmq_kNPon3xlOs4YCTL1xH6aS9nUOrqRohfMYHT3TJstjmcE/s640-rw/%25D9%25A2%25D9%25A0%25D9%25A1%25D9%25A6%25D9%25A1%25D9%25A2%25D9%25A0%25D9%25A8%25D9%25A0%25D9%25A4%25D9%25A1%25D9%25A1%25D9%25A3%25D9%25A6.png" title="Raptor Editor" width="640" /></a> <a href="https://github.com/PANmedia/raptor-editor" rel="nofollow" target="_blank">Raptor Editor</a> <b>محرر</b> نصوص مفتوح المصدر "<b>WYSIWYG HTML Editor</b>" ، سهل الإستخدام مكتوب بلغة الجافا سكريبت و HTML5 ،و سهل التركيب والإستخدام ،<br /> <div style="text-align: right;"><b> مميزاته</b> :</div> <ol> <li dir="rtl">مرن وسهل الإستخدام.</li> <li dir="rtl">امكانية تخصيص الشكل على حسب متطلباتك.</li> <li dir="rtl">موثق بشروحات التركيب والإستخدام.</li> </ol> <h3 style="text-align: right;"><span style="color: firebrick;">TinyMCE </span></h3> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1RY4I67N3vDTEgzYMJCRBgAIp6HApYEubqpB34Ju-jR0JBAqzw4QVvV8_dSU30FmDdOQb1qvkMBS0vpeBORxUMktlDNjPSldDS5kzicMh5XfyvWrKudH4Jv8u_uIoiKjfdqEV9LLxQxc/s1600/%25D9%25A2%25D9%25A0%25D9%25A1%25D9%25A6%25D9%25A1%25D9%25A2%25D9%25A0%25D9%25A8%25D9%25A0%25D9%25A4%25D9%25A1%25D9%25A2%25D9%25A1%25D9%25A7.png" style="clear: right; float: right; margin-bottom: 1em; margin-right: 1em;"><img alt="TinyMCE" border="0" height="184" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1RY4I67N3vDTEgzYMJCRBgAIp6HApYEubqpB34Ju-jR0JBAqzw4QVvV8_dSU30FmDdOQb1qvkMBS0vpeBORxUMktlDNjPSldDS5kzicMh5XfyvWrKudH4Jv8u_uIoiKjfdqEV9LLxQxc/s640-rw/%25D9%25A2%25D9%25A0%25D9%25A1%25D9%25A6%25D9%25A1%25D9%25A2%25D9%25A0%25D9%25A8%25D9%25A0%25D9%25A4%25D9%25A1%25D9%25A2%25D9%25A1%25D9%25A7.png" title="TinyMCE" width="640" /></a><a href="https://www.tinymce.com/" rel="nofollow" target="_blank">TinyMCE</a> محرر نصوص رائع يمكنك من تحويل اي عنصر html الى محرر نصوص ، يمكنك من الرفع المباشر للملفات على Google Drive او&nbsp;DropBox.<br /> <div style="text-align: right;"><span style="color: darkslategrey;"><b>مميزاته:</b></span></div> <ol> <li dir="rtl"><span style="color: darkslategrey;">امكانية تضمين ورفع الملفات بشكل مباشر</span></li> <li dir="rtl">محرر للصور مضمن.</li> <li dir="rtl">امكانية فحص الأخطاء اللغوية.</li> <li dir="rtl">يدعم اكثر من 40 لغة من ضمنها العربية.</li> </ol><div><pre><code><b><span style="color: #274e13;">اقرأ ايضاً</span></b>: </code><a href="https://www.codexait.com/2021/12/web-design-template-free-download.html" style="font-family: &quot;Times New Roman&quot;; white-space: normal;">افضل المواقع لتحميل قوالب وتصاميم مواقع HTML5 وCSS3 جاهزة مجانا</a></pre></div><div><br /></div> <h3 style="text-align: right;"><span style="color: firebrick;">Froala&nbsp; </span></h3> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLNYa2Wf6WzohyRgoqERSVOUUs3ZFHf0JHf5gAlo_f9__-1Hyr7s4BYhyphenhyphenowuVi3cateOUxgUbh8hRFxlt6Hv3-yIsCwFtdVViMYwb0dRxZ0K69q5ARO8JB_tPOF_cQNKKyzS5WflzFRuA/s1600-rw/%25D9%25A2%25D9%25A0%25D9%25A1%25D9%25A6%25D9%25A1%25D9%25A2%25D9%25A0%25D9%25A8%25D9%25A0%25D9%25A4%25D9%25A2%25D9%25A5%25D9%25A3%25D9%25A6.png" style="margin-left: 1em; margin-right: 1em;"><img alt="froala editor" border="0" height="144" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLNYa2Wf6WzohyRgoqERSVOUUs3ZFHf0JHf5gAlo_f9__-1Hyr7s4BYhyphenhyphenowuVi3cateOUxgUbh8hRFxlt6Hv3-yIsCwFtdVViMYwb0dRxZ0K69q5ARO8JB_tPOF_cQNKKyzS5WflzFRuA/s640-rw/%25D9%25A2%25D9%25A0%25D9%25A1%25D9%25A6%25D9%25A1%25D9%25A2%25D9%25A0%25D9%25A8%25D9%25A0%25D9%25A4%25D9%25A2%25D9%25A5%25D9%25A3%25D9%25A6.png" title="froala editor" width="640" /></a></div> <a href="https://www.froala.com/wysiwyg-editor" rel="nofollow" target="_blank">Froala</a>&nbsp; محرر متقدم وسهل الإستخدام ، يحتاج الى معرفة بلغة الجافاسكريبت و&nbsp;HTML لتركيبه يتطلب&nbsp;1.11 jQuery و font Awesome 4.4 ايضا يأتي مع الية قوية للحماية من ثغرات&nbsp;XSS.<br /> <div style="text-align: right;"><span style="color: darkslategrey;"><b>مميزاته</b></span><span style="color: darkslategrey; font-weight: normal;">:</span></div> <ol> <li dir="rtl">يدعم اختصارات لوحة المفاتيح.</li> <li dir="rtl">يتوفر على ثيم ابيض وآخر اسود ، مع امكانية التخصيص.</li> <li dir="rtl">محسن للعمل على اجهزة الموبايل.</li> <li dir="rtl">يدعم 34 لغة من ضمنها العربية.</li> <li dir="rtl">يدعم اللإتجاه من اليمين الى اليسار.</li> </ol> <h3 style="text-align: right;"><span style="color: firebrick;">Summernote </span></h3> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTtFij5yfoFmrgpF3LMZMK0k0HP4bJ5BEOe0ki0QwIqHZmuJUz_3zF5jd6LqNx-n0N61NRbt-nWkGgGafENy7IDkjU87ozrStV0NsgSYhz2k4tKM4EKDyzzwsI9eaf4zwa2zwkwaP17Z8/s1600-rw/%25D9%25A2%25D9%25A0%25D9%25A1%25D9%25A6%25D9%25A1%25D9%25A2%25D9%25A0%25D9%25A8%25D9%25A0%25D9%25A4%25D9%25A3%25D9%25A3%25D9%25A1%25D9%25A2.png" style="margin-left: 1em; margin-right: 1em;"><img alt="summernote text editor" border="0" height="230" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTtFij5yfoFmrgpF3LMZMK0k0HP4bJ5BEOe0ki0QwIqHZmuJUz_3zF5jd6LqNx-n0N61NRbt-nWkGgGafENy7IDkjU87ozrStV0NsgSYhz2k4tKM4EKDyzzwsI9eaf4zwa2zwkwaP17Z8/s640-rw/%25D9%25A2%25D9%25A0%25D9%25A1%25D9%25A6%25D9%25A1%25D9%25A2%25D9%25A0%25D9%25A8%25D9%25A0%25D9%25A4%25D9%25A3%25D9%25A3%25D9%25A1%25D9%25A2.png" title="summernote text editor" width="640" /></a></div> <a href="http://summernote.org/" rel="nofollow" target="_blank">Summernote</a> محرر نصوص&nbsp; مبني على اساس <a href="https://www.codexait.com/2016/10/best-bootstrap-arabic-course.html" target="_blank">البوتستراب&nbsp;Bootstrap</a>&nbsp; توجد العديد من الثيمات له من بينها ثيم ماتريال.<br /> <div style="text-align: right;"><span style="color: darkslategrey;"><b>مميزاته</b>:</span></div> <ol> <li>صغير الحجم 80 كيلوبت من&nbsp;JS/CSS</li> <li>يدعم Bootstrap 3.x.x</li> <li>يمكن استخدامه مع AngularJS</li> <li>سهل التخصيص </li> </ol> <br /> <blockquote> <b>اقرأ ايضا:</b><br /><a href="https://www.codexait.com/2016/12/top-5-slider-show.html" target="_blank"> اشهر 5 اضافات سلايد شو لمواقع الويب </a><br /> <a href="https://www.codexait.com/2016/12/css3-animation-libraries.html" target="_blank"> افضل 5 مكتبات Animation لعمل تأثيرات رائعة في مواقع الويب </a><br /> <a href="https://www.codexait.com/2024/08/html5-css3-landing-page-templates.html">افضل 20 قالب صفحة هبوط HTML5 و CSS3 مجانية لمواقع الويب</a> </blockquote> <br /> كانت هذه مجموعة مميزة من <b>محررات المحتوى&nbsp;WYSIWYG HTML Editors</b> ، لتستخدم ما يناسبك منها&nbsp; في مشاريعك ، واذا كانت لديك اضافات اخرى تستخدمها لاتتردد بمشاركتها في تعليق ، دمتم في رعاية الله وحفظه!</div> </content><link rel='replies' type='application/atom+xml' href='https://www.codexait.com/feeds/8084483050420792614/comments/default' title='تعليقات الرسالة'/><link rel='replies' type='text/html' href='https://www.codexait.com/2016/12/wysiwyg-html-editors.html#comment-form' title='0 تعليقات'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/8084483050420792614'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/8084483050420792614'/><link rel='alternate' type='text/html' href='https://www.codexait.com/2016/12/wysiwyg-html-editors.html' title='افضل 5 اضافات محرر نصوص WYSIWYG لمواقع الويب'/><author><name>Codex AIT</name><uri>http://www.blogger.com/profile/10277402041090003956</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFcTjVsB95C1gFAE3krg39Hdh7dmMu6QS9pXd1I3ZHOizXUXoYGUk0pFDKacxWx32H5Ni7YSdej17qiBuZnPprWuCrcLa8iorQpO_jvBm0sOqvhy2vjicX14KpOXIWOQ/s220/Codexait+Logo+2021+%284%29+-+Copy+%281%29.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX_1ODHsa69rakvkL4kbmfNK8QhHaQpxWwmRpfJCR94JM3dx3x2XYWRYwgS3zOMaWInETjKEBN3C_e7DekDACYEiD7UhmYjqCaa1VsYgpaJOTf63So-OsvvZW7S1LEPrLTpA-IxrCWHbg/s72-c-rw/WYSIWYG.png" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1421699815441362866.post-8954034616892725821</id><published>2016-12-01T01:19:00.009+03:00</published><updated>2024-08-20T17:33:54.925+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="إضافات"/><category scheme="http://www.blogger.com/atom/ns#" term="تصميم مواقع"/><category scheme="http://www.blogger.com/atom/ns#" term="سلايدر شو"/><title type='text'>اشهر 5 اضافات سلايد شو لمواقع الويب</title><content type='html'><div dir="rtl" style="text-align: right;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiME4Igr0mCD2iPou5GStjddvOzgSg7FrLVNKG2fF7Kc-Xnf9I2QdvvWOp1GcuI_JxK7LdFG5LlZMXzjl7BPVbPLkkcCrzO1HE44IW2oR_9cFXWG-xFy8D8V5SZcXPDzVEzkd7ILAJoKFc/s640-rw/top+slider+show.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="اشهر 5 اضافات سلايدشو لمواقع الويب" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiME4Igr0mCD2iPou5GStjddvOzgSg7FrLVNKG2fF7Kc-Xnf9I2QdvvWOp1GcuI_JxK7LdFG5LlZMXzjl7BPVbPLkkcCrzO1HE44IW2oR_9cFXWG-xFy8D8V5SZcXPDzVEzkd7ILAJoKFc/s640-rw/top+slider+show.jpg" title="top 5 slider show for websites" /></a></div> اذا كنت مصمم مواقع بالتأكيد ستحتاج للعديد من <b>إضافات السلايد شو Slider</b> بأنماط واشكال مختلفة لتوظفها حسب احتياجاتك او لتلبية متطلبات العميل ، وإضافة روح التنوع في التصميم.</div><div dir="rtl" style="text-align: right;" trbidi="on"><br /></div><div dir="rtl" style="text-align: right;" trbidi="on">&nbsp;دعنا نتعرف على اشهر 5 إضافات سلايد شو لمواقع الويب والتي تتمتع بالعديد من الإمكانيات والأشكال المختلفة. <br /> <br /><h2 style="text-align: right;">اشهر اضافات السلايد شو لمواقع الويب</h2> <h3 style="text-align: right;"><a href="https://github.com/jssor/slider" rel="nofollow" target="_blank">jssor slider</a></h3> يعتبر من اقدم إضافات السلايد شو على الويب ، حيث تعتبر السلايد شو الوحيد الذي يحتوي على نسخة مطورة بالجافا سكريبت فقط بدون أي مكاتب خارجية ، وبنفس الوقت يحتوي على نسخة بالجي كويري ، حيث توجد بأكثر من 30 شكل والعديد من الإعدادات ، ومن مميزاتها : <br /> <ol> <li><b>متجاوب</b> مع جميع احجام الشاشات.</li> <li>تدعم خاصية التحريك باللمس او الماوس.</li> <li>توجد بنسختين <b>نسخة بالجافا سكريبت فقط</b> ، ونسخة مع jQuery .</li> <li>اكثر من 360 تأثير بتقنية CSS3.</li> <li>العديد من الأشكال الاحترافية الجاهزة حيث بوجد على الموقع اكثر من 30 مثال حي للمعاينة والتركيب.</li> <li>توجد نسخة مضغوطة جدا لأصحاب الإحتياجات الخاصة.</li> <li>تعمل على جميع المتصفحات.</li> <li>مفتوحة المصدر توجد نسخة كاملة من السلايد شو مع التوثيق للتطوير والتعديل.</li> <li>تدعم التنقل بواسطة لوحة المفاتيح.</li> <li>متوافقة مع بلوجر.</li> </ol> <br /> <h3 style="text-align: right;"><a href="https://owlcarousel2.github.io/OwlCarousel2/" rel="nofollow" target="_blank">owl carousel</a></h3> من اشهر إضافات السلايد شو على الويب ، والأكثر استخداما من قبل الكثير من المصممين ، لسهولة استخدامها وحجمها الصغير ، أيضا مع ظهور الإصدار التجريبي الجديد صارت اكثر من رائعة بتعدد الخيارات ، رغم ارتفاع حجمها للضعف تقريبا ، ومن مميزاتها الهامة : <br /> <ol> <li>متجاوب بنسبة 100%.</li> <li>خفيفة وسهلة التركيب والتحكم.</li> <li>متوافقة مع جميع المتصفحات .</li> <li>تمتلك العديد من الخيارات للتحكم بها حسب احتياجاتك.</li> <li>إمكانية انشاء اكثر من سلايدر شو على نفس الصفحة.</li> </ol> أيضا اذا كنت مصممي قوالب بلوجر يمكنك قراءة <a href="https://www.codexait.com/2016/11/slideshow-blogger.html" target="_blank">سلايد شو احترافي تلقائي لمدونات بلوجر.</a> <br /> <br /> <h3 style="text-align: right;"><a href="http://flexslider.woothemes.com/" rel="nofollow" target="_blank">Flex slider</a></h3> تعتبر Flex <b>slider </b>من الإضافات الشهيرة ، وتستخدم بكثرة على أنظمة ادارة المحتوى كوردبرس و دروبال وهي بالفعل مرنة ، حيث تتميز بعرضها الرائع للفيديو والصور ومن مميزاتها : <br /> <ol> <li>متجاوب</li> <li>خفيفة نوعا ما لتعمل على الهواتف المحمولة ، مع دعم خاصية اللمس.</li> <li>حركات وتأثيرات فريدة.</li> </ol> <br /> <blockquote> اقرأ ايضا: <br /> <a href="https://www.codexait.com/2016/12/wysiwyg-html-editors.html" target="_blank"> افضل 5 اضافات محرر نصوص WYSIWYG لمواقع الويب </a> <br /> <a href="https://www.codexait.com/2016/12/css3-animation-libraries.html" target="_blank"> افضل 5 مكتبات Animation لعمل تأثيرات رائعة في مواقع الويب </a> </blockquote> <h3 style="text-align: right;"><a href="http://bxslider.com/" rel="nofollow" target="_blank">bxSlider</a></h3> من إضافات السلايد شو الحديثة وتعتبر قريبة لخصائص وإمكانيات owl carousel فهي تتمتع بالعديد من المميزات ، والتي منها الاتي : <br /> <ol> <li>متجاوب </li> <li>خفيفة وسهلة التحكم والاستخدام.</li> <li>تدعم النمط الرأسي والأفقي.</li> <li>تدعم جميع صيغ المحتوى من صور وفيديو ونصوص.</li> <li>توجد العديد من الخيارات للتحكم بها.</li> </ol> <br /> <blockquote> <b>اقرأ ايضا:</b> <a href="https://www.codexait.com/2024/08/html5-css3-landing-page-templates.html">افضل 20 قالب صفحة هبوط HTML5 و CSS3 مجانية لمواقع الويب</a> </blockquote> <br/> <h3 style="text-align: right;"><a href="http://kenwheeler.github.io/slick/" rel="nofollow" target="_blank">Slick Carousel</a></h3> من الإضافات الرائعة التي تتمتع بسهولة التحكم وتعدد الاستخدامات ، للاطلاع على المزيد حولها يمكنك الاطلاع على هذه المقالة <a href="https://www.codexait.com/2016/07/slider-show.html" target="_blank"> سلايدر شو احترافي بالعديد من المميزات</a> <br /> <br /> كانت هذه مجموعة مميزة من <b>إضافات السلايد شو</b> لتستخدمها في تصميم مواقع الويب ، و اذا كانت هناك إضافات أخرى تستخدمها شاركها معنا في تعليق ليستفيد الجميع ، دمتم في رعاية الله وحفظه! <br /> <br /></div> </content><link rel='replies' type='application/atom+xml' href='https://www.codexait.com/feeds/8954034616892725821/comments/default' title='تعليقات الرسالة'/><link rel='replies' type='text/html' href='https://www.codexait.com/2016/12/top-5-slider-show.html#comment-form' title='0 تعليقات'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/8954034616892725821'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/8954034616892725821'/><link rel='alternate' type='text/html' href='https://www.codexait.com/2016/12/top-5-slider-show.html' title='اشهر 5 اضافات سلايد شو لمواقع الويب'/><author><name>Codex AIT</name><uri>http://www.blogger.com/profile/10277402041090003956</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFcTjVsB95C1gFAE3krg39Hdh7dmMu6QS9pXd1I3ZHOizXUXoYGUk0pFDKacxWx32H5Ni7YSdej17qiBuZnPprWuCrcLa8iorQpO_jvBm0sOqvhy2vjicX14KpOXIWOQ/s220/Codexait+Logo+2021+%284%29+-+Copy+%281%29.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiME4Igr0mCD2iPou5GStjddvOzgSg7FrLVNKG2fF7Kc-Xnf9I2QdvvWOp1GcuI_JxK7LdFG5LlZMXzjl7BPVbPLkkcCrzO1HE44IW2oR_9cFXWG-xFy8D8V5SZcXPDzVEzkd7ILAJoKFc/s72-c-rw/top+slider+show.jpg" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1421699815441362866.post-9001690206987389546</id><published>2016-11-29T04:15:00.005+03:00</published><updated>2024-05-17T08:00:33.768+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="PHP"/><category scheme="http://www.blogger.com/atom/ns#" term="تطوير الويب"/><title type='text'>استخدام وبرمجة رمز التحقق captcha بلغة php</title><content type='html'><div dir="rtl" style="text-align: right;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg23Lyf1x0LWWs1PKtP1CUu6bkJiG49aUHmC5_iOBhuc4Ia0hlR4Flg6fb9bEPPPccqcgR88XHdtvq2iVmD3X9cTc9cLtk0V2MU9V5xZOsK6RDSjSyuQwmKB-P74fsDhyphenhyphenVksIzKmF6j29s/s640-rw/Generate+Captcha+by+PHP.png" style="margin-left: 1em; margin-right: 1em;"><img alt="استخدام وبرمجة رمز التحقق captcha بلغة php" border="0" data-original-height="500" data-original-width="800" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg23Lyf1x0LWWs1PKtP1CUu6bkJiG49aUHmC5_iOBhuc4Ia0hlR4Flg6fb9bEPPPccqcgR88XHdtvq2iVmD3X9cTc9cLtk0V2MU9V5xZOsK6RDSjSyuQwmKB-P74fsDhyphenhyphenVksIzKmF6j29s/s640-rw/Generate+Captcha+by+PHP.png" title="استخدام وبرمجة رمز التحقق captcha بلغة php" /></a></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div> <b>رمز التحقق captcha </b>هي نظام بسيط للتحقق من المستخدم ما إذا كان انسان او روبوت ، وتستخدم للحماية من السبام spam على مواقع الويب، حيث يتم انشاء صورة والتي تتكون من نصوص عشوائية بالإضافة الى مجموعة من الخطوط والنقاط العشوائية للتشويش ودمج النص في الصورة، ويتم استخدامها في النماذج Forms بشكل كبير وخاصة مع صندوق الاتصال والتعليقات. <br /> <br /> يتم تخزين الكود او النص العشوائي في جلسة session قبل دمجها في الصورة وارسالها للمستخدم ، وعند ارسال رمز التحقق من المستخدم يتم مقارنته مع القيمة المخزنة في الجلسة ، وهذه هي الية عملها. <br /> <br /> هذا كود جاهز لإنشاء الكابتشا captcha ، حيث يمكنك تغيير الخط المستخدم ولون الخط وابعاد الصورة والحروف المستخدمة في نظام التحقق ، بالإضافة الى التحكم بالضوضاء (خطوط ونقاط) وكميتها في الصورة ، كما هو محدد باللون الأحمر في في الكود التالي : <br /> <pre><code>&lt;?php session_start(); //Settings: You can customize the captcha here <span class="r">$image_width = 130;</span> <span class="r">$image_height = 50;</span> <span class="r">$characters_on_image = 6;</span> <span class="r">$font = './monofont.ttf';</span> //The characters that can be used in the CAPTCHA code. //avoid confusing characters (l 1 and i for example) <span class="r">$possible_letters = '23456789bcdfghjkmnpqrstvwxyz';</span> <span class="r">$random_dots = 0;</span> <span class="r">$random_lines = 30;</span> <span class="r">$captcha_text_color="0xffffff"</span> <span class="r">$captcha_noice_color = "0xffffff"</span> $code = ''; $i = 0; while ($i &lt; $characters_on_image) { $code .= substr($possible_letters, mt_rand(0, strlen($possible_letters)-1), 1); $i++; } $font_size = $image_height * 0.75; $image = @imagecreate($image_width, $image_height); /* setting the background, text and noise colours here */ $background_color = imagecolorallocate($image, 40, 40, 40); $arr_text_color = hexrgb($captcha_text_color); $text_color = imagecolorallocate($image, $arr_text_color['red'], $arr_text_color['green'], $arr_text_color['blue']); $arr_noice_color = hexrgb($captcha_noice_color); $image_noise_color = imagecolorallocate($image, $arr_noice_color['red'], $arr_noice_color['green'], $arr_noice_color['blue']); /* generating the dots randomly in background */ for( $i=0; $i&lt;$random_dots; $i++ ) { imagefilledellipse($image, mt_rand(0,$image_width), mt_rand(0,$image_height), 2, 3, $image_noise_color); } /* generating lines randomly in background of image */ for( $i=0; $i&lt;$random_lines; $i++ ) { imageline($image, mt_rand(0,$image_width), mt_rand(0,$image_height), mt_rand(0,$image_width), mt_rand(0,$image_height), $image_noise_color); } /* create a text box and add 6 letters code in it */ $textbox = imagettfbbox($font_size, 0, $font, $code); $x = ($image_width - $textbox[4])/2; $y = ($image_height - $textbox[5])/2; imagettftext($image, $font_size, 0, $x, $y, $text_color, $font , $code); /* Show captcha image in the page html page */ header('Content-Type: image/jpeg');// defining the image type to be shown in browser widow imagejpeg($image);//showing the image imagedestroy($image);//destroying the image instance <span class="g">$_SESSION['6_letters_code'] = $code;</span> function hexrgb ($hexstr) { $int = hexdec($hexstr); return array("red" =&gt; 0xFF &amp; ($int &gt;&gt; 0x10), "green" =&gt; 0xFF &amp; ($int &gt;&gt; 0x8), "blue" =&gt; 0xFF &amp; $int); } ?&gt;</code></pre> <br /> حيث تم بدء جلسة في بداية الكود ، وكما هو ملاحظ في الكود السابق المحدد باللون الأخضر تم تخزين كود التحقق في الجلسة باسم <span class="code"> 6_letters_code </span> ، لكي يتم مقارنتها مع الكود المرسل من المستخدم . <br /> <br /> في الكود التالي تم استدعاء الكابتشا والتحقق من البيانات المدخلة ، ومقارنتها مع القيمة المخزنة في الجلسة : <br /> <pre><code>&lt;?php session_start(); $errors =""; if(isset($_POST['submit'])){ if(empty($_SESSION['6_letters_code'] ) || strcasecmp($_SESSION['6_letters_code'], $_POST['6_letters_code']) != 0) { $errors = " رمز التحقق غير صحيح"; }else{ header('Location: thank-you.html'); } } ?&gt; &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;PHP Secure Advanced Captcha.&lt;/title&gt; &lt;link href="./styles.css" rel="stylesheet"&gt; &lt;script type='text/javascript'&gt; function refreshCaptcha(){ var img = document.images['captchaimg']; img.src = img.src.substring(0,img.src.lastIndexOf("?"))+"?rand="+Math.random()*1000; } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;?php if(!empty($errors)){ echo "&lt;p class='err'&gt;".$errors."&lt;/p&gt;"; } ?&gt; &lt;div class="container"&gt; &lt;div id="header" class="header"&gt; &lt;h1&gt;PHP Secure Advanced Captcha&lt;/h1&gt; &lt;p&gt; &lt;a href="http://www.dev-techno.com/"&gt;www.dev-techno.com&lt;/a&gt;&lt;/p&gt; &lt;/div&gt; &lt;form method="POST" name="contact_form" action="&lt;?php echo htmlentities($_SERVER['PHP_SELF']); ?&gt;" class="dev-techno" &gt; &lt;img src="captcha_code_file.php?rand=&lt;?php echo rand(); ?&gt;" id='captchaimg' &gt; &lt;p&gt; ادخل رمز التحقق هنا:&lt;/p&gt; &lt;input type="text" id="6_letters_code" name="6_letters_code"/&gt;&lt;br/&gt; &lt;small&gt;لا أستطيع قراءة الرمز؟ اضغط &lt;a href='javascript: refreshCaptcha();'&gt;هنا&lt;/a&gt; للتحديث&lt;/small&gt; &lt;br/&gt; &lt;input type="submit" name="submit" value="ارسال" /&gt; &lt;/form&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> <br /> تم استدعاء الصورة التي تحتوي على كود الكابتشا بالطريقة الآتية : <br /> <pre><code>&lt;img src="captcha_code_file.php?rand=&lt;?php echo rand(); ?&gt;" id='captchaimg' &gt; </code></pre> <br /> في الكود التالي تم التحقق من صحة البيانات المدخلة بمقارنتها مع البيانات المخزنة في الجلسة <span class="code"> 6_letters_code </span> ما إذا كانت صحيحة ، بحيث اذا كانت متطابقة يتم توجيهك الى الصفحة المقصود ه او اكمال عملية ارسال البيانات ، وفي حال عدم التطابق يتم عرض رسالة الخطأ. <br /> <pre><code>if(empty($_SESSION['6_letters_code'] ) || strcasecmp($_SESSION['6_letters_code'], $_POST['6_letters_code']) != 0) { $errors = " رمز التحقق غير صحيح"; }else{ header('Location: thank-you.html'); }</code></pre> <br /> أنشئت مثال كامل لاستخدام الكابتشا captcha في مواقع الويب ، يمكنك تحميله من هنا : <br /> <a class="redirect" href="https://www.dropbox.com/s/2wxci3pew9jtevd/captcha.zip" rel="nofollow" target="_blank">تحميل الكود</a> <br /> كانت هذه طريقة سهلة <b>لإستخدام رمز التحقق captcha</b> في مواقع الويب ، واذا واجهت أي مشكلة او لديك استفسار حول الموضوع لا تتردد بتركها تعليق ، دمتم في رعاية الله وحفظه! <br /> <br /> <blockquote> اقرأ ايضا:<br /> <a href="https://www.codexait.com/2016/01/upload-multiple-files-in-php.html" target="_blank">رفع عدة ملفات او صور بنفس الوقت بلغة php</a> </blockquote> </div> </content><link rel='replies' type='application/atom+xml' href='https://www.codexait.com/feeds/9001690206987389546/comments/default' title='تعليقات الرسالة'/><link rel='replies' type='text/html' href='https://www.codexait.com/2016/11/captcha-php.html#comment-form' title='0 تعليقات'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/9001690206987389546'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/9001690206987389546'/><link rel='alternate' type='text/html' href='https://www.codexait.com/2016/11/captcha-php.html' title='استخدام وبرمجة رمز التحقق captcha بلغة php'/><author><name>Codex AIT</name><uri>http://www.blogger.com/profile/10277402041090003956</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFcTjVsB95C1gFAE3krg39Hdh7dmMu6QS9pXd1I3ZHOizXUXoYGUk0pFDKacxWx32H5Ni7YSdej17qiBuZnPprWuCrcLa8iorQpO_jvBm0sOqvhy2vjicX14KpOXIWOQ/s220/Codexait+Logo+2021+%284%29+-+Copy+%281%29.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg23Lyf1x0LWWs1PKtP1CUu6bkJiG49aUHmC5_iOBhuc4Ia0hlR4Flg6fb9bEPPPccqcgR88XHdtvq2iVmD3X9cTc9cLtk0V2MU9V5xZOsK6RDSjSyuQwmKB-P74fsDhyphenhyphenVksIzKmF6j29s/s72-c-rw/Generate+Captcha+by+PHP.png" height="72" width="72"/><thr:total>0</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1421699815441362866.post-3463895674006400103</id><published>2016-11-27T01:58:00.006+03:00</published><updated>2022-03-18T02:48:58.900+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="إضافات بلوجر"/><category scheme="http://www.blogger.com/atom/ns#" term="بلوجر"/><category scheme="http://www.blogger.com/atom/ns#" term="سلايدر شو"/><title type='text'>اضافة سلايد شو احترافي لمدونات بلوجر</title><content type='html'><div dir="rtl" style="text-align: right;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYclQ38LurqlQCyBVBkYbH0NA0UPv9d5flc1A-UIDzCa_VBbwf3tzDTVryskDEebdZTpHzwOT7-2ciTBpIpkK4LIeO3jLgr26SPV0EjElB_MrHARItIlqAtRyIkHG_bHzwVzoWY9fl7lI/s1600-rw/slidershow.jpg" style="margin-left: 1em; margin-right: 1em;"><img alt="سلايد شو تلقائي احترافي لمدونات بلوجر" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYclQ38LurqlQCyBVBkYbH0NA0UPv9d5flc1A-UIDzCa_VBbwf3tzDTVryskDEebdZTpHzwOT7-2ciTBpIpkK4LIeO3jLgr26SPV0EjElB_MrHARItIlqAtRyIkHG_bHzwVzoWY9fl7lI/s16000-rw/slidershow.jpg" title="سلايد شو تلقائي احترافي لمدونات بلوجر" /></a></div> السلايد شو من الإضافات الجمالية لكل مدونة لإستعراض اخر المواضيع في مدونتك بطريقة احترافية تجعل احتمالية ضغط الزائر على المقالة كبيرة ، لهذا سأقدم لكم اليوم <b>سلايد شو رائع لمدونات بلوجر</b>، يتمتع بالعديد من المميزات والتي منها الآتي : <br /> <ol> <li>متجاوب مع كل الشاشات.</li> <li>شكل جميل وحصري.</li> <li>بشكل تلقائي يعرض آخر المواضيع.</li> <li>يستخدم تقنية الأجاكس لعدم التأثير على سرعة المدونة.</li> <li>يستخدم إضافة owl carousel الحديثة.</li> <li>بالإضافة الى صورة المقال والعنوان يعرض اسم المدون والتاريخ وعدد التعليقات.</li> </ol> <br /><h2 class="r">تركيب إضافة السلايد شو لمدونات بلوجر: </h2> 1 – ابحث عن الكود <span class="code" style="direction: ltr;">]]&gt;&lt;/b:skin&gt;</span> في تحرير HTML على بلوجر وأضف الكود التالي قبله : <br /> <pre><code>.devt-slider{ background: #fff; position:relative; margin-top: 2px; } .devt-slider ul{clear:both;list-style:none} .devt-slider ul li{height:260px;position:relative}.devt-slider ul li a{text-decoration:none;display:inline-block;height:100%;width:100%;position:relative} .devt-slider ul li a img{display:block;position:relative;height:100%;width:100%} .devt-slider ul li a:after{transition:all 0.3s ease-in-out;content:"";position:absolute;width:100%;height:100%;z-index:1000;top:0;right:0;background:rgba(42, 94, 121,0.2)} .devt-slider ul li a div{-webkit-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;z-index:100000;display:block;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:10px;height;auto;position:absolute;color:#ddd;bottom:0px;right:0;text-align:right; background-image: -webkit-linear-gradient(transparent,rgba(0, 0, 0,0.5)); background-image: -moz-linear-gradient(transparent,rgba(0, 0, 0,0.5)); background-image: linear-gradient(transparent,rgba(0, 0, 0,0.5)); overflow: hidden; transition: 0.2s; vertical-align: middle; text-align: right; } .devt-slider ul li a:hover div { background-image: -webkit-linear-gradient(transparent,rgba(0, 0, 0,0.9)); background-image: -moz-linear-gradient(transparent,rgba(0, 0, 0,0.9)); background-image: linear-gradient(transparent,rgba(0, 0, 0,0.9)); padding-bottom:20px; } .devt-slider ul li a div h4{font-size:14px;font-family:"Droid Arabic Naskh",tahoma;color:#eee;} .devt-slider ul li a div i,.devt-slider ul li a div span{font-size:10px;direction:rtl;display:inline-block} .devt-slider ul li a div span{padding-left:10px;font-size:11px;font-family:"Droid Arabic Naskh",tahoma} .devt-slider ul li a div i{padding-left:4px} .devt-slider ul li a:hover:after{background:rgba(61,61,61,0);)} .devt-slider .owl-nav{text-align:center;width:100%;height:0} .devt-slider .owl-nav div{color:rgba(255,255,255,0.78);display:inline-block;font-size:55px;opacity:.9;text-shadow:2px 2px 9px rgba(0,0,0,0.65);width:30px;transition:0.3s}.devt-slider:hover .owl-nav div{opacity:1}.devt-slider .owl-nav div:hover{color:#fff} .devt-slider .owl-prev{position:absolute;right:10px;bottom:40%;} .devt-slider .owl-next{position:absolute;left:10px;bottom:40%;} .devt-slider .owl-prev:before{content:"\f105";font-family:fontawesome}.devt-slider .owl-next:before{content:"\f104";font-family:fontawesome}.owl-carousel{display:none;width:100%;-webkit-tap-highlight-color:transparent;position:relative;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0px,0px,0px)}.owl-carousel .owl-controls .owl-nav .owl-prev,.owl-carousel .owl-controls .owl-nav .owl-next,.owl-carousel .owl-controls .owl-dot{cursor:pointer;cursor:hand;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-loaded{display:block}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel .owl-refresh .owl-item{display:none}.owl-carousel .owl-item{position:relative;min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} .owl-carousel .owl-item img{display:block;width:100%;-webkit-transform-style:preserve-3d} .owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right} </code></pre> <br /> 2 – ابحث عن الكود <span class="code" style="direction: ltr;">&lt;/body&gt;</span> وضع الكود التالي قبله : <br /> <pre><code>&lt;b:if cond='data:blog.pageType != &amp;quot;item&amp;quot;'&gt; &lt;b:if cond='data:blog.pageType != &amp;quot;static_page&amp;quot;'&gt; &lt;script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/&gt; &lt;script type='text/javascript'&gt; //&lt;![CDATA[ !function(a,b,c,d){function e(b,c){this.settings=null,this.options=a.extend({},e.Defaults,c),this.$element=a(b),this.drag=a.extend({},m),this.state=a.extend({},n),this.e=a.extend({},o),this._plugins={},this._supress={},this._current=null,this._speed=null,this._coordinates=[],this._breakpoint=null,this._width=null,this._items=[],this._clones=[],this._mergers=[],this._invalidated={},this._pipe=[],a.each(e.Plugins,a.proxy(function(a,b){this._plugins[a[0].toLowerCase()+a.slice(1)]=new b(this)},this)),a.each(e.Pipe,a.proxy(function(b,c){this._pipe.push({filter:c.filter,run:a.proxy(c.run,this)})},this)),this.setup(),this.initialize()}function f(a){if(a.touches!==d)return{x:a.touches[0].pageX,y:a.touches[0].pageY};if(a.touches===d){if(a.pageX!==d)return{x:a.pageX,y:a.pageY};if(a.pageX===d)return{x:a.clientX,y:a.clientY}}}function g(a){var b,d,e=c.createElement("div"),f=a;for(b in f)if(d=f[b],"undefined"!=typeof e.style[d])return e=null,[d,b];return[!1]}function h(){return g(["transition","WebkitTransition","MozTransition","OTransition"])[1]}function i(){return g(["transform","WebkitTransform","MozTransform","OTransform","msTransform"])[0]}function j(){return g(["perspective","webkitPerspective","MozPerspective","OPerspective","MsPerspective"])[0]}function k(){return"ontouchstart"in b||!!navigator.msMaxTouchPoints}function l(){return b.navigator.msPointerEnabled}var m,n,o;m={start:0,startX:0,startY:0,current:0,currentX:0,currentY:0,offsetX:0,offsetY:0,distance:null,startTime:0,endTime:0,updatedX:0,targetEl:null},n={isTouch:!1,isScrolling:!1,isSwiping:!1,direction:!1,inMotion:!1},o={_onDragStart:null,_onDragMove:null,_onDragEnd:null,_transitionEnd:null,_resizer:null,_responsiveCall:null,_goToLoop:null,_checkVisibile:null},e.Defaults={items:3,loop:!1,center:!1,mouseDrag:!0,touchDrag:!0,pullDrag:!0,freeDrag:!1,margin:0,stagePadding:0,merge:!1,mergeFit:!0,autoWidth:!1,startPosition:0,rtl:!1,smartSpeed:250,fluidSpeed:!1,dragEndSpeed:!1,responsive:{},responsiveRefreshRate:200,responsiveBaseElement:b,responsiveClass:!1,fallbackEasing:"swing",info:!1,nestedItemSelector:!1,itemElement:"div",stageElement:"div",themeClass:"owl-theme",baseClass:"owl-carousel",itemClass:"owl-item",centerClass:"center",activeClass:"active"},e.Width={Default:"default",Inner:"inner",Outer:"outer"},e.Plugins={},e.Pipe=[{filter:["width","items","settings"],run:function(a){a.current=this._items&amp;&amp;this._items[this.relative(this._current)]}},{filter:["items","settings"],run:function(){var a=this._clones,b=this.$stage.children(".cloned");(b.length!==a.length||!this.settings.loop&amp;&amp;a.length&gt;0)&amp;&amp;(this.$stage.children(".cloned").remove(),this._clones=[])}},{filter:["items","settings"],run:function(){var a,b,c=this._clones,d=this._items,e=this.settings.loop?c.length-Math.max(2*this.settings.items,4):0;for(a=0,b=Math.abs(e/2);b&gt;a;a++)e&gt;0?(this.$stage.children().eq(d.length+c.length-1).remove(),c.pop(),this.$stage.children().eq(0).remove(),c.pop()):(c.push(c.length/2),this.$stage.append(d[c[c.length-1]].clone().addClass("cloned")),c.push(d.length-1-(c.length-1)/2),this.$stage.prepend(d[c[c.length-1]].clone().addClass("cloned")))}},{filter:["width","items","settings"],run:function(){var a,b,c,d=this.settings.rtl?1:-1,e=(this.width()/this.settings.items).toFixed(3),f=0;for(this._coordinates=[],b=0,c=this._clones.length+this._items.length;c&gt;b;b++)a=this._mergers[this.relative(b)],a=this.settings.mergeFit&amp;&amp;Math.min(a,this.settings.items)||a,f+=(this.settings.autoWidth?this._items[this.relative(b)].width()+this.settings.margin:e*a)*d,this._coordinates.push(f)}},{filter:["width","items","settings"],run:function(){var b,c,d=(this.width()/this.settings.items).toFixed(3),e={width:Math.abs(this._coordinates[this._coordinates.length-1])+2*this.settings.stagePadding,"padding-left":this.settings.stagePadding||"","padding-right":this.settings.stagePadding||""};if(this.$stage.css(e),e={width:this.settings.autoWidth?"auto":d-this.settings.margin},e[this.settings.rtl?"margin-left":"margin-right"]=this.settings.margin,!this.settings.autoWidth&amp;&amp;a.grep(this._mergers,function(a){return a&gt;1}).length&gt;0)for(b=0,c=this._coordinates.length;c&gt;b;b++)e.width=Math.abs(this._coordinates[b])-Math.abs(this._coordinates[b-1]||0)-this.settings.margin,this.$stage.children().eq(b).css(e);else this.$stage.children().css(e)}},{filter:["width","items","settings"],run:function(a){a.current&amp;&amp;this.reset(this.$stage.children().index(a.current))}},{filter:["position"],run:function(){this.animate(this.coordinates(this._current))}},{filter:["width","position","items","settings"],run:function(){var a,b,c,d,e=this.settings.rtl?1:-1,f=2*this.settings.stagePadding,g=this.coordinates(this.current())+f,h=g+this.width()*e,i=[];for(c=0,d=this._coordinates.length;d&gt;c;c++)a=this._coordinates[c-1]||0,b=Math.abs(this._coordinates[c])+f*e,(this.op(a,"&lt;=",g)&amp;&amp;this.op(a,"&gt;",h)||this.op(b,"&lt;",g)&amp;&amp;this.op(b,"&gt;",h))&amp;&amp;i.push(c);this.$stage.children("."+this.settings.activeClass).removeClass(this.settings.activeClass),this.$stage.children(":eq("+i.join("), :eq(")+")").addClass(this.settings.activeClass),this.settings.center&amp;&amp;(this.$stage.children("."+this.settings.centerClass).removeClass(this.settings.centerClass),this.$stage.children().eq(this.current()).addClass(this.settings.centerClass))}}],e.prototype.initialize=function(){if(this.trigger("initialize"),this.$element.addClass(this.settings.baseClass).addClass(this.settings.themeClass).toggleClass("owl-rtl",this.settings.rtl),this.browserSupport(),this.settings.autoWidth&amp;&amp;this.state.imagesLoaded!==!0){var b,c,e;if(b=this.$element.find("img"),c=this.settings.nestedItemSelector?"."+this.settings.nestedItemSelector:d,e=this.$element.children(c).width(),b.length&amp;&amp;0&gt;=e)return this.preloadAutoWidthImages(b),!1}this.$element.addClass("owl-loading"),this.$stage=a("&lt;"+this.settings.stageElement+' class="owl-stage"/&gt;').wrap('&lt;div class="owl-stage-outer"&gt;'),this.$element.append(this.$stage.parent()),this.replace(this.$element.children().not(this.$stage.parent())),this._width=this.$element.width(),this.refresh(),this.$element.removeClass("owl-loading").addClass("owl-loaded"),this.eventsCall(),this.internalEvents(),this.addTriggerableEvents(),this.trigger("initialized")},e.prototype.setup=function(){var b=this.viewport(),c=this.options.responsive,d=-1,e=null;c?(a.each(c,function(a){b&gt;=a&amp;&amp;a&gt;d&amp;&amp;(d=Number(a))}),e=a.extend({},this.options,c[d]),delete e.responsive,e.responsiveClass&amp;&amp;this.$element.attr("class",function(a,b){return b.replace(/\b owl-responsive-\S+/g,"")}).addClass("owl-responsive-"+d)):e=a.extend({},this.options),(null===this.settings||this._breakpoint!==d)&amp;&amp;(this.trigger("change",{property:{name:"settings",value:e}}),this._breakpoint=d,this.settings=e,this.invalidate("settings"),this.trigger("changed",{property:{name:"settings",value:this.settings}}))},e.prototype.optionsLogic=function(){this.$element.toggleClass("owl-center",this.settings.center),this.settings.loop&amp;&amp;this._items.length&lt;this.settings.items&amp;&amp;(this.settings.loop=!1),this.settings.autoWidth&amp;&amp;(this.settings.stagePadding=!1,this.settings.merge=!1)},e.prototype.prepare=function(b){var c=this.trigger("prepare",{content:b});return c.data||(c.data=a("&lt;"+this.settings.itemElement+"/&gt;").addClass(this.settings.itemClass).append(b)),this.trigger("prepared",{content:c.data}),c.data},e.prototype.update=function(){for(var b=0,c=this._pipe.length,d=a.proxy(function(a){return this[a]},this._invalidated),e={};c&gt;b;)(this._invalidated.all||a.grep(this._pipe[b].filter,d).length&gt;0)&amp;&amp;this._pipe[b].run(e),b++;this._invalidated={}},e.prototype.width=function(a){switch(a=a||e.Width.Default){case e.Width.Inner:case e.Width.Outer:return this._width;default:return this._width-2*this.settings.stagePadding+this.settings.margin}},e.prototype.refresh=function(){if(0===this._items.length)return!1;(new Date).getTime();this.trigger("refresh"),this.setup(),this.optionsLogic(),this.$stage.addClass("owl-refresh"),this.update(),this.$stage.removeClass("owl-refresh"),this.state.orientation=b.orientation,this.watchVisibility(),this.trigger("refreshed")},e.prototype.eventsCall=function(){this.e._onDragStart=a.proxy(function(a){this.onDragStart(a)},this),this.e._onDragMove=a.proxy(function(a){this.onDragMove(a)},this),this.e._onDragEnd=a.proxy(function(a){this.onDragEnd(a)},this),this.e._onResize=a.proxy(function(a){this.onResize(a)},this),this.e._transitionEnd=a.proxy(function(a){this.transitionEnd(a)},this),this.e._preventClick=a.proxy(function(a){this.preventClick(a)},this)},e.prototype.onThrottledResize=function(){b.clearTimeout(this.resizeTimer),this.resizeTimer=b.setTimeout(this.e._onResize,this.settings.responsiveRefreshRate)},e.prototype.onResize=function(){return this._items.length?this._width===this.$element.width()?!1:this.trigger("resize").isDefaultPrevented()?!1:(this._width=this.$element.width(),this.invalidate("width"),this.refresh(),void this.trigger("resized")):!1},e.prototype.eventsRouter=function(a){var b=a.type;"mousedown"===b||"touchstart"===b?this.onDragStart(a):"mousemove"===b||"touchmove"===b?this.onDragMove(a):"mouseup"===b||"touchend"===b?this.onDragEnd(a):"touchcancel"===b&amp;&amp;this.onDragEnd(a)},e.prototype.internalEvents=function(){var c=(k(),l());this.settings.mouseDrag?(this.$stage.on("mousedown",a.proxy(function(a){this.eventsRouter(a)},this)),this.$stage.on("dragstart",function(){return!1}),this.$stage.get(0).onselectstart=function(){return!1}):this.$element.addClass("owl-text-select-on"),this.settings.touchDrag&amp;&amp;!c&amp;&amp;this.$stage.on("touchstart touchcancel",a.proxy(function(a){this.eventsRouter(a)},this)),this.transitionEndVendor&amp;&amp;this.on(this.$stage.get(0),this.transitionEndVendor,this.e._transitionEnd,!1),this.settings.responsive!==!1&amp;&amp;this.on(b,"resize",a.proxy(this.onThrottledResize,this))},e.prototype.onDragStart=function(d){var e,g,h,i;if(e=d.originalEvent||d||b.event,3===e.which||this.state.isTouch)return!1;if("mousedown"===e.type&amp;&amp;this.$stage.addClass("owl-grab"),this.trigger("drag"),this.drag.startTime=(new Date).getTime(),this.speed(0),this.state.isTouch=!0,this.state.isScrolling=!1,this.state.isSwiping=!1,this.drag.distance=0,g=f(e).x,h=f(e).y,this.drag.offsetX=this.$stage.position().left,this.drag.offsetY=this.$stage.position().top,this.settings.rtl&amp;&amp;(this.drag.offsetX=this.$stage.position().left+this.$stage.width()-this.width()+this.settings.margin),this.state.inMotion&amp;&amp;this.support3d)i=this.getTransformProperty(),this.drag.offsetX=i,this.animate(i),this.state.inMotion=!0;else if(this.state.inMotion&amp;&amp;!this.support3d)return this.state.inMotion=!1,!1;this.drag.startX=g-this.drag.offsetX,this.drag.startY=h-this.drag.offsetY,this.drag.start=g-this.drag.startX,this.drag.targetEl=e.target||e.srcElement,this.drag.updatedX=this.drag.start,("IMG"===this.drag.targetEl.tagName||"A"===this.drag.targetEl.tagName)&amp;&amp;(this.drag.targetEl.draggable=!1),a(c).on("mousemove.owl.dragEvents mouseup.owl.dragEvents touchmove.owl.dragEvents touchend.owl.dragEvents",a.proxy(function(a){this.eventsRouter(a)},this))},e.prototype.onDragMove=function(a){var c,e,g,h,i,j;this.state.isTouch&amp;&amp;(this.state.isScrolling||(c=a.originalEvent||a||b.event,e=f(c).x,g=f(c).y,this.drag.currentX=e-this.drag.startX,this.drag.currentY=g-this.drag.startY,this.drag.distance=this.drag.currentX-this.drag.offsetX,this.drag.distance&lt;0?this.state.direction=this.settings.rtl?"right":"left":this.drag.distance&gt;0&amp;&amp;(this.state.direction=this.settings.rtl?"left":"right"),this.settings.loop?this.op(this.drag.currentX,"&gt;",this.coordinates(this.minimum()))&amp;&amp;"right"===this.state.direction?this.drag.currentX-=(this.settings.center&amp;&amp;this.coordinates(0))-this.coordinates(this._items.length):this.op(this.drag.currentX,"&lt;",this.coordinates(this.maximum()))&amp;&amp;"left"===this.state.direction&amp;&amp;(this.drag.currentX+=(this.settings.center&amp;&amp;this.coordinates(0))-this.coordinates(this._items.length)):(h=this.coordinates(this.settings.rtl?this.maximum():this.minimum()),i=this.coordinates(this.settings.rtl?this.minimum():this.maximum()),j=this.settings.pullDrag?this.drag.distance/5:0,this.drag.currentX=Math.max(Math.min(this.drag.currentX,h+j),i+j)),(this.drag.distance&gt;8||this.drag.distance&lt;-8)&amp;&amp;(c.preventDefault!==d?c.preventDefault():c.returnValue=!1,this.state.isSwiping=!0),this.drag.updatedX=this.drag.currentX,(this.drag.currentY&gt;16||this.drag.currentY&lt;-16)&amp;&amp;this.state.isSwiping===!1&amp;&amp;(this.state.isScrolling=!0,this.drag.updatedX=this.drag.start),this.animate(this.drag.updatedX)))},e.prototype.onDragEnd=function(b){var d,e,f;if(this.state.isTouch){if("mouseup"===b.type&amp;&amp;this.$stage.removeClass("owl-grab"),this.trigger("dragged"),this.drag.targetEl.removeAttribute("draggable"),this.state.isTouch=!1,this.state.isScrolling=!1,this.state.isSwiping=!1,0===this.drag.distance&amp;&amp;this.state.inMotion!==!0)return this.state.inMotion=!1,!1;this.drag.endTime=(new Date).getTime(),d=this.drag.endTime-this.drag.startTime,e=Math.abs(this.drag.distance),(e&gt;3||d&gt;300)&amp;&amp;this.removeClick(this.drag.targetEl),f=this.closest(this.drag.updatedX),this.speed(this.settings.dragEndSpeed||this.settings.smartSpeed),this.current(f),this.invalidate("position"),this.update(),this.settings.pullDrag||this.drag.updatedX!==this.coordinates(f)||this.transitionEnd(),this.drag.distance=0,a(c).off(".owl.dragEvents")}},e.prototype.removeClick=function(c){this.drag.targetEl=c,a(c).on("click.preventClick",this.e._preventClick),b.setTimeout(function(){a(c).off("click.preventClick")},300)},e.prototype.preventClick=function(b){b.preventDefault?b.preventDefault():b.returnValue=!1,b.stopPropagation&amp;&amp;b.stopPropagation(),a(b.target).off("click.preventClick")},e.prototype.getTransformProperty=function(){var a,c;return a=b.getComputedStyle(this.$stage.get(0),null).getPropertyValue(this.vendorName+"transform"),a=a.replace(/matrix(3d)?\(|\)/g,"").split(","),c=16===a.length,c!==!0?a[4]:a[12]},e.prototype.closest=function(b){var c=-1,d=30,e=this.width(),f=this.coordinates();return this.settings.freeDrag||a.each(f,a.proxy(function(a,g){return b&gt;g-d&amp;&amp;g+d&gt;b?c=a:this.op(b,"&lt;",g)&amp;&amp;this.op(b,"&gt;",f[a+1]||g-e)&amp;&amp;(c="left"===this.state.direction?a+1:a),-1===c},this)),this.settings.loop||(this.op(b,"&gt;",f[this.minimum()])?c=b=this.minimum():this.op(b,"&lt;",f[this.maximum()])&amp;&amp;(c=b=this.maximum())),c},e.prototype.animate=function(b){this.trigger("translate"),this.state.inMotion=this.speed()&gt;0,this.support3d?this.$stage.css({transform:"translate3d("+b+"px,0px, 0px)",transition:this.speed()/1e3+"s"}):this.state.isTouch?this.$stage.css({left:b+"px"}):this.$stage.animate({left:b},this.speed()/1e3,this.settings.fallbackEasing,a.proxy(function(){this.state.inMotion&amp;&amp;this.transitionEnd()},this))},e.prototype.current=function(a){if(a===d)return this._current;if(0===this._items.length)return d;if(a=this.normalize(a),this._current!==a){var b=this.trigger("change",{property:{name:"position",value:a}});b.data!==d&amp;&amp;(a=this.normalize(b.data)),this._current=a,this.invalidate("position"),this.trigger("changed",{property:{name:"position",value:this._current}})}return this._current},e.prototype.invalidate=function(a){this._invalidated[a]=!0},e.prototype.reset=function(a){a=this.normalize(a),a!==d&amp;&amp;(this._speed=0,this._current=a,this.suppress(["translate","translated"]),this.animate(this.coordinates(a)),this.release(["translate","translated"]))},e.prototype.normalize=function(b,c){var e=c?this._items.length:this._items.length+this._clones.length;return!a.isNumeric(b)||1&gt;e?d:b=this._clones.length?(b%e+e)%e:Math.max(this.minimum(c),Math.min(this.maximum(c),b))},e.prototype.relative=function(a){return a=this.normalize(a),a-=this._clones.length/2,this.normalize(a,!0)},e.prototype.maximum=function(a){var b,c,d,e=0,f=this.settings;if(a)return this._items.length-1;if(!f.loop&amp;&amp;f.center)b=this._items.length-1;else if(f.loop||f.center)if(f.loop||f.center)b=this._items.length+f.items;else{if(!f.autoWidth&amp;&amp;!f.merge)throw"Can not detect maximum absolute position.";for(revert=f.rtl?1:-1,c=this.$stage.width()-this.$element.width();(d=this.coordinates(e))&amp;&amp;!(d*revert&gt;=c);)b=++e}else b=this._items.length-f.items;return b},e.prototype.minimum=function(a){return a?0:this._clones.length/2},e.prototype.items=function(a){return a===d?this._items.slice():(a=this.normalize(a,!0),this._items[a])},e.prototype.mergers=function(a){return a===d?this._mergers.slice():(a=this.normalize(a,!0),this._mergers[a])},e.prototype.clones=function(b){var c=this._clones.length/2,e=c+this._items.length,f=function(a){return a%2===0?e+a/2:c-(a+1)/2};return b===d?a.map(this._clones,function(a,b){return f(b)}):a.map(this._clones,function(a,c){return a===b?f(c):null})},e.prototype.speed=function(a){return a!==d&amp;&amp;(this._speed=a),this._speed},e.prototype.coordinates=function(b){var c=null;return b===d?a.map(this._coordinates,a.proxy(function(a,b){return this.coordinates(b)},this)):(this.settings.center?(c=this._coordinates[b],c+=(this.width()-c+(this._coordinates[b-1]||0))/2*(this.settings.rtl?-1:1)):c=this._coordinates[b-1]||0,c)},e.prototype.duration=function(a,b,c){return Math.min(Math.max(Math.abs(b-a),1),6)*Math.abs(c||this.settings.smartSpeed)},e.prototype.to=function(c,d){if(this.settings.loop){var e=c-this.relative(this.current()),f=this.current(),g=this.current(),h=this.current()+e,i=0&gt;g-h?!0:!1,j=this._clones.length+this._items.length;h&lt;this.settings.items&amp;&amp;i===!1?(f=g+this._items.length,this.reset(f)):h&gt;=j-this.settings.items&amp;&amp;i===!0&amp;&amp;(f=g-this._items.length,this.reset(f)),b.clearTimeout(this.e._goToLoop),this.e._goToLoop=b.setTimeout(a.proxy(function(){this.speed(this.duration(this.current(),f+e,d)),this.current(f+e),this.update()},this),30)}else this.speed(this.duration(this.current(),c,d)),this.current(c),this.update()},e.prototype.next=function(a){a=a||!1,this.to(this.relative(this.current())+1,a)},e.prototype.prev=function(a){a=a||!1,this.to(this.relative(this.current())-1,a)},e.prototype.transitionEnd=function(a){return a!==d&amp;&amp;(a.stopPropagation(),(a.target||a.srcElement||a.originalTarget)!==this.$stage.get(0))?!1:(this.state.inMotion=!1,void this.trigger("translated"))},e.prototype.viewport=function(){var d;if(this.options.responsiveBaseElement!==b)d=a(this.options.responsiveBaseElement).width();else if(b.innerWidth)d=b.innerWidth;else{if(!c.documentElement||!c.documentElement.clientWidth)throw"Can not detect viewport width.";d=c.documentElement.clientWidth}return d},e.prototype.replace=function(b){this.$stage.empty(),this._items=[],b&amp;&amp;(b=b instanceof jQuery?b:a(b)),this.settings.nestedItemSelector&amp;&amp;(b=b.find("."+this.settings.nestedItemSelector)),b.filter(function(){return 1===this.nodeType}).each(a.proxy(function(a,b){b=this.prepare(b),this.$stage.append(b),this._items.push(b),this._mergers.push(1*b.find("[data-merge]").andSelf("[data-merge]").attr("data-merge")||1)},this)),this.reset(a.isNumeric(this.settings.startPosition)?this.settings.startPosition:0),this.invalidate("items")},e.prototype.add=function(a,b){b=b===d?this._items.length:this.normalize(b,!0),this.trigger("add",{content:a,position:b}),0===this._items.length||b===this._items.length?(this.$stage.append(a),this._items.push(a),this._mergers.push(1*a.find("[data-merge]").andSelf("[data-merge]").attr("data-merge")||1)):(this._items[b].before(a),this._items.splice(b,0,a),this._mergers.splice(b,0,1*a.find("[data-merge]").andSelf("[data-merge]").attr("data-merge")||1)),this.invalidate("items"),this.trigger("added",{content:a,position:b})},e.prototype.remove=function(a){a=this.normalize(a,!0),a!==d&amp;&amp;(this.trigger("remove",{content:this._items[a],position:a}),this._items[a].remove(),this._items.splice(a,1),this._mergers.splice(a,1),this.invalidate("items"),this.trigger("removed",{content:null,position:a}))},e.prototype.addTriggerableEvents=function(){var b=a.proxy(function(b,c){return a.proxy(function(a){a.relatedTarget!==this&amp;&amp;(this.suppress([c]),b.apply(this,[].slice.call(arguments,1)),this.release([c]))},this)},this);a.each({next:this.next,prev:this.prev,to:this.to,destroy:this.destroy,refresh:this.refresh,replace:this.replace,add:this.add,remove:this.remove},a.proxy(function(a,c){this.$element.on(a+".owl.carousel",b(c,a+".owl.carousel"))},this))},e.prototype.watchVisibility=function(){function c(a){return a.offsetWidth&gt;0&amp;&amp;a.offsetHeight&gt;0}function d(){c(this.$element.get(0))&amp;&amp;(this.$element.removeClass("owl-hidden"),this.refresh(),b.clearInterval(this.e._checkVisibile))}c(this.$element.get(0))||(this.$element.addClass("owl-hidden"),b.clearInterval(this.e._checkVisibile),this.e._checkVisibile=b.setInterval(a.proxy(d,this),500))},e.prototype.preloadAutoWidthImages=function(b){var c,d,e,f;c=0,d=this,b.each(function(g,h){e=a(h),f=new Image,f.onload=function(){c++,e.attr("src",f.src),e.css("opacity",1),c&gt;=b.length&amp;&amp;(d.state.imagesLoaded=!0,d.initialize())},f.src=e.attr("src")||e.attr("data-src")||e.attr("data-src-retina")})},e.prototype.destroy=function(){this.$element.hasClass(this.settings.themeClass)&amp;&amp;this.$element.removeClass(this.settings.themeClass),this.settings.responsive!==!1&amp;&amp;a(b).off("resize.owl.carousel"),this.transitionEndVendor&amp;&amp;this.off(this.$stage.get(0),this.transitionEndVendor,this.e._transitionEnd);for(var d in this._plugins)this._plugins[d].destroy();(this.settings.mouseDrag||this.settings.touchDrag)&amp;&amp;(this.$stage.off("mousedown touchstart touchcancel"),a(c).off(".owl.dragEvents"),this.$stage.get(0).onselectstart=function(){},this.$stage.off("dragstart",function(){return!1})),this.$element.off(".owl"),this.$stage.children(".cloned").remove(),this.e=null,this.$element.removeData("owlCarousel"),this.$stage.children().contents().unwrap(),this.$stage.children().unwrap(),this.$stage.unwrap()},e.prototype.op=function(a,b,c){var d=this.settings.rtl;switch(b){case"&lt;":return d?a&gt;c:c&gt;a;case"&gt;":return d?c&gt;a:a&gt;c;case"&gt;=":return d?c&gt;=a:a&gt;=c;case"&lt;=":return d?a&gt;=c:c&gt;=a}},e.prototype.on=function(a,b,c,d){a.addEventListener?a.addEventListener(b,c,d):a.attachEvent&amp;&amp;a.attachEvent("on"+b,c)},e.prototype.off=function(a,b,c,d){a.removeEventListener?a.removeEventListener(b,c,d):a.detachEvent&amp;&amp;a.detachEvent("on"+b,c)},e.prototype.trigger=function(b,c,d){var e={item:{count:this._items.length,index:this.current()}},f=a.camelCase(a.grep(["on",b,d],function(a){return a}).join("-").toLowerCase()),g=a.Event([b,"owl",d||"carousel"].join(".").toLowerCase(),a.extend({relatedTarget:this},e,c));return this._supress[b]||(a.each(this._plugins,function(a,b){b.onTrigger&amp;&amp;b.onTrigger(g)}),this.$element.trigger(g),this.settings&amp;&amp;"function"==typeof this.settings[f]&amp;&amp;this.settings[f].apply(this,g)),g},e.prototype.suppress=function(b){a.each(b,a.proxy(function(a,b){this._supress[b]=!0},this))},e.prototype.release=function(b){a.each(b,a.proxy(function(a,b){delete this._supress[b]},this))},e.prototype.browserSupport=function(){if(this.support3d=j(),this.support3d){this.transformVendor=i();var a=["transitionend","webkitTransitionEnd","transitionend","oTransitionEnd"];this.transitionEndVendor=a[h()],this.vendorName=this.transformVendor.replace(/Transform/i,""),this.vendorName=""!==this.vendorName?"-"+this.vendorName.toLowerCase()+"-":""}this.state.orientation=b.orientation},a.fn.owlCarousel=function(b){return this.each(function(){a(this).data("owlCarousel")||a(this).data("owlCarousel",new e(this,b))})},a.fn.owlCarousel.Constructor=e}(window.Zepto||window.jQuery,window,document),function(a,b){var c=function(b){this._core=b,this._loaded=[],this._handlers={"initialized.owl.carousel change.owl.carousel":a.proxy(function(b){if(b.namespace&amp;&amp;this._core.settings&amp;&amp;this._core.settings.lazyLoad&amp;&amp;(b.property&amp;&amp;"position"==b.property.name||"initialized"==b.type))for(var c=this._core.settings,d=c.center&amp;&amp;Math.ceil(c.items/2)||c.items,e=c.center&amp;&amp;-1*d||0,f=(b.property&amp;&amp;b.property.value||this._core.current())+e,g=this._core.clones().length,h=a.proxy(function(a,b){this.load(b)},this);e++&lt;d;)this.load(g/2+this._core.relative(f)),g&amp;&amp;a.each(this._core.clones(this._core.relative(f++)),h)},this)},this._core.options=a.extend({},c.Defaults,this._core.options),this._core.$element.on(this._handlers)};c.Defaults={lazyLoad:!1},c.prototype.load=function(c){var d=this._core.$stage.children().eq(c),e=d&amp;&amp;d.find(".owl-lazy");!e||a.inArray(d.get(0),this._loaded)&gt;-1||(e.each(a.proxy(function(c,d){var e,f=a(d),g=b.devicePixelRatio&gt;1&amp;&amp;f.attr("data-src-retina")||f.attr("data-src");this._core.trigger("load",{element:f,url:g},"lazy"),f.is("img")?f.one("load.owl.lazy",a.proxy(function(){f.css("opacity",1),this._core.trigger("loaded",{element:f,url:g},"lazy")},this)).attr("src",g):(e=new Image,e.onload=a.proxy(function(){f.css({"background-image":"url("+g+")",opacity:"1"}),this._core.trigger("loaded",{element:f,url:g},"lazy")},this),e.src=g)},this)),this._loaded.push(d.get(0)))},c.prototype.destroy=function(){var a,b;for(a in this.handlers)this._core.$element.off(a,this.handlers[a]);for(b in Object.getOwnPropertyNames(this))"function"!=typeof this[b]&amp;&amp;(this[b]=null)},a.fn.owlCarousel.Constructor.Plugins.Lazy=c}(window.Zepto||window.jQuery,window,document),function(a){var b=function(c){this._core=c,this._handlers={"initialized.owl.carousel":a.proxy(function(){this._core.settings.autoHeight&amp;&amp;this.update()},this),"changed.owl.carousel":a.proxy(function(a){this._core.settings.autoHeight&amp;&amp;"position"==a.property.name&amp;&amp;this.update()},this),"loaded.owl.lazy":a.proxy(function(a){this._core.settings.autoHeight&amp;&amp;a.element.closest("."+this._core.settings.itemClass)===this._core.$stage.children().eq(this._core.current())&amp;&amp;this.update()},this)},this._core.options=a.extend({},b.Defaults,this._core.options),this._core.$element.on(this._handlers)};b.Defaults={autoHeight:!1,autoHeightClass:"owl-height"},b.prototype.update=function(){this._core.$stage.parent().height(this._core.$stage.children().eq(this._core.current()).height()).addClass(this._core.settings.autoHeightClass)},b.prototype.destroy=function(){var a,b;for(a in this._handlers)this._core.$element.off(a,this._handlers[a]);for(b in Object.getOwnPropertyNames(this))"function"!=typeof this[b]&amp;&amp;(this[b]=null)},a.fn.owlCarousel.Constructor.Plugins.AutoHeight=b}(window.Zepto||window.jQuery,window,document),function(a,b,c){var d=function(b){this._core=b,this._videos={},this._playing=null,this._fullscreen=!1,this._handlers={"resize.owl.carousel":a.proxy(function(a){this._core.settings.video&amp;&amp;!this.isInFullScreen()&amp;&amp;a.preventDefault()},this),"refresh.owl.carousel changed.owl.carousel":a.proxy(function(){this._playing&amp;&amp;this.stop()},this),"prepared.owl.carousel":a.proxy(function(b){var c=a(b.content).find(".owl-video");c.length&amp;&amp;(c.css("display","none"),this.fetch(c,a(b.content)))},this)},this._core.options=a.extend({},d.Defaults,this._core.options),this._core.$element.on(this._handlers),this._core.$element.on("click.owl.video",".owl-video-play-icon",a.proxy(function(a){this.play(a)},this))};d.Defaults={video:!1,videoHeight:!1,videoWidth:!1},d.prototype.fetch=function(a,b){var c=a.attr("data-vimeo-id")?"vimeo":"youtube",d=a.attr("data-vimeo-id")||a.attr("data-youtube-id"),e=a.attr("data-width")||this._core.settings.videoWidth,f=a.attr("data-height")||this._core.settings.videoHeight,g=a.attr("href");if(!g)throw new Error("Missing video URL.");if(d=g.match(/(http:|https:|)\/\/(player.|www.)?(vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com))\/(video\/|embed\/|watch\?v=|v\/)?([A-Za-z0-9._%-]*)(\&amp;\S+)?/),d[3].indexOf("youtu")&gt;-1)c="youtube";else{if(!(d[3].indexOf("vimeo")&gt;-1))throw new Error("Video URL not supported.");c="vimeo"}d=d[6],this._videos[g]={type:c,id:d,width:e,height:f},b.attr("data-video",g),this.thumbnail(a,this._videos[g])},d.prototype.thumbnail=function(b,c){var d,e,f,g=c.width&amp;&amp;c.height?'style="width:'+c.width+"px;height:"+c.height+'px;"':"",h=b.find("img"),i="src",j="",k=this._core.settings,l=function(a){e='&lt;div class="owl-video-play-icon"&gt;&lt;/div&gt;',d=k.lazyLoad?'&lt;div class="owl-video-tn '+j+'" '+i+'="'+a+'"&gt;&lt;/div&gt;':'&lt;div class="owl-video-tn" style="opacity:1;background-image:url('+a+')"&gt;&lt;/div&gt;',b.after(d),b.after(e)};return b.wrap('&lt;div class="owl-video-wrapper"'+g+"&gt;&lt;/div&gt;"),this._core.settings.lazyLoad&amp;&amp;(i="data-src",j="owl-lazy"),h.length?(l(h.attr(i)),h.remove(),!1):void("youtube"===c.type?(f="http://img.youtube.com/vi/"+c.id+"/hqdefault.jpg",l(f)):"vimeo"===c.type&amp;&amp;a.ajax({type:"GET",url:"http://vimeo.com/api/v2/video/"+c.id+".json",jsonp:"callback",dataType:"jsonp",success:function(a){f=a[0].thumbnail_large,l(f)}}))},d.prototype.stop=function(){this._core.trigger("stop",null,"video"),this._playing.find(".owl-video-frame").remove(),this._playing.removeClass("owl-video-playing"),this._playing=null},d.prototype.play=function(b){this._core.trigger("play",null,"video"),this._playing&amp;&amp;this.stop();var c,d,e=a(b.target||b.srcElement),f=e.closest("."+this._core.settings.itemClass),g=this._videos[f.attr("data-video")],h=g.width||"100%",i=g.height||this._core.$stage.height();"youtube"===g.type?c='&lt;iframe width="'+h+'" height="'+i+'" src="http://www.youtube.com/embed/'+g.id+"?autoplay=1&amp;v="+g.id+'" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;':"vimeo"===g.type&amp;&amp;(c='&lt;iframe src="http://player.vimeo.com/video/'+g.id+'?autoplay=1" width="'+h+'" height="'+i+'" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen&gt;&lt;/iframe&gt;'),f.addClass("owl-video-playing"),this._playing=f,d=a('&lt;div style="height:'+i+"px; width:"+h+'px" class="owl-video-frame"&gt;'+c+"&lt;/div&gt;"),e.after(d)},d.prototype.isInFullScreen=function(){var d=c.fullscreenElement||c.mozFullScreenElement||c.webkitFullscreenElement;return d&amp;&amp;a(d).parent().hasClass("owl-video-frame")&amp;&amp;(this._core.speed(0),this._fullscreen=!0),d&amp;&amp;this._fullscreen&amp;&amp;this._playing?!1:this._fullscreen?(this._fullscreen=!1,!1):this._playing&amp;&amp;this._core.state.orientation!==b.orientation?(this._core.state.orientation=b.orientation,!1):!0},d.prototype.destroy=function(){var a,b;this._core.$element.off("click.owl.video");for(a in this._handlers)this._core.$element.off(a,this._handlers[a]);for(b in Object.getOwnPropertyNames(this))"function"!=typeof this[b]&amp;&amp;(this[b]=null)},a.fn.owlCarousel.Constructor.Plugins.Video=d}(window.Zepto||window.jQuery,window,document),function(a,b,c,d){var e=function(b){this.core=b,this.core.options=a.extend({},e.Defaults,this.core.options),this.swapping=!0,this.previous=d,this.next=d,this.handlers={"change.owl.carousel":a.proxy(function(a){"position"==a.property.name&amp;&amp;(this.previous=this.core.current(),this.next=a.property.value)},this),"drag.owl.carousel dragged.owl.carousel translated.owl.carousel":a.proxy(function(a){this.swapping="translated"==a.type},this),"translate.owl.carousel":a.proxy(function(){this.swapping&amp;&amp;(this.core.options.animateOut||this.core.options.animateIn)&amp;&amp;this.swap()},this)},this.core.$element.on(this.handlers)};e.Defaults={animateOut:!1,animateIn:!1},e.prototype.swap=function(){if(1===this.core.settings.items&amp;&amp;this.core.support3d){this.core.speed(0);var b,c=a.proxy(this.clear,this),d=this.core.$stage.children().eq(this.previous),e=this.core.$stage.children().eq(this.next),f=this.core.settings.animateIn,g=this.core.settings.animateOut;this.core.current()!==this.previous&amp;&amp;(g&amp;&amp;(b=this.core.coordinates(this.previous)-this.core.coordinates(this.next),d.css({left:b+"px"}).addClass("animated owl-animated-out").addClass(g).one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",c)),f&amp;&amp;e.addClass("animated owl-animated-in").addClass(f).one("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",c))}},e.prototype.clear=function(b){a(b.target).css({left:""}).removeClass("animated owl-animated-out owl-animated-in").removeClass(this.core.settings.animateIn).removeClass(this.core.settings.animateOut),this.core.transitionEnd()},e.prototype.destroy=function(){var a,b;for(a in this.handlers)this.core.$element.off(a,this.handlers[a]);for(b in Object.getOwnPropertyNames(this))"function"!=typeof this[b]&amp;&amp;(this[b]=null)},a.fn.owlCarousel.Constructor.Plugins.Animate=e}(window.Zepto||window.jQuery,window,document),function(a,b,c){var d=function(b){this.core=b,this.core.options=a.extend({},d.Defaults,this.core.options),this.handlers={"translated.owl.carousel refreshed.owl.carousel":a.proxy(function(){this.autoplay() },this),"play.owl.autoplay":a.proxy(function(a,b,c){this.play(b,c)},this),"stop.owl.autoplay":a.proxy(function(){this.stop()},this),"mouseover.owl.autoplay":a.proxy(function(){this.core.settings.autoplayHoverPause&amp;&amp;this.pause()},this),"mouseleave.owl.autoplay":a.proxy(function(){this.core.settings.autoplayHoverPause&amp;&amp;this.autoplay()},this)},this.core.$element.on(this.handlers)};d.Defaults={autoplay:!1,autoplayTimeout:5e3,autoplayHoverPause:!1,autoplaySpeed:!1},d.prototype.autoplay=function(){this.core.settings.autoplay&amp;&amp;!this.core.state.videoPlay?(b.clearInterval(this.interval),this.interval=b.setInterval(a.proxy(function(){this.play()},this),this.core.settings.autoplayTimeout)):b.clearInterval(this.interval)},d.prototype.play=function(){return c.hidden===!0||this.core.state.isTouch||this.core.state.isScrolling||this.core.state.isSwiping||this.core.state.inMotion?void 0:this.core.settings.autoplay===!1?void b.clearInterval(this.interval):void this.core.next(this.core.settings.autoplaySpeed)},d.prototype.stop=function(){b.clearInterval(this.interval)},d.prototype.pause=function(){b.clearInterval(this.interval)},d.prototype.destroy=function(){var a,c;b.clearInterval(this.interval);for(a in this.handlers)this.core.$element.off(a,this.handlers[a]);for(c in Object.getOwnPropertyNames(this))"function"!=typeof this[c]&amp;&amp;(this[c]=null)},a.fn.owlCarousel.Constructor.Plugins.autoplay=d}(window.Zepto||window.jQuery,window,document),function(a){"use strict";var b=function(c){this._core=c,this._initialized=!1,this._pages=[],this._controls={},this._templates=[],this.$element=this._core.$element,this._overrides={next:this._core.next,prev:this._core.prev,to:this._core.to},this._handlers={"prepared.owl.carousel":a.proxy(function(b){this._core.settings.dotsData&amp;&amp;this._templates.push(a(b.content).find("[data-dot]").andSelf("[data-dot]").attr("data-dot"))},this),"add.owl.carousel":a.proxy(function(b){this._core.settings.dotsData&amp;&amp;this._templates.splice(b.position,0,a(b.content).find("[data-dot]").andSelf("[data-dot]").attr("data-dot"))},this),"remove.owl.carousel prepared.owl.carousel":a.proxy(function(a){this._core.settings.dotsData&amp;&amp;this._templates.splice(a.position,1)},this),"change.owl.carousel":a.proxy(function(a){if("position"==a.property.name&amp;&amp;!this._core.state.revert&amp;&amp;!this._core.settings.loop&amp;&amp;this._core.settings.navRewind){var b=this._core.current(),c=this._core.maximum(),d=this._core.minimum();a.data=a.property.value&gt;c?b&gt;=c?d:c:a.property.value&lt;d?c:a.property.value}},this),"changed.owl.carousel":a.proxy(function(a){"position"==a.property.name&amp;&amp;this.draw()},this),"refreshed.owl.carousel":a.proxy(function(){this._initialized||(this.initialize(),this._initialized=!0),this._core.trigger("refresh",null,"navigation"),this.update(),this.draw(),this._core.trigger("refreshed",null,"navigation")},this)},this._core.options=a.extend({},b.Defaults,this._core.options),this.$element.on(this._handlers)};b.Defaults={nav:!1,navRewind:!0,navText:["prev","next"],navSpeed:!1,navElement:"div",navContainer:!1,navContainerClass:"owl-nav",navClass:["owl-prev","owl-next"],slideBy:1,dotClass:"owl-dot",dotsClass:"owl-dots",dots:!0,dotsEach:!1,dotData:!1,dotsSpeed:!1,dotsContainer:!1,controlsClass:"owl-controls"},b.prototype.initialize=function(){var b,c,d=this._core.settings;d.dotsData||(this._templates=[a("&lt;div&gt;").addClass(d.dotClass).append(a("&lt;span&gt;")).prop("outerHTML")]),d.navContainer&amp;&amp;d.dotsContainer||(this._controls.$container=a("&lt;div&gt;").addClass(d.controlsClass).appendTo(this.$element)),this._controls.$indicators=d.dotsContainer?a(d.dotsContainer):a("&lt;div&gt;").hide().addClass(d.dotsClass).appendTo(this._controls.$container),this._controls.$indicators.on("click","div",a.proxy(function(b){var c=a(b.target).parent().is(this._controls.$indicators)?a(b.target).index():a(b.target).parent().index();b.preventDefault(),this.to(c,d.dotsSpeed)},this)),b=d.navContainer?a(d.navContainer):a("&lt;div&gt;").addClass(d.navContainerClass).prependTo(this._controls.$container),this._controls.$next=a("&lt;"+d.navElement+"&gt;"),this._controls.$previous=this._controls.$next.clone(),this._controls.$previous.addClass(d.navClass[0]).html(d.navText[0]).hide().prependTo(b).on("click",a.proxy(function(){this.prev(d.navSpeed)},this)),this._controls.$next.addClass(d.navClass[1]).html(d.navText[1]).hide().appendTo(b).on("click",a.proxy(function(){this.next(d.navSpeed)},this));for(c in this._overrides)this._core[c]=a.proxy(this[c],this)},b.prototype.destroy=function(){var a,b,c,d;for(a in this._handlers)this.$element.off(a,this._handlers[a]);for(b in this._controls)this._controls[b].remove();for(d in this.overides)this._core[d]=this._overrides[d];for(c in Object.getOwnPropertyNames(this))"function"!=typeof this[c]&amp;&amp;(this[c]=null)},b.prototype.update=function(){var a,b,c,d=this._core.settings,e=this._core.clones().length/2,f=e+this._core.items().length,g=d.center||d.autoWidth||d.dotData?1:d.dotsEach||d.items;if("page"!==d.slideBy&amp;&amp;(d.slideBy=Math.min(d.slideBy,d.items)),d.dots||"page"==d.slideBy)for(this._pages=[],a=e,b=0,c=0;f&gt;a;a++)(b&gt;=g||0===b)&amp;&amp;(this._pages.push({start:a-e,end:a-e+g-1}),b=0,++c),b+=this._core.mergers(this._core.relative(a))},b.prototype.draw=function(){var b,c,d="",e=this._core.settings,f=(this._core.$stage.children(),this._core.relative(this._core.current()));if(!e.nav||e.loop||e.navRewind||(this._controls.$previous.toggleClass("disabled",0&gt;=f),this._controls.$next.toggleClass("disabled",f&gt;=this._core.maximum())),this._controls.$previous.toggle(e.nav),this._controls.$next.toggle(e.nav),e.dots){if(b=this._pages.length-this._controls.$indicators.children().length,e.dotData&amp;&amp;0!==b){for(c=0;c&lt;this._controls.$indicators.children().length;c++)d+=this._templates[this._core.relative(c)];this._controls.$indicators.html(d)}else b&gt;0?(d=new Array(b+1).join(this._templates[0]),this._controls.$indicators.append(d)):0&gt;b&amp;&amp;this._controls.$indicators.children().slice(b).remove();this._controls.$indicators.find(".active").removeClass("active"),this._controls.$indicators.children().eq(a.inArray(this.current(),this._pages)).addClass("active")}this._controls.$indicators.toggle(e.dots)},b.prototype.onTrigger=function(b){var c=this._core.settings;b.page={index:a.inArray(this.current(),this._pages),count:this._pages.length,size:c&amp;&amp;(c.center||c.autoWidth||c.dotData?1:c.dotsEach||c.items)}},b.prototype.current=function(){var b=this._core.relative(this._core.current());return a.grep(this._pages,function(a){return a.start&lt;=b&amp;&amp;a.end&gt;=b}).pop()},b.prototype.getPosition=function(b){var c,d,e=this._core.settings;return"page"==e.slideBy?(c=a.inArray(this.current(),this._pages),d=this._pages.length,b?++c:--c,c=this._pages[(c%d+d)%d].start):(c=this._core.relative(this._core.current()),d=this._core.items().length,b?c+=e.slideBy:c-=e.slideBy),c},b.prototype.next=function(b){a.proxy(this._overrides.to,this._core)(this.getPosition(!0),b)},b.prototype.prev=function(b){a.proxy(this._overrides.to,this._core)(this.getPosition(!1),b)},b.prototype.to=function(b,c,d){var e;d?a.proxy(this._overrides.to,this._core)(b,c):(e=this._pages.length,a.proxy(this._overrides.to,this._core)(this._pages[(b%e+e)%e].start,c))},a.fn.owlCarousel.Constructor.Plugins.Navigation=b}(window.Zepto||window.jQuery,window,document),function(a,b){"use strict";var c=function(d){this._core=d,this._hashes={},this.$element=this._core.$element,this._handlers={"initialized.owl.carousel":a.proxy(function(){"URLHash"==this._core.settings.startPosition&amp;&amp;a(b).trigger("hashchange.owl.navigation")},this),"prepared.owl.carousel":a.proxy(function(b){var c=a(b.content).find("[data-hash]").andSelf("[data-hash]").attr("data-hash");this._hashes[c]=b.content},this)},this._core.options=a.extend({},c.Defaults,this._core.options),this.$element.on(this._handlers),a(b).on("hashchange.owl.navigation",a.proxy(function(){var a=b.location.hash.substring(1),c=this._core.$stage.children(),d=this._hashes[a]&amp;&amp;c.index(this._hashes[a])||0;return a?void this._core.to(d,!1,!0):!1},this))};c.Defaults={URLhashListener:!1},c.prototype.destroy=function(){var c,d;a(b).off("hashchange.owl.navigation");for(c in this._handlers)this._core.$element.off(c,this._handlers[c]);for(d in Object.getOwnPropertyNames(this))"function"!=typeof this[d]&amp;&amp;(this[d]=null)},a.fn.owlCarousel.Constructor.Plugins.Hash=c}(window.Zepto||window.jQuery,window,document); //]]&gt; &lt;/script&gt; &lt;script type='text/javascript'&gt; //&lt;![CDATA[ /* by dev-techno.com */ $(document).ready(function(){ $.ajax({url: "/feeds/posts/default?max-results=9&amp;orderby=published&amp;alt=json-in-script",type: 'get',dataType: "jsonp",success:function(e){ var dev_techno_item=""; var img=new Array(); var numOfEntries = e.feed.entry.length; for(var i=0; i&lt;numOfEntries;i++){ var entry=e.feed.entry[i]; var posttitle = entry.title.$t; var posturl; var author=entry.author[0].name.$t; var authorurl=entry.author[0].uri.$t; var pdate = entry.published.$t; pdate = pdate.substr(0,10); pdate = pdate.replace("-","/"); pdate = pdate.replace("-","/"); for (var o = 0; o &lt; entry.link.length; o++){ if (entry.link[o].rel == "replies" &amp;&amp; entry.link[o].type == "text/html") { var u = entry.link[o].title; var f = entry.link[o].href; }} for(var k = 0; k &lt; entry.link.length; k++){ if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}} if("content" in entry){ var postcontent = entry.content.$t; } s=postcontent;a=s.indexOf("&lt;img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a != -1) &amp;&amp; (b != -1) &amp;&amp; (c != -1) &amp;&amp; (d != "")){img[i] = d;var post_image=img[i];}else{var post_image = no_image_url;} dev_techno_item += '&lt;li&gt; &lt;a href="'+posturl+'" target="_blank"&gt;&lt;img src="'+post_image+'" alt="'+posttitle+'"/&gt;&lt;div&gt;&lt;h4&gt;'+posttitle+'&lt;/h4&gt;&lt;span&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;' + author + '&lt;/span&gt;&lt;span&gt;&lt;i class="fa fa-calendar"&gt;&lt;/i&gt;'+ pdate +'&lt;/span&gt;&lt;span&gt;&lt;i class="fa fa-comments"&gt;&lt;/i&gt;'+ u +'&lt;/span&gt;&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;';} $('.devt-slider ul').html(dev_techno_item); $('.devt-slider ul').owlCarousel({ rtl:true, loop:true, margin:1, navText:["",""], nav:true, autoplay:true, autoplayHoverPause:true, navSpeed:400, responsive:{0:{items:1}, 600:{items:2},1000:{items:3}} });}});}); //]]&gt; &lt;/script&gt; &lt;/b:if&gt; &lt;/b:if&gt;</code></pre> <br /> 3 – ابحث عن الكود التالي <span class="code" style="direction: ltr;">&lt;div id='main-wrapper'&gt;</span> واضف هذا الكود قبله مباشرة : <br /> <pre><code>&lt;b:if cond='data:blog.pageType != &amp;quot;item&amp;quot;'&gt; &lt;b:if cond='data:blog.pageType != &amp;quot;static_page&amp;quot;'&gt; &lt;b:section class='devt-slider' id='devt-slider' showaddelement='no'&gt; &lt;b:widget id='HTML21' locked='true' title='' type='HTML' visible='true'&gt; &lt;b:includable id='main'&gt; &lt;div class='widget-content'&gt; &lt;data:content/&gt; &lt;/div&gt; &lt;/b:includable&gt; &lt;/b:widget&gt; &lt;/b:section&gt; &lt;/b:if&gt; &lt;/b:if&gt;</code></pre> <br /> بعد الإنتهاء اضغط حفظ النموذج. <br /> 4 – انتقل الى صفحة التخطيط وستجد إضافة السلايد شو قد ظهرت بهذا الشكل : <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq9JZ_TvYQRZEA_SPZAtz6VR2vEza2069FZ81NDBI_OdThXB6Q8q3x6C6_6whdL-kcHQ5GxCAUGL6E72L8LNvS-AuY_TdW2yExCgaAR8j0Ci2ui7scj07jIo_UiMjOo1HANWsehi64OJY/s1600/slider-blogger.PNG" style="margin-left: 1em; margin-right: 1em;"><img alt="تركيب السلايد شو لمدونات بلوجر" border="0" height="83" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq9JZ_TvYQRZEA_SPZAtz6VR2vEza2069FZ81NDBI_OdThXB6Q8q3x6C6_6whdL-kcHQ5GxCAUGL6E72L8LNvS-AuY_TdW2yExCgaAR8j0Ci2ui7scj07jIo_UiMjOo1HANWsehi64OJY/w400-h83/slider-blogger.PNG" title="تركيب السلايد شو لمدونات بلوجر" width="400" /></a></div> اضغط تحرير واضف الكود التالي من دون إضافة عنوان واضغط حفظ. <br /> <pre><code>&lt;ul&gt;&lt;/ul&gt;</code></pre> <br /> <br /> وبهذا تكون تمت <b>إضافة سلايد شو الى مدونتك</b> بنجاح ، اذا واجهت أي مشكلة في التركيب لا تتردد بتركها في تعليق ، لمتابعتنا على بلوجر إشترك بالمدونة من <a href="https://www.blogger.com/follow-blog.g?blogID=1421699815441362866" rel="nofollow" target="_blank"> هنــــــا </a> ، دمتم بخير! </div> </content><link rel='replies' type='application/atom+xml' href='https://www.codexait.com/feeds/3463895674006400103/comments/default' title='تعليقات الرسالة'/><link rel='replies' type='text/html' href='https://www.codexait.com/2016/11/slideshow-blogger.html#comment-form' title='8 تعليقات'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/3463895674006400103'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/3463895674006400103'/><link rel='alternate' type='text/html' href='https://www.codexait.com/2016/11/slideshow-blogger.html' title='اضافة سلايد شو احترافي لمدونات بلوجر'/><author><name>Codex AIT</name><uri>http://www.blogger.com/profile/10277402041090003956</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFcTjVsB95C1gFAE3krg39Hdh7dmMu6QS9pXd1I3ZHOizXUXoYGUk0pFDKacxWx32H5Ni7YSdej17qiBuZnPprWuCrcLa8iorQpO_jvBm0sOqvhy2vjicX14KpOXIWOQ/s220/Codexait+Logo+2021+%284%29+-+Copy+%281%29.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYclQ38LurqlQCyBVBkYbH0NA0UPv9d5flc1A-UIDzCa_VBbwf3tzDTVryskDEebdZTpHzwOT7-2ciTBpIpkK4LIeO3jLgr26SPV0EjElB_MrHARItIlqAtRyIkHG_bHzwVzoWY9fl7lI/s72-c-rw/slidershow.jpg" height="72" width="72"/><thr:total>8</thr:total></entry><entry><id>tag:blogger.com,1999:blog-1421699815441362866.post-6385732626305088354</id><published>2016-11-20T02:52:00.008+03:00</published><updated>2024-05-17T08:01:18.479+03:00</updated><category scheme="http://www.blogger.com/atom/ns#" term="javascript"/><category scheme="http://www.blogger.com/atom/ns#" term="تطوير الويب"/><title type='text'>لماذا لغة الجافا سكريبت هي مستقبل الويب</title><content type='html'><div dir="rtl" style="text-align: right;" trbidi="on"> <div dir="rtl" style="text-align: right;" trbidi="on"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHdqMj80IyMKqVzSqjePwlsHwrD4PzxypefgTDLLCEM5KFoq3ihwqUUJG_T0wDHrF0xpMDO9YD6pT9WG4RPLKaHS0HtI5tjD3rFoxOeasPeEsntmk4vJKJ7YkjPNwXRPQR5fzCtnTs8pI/s640-rw/javascript+language.png" style="margin-left: 1em; margin-right: 1em;"><img alt="لماذا لغة الجافا سكربت هي مستقبل الويب" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHdqMj80IyMKqVzSqjePwlsHwrD4PzxypefgTDLLCEM5KFoq3ihwqUUJG_T0wDHrF0xpMDO9YD6pT9WG4RPLKaHS0HtI5tjD3rFoxOeasPeEsntmk4vJKJ7YkjPNwXRPQR5fzCtnTs8pI/s640-rw/javascript+language.png" title="لماذا لغة الجافا سكريبت هي مستقبل الويب" /></a></div> </div>تساءل البعض لماذا لغة الجافا سكربت هي مستقبل الويب ؟ ولماذا يجب ان اتعلمه..؟ في هذا المقال سنتعرف على اهميتها ؟</div><div dir="rtl" style="text-align: right;" trbidi="on">&nbsp;</div><div dir="rtl" style="text-align: right;" trbidi="on">لغة الجافا سكربت javascript من اشهر لغات البرمجة وأكثرها استخداما ، شاهد عدد الأسئلة التي تسأل في <b>الجافا سكريبت</b> على موقع Stack Overflow ، وقارنها مع اللغات الأخرى .</div><div dir="rtl" style="text-align: right;" trbidi="on"><br /></div><div dir="rtl" style="text-align: right;" trbidi="on">&nbsp;وكما نعلم انها لغة أساسية يجب تعلمها لتصبح مطور مواقع ، وهي اللغة المعيارية التي تنفذ على المتصفح ، لغة الجافا سكريبت تضيف روح التفاعل في مواقع الويب. <br /> <br /> تعتبر اللغة FullStack تعمل في جهة العميل وجهة الخادم ، حيث مع Node.js المكتبة المبنية بلغة الجافا سكريبت يمكنك برمجة وتطوير تطبيقات في جهة الخادم ، وبهذا تكون طورت موقع متكامل بالجافا سكريبت ، وهذه المكتبة بدأت بالانتشار بشكل كبير مؤخراً ، ايضا يمكن برمجة الشبكات العصبية والروبوتات بالجافا سكريبت ، وأنظمة التشغيل. <br /> <br /> من الأشياء التي ادهشتني في لغة الجافا سكربت ، تم تطوير نظام تشغيل متكامل يعمل على المتصفح بلغة الجافا سكريبت ، والمسمى بـــ OS.js وهو نظام مفتوح المصدر ، يمكنك مشاهدته من الموقع الرسمي <a href="http://os.js.org/" rel="nofollow" target="_blank">OS.js.org </a> . <br /> <br /><b> تقنية الأجاكس</b> المبنية بلغة الجافا سكريبت للتعامل بين <b>الخادم والعميل</b> ، حيث هذه التقنية صارت خيار أساسي في تطوير المواقع ومستخدمة بشكل كبير جدا ، في هذه التقنية يتم ارسال البيانات واستقبالها بين الخادم والعميل في الخلفية بدون تحديث الصفحة ، وهذا ما رفع سرعة الاستجابة وزيادة التفاعل بين المستخدم والموقع .</div><div dir="rtl" style="text-align: right;" trbidi="on"><br /></div><div dir="rtl" style="text-align: right;" trbidi="on">&nbsp;بالإضافة الى ذلك تم حفظ الباند ويدث وقلل نسبة استهلاك البيانات ، وكأمثلة على ذلك شاهد الفيس بوك الذي نتصفحه يوميا ، فهو يستخدم هذه التقنية بشكل أساسي ، والعديد من المواقع الشهيرة الى المواقع الشخصية صارت تستخدم تقنية الأجاكس حاليا . <br /> <br /> حيث توجد العديد من المكتبات المبنية بلغة الجافا سكريبت ، واشهرها مكتبة jQuery ، ولكن هناك آلاف المكتبات ، التي تبنى ومازالت تبنى ، منها ما تفشل ومنها ما تأخذ نصيبها. <br /> <br /> <br /> <h2 class="r"> مميزات برمجية للغة الجافا سكريبت : </h2> <ol> <li> سريعة التنفيذ. </li> <li> معتمدة بشكل معياري للعمل على كافة المتصفحات. </li> <li> سهلة التعلم والتنفيذ. </li> <li> إمكانية استخدام الكائنات الذي جعلها اكثر مرونة وأداء. </li> <li> سهولة صيانة الموقع وتصحيح الأخطاء . </li> <li> مفتوحة المصدر. </li> </ol> <br /> <br /> كانت هذه مجموعة من المعلومات التي توضح مدى أهمية لغة الجافا سكريبت في مستقبل الويب والشبكة العنكبوتية ، هناك الكثير ما نجهله حول هذه اللغة ، فهي لغة رائعة بالفعل ولديها مستقبل كبير في عالم تطوير مواقع الويب.</div><div dir="rtl" style="text-align: right;" trbidi="on"><br /></div><div dir="rtl" style="text-align: right;" trbidi="on">اذا كانت لديك إضافات حول هذه اللغة وأهميتها فلا تتردد بتركه في تعليق، دمتم في رعاية الله وحفظه! <br /> <br /> <div class="soread"> اقرأ ايضا:<br /> <a href="https://www.codexait.com/2016/06/best-jquery-arabic-course.html" rel="" target="_blank">تعلم جي كويري من الصفر للإحتراف</a> </div> <br /></div> </content><link rel='replies' type='application/atom+xml' href='https://www.codexait.com/feeds/6385732626305088354/comments/default' title='تعليقات الرسالة'/><link rel='replies' type='text/html' href='https://www.codexait.com/2016/11/javascript-is-future.html#comment-form' title='2 تعليقات'/><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/6385732626305088354'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/1421699815441362866/posts/default/6385732626305088354'/><link rel='alternate' type='text/html' href='https://www.codexait.com/2016/11/javascript-is-future.html' title='لماذا لغة الجافا سكريبت هي مستقبل الويب'/><author><name>Codex AIT</name><uri>http://www.blogger.com/profile/10277402041090003956</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFcTjVsB95C1gFAE3krg39Hdh7dmMu6QS9pXd1I3ZHOizXUXoYGUk0pFDKacxWx32H5Ni7YSdej17qiBuZnPprWuCrcLa8iorQpO_jvBm0sOqvhy2vjicX14KpOXIWOQ/s220/Codexait+Logo+2021+%284%29+-+Copy+%281%29.png'/></author><media:thumbnail xmlns:media="http://search.yahoo.com/mrss/" url="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHdqMj80IyMKqVzSqjePwlsHwrD4PzxypefgTDLLCEM5KFoq3ihwqUUJG_T0wDHrF0xpMDO9YD6pT9WG4RPLKaHS0HtI5tjD3rFoxOeasPeEsntmk4vJKJ7YkjPNwXRPQR5fzCtnTs8pI/s72-c-rw/javascript+language.png" height="72" width="72"/><thr:total>2</thr:total></entry></feed>