قالب قواعد ويب [ تحديث 1.3 ]

أهلا بك في مدونة قواعد في موضوع جديد حيث سنتطرق اليوم إلى شرح النسخة الثانية من قالب قواعد ويب ، وبعد الإهتمام الكبير وشعبية النسخة الأولى المصممة إنطلاقا من قالب "أجنبي" تم تطوير القالب و التطرق للكثير من الأخطاء التي واجهت المستخدمين الذين تواصلوا معنا.

الصفحة الرسمية للقالب :https://theme.qawa3id.com/

التحديثات في قالب بلوجر قواعد ويب النسخة 1.3 :

سلايد شو عصري ومميز.
أداة لعرض المشاركات الشائعة بتصميم عصري و جميل.
آداة البحث مرفقة بكلمات مفتاحية لتسهيل البحث و ذات تصميم جميل.
آداة إقرأ أيضا تلقائية مرفقة مع كل مقال تكتبه.
أرشفة سريعة وسيو.
أبقينا على سرعة القالب كما كانت في النسخة الأولى.
تم إنشاء لوحة تحكم قوية تساعدك في التعديل على المدونة دون التعامل مع الأكواد البرمجية المزعجة.
تم إصلاح مشكل صفحة الإتصال التي كانت لا تعمل أحيانا في النسخة القديمة.
تم إضافة فوتر مميز للقالب ذو رونق جميل.
أضيفت أيضا المزيد من الأكواد القصيرة للقالب بخصائص رائعة.
تم إضافة رموز مواقع التواصل الإجتماعي على السايدبار .
زر لتغيير عرض التدوينات الرئيسية بين قائمة أو عناصر متعددة.
قمنا بتغيير شكل القائمة الرئيسية لشكوى بعض المتابعين من عدم إمكانية ظهور التصنيفات ذات العناوين الطويلة .
أضيفت أيضا ميزة تغيير حجم الخط داخل المقالات لمن يعانون صعوبة في القراءة .
أضيفت أماكن عديدة للأعلانات داخل القالب و داخل المقالات.
والمزيد ستكتشفه عند معاينتك للقالب.

نأسف على التأخير في إصدار النسخة المطورة لكن كما ترى لقد كان لدينا الكثير من العمل لفعله و هو يستحق كل دقيقة صدقني.

لنتطرق الآن إلى كيفية تركيب القالب و التعديل عليه ثم تخصيصه.

تركيب قالب قواعد ويب النسخة المحدثة :

لا تنسى أن تقوم بنسخة إحتياطية لقالبك قبل البدء ، بالنسبة لمنصة مثل بلوجر أظن أن طريقة تركيب القالب ستبقى ثابتة للأبد لذا يمكنك الإطلاع على طريقة تركيب القالب من هنا .

لنتطرق إلى

كيفية تجهيز الإعدادات :

أولا : توجه لإعدادات بلوجر.

ثانيا: لا تنسى ملئ الإعدادات الأساسية مثل العنوان والوصف و اللغة العربية بالطبع.

طيب ، توجه الآن إلى آخر صفحة الإعدادت ستجد بعض الكلام عن الخلاصة غير إعداداتها إلى السماح بالخلاصة "كامل"

هناك العديد من الإعدادت فيما يخص تركيب الدومين والروبوت تكست و ما شابه ذلك ولكن هذا ليس موضوعنا اليوم سنتحدث عن هذا لاحقا.

إلى هنا ينتهي مشوارنا مع الإعدادات.

إعدادات القالب :

بعد قرائتك للمقالة السابقة و معرفتك لكيفية تركيب قالب قواعد ويب بالشكل الصحيح و اللازم لعمل القالب توجه الآن إلى بوابة "التنسيق" ستجد إعدادت تخص إضهار أو إخفاء وتثبيت بعض العناصر في القالب

يمكنك تفعيلها فقط بإضهار الآداة الخاصة بكل ميزة.

إقتراحات البحث :

في إقتراحات البحث يمكنك تحديد الكلمات المفتاحية التي تظهر في آداة البحث عن طريق تحديد التسميات المطلوبة للكلمات المفتاحية.

قسم القائمة الرئيسية :

في قسم القائمة الرئيسية لقالب قواعد ويب ستجد كل من أقسام المدونة ، قائمة الروابط ،مواقع التواصل الإجتماعي.

أقسام المدونة : آداة تسميات تظهر في الهاتف المحمول على شكل تصنيفات المدونة.

قائمة الروابط : تظهر روابط الصفحات الأساسية و المقالات المميزة في كل من الهاتف و الشاشات الكبيرة.

مواقع التواصل الإجتماعي : تظهر هاته الآداة في الهاتف فقط و تعرض مواق التواصل الإجتماعي.

تم إخفاءالآداتين السابقتين في الشاشت الكبيرة للتمكين من تجربة مستخدم أفضل.

قسم قائمة التصنيفات الإختيارية :

في قائمة التصنيفات الإختيارية يمكنك عرض أقسام المدونة سواء سواء تلقائيا عن طريق عرض تصنيفات المقالات أو يدويا بكتابتها في آداة الروابط.

المشاركات المميزة وسلايد شو :

تختص الآداة بعرض المشاركات الأكثر شيوعا بشكل شبكي جميل لا يؤثر على آداء القالب ، ينصح بالإبقاء على عدد المشاركات ك 5 مشاركات تتغير حسب الزيارات التي لمدونتك بالنسبة لآداة المشاركات المميزة للمشاركات المميزة أما بالنسبة للسلايد شو يمكنك تغيير عدد المشاركات كما تريد.

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

   <!-- <script	>/*<![CDATA[*/ (function() { var ad = document.createElement('script'); ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('head')[0]; sc.parentNode.insertBefore(ad, sc); })(); /*]]>*/</script> -->

قم بتغييره إلى


<script>/*<![CDATA[*/ (function() { var ad = document.createElement('script'); ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('head')[0]; sc.parentNode.insertBefore(ad, sc); })(); /*]]>*/</script>

بالنسبة للوحدات الإعلانية يمكنك الإستغناء عن السكربت المكرر في كل وحدة إعلانية و الذي يتسبب في بطئ مدونتك قم بترطيب الوحدات الإعلانية بالشكل التالي:

<ins class='adsbygoogle' data-ad-client='ca-pub-xxxxxxxxxxxxxxxx' data-ad-format='horizontal' data-ad-slot='xxxxxxxxxx' data-full-width-responsive='false'/>

هذا كل شيئ تحتاج لمعرفته الآن أما بالنسبة للباقي يمكنك إكتشافه بنفسك خلال تصفحك للقالب فقد تم تحديثه ليكون سهل الإستعمال بعد كل شيئ.

لننتقل إلى الأكواد القصيرة في القالب.

أكواد قصيرة:

ساقوم بذكر الأشياء الجديدية فقط يمكنك تفحص الأكواد القصيرة السابقة من هنا.

يمكنك معاينة صفحة الأكواد القصيرة للتحديث الجديد هنا.

صندوق الأكواد البرمجية :


<pre ><code>ضع الكود الخاص بك هنا</code></pre>

مقولة مرفقة مع إسم صاحبها وصورته :


 <blockquote>قواعد هي مدونة عربية تعرض شروحات  مفصلة في مجال السيو ، أدسنس ،بلوجر
  <div	 class="block-author">
    <div	 class="block-img">
      <imgalt="المؤلف" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgugU1b7I9gb8mwPTLZKrhfOhohSKT8t8I8cUcX_ZDwOjOH97xhyphenhyphenD_IZ5wAjJb_Yni3yP6dw2kVHgPChwc8fNPRsaGyCAcEuIqd3hBjpS8jJFaaM3YDCIPK_5BLJxq55dBWV_QXYy6StIA/s113-pf/qawa3id-symbol.jpg" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />
    </div	>
    <div	 class="block-info"><span class="block-name">قواعد-Qawa3id</span><span class="block-desc">مبرمج ومدون</span></div></div></blockquote>

فقرة مميزة بالحرف الأول :

<p><span class="dropcap">ق</span>واعد هي مدونة عربية تعرض شروحات  مفصلة في مجال السيو ، أدسنس ،بلوجر.</p>

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

<div	 class="tableOfContent">
  <input class="tocInput hidden" id="tableOfContent-01" type="checkbox" />
  <label class="tocHeader" role="button">جدول المحتويات</label>
  <div	 class="tocContent">
    <ol>
      <li><a href="#toc-1">عنوان رئيسي </a></li>
      <li><a href="#toc-2">عنوان رئيسي </a>
        <ol>
          <li><a href="#toc-2a">عنوان فرعي</a></li>
          <li><a href="#toc-2b">عنوان فرعي</a></li>
          <li><a href="#toc-2c">عنوان فرعي</a></li>
        </ol>
      </li>
      <li><a href="#toc-3">عنوان رئيسي</a></li>
      <li><a href="#toc-4">عنوان رئيسي</a></li>
      <li><a href="#toc-5">عنوان رئيسي</a></li>
    </ol>
  </div	>
</div	>

الإنتقال إلى رابط :


<a class="button" href="https://qawa3id.com/"><i class="icon demo"></i >الإنتقال إلى رابط</a>

الصور المتعددة :


<div	 class="grid-image">
  <img class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoKlDm4nhAxeukhJAYN8vtR3-d-u6RxCLqIXkGKIqFkuSq6IXxqWdo_BA6ooz0wA_J9gejgHiNLu0Siin4i9InfW1MF0-ax0NMPgNY2MPUdUzE3wFiswrD6fbR8FGh2d9Vo8lj6iVJ7Y-O/w500-h300-p-k-no-nu/pexels-photo-125521.jpeg" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />
  <img class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoKlDm4nhAxeukhJAYN8vtR3-d-u6RxCLqIXkGKIqFkuSq6IXxqWdo_BA6ooz0wA_J9gejgHiNLu0Siin4i9InfW1MF0-ax0NMPgNY2MPUdUzE3wFiswrD6fbR8FGh2d9Vo8lj6iVJ7Y-O/w500-h300-p-k-no-nu/pexels-photo-125521.jpeg" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />
  <img class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoKlDm4nhAxeukhJAYN8vtR3-d-u6RxCLqIXkGKIqFkuSq6IXxqWdo_BA6ooz0wA_J9gejgHiNLu0Siin4i9InfW1MF0-ax0NMPgNY2MPUdUzE3wFiswrD6fbR8FGh2d9Vo8lj6iVJ7Y-O/w500-h300-p-k-no-nu/pexels-photo-125521.jpeg" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />
</div	>

الصور المسحوبة :

<div	 class="scroll-image">
  <img class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoKlDm4nhAxeukhJAYN8vtR3-d-u6RxCLqIXkGKIqFkuSq6IXxqWdo_BA6ooz0wA_J9gejgHiNLu0Siin4i9InfW1MF0-ax0NMPgNY2MPUdUzE3wFiswrD6fbR8FGh2d9Vo8lj6iVJ7Y-O/w500-h300-p-k-no-nu/pexels-photo-125521.jpeg" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />
  <img class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoKlDm4nhAxeukhJAYN8vtR3-d-u6RxCLqIXkGKIqFkuSq6IXxqWdo_BA6ooz0wA_J9gejgHiNLu0Siin4i9InfW1MF0-ax0NMPgNY2MPUdUzE3wFiswrD6fbR8FGh2d9Vo8lj6iVJ7Y-O/w500-h300-p-k-no-nu/pexels-photo-125521.jpeg" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />
  <img class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoKlDm4nhAxeukhJAYN8vtR3-d-u6RxCLqIXkGKIqFkuSq6IXxqWdo_BA6ooz0wA_J9gejgHiNLu0Siin4i9InfW1MF0-ax0NMPgNY2MPUdUzE3wFiswrD6fbR8FGh2d9Vo8lj6iVJ7Y-O/w500-h300-p-k-no-nu/pexels-photo-125521.jpeg" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />
</div	>

المحتوى المخفي :


<div	 class="spoiler">
  <input  class="spoiler-input hidden" id="spoiler-01" type="checkbox" />
  <div	 class="spoiler-judul">محتوى مخفي<label aria-label="Spoiler" class="button"></label></div>
  
  <div	 class="spoiler-isi">
    <div	>قواعد هي مدونة عربية تعرض شروحات  مفصلة في مجال السيو ، أدسنس ،بلوجر</div>
  </div	>
</div	>

أكورديون :


<ul class="accordion">
  <li>
    <div class="accor-content">
      <input class="accor-menu hidden" id="offaccor-menu1" name="accordion-menu" type="radio" />
      <label class="accor-title">
        <i class="accor-icon"></i>
        <span class="title">السؤال الأول</span>
      </label>
      <div class="content">الجواب الأول</div>
    </div>
  </li>
  <li>
    <div class="accor-content">
      <input class="accor-menu hidden" id="offaccor-menu2" name="accordion-menu" type="radio" />
      <label class="accor-title">
        <i class="accor-icon"></i>
        <span class="title">السؤال الثاني</span>
      </label>
      <div class="content">الجواب الثاني</div>
    </div>
  </li>
  <li>
    <div class="accor-content">
      <input class="accor-menu hidden" id="offaccor-menu3" name="accordion-menu" type="radio" />
      <label class="accor-title">
        <i class="accor-icon"></i>
        <span class="title">السؤال الثالث</span>
      </label>
      <div class="content">الجواب الثالث</div>
    </div>
  </li>
</ul>

الصفحات :

إهتممت في هذا التحديث بحل مشكلة صفحة الإتصالات رغم الطلبات الكثيرة التي وصلتني لإضافة صفحة تحويل الروابط إلا أنني للأسف لم أتمكن من توفيرها لكنني سأقوم بتظمينها في التحديث القادم ال تقلق.

صفحة الإتصال :


<div	 class='ContactForm' id='ContactForm1'>
  <form name='contact-form'>
    <div	 class='input-area'>
      <label for='ContactForm1_contact-form-name'>الإسم</label>
      <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' type='text' value='' />
    </div	>
    <div	 class='input-area'>
      <label for='ContactForm1_contact-form-email'>البريد الإلكتروني<span>*</span></label>
      <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' type='text' value='' />
    </div	>
    <div	 class='input-area'>
      <label for='ContactForm1_contact-form-email-message'>الرسالة<span>*</span></label>
      <textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message'></textarea>
    </div	>
    <div	 class='input-area'>
      <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='إرسال' /></div>
    <div	 class='notif-area'>
      <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
      <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
    </div	>
  </form>
</div	>

<script src='https://www.blogger.com/static/v1/widgets/2271878333-widgets.js'></script>
<script>//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = 'xxxxxxxxxxxxxx';BLOG_attachCsiOnload(''); 
}_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3dxxxxxxxxxxxxxx','//www.qawa3id-web.blogspot.com/','xxxxxxxxxxxxxx');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'جار الإرسال...', 'contactFormMessageSentMsg': 'لقد تم إرسال رسالتك.',
'contactFormMessageNotSentMsg': 'لم نتمكن من إرسال رسالتك يرجى المحاولة مجددا.', 'contactFormInvalidEmailMsg': 'أدخل بريد إلكتروني صالح.', 'contactFormEmptyMessageMsg': 'إملى حقل الرسالة.', 'title': 'Contact Form', 'blogId': 'xxxxxxxxxxxxxx', 'contactFormNameMsg': 'الإسم', 
'contactFormEmailMsg': 'البريد الإلكتروني', 'contactFormMessageMsg': 'الرسالة', 'contactFormSendMsg': 'إرسال', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); 
//]]></script>

قم بتغيير عنوان المدونة Qawa3id-web.blogspot.com.

و أضف معرف مدونتك في مكان حروف xxxxxxxx.

صفحة الأرشيف :


<div	 class="sitemaps" id="sitemaps">
  <div	 class="loading">جار التحميل....</div>
</div	>
<script>/*<![CDATA[*/
/* Blogger Sitemap Dropdown */
var toc_config = {containerId:'sitemaps', showNew:0, sortAlphabetically:{thePanel:true, theList:true}, activePanel:1, slideSpeed:{down:400, up:400}, slideEasing:{down: null, up: null}, slideCallback:{down:function(){}, up:function(){}}, clickCallback:function(){}, jsonCallback:'sitemaps',delayLoading: 0};
window.onload = function(){
!function(e,o){var t=o.getElementById(toc_config.containerId),c=o.getElementsByTagName("head")[0],n=[];e[toc_config.jsonCallback]=function(e){for(var o,c,i=e.feed.entry,a=e.feed.category,l="",s=0,d=a.length;d>s;++s)n.push(a[s].term);for(var r=0,f=i.length;f>r;++r)(toc_config.showNew||toc_config.showNew>0)&&r<toc_config.showNew+1&&(i[r].title.$t+=" %new%");
i=toc_config.sortAlphabetically.theList?i.sort(function(e,o){return e.title.$t.localeCompare(o.title.$t)}):i,toc_config.sortAlphabetically.thePanel&&n.sort();for(var g=0,h=n.length;h>g;++g){l+='<div class=\"sitemap-box\"><h4 class=\"judul\">'+n[g]+'</h4>',l+='<div class=\"konten\"><ol>';for(var _=0,p=i.length;p>_;++_){o=i[_].title.$t;for(var w=0,u=i[_].link.length;u>w;++w)if("alternate"==i[_].link[w].rel){c=i[_].link[w].href;break}for(var v=0,m=i[_].category.length;m>v;++v)n[g]==i[_].category[v].term&&(l+='<li><a href=\"'+c+'\" title=\"'+o.replace(/ \%new\%$/,"")+'\">'+o.replace(/ \%new\%$/,"")+'</a></li>')}l+='</ol></div></div>'}t.innerHTML=l,"undefined"!=typeof jQuery&&($("#"+toc_config.containerId+" .konten").hide(),$("#"+toc_config.containerId+" .judul").click(function(){$(this).hasClass("aktif")||(toc_config.clickCallback(this),$("#"+toc_config.containerId+" .judul").removeClass("aktif").next().slideUp(toc_config.slideSpeed.up,toc_config.slideEasing.up,toc_config.slideCallback.up),$(this).addClass("aktif").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))}).eq(toc_config.activePanel-1).addClass("aktif").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))};
var i=o.createElement("script");i.src="https://qawa3id-web.blogspot.com/feeds/posts/summary?alt=json-in-script&max-results=9999&callback="+toc_config.jsonCallback,"onload"==toc_config.delayLoading?e.onload=function(){c.appendChild(i)}:e.setTimeout(function(){c.appendChild(i)},toc_config.delayLoading)}(window,document);
}
/*]]>*/</script>

قم بتغيير عنوان المدونة Qawa3id-web.blogspot.com.

هذا كل شيئ لهذا التحديث إذا واجهتك أي مشكلة أو راودك استفسار إطرحه في التعليقات وسأجيب عنه بأسرع ما يمكن .

أحبتي في الله ، ألقاكم بخير في تحديث آخر إن شاء الله.