قالب عالم التقنية السورية

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


 الأزرار


 يتغير لون الزر على حسب الوان القالب:


أضف احد الأكواد الأتية:

<a class="ibtn iDown ibtn-1" href="#">Download small</a>
<a class="ibtn iPrev ibtn-1" href="#">Preview small</a>
<a class="ibtn iDown ibtn-2" href="#">Download medium size</a>
<a class="ibtn iPrev ibtn-2" href="#">Preview medium size</a>
<a class="ibtn iDown ibtn-3" href="#">Download large</a>
<a class="ibtn iPrev ibtn-3" href="#">Preview large</a>
إستبدل رمز # بالرابط

رابط مقفول لايمكن فتحه الا بعد الاعجاب بالمقال

يمكنك استخدام هذا الكود
<a class="ibtn ibtn-2 likelink" href="#" target="_blank">link</a> 

إستبدل رمز # بالرابط وكلمة link باي كلمة تريد 

او يمكنك فقط اضافة الكلاس likelink لاي زر او كود رابط لديك

الالوان

يمكنك التحكم بالوان القالب من التخصيص بشكل كامل حتى صفحة تحويل الروابط والوضع المظلم ايضا بامكانك التحكم بالالوان من التخصيص

التلميحات

يمكنك اضافة تلميحات على اي كود عن طريق اضافة كلاس معين امثلة على ذالك

اعلىيساراسفليمين

<span class="sytwd-tips" data-title="تلميح اعلى">اعلى</span>
<span class="sytwd-tips" data-sytwd-tips="left" data-title="تلميح يسار">يسار</span>
<span class="sytwd-tips" data-sytwd-tips="bottom" data-title="تلميح اسفل">اسفل</span>
<span class="sytwd-tips" data-sytwd-tips="right" data-title="تلميح يمين">يمين</span>

التاثيرات

تلاشي

اعلىيساراسفليمين

<span class="sytwd-tips--fade" data-title="تلميح اعلى">اعلى</span>
<span class="sytwd-tips--fade" data-sytwd-tips="left" data-title="تلميح يسار">يسار</span>
<span class="sytwd-tips--fade" data-sytwd-tips="bottom" data-title="تلميح اسفل">اسفل</span>
<span class="sytwd-tips--fade" data-sytwd-tips="right" data-title="تلميح يمين">يمين</span>
انزلاق للداخل

اعلىيساراسفليمين

<span class="sytwd-tips--slide-in" data-title="تلميح اعلى">اعلى</span>
<span class="sytwd-tips--slide-in" data-sytwd-tips="left" data-title="تلميح يسار">يسار</span>
<span class="sytwd-tips--slide-in" data-sytwd-tips="bottom" data-title="تلميح اسفل">اسفل</span>
<span class="sytwd-tips--slide-in" data-sytwd-tips="right" data-title="تلميح يمين">يمين</span>
إنزلاق للخارج

اعلىيساراسفليمين

<span class="sytwd-tips--slide-out" data-title="تلميح اعلى">اعلى</span>
<span class="sytwd-tips--slide-out" data-sytwd-tips="left" data-title="تلميح يسار">يسار</span>
<span class="sytwd-tips--slide-out" data-sytwd-tips="bottom" data-title="تلميح اسفل">اسفل</span>
<span class="sytwd-tips--slide-out" data-sytwd-tips="right" data-title="تلميح يمين">يمين</span>
أرتداد للداخل

اعلىيساراسفليمين

<span class="sytwd-tips--bounce-in" data-title="تلميح اعلى">اعلى</span>
<span class="sytwd-tips--bounce-in" data-sytwd-tips="left" data-title="تلميح يسار">يسار</span>
<span class="sytwd-tips--bounce-in" data-sytwd-tips="bottom" data-title="تلميح اسفل">اسفل</span>
<span class="sytwd-tips--bounce-in" data-sytwd-tips="right" data-title="تلميح يمين">يمين</span>
إرتداد للخارج

اعلىيساراسفليمين

<span class="sytwd-tips--bounce-out" data-title="تلميح اعلى">اعلى</span>
<span class="sytwd-tips--bounce-out" data-sytwd-tips="left" data-title="تلميح يسار">يسار</span>
<span class="sytwd-tips--bounce-out" data-sytwd-tips="bottom" data-title="تلميح اسفل">اسفل</span>
<span class="sytwd-tips--bounce-out" data-sytwd-tips="right" data-title="تلميح يمين">يمين</span>
هذه فقط امثلة يعني يمكنك استخدام التلميحات على اي كود html يكون الكود تاغ فتح واغلاق اي مثلا الصورة <img/> الكود ذاتي الإغلاق اي لاتعمل معه يجب اضافته داخل كود فتح واغلاق هكذا <a></a>
وكما لاحظنا بالاعلى لاضافة التلميحات نضيف كلاس sytwd-tips وdata-title="التلميح هنا" لاضافة التلميح ولاضافة تاثيرات نضيف للكلاس التاثير الذي نريده 
  • انزلاق للداخل --slide-in
  • انزلاق للخارج --slide-out
  • ارتدادا للداخل --bounce-in
  • ارتداد للخارج --bounce-out
  • تلاشي --fade
  • ولاضافة اتجاه نضيف data-sytwd-tips="الاتجاه"

طبعا يجدر الاشارة بان الاضافة من تطوير مينت ويب مع فائق التقدير

صندوق الاكواد

<pre><code>
اضف الكود هنا بعد تحويله في اي محول اكواد بلوجر
</code></pre>
يتم اضافة الكود الى المقال في وضع html

تقسم المقال الى صفحات

لتقسيم المقال قم باضافة الرمز ↚  كما في الصورة بالاسفل في المكان الذي تريد تقسيم المقال فيه

تأخير تحميل فيديوهات اليوتيوب

لتاخير تحميل اليوتيوب وتسريع فتح صفحات المقال استخدم الكود التالي
<div class='lazy-youtube' data-embed='استبدل هنا بايدي الفيديو'>
  <div class='play-button'></div>
</div>
فقط استبدل النص العربي بايدي الفيديو كما بالصورة التالية


قفل المقال بكلمة مرور

لقفل اي مقال بكلمة مرور بعد الانتهاء من كتابة المقال ثم بالتحويل من وضع الانشاء الى وضع HTML
ثم قم بنسخ ولصق الكود التالي في نهاية المقال 
<div class="sytwdpro" data-pro="Password"></div>

استبدل كلمة Password  بكلمة المرور التي تريدها