نقدم لكم في قالب اقرأ العديد من الخصائص الفريدة، والأدوات المميزة التي تساعدكم على تطوير مدوناتكم، وتقديم محتوى أفضل لزواركم.
في قالب اقرأ حرصنا كثيراً على أن نسهّل عليكم الأمور، ونجعل التدوين أمراً مسلياً، ونكون عوناً لكل مبتدئ يرغب أن يبدأ في هذا الطريق.
ومن جملة ما نقدمه لكم في قالب اقرأ الأكواد القصيرة العديدة التي يمكنها أن تساعدكم على تنسيق مشاركاتكم، وتجميل صفحاتكم، وتقديم محتواكم بصورة أروع.
هنا سنشرح مجموعة من هذه الأكواد المهمة، فتابعوا معنا.
تضمين صناديق الرسائل والملاحظات
صناديق الرسائل والملاحظات، والتي تعرض رسائل مهمة أو عبارات يجب الانتباه إليها، هي مما يحتاج إليها كل مدوّن خلال رحلته في التدوين.
ولهذا السبب حرصنا على أن ندعم قالب اقرأ بصناديق رسائل احترافية تضفي نوعاً من التميز على مشاركاتكم، وهي على شكلين:
- صناديق رسائل وملاحظات بدون عنوان
- صناديق رسائل وملاحظات بعنوان
ولتضمين هذه الصناديق يمكنكم استخدام الأكواد التالية:
صندوق رسالة إيجابية
لتضمين صندوق رسالة إيجابية بدون عنوان:
<div class="iqraa-message success">ضع هنا النص الذي تريد</div>-كود html-
مثال:
هذا نص تجريبي يمكن استبداله في نفس المساحة بأي نص آخر، ولقد تم توليده لعرض خصائص وميزات قالب اقرأ فقط.-رسالة إيجابية-
لتضمين صندوق رسالة إيجابية بعنوان:
<div class="iqraa-message success imtitle"><h2>ضع هنا العنوان الذي تريد</h2><p>ضع هنا النص الذي تريد.</p></div>-كود html-
مثال:
عنوان تجريبي
هذا نص تجريبي يمكن استبداله في نفس المساحة بأي نص آخر، ولقد تم توليده لعرض خصائص وميزات قالب اقرأ فقط.-رسالة إيجابية بعنوان-
يمكنك أن تضع بدلاً من h2 أي ترتيب آخر للعناوين والذي قد يكون h3 أو h4 أو h5 حسب تنسيق مشاركتك، وهذا ينطبق على جميع الصناديق ذوات العناوين.-رسالة معلومات-
صندوق رسالة معلومات
لتضمين صندوق رسالة معلومات بدون عنوان:
<div class="iqraa-message info">ضع هنا النص الذي تريد</div>-كود html-
مثال:
هذا نص تجريبي يمكن استبداله في نفس المساحة بأي نص آخر، ولقد تم توليده لعرض خصائص وميزات قالب اقرأ فقط.-رسالة معلومات-
لتضمين صندوق رسالة معلومات بعنوان:
<div class="iqraa-message info imtitle"><h2>ضع هنا العنوان الذي تريد</h2><p>ضع هنا النص الذي تريد.</p></div>-كود html-
مثال:
عنوان تجريبي
هذا نص تجريبي يمكن استبداله في نفس المساحة بأي نص آخر، ولقد تم توليده لعرض خصائص وميزات قالب اقرأ فقط.-رسالة معلومات بعنوان-
صندوق رسالة تحذير
لتضمين صندوق رسالة تحذير بدون عنوان:
<div class="iqraa-message warning">ضع هنا النص الذي تريد</div>-كود html-
مثال:
هذا نص تجريبي يمكن استبداله في نفس المساحة بأي نص آخر، ولقد تم توليده لعرض خصائص وميزات قالب اقرأ فقط.-رسالة تحذير-
لتضمين صندوق رسالة تحذير بعنوان:
<div class="iqraa-message warning imtitle"><h2>ضع هنا العنوان الذي تريد</h2><p>ضع هنا النص الذي تريد.</p></div>-كود html-
مثال:
عنوان تجريبي
هذا نص تجريبي يمكن استبداله في نفس المساحة بأي نص آخر، ولقد تم توليده لعرض خصائص وميزات قالب اقرأ فقط.-رسالة تحذير بعنوان-
صندوق رسالة خطأ
لتضمين صندوق رسالة خطأ بدون عنوان:
<div class="iqraa-message error">ضع هنا النص الذي تريد</div>-كود html-
مثال:
هذا نص تجريبي يمكن استبداله في نفس المساحة بأي نص آخر، ولقد تم توليده لعرض خصائص وميزات قالب اقرأ فقط.-رسالة خطأ-
لتضمين صندوق رسالة خطأ بعنوان:
<div class="iqraa-message error imtitle"><h2>ضع هنا العنوان الذي تريد</h2><p>ضع هنا النص الذي تريد.</p></div>-كود html-
مثال:
عنوان تجريبي
هذا نص تجريبي يمكن استبداله في نفس المساحة بأي نص آخر، ولقد تم توليده لعرض خصائص وميزات قالب اقرأ فقط.-رسالة خطأ بعنوان-
صندوق الاقتباس في قالب اقرأ
حتى أن صندوق الاقتباس لم ينجو من لمستنا السحرية التي أردنا أن نبهركم بها، حيث قمنا بتصميم صندوق الاقتباس ليبدو جذاباً واحترافياً قدر الإمكان.
كما قمنا بإضافية خاصية إمكانية تضمين عنوان بشكل جميل ضمن صندوق الاقتباس، ويمكن أن يكون العنوان h2 أو h3 أو h4 أو h5، حسب تنسيق مشاركتك.
شكل صندوق الاقتباس بدون عنوان:
هذا نص تجريبي يمكن استبداله في نفس المساحة بأي نص آخر، ولقد تم توليده لعرض خصائص وميزات قالب اقرأ فقط.
شكل صندوق الاقتباس بعنوان:
عنوان تجريبي
هذا نص تجريبي يمكن استبداله في نفس المساحة بأي نص آخر، ولقد تم توليده لعرض خصائص وميزات قالب اقرأ فقط.
لضمان عمل تصميم صندوق الاقتباس مع العنوان بشكل سليم ننصحكم، بكتابة العنوان ثم النص، وبعد ذلك عليكم الدخول لوضع تعديل html ثم من هناك تقومون بتحديد العنوان والنص الذي تريدون أن تحولوه لاقتباس وتطبقون تنسيق الاقتباس عليهم.-رسالة معلومات-
تضمين صندوق عرض الأكواد في قالب اقرأ
يحتوي قالب اقرأ على صندوق جميل ومميز لعرض الأكواد، حيث يتميز هذا الصندوق بكونه يظهر نوع الكود في الأعلى.
كما يتميز باحتوائه على خاصية تحديد الكود بأكمله بمجرد النقر لمرة واحدة داخل الصندوق، وذلك لتسهيل عملية النسخ.
لتضمين صندوق عرض الأكواد عليكم باستخدام الأكواد القصيرة التالية:
صندوق أكواد HTML
<pre class="code html"><code>ضع هنا الكود الخاص بك</code></pre>-كود html-
صندوق أكواد CSS
<pre class="code css"><code>ضع هنا الكود الخاص بك</code></pre>-كود html-
صندوق أكواد JAVASCRIPT
<pre class="code js"><code>ضع هنا الكود الخاص بك</code></pre>-كود html-
فيديو يشرح طريقة عرض الأكواد
o7ZscIEWpV0-تضمين فيديو-
تضمين صندوق قابل للطي
يمكنك في قالب اقرأ تضمين صندوق قابل للطي في صفحاتك ومشاركاتك، لقد تم تصميم هذا الصندوق في قالب اقرأ بشكل أساسي لاستخدامه في عرض المصادر والمراجع أسفل المقال.
ولكن يمكن استخدامه في أي مكان آخر، ولأي غرض آخر أيضا.
ولتضمين صندوق قابل للطي في مشاركاتك عليك باستخدام الكود التالي:
<button class="iqraacoll" type="button"><svg class="isourcebefore" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.744 8s1.522-8-3.335-8h-8.409v24h20v-13c0-3.419-5.247-3.745-8.256-3zm4.256 11h-12v-1h12v1zm0-3h-12v-1h12v1zm0-3h-12v-1h12v1zm-3.432-12.925c2.202 1.174 5.938 4.883 7.432 6.881-1.286-.9-4.044-1.657-6.091-1.179.222-1.468-.185-4.534-1.341-5.702z"/></svg>عنوان الصندوق<svg class="isourceafter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.33 24l-2.83-2.829 9.339-9.175-9.339-9.167 2.83-2.829 12.17 11.996z"/></svg></button><div class="collcontent">محتوى الصندوق</div>-كود html-فقط قم بتغيير عنوان الصندوق ومحتوى الصندوق بالذي تريد.
مثال:
هذا نص تجريبي يمكن استبداله في نفس المساحة بأي نص آخر، ولقد تم توليده لعرض خصائص وميزات قالب اقرأ فقط.
تضمين الأزرار
يمكنك في قالب اقرأ استخدام الأزرار في مشاركاتك وصفحاتك بكل سهولة، كل ما عليك هو وضع الأكواد التالية في المكان الذي تريد.
يتوفر لكل زر من الأزرار ثلاث أحجام صغير، ومتوسط، وكبير.
زر التحميل:
<a class="button small download" href="الرابط">تحميل</a>
<a class="button medium download" href="الرابط">تحميل</a>
<a class="button large download" href="الرابط">تحميل</a>-كود html-
زر المعاينة:
<a class="button small demo" href="الرابط">معاينة</a>
<a class="button medium demo" href="الرابط">معاينة</a>
<a class="button large demo" href="الرابط">معاينة</a>-كود html-
زر الشراء:
<a class="button small buy" href="الرابط">شراء</a>
<a class="button medium buy" href="الرابط">شراء</a>
<a class="button large buy" href="الرابط">شراء</a>-كود html-
زر رابط عام:
<a class="button small link" href="الرابط">فتح الرابط</a>
<a class="button medium link" href="الرابط">فتح الرابط</a>
<a class="button large link" href="الرابط">فتح الرابط</a>-كود html-
زر بدون أي أيقونة:
<a class="button small" href="الرابط">فتح الرابط</a>
<a class="button medium" href="الرابط">فتح الرابط</a>
<a class="button large" href="الرابط">فتح الرابط</a>-كود html-
تضمين فيديو بالتحميل الكسول
من الخصائص والميزات الأخرى التي تتوفر في قالب اقرأ، والتي يمكن من خلالها منع التأثير السلبي لفيديوهات اليوتيوب على أداة وسرعة الموقع، خاصية التحميل الكسول للفيديوهات.
ويمكن تضمين أي فيديو في المشاركات أو الصفحات باستخدام الكود التالي:
<div class="iYouTubeiFrame"><iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" class="iframe-video iYTBLazy" data-src="https://www.youtube.com/embed/videoid" frameborder="0" title="YouTube video player"></iframe></div>-كود html-
كل ما عليك هو أن تقوم باستبدال videoid بمعرّف الفيديو الذي تريد تضمينه.
ويمكن الحصول على معرّف أي فيديو بالضغط على زر المشاركة الموجود أسفله، فيظهر رابط الفيديو ويكون المعرّف هو الرمز الموجود في نهاية الرابط، شاهد المثال التالي:
https://youtu.be/QE8gn2duT5Y-كود html-
تضمين ملف pdf في قالب اقرأ
يمكنكم في قالب اقرأ ملفات pdf داخل مشاركاتكم وصفحاتكم بكل سهولة من خلال استخدام الأكواد التالية:
<iframe class="lazyload" data-src="رابط ملف pdf" width="100%" height="600px">-كود html-باستخدامك لهذا الكود ستمنع التأثير السلبي على أداء المدونة عند تضمين ملفات ال pdf باستخدام الأكواد العادية.
تابعنا على