تعديل قالب اسكويز لأداء افضل للمستخدم علي موقع بريمو هندسة - تجربتي مع قالب اسكويز

1- مسح label-title من قالب اسكويز

قبل مسح label-title من قالب اسكويز علي موقع بريمو هندسة 

بعد مسح label-title من قالب اسكويز علي موقع بريمو هندسة

الlabel - title دي كانت مخصصة للمدونات والمواقع الي هيكون فيها تصنيفات او تاجات صغيرة ولكن علي موقع بريمو هندسة فيه اكثر من تاج واكثر من تصنيف ووجودها لا يمثل سواء عائق امام الصورة.

الطريقة الاولي لمسح الlabel - title 

فقد قمت بالاتي - مسح هذا الكود من السطر 2938 من الكود البرمجي للقالب الخاص بموقع بريمو هندسة

<span class='label-title'><data:post.labels.first.name/></span>

والكود البرمجي المسؤل عن التنسيق هو الاتي - حيث تم مسحه من السطر البرمجي 394 من الكود الداخلي للقالب ويوجد قبل Ribble Button وبعد كود Social Colors مباشرة

/* ------ Label-Title ------ */
.label-title{padding:0 8px;background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));color:$(grad.color);font-size:12px;-webkit-border-radius:1.5px;-moz-border-radius:1.5px;border-radius:1.5px;position:absolute;top:10px;$startSide:10px;z-index:2}
.img-wrap:hover .label-title{$startSide:-100%}
.img-wrap .label-name{float:$startSide;background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));padding:2px 10px;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;font-size:12px;margin-bottom:10px;color:$(grad.color);position:relative;$startSide:0}
.img-wrap:hover .label-name{$startSide:-100%}

تحذير : هذه الطريقة ستضر بموقعك اكثر مما تتخيل فبعض حذف كود <span class='label-title'><data:post.labels.first.name/></span> لن تجد المقال علي جوجل بالرغم انه متأرشف في الويب ماستر

الطريقة الثانية والصحيحة لمسح الlabel - title 

لمسح التاجات من علي المشاركات بقالب اسكويز

هتستبدل هذا الكود

.label-title{padding:0 8px;background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));color:$(grad.color);font-size:12px;-webkit-border-radius:1.5px;-moz-border-radius:1.5px;border-radius:1.5px;position:absolute;top:10px;$startSide:10px;z-index:2}

بهذا الكود

.label-title{display:none;padding:0 8px;background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));color:$(grad.color);font-size:12px;-webkit-border-radius:1.5px;-moz-border-radius:1.5px;border-radius:1.5px;position:absolute;top:10px;$startSide:10px;z-index:2}

2 - مسح ٌزر اقرء المزيد Read more  وزرار المشاركة Share Icon في الصفحة الرئيسية  

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

    <a class='read-more' expr:href='data:post.url'><data:blog.jumpLinkMessage/></a>

وتم مسح الكود الاتي الذي يظهر في الصفحة الرئيسية وهو الذي يظهر من خلاله ازرار المشاركة  وتم المسح من السطر 3332 بعد اكواد share post

<b:if cond='data:view.isMultipleItems'>

        <div class='post-share'>

          <div class='share-icon'><i class='fa fa-share-alt'/></div>

          <ul class='share-menu'>

            <li><a expr:href='data:post.shareUrl + &quot;&amp;target=facebook&quot;' expr:title='data:blog.sharing.platforms[1].shareMessage' rel='noopener' target='_blank'><i class='fa fa-facebook fa-fw'/></a></li>

            <li><a expr:href='data:post.shareUrl + &quot;&amp;target=twitter&quot;' expr:title='data:blog.sharing.platforms[3].shareMessage' rel='noopener' target='_blank'><i class='fa fa-twitter fa-fw'/></a></li>

            <li><a expr:href='data:post.shareUrl + &quot;&amp;target=pinterest&quot;' expr:title='data:blog.sharing.platforms[4].shareMessage' rel='noopener' target='_blank'><i class='fa fa-pinterest-p fa-fw'/></a></li>

          </ul>

        </div>

      </b:if>

 قبل مسح ٌزر اقرء المزيد Read more من قالب اسكويز

 بعد مسح ٌزر اقرء المزيد Read more من قالب اسكويز

 بعد مسح ٌزر اقرء المزيد Read more وزر المشاركة  من قالب اسكويز

الفيديو

صور الفيديو

3- اخفاء الشريط الجانبي من كل المقالات لزيادة السرعة بقالب اسكويز

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

البحث عن هذا الجزء بالقالب

]]></b:skin>

وضيف فوقه مباشرة السطرين دول

.item .side-right{float:none;width:100%}
.item aside{display:none}

ستلاحظ شكل التغير الذي تم بتصفحك لموقع بريمو هندسة فكل تعديل لا اقوم بكتابته الا بعد تطبيقة مباشرة علي موقع بريمو هندسة

اقرا ايضا :

• 30 خطا يرتكبها اصحاب المواقع وكيف اكتب مقال متوافق مع السيو بريمو هندسة
• كيف تعرف ماهي لغة برمجة الموقع الي تزوره على الانترنت والتقنيات المستخدمة في بناءه(builtwith.com)
• كيفية عمل اعادة توجيه لصفحات محذوفة او لاتعمل باخري تعمل علي بلوجر -وحل مشكلة اخطاء الزحف (لم يتم العثور علي عنوان url) في Webmaster tools

تعديل المقال