10حل مشاكل التخطيط-القائمة - Navigation Bar - Mixed Content لمواقع الويب SEO 2020
في شرح اليوم ساقدم لك طرق سهلة و فعالة لتحسين سرعة الموقع ، من المعروف انه بدون معرفة الترميز ، سيكون من الصعب عليك تسريع موقع الويب الخاص بك ، لكن ان اتبعت الشروحات خطوة بخطوة كن متأكدا انك ستحترف انت ايضا في اكواد الترميز java ، css...... وستصبح لك القدرة على تخطي المشاكل المستقبلية لوحدك دون الإعتماد على أحد ، كذلك الشأن بالنسبة لي لم اكن افهم شيئا في لغة البرمجيات ، و ها أنا ذا صرت أعرف كيفية حل المشاكل المتعلقة بصفحتي ولازلت اتعلم يوما بعد يوم .
و ليمكنك التعرف على مشاكل موقعك الخاص أنصحك باستعمال الأداتين PageSpeed Isinghts و Google Search Console ، وإدا لم تكن تعرف طريقة التعامل معهم تابع شرح حل مشاكل الويب 2020 بواسطة Search Console و Speed Isinghts و أكواد Java و Css أو مشاهدة الشرح المباشر للموقعين في فيديو سر محترفي الربح من الانترنت إصلاح مشاكل قوالب بلوجر google Search Console و PageSpeed Isinghts
حل مشكلة تخطيط بلوجر Layout Issues
عليك ان تعرف بان اكواد Java و Css هي المسئولة عن تنسيق الوان و ستايلات المواقع الإلكترونية ، كثيرا ما تكون المشكلة في المدونات و مواقع النت في تنظيم تخطيط القالب ، حيث تؤثر بشكل سلبي على السيو وبالتالي يتراجع ترتيب الموقع في محركات البحث . إطلع على ما هو السيو ؟ دليل وشرح شامل : عمله ، دوره، مميزاته - SEO Marketing 2020 لفهم ديناميكية السيو و ترتيب المواقع في محركات البحث
لحل مشكل التخطيط توجه إلى قالب Blogger ثم في تحريرالنص HTML فقط قم بالتمرير لأسفل قليلاً سترى رمزًا كهذا :
لحل مشكل التخطيط توجه إلى قالب Blogger ثم في تحريرالنص HTML فقط قم بالتمرير لأسفل قليلاً سترى رمزًا كهذا :
ما عليك فعله فقط هو إضافة الكود التالي فوقه:
#layout #outer-wrapper {
max-width: 100%;
width: 800px;
float: left;
/* margin: 0px auto; */
position: relative;
}
#layout .body-wrapper:before{
content: " ";
display: table;
}
#layout .body-wrapper:after{
content: " ";
display: table;
clear: both;
}
#layout #content-wrapper {
width: 100%;
}
body#layout #post-wrapper {
width: 92%!important;
float: left;
overflow: visible;
}
body#layout #mywrapper {
width: 66%;
}
body#layout #sidebar-wrapper {
width: 34%;
}
body#layout #mywrapper {
width: 66%!important;
}
#layout .admin{
display:block!important;
}
حل مشكلة المحتوى المختلط Mixed Content
تحدث أخطاء المحتوى المختلط عندما يتم تأمين صفحة ويب بواسطة HTTPS الآمن ومحتوى الموقع يتضمن HTTP غير آمن (مثل روابط باكواد JAVA و CSS ، برامج نصية ، الصور و الأنماط). سط هذا النوع من الأخطاء في صفحات الويب يؤدي إلى تدهور أداء موقعك سيؤثر على تجربة المستخدم لمدونتك.
لحل مشكلة Mixed Content عليك التوجه إلى قالب بلوجر ثم على تخصيص (personalize) ستظهر لك الصفحة مقسمة إلي جزئين العلوي به الإعدادات و السفلي مثال لموقعك .
في الإعدادات عليك التوجه إلى إعداد متقدم advance في إضافة Add custom CSS
تحتاج إلى إضافة الكود التالي في إضافة CSS :
.post-share-box {
box-shadow: none;
position: relative;
min-width: auto;
top: -7px;
}
حل مشكل القائمة الرئيسية في الشريط العلوي Main Menu in the Top Navigation Bar
بدأت العديد من المواقع الشائعة في إضافة تنقل ثابت في أعلى الصفحة ويبقى هناك عند التمرير للأسفل ، لمساعدة الزوار حيث لا يتعين على القارئ التمرير مرة أخرى إلى أعلى الصفحة لاختيار صفحة أو موضوع مختلف بدلاً من ذلك ، يمكنهم الوصول إلى التنقل الرئيسي في جميع الأوقات.
لحل هذا المشكل انتقل إلى تحرير نص HTML في قالب Blogger وابحث باستخدام ctrl + f عن الكود :
<b:section class='menu' id='menu' maxwidgets='1' showaddelement='yes'/>
عند العثور على السطر مقم باستبدال السطر الذي بحثت عنه للتو بالكود الآتي :
<b:section class='menu' id='menu' maxwidgets='1' showaddelement='yes'>
<b:widget id='LinkList1' locked='false' title='' type='LinkList' visible='true'>
<b:includable id='main'>
<b:if cond='data:title != ""'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
<script type='text/javascript'>
//<![CDATA[
$("#LinkList1").each(function() {
var e = "<ul class='sky-mega-menu sky-mega-menu-anim-scale sky-mega-menu-response-to-icons'><li><ul id='sub-menu'>";
$("#LinkList1 li").each(function() {
var t = $(this).text(),
n = t.substr(0, 1),
r = t.substr(1);
"_" == n ? (n = $(this).find("a").attr("href"), e += '<li><a href="' + n + '">' + r + "</a></li>") : (n = $(this).find("a").attr("href"), e += '</ul></li><li><a href="' + n + '">' + t + "</a><ul id='sub-menu'>")
});
e += "</ul></li></ul>";
$(this).html(e);
$("#LinkList1 ul").each(function() {
var e = $(this);
if (e.html().replace(/\s| /g, "").length == 0) e.remove()
});
$("#LinkList1 li").each(function() {
var e = $(this);
if (e.html().replace(/\s| /g, "").length == 0) e.remove()
})
});
//]]>
</script>
حل مشكل قائمة وسائل التواصل الاجتماعي Social Media Navigation Bar
أكبر ميزة لإضافة أيقونات التواصل الاجتماعية هي انك تبقى على اتصال مع متابعي موقعك المهتمين .
ادا كنت ترغب في إضافة أيقونات وسائط التواصل الاجتماعي في قائمة صفحة الويب الخاصة بك ، سوف أوضح لك كيفية إضافة رموز الوسائط الاجتماعية ،يمكنك بسهولة استخدام الكود الآتي بعد <head> و قبل <body>:
<style>
.navbar .socials li {
display: inline-block;
hauteur de ligne: 60px;
taille de police: 18px;
remplissage: 0 5px;
}
.navbar .socials li a {
color: # 555;
}
.navbar .socials li a: hover {
color: #fff;
}
</ style>
بعد تحديث الصفحة ستلاحظ ظهور ايقونات التواصل الاجتماعي.
ارجو ان يكون هذا الشرح قد اعجبك ، موعدنا في الشرح القادم إن شاء الله.
ارجو ان يكون هذا الشرح قد اعجبك ، موعدنا في الشرح القادم إن شاء الله.
ليست هناك تعليقات:
إرسال تعليق