في هذا المقال سوف نقوم بشرح بعض افضل اضافات بلوجر الاحترافية ويمكنك
استخدام اضافة بلوجر الموجوده في هذا المقال في مدونتك . فبعضها يستخدم كود او سكريبت Javascript|html|css وبعضها ميزات موجوده علي بلوجر وعليك فقط
تفعليها واستخدامها بكل سهولة.
من المعروف ان كثرة استخدام اكواد الجافا سكريبت يبطئ من سرعة المدونة فلا تحاول استخدام كل الاضافات بل استخدم التي تراءه مفيداً بالنسبة لك.
1- جدول المحتويات
إضافة سكريبت جدول المحتويات التلقائية لمدونة بلوجر.
هذا السكريبت يقوم بإضافة
جدول المحتويات التلقائي والذي
يظهر في اول المقالات او أي مكان تريده ان يظهر فية داخل المقال. ويطلق عليه
تلقائي لان يقوم بعرض محتويات المقال تلقائياً.
اثناء كتابة المقال حدد المحتويات التي تريدها ان تظهر كمحتويات المقال
كالعنوان من شريط التنسيق اعلي صفحة المنشور.
مميزات جدول المحتويات التلقائي بالنسبة لمدونة بلوجر.
من مميزاته انه يجعل الموقع منظم ومرتب ويقوي السيو الداخلي للموقع ويساعد في
تحسين محركات البحث، لان محركات البحث تفضل المحتوي المنظم والمرتب وذلك يساعدك
في تصدر نتائج البحث.
إضافة كود جدول المحتويات لمدونة بلوجر.
لاضافة سكريبت جدول المحتويات التلقائي لمدونة بلوجر اتبع الاتي:
1- توجة الي لوحة تحكم بلوجر بمدونة
الخاصة.
2- اضغط علي تبويب المظهر.
3- اضغط علي تعديل HTML
4- اضف الكود التالي فوق وسم </head>
<style>
/* CSS Table of Contents by tharabic.com */
#toc{border-right:6px dotted rgba(121,128,136,0.24);padding-right:20px;padding-right:1.25rem;margin:0 0 20px;margin:0 0 1.25rem;font-size:14px;font-size:.875rem}@media only screen and (max-width : 480px){#toc{padding-right:.75rem}}#toc a{text-decoration:none}#toc b.toc{text-transform:uppercase}#toc ol{padding-right:0;margin:0}#toc ol li{margin:8px 0}#toc ol li ol{padding-right:32px;padding-right:2rem;margin:0}#toc ol li ol li{list-style-type:disc}#toc>ol{counter-reset:item;list-style:none}#toc>ol>li:before,#toc>ol li>li:before{content:counters(item,".") " ";counter-increment:item;margin-left:5px}#toc>ol>ol{padding-right:16px;padding-right:1rem}#toc>ol>ol li{list-style-type:disc}#toc-0::before,#toc-1::before,#toc-2::before,#toc-3::before,#toc-4::before,#toc-5::before,#toc-6::before,#toc-7::before,#toc-8::before,#toc-9::before,#toc-10::before,#toc-11::before,#toc-12::before,#toc-13::before,#toc-14::before,#toc-15::before{content:" ";margin-top:-72px;height:72px;display :block;visibility:hidden}.toc button{background:transparent;border:0;padding:0;outline:0;margin:0 4px;cursor:pointer;text-transform:lowercase;font-weight:normal}
</style>
5 -
ابحث ايضاً عن الوسم </body> واضف الكود التالي
فوقه
<script type='text/javascript'>
//<![CDATA[
//toc by tharabic.com
!function(e){"use strict";function p(e){if("string"!=typeof e)return 0;var t=e.match(/\d/g);return t?Math.min.apply(null,t):1}function o(e){var i,c,n,t,o,r,a=e.selector,l=e.scope,u=document.createElement("ol"),d=u,s=(i=e.overwrite,c=e.prefix,function(e,t,n){e.textContent;var o=c+"-"+n;t.textContent=e.textContent;var r=!i&&e.id||o;r=encodeURIComponent(r),e.id=r,t.href="#"+r});return n=a,t=l,o=[],r=document.querySelectorAll(t),Array.prototype.forEach.call(r,function(e){var t=e.querySelectorAll(n);o=o.concat(Array.prototype.slice.call(t))}),o.reduce(function(e,t,n){var o=p(t.tagName),r=h(d,o-e)||u,i=document.createElement("li"),c=document.createElement("a");return s(t,c,n),r.appendChild(i).appendChild(c),d=i,o},p(a)),u}function t(e){var t=(e=function(e,t){for(var n in t)t.hasOwnProperty(n)&&t[n]&&(e[n]=t[n]);return e}({selector:"h1, h2, h3, h4, h5, h6",scope:"body",overwrite:!1,prefix:"toc"},e)).selector;if("string"!=typeof t)throw new TypeError("selector must be a string");if(!t.match(/^(?:h[1-6],?\s*)*$/g))throw new TypeError("selector must contains only h1-6");var n=location.hash;return n&&setTimeout(function(){location.hash="",location.hash=n},0),o(e)}var h=function(e,t){return t<0?h(e.parentElement,t+1):0<t?function(e,t){for(;t--;){var n=document.createElement("ol");e.appendChild(n),e=n}return e}(e,t):e.parentElement};"function"==typeof define&&define.amd?define("toc",[],function(){return t}):e.initTOC=t}(window);var aside=document.getElementById("toc"),toc=initTOC({selector:"h2, h3",scope:".post-body"});function tocShowHide(){var e=document.querySelector(".toc"),t=document.createElement("button"),n=document.querySelector("#toc ol");e.appendChild(t),t.innerHTML="(عرض)",n.style.display="none",t.addEventListener("click",function(e){"none"==n.style.display?(n.style.display="",t.innerHTML="(اخفاء)"):(n.style.display="none",t.innerHTML="(عرض)")})}function tocOption(){var e=document.querySelector(".toc");"undefined"==typeof linkMagzSetting&&(linkMagzSetting={judulTOC:"عرض جدول المحتوى",showHideTOC:!0}),e.innerHTML=linkMagzSetting.judulTOC,1==linkMagzSetting.showHideTOC&&tocShowHide()}null!=aside&&(aside.appendChild(toc),tocOption());
//]]>
</script>
6 -
وفي هذه الخطوه أي تريد جدول المحتويات ان يظهر اذا كان في اول المقال ابحث عن
الوسم <data:post.body/> واضف الكود التالي فوقه ثم قم
بالحفظ.
<div id='toc'><b class='toc'></b></div>ملحوظة: جدول المحتويات وجدول التنقل هي نفس الخاصية الاختلاف فقط في الاسم وطريقة اضافة الخاصية استخدم واحدة منهما فقط.
2- ميزة جدول التنقل
شرح مميزات ميزة جدول المحتويات.
وهي خاصية او ميزة تعطي طابع الاحترافية للمقال حيث يساعد الزائر علي التنقل بين فقرات المحتوي بشكل سلس.
حيث يمكن الزائر من معرفة عناصر المحتوي وفهم المقال بشكل عام قبل البدء في قراءة المقال .
وجدول التنقل يساعد محركات البحث ايضاً في فهم المقال ومعرفة فقراتة ومحتواة بشكل جيد وذلك من اهم متطلبات السيو الداخلي.
ويعمل جدول التنقل بخاصية الجامب لينكس jump links للتنقل بين محتويات المقال .
وهي نفس اداة جدول المحتويات ولكن في جدول المحتويات نحتاج الي اضافة سكريبت و ميزة جدول التنقل موجوده في مدونة بلوجر وعليك القيام بتنشيط الخاصية من تبويت التنسيق من لوحة تحكم بلوجر.
ولاضافة العناصر الي جدول التنقل السريع قم فقط بتحديد العناوين في المقال من خلال اداة التنسيق للمقال في اعلي صفحة المنشور الذي تقوم بكتابته.
وللعناوين تسلسل كمايلي |العنوان الرئيسي|العنوان| العنوان الفرعي|العنوان الثانوي وعليك تحديد العناوين علي حسب تسلسل العناوين في المقال خاصتك.
كيفية اضافة ميزة التنقل السريع
* توجة الي لوحة تحكم بلوجر.
* قوم بالضغط علي تبويب التنسيق.
* توجة الي اسفل صفحة التبويب اعلي الفوتر سوف تجد ميزة جدول التنقل.
* اضغط علي علامة القلم.
* قم بتنشيط الاداة في الاعلي.
* اختياري يمكنك تغير اسمه من التنقل السريع الي جدول المحتويات.
وهذه الاداة تعمل بشكل تلقائي.
3- اضافة ميزة اقرأ ايضاَ|ومواضع ذات الصلة
من الاضافات الهامة جداً في مدونة بلوجر لانها تقوم بعملية الربط الداخلي للموقع وتحسين السيو الداخلي للمدونة.
وايضاً تبقي الزائر داخل المدونة لاطول فترة والانتقال بين عدة مواضيع ذات صلة في الموقع.
وليس من الامور الجيده ان لا تقوم بربط مقالات ومواضيع المدونة خاصتك مع بعضها البعض حيث يمكن القارئ من معرفة مواضيع اخري لها صلة بموضوعة الذي ضغط علي رابطة من خلال محرك البحث ، واخذه في جولة مكوكية داخل المدونة لرؤية مقالاتك ومدوناتك الاخري. وابقائة داخل المدونة لاطول فترة وربما زيارة اخري محتملة.
خاصية اقرأ ايضا ومواضيع ذات الصلة هو نفس الشئ عليك اضافة واحده منهما والفرق هو. ان خاصية اقرأ ايضا موجود ه بمدونة بلوجر في تبويب التنسيق ولا تحتاج الي كود او سكريبت لاضافته، اما مواضيع ذات صلة فنحتاج الي سكريبت لاضافة الي المدونة خاصتنا.
ملحوظة : اضف ميزة اقرأ ايضا او خاصية مواضيع ذات الصلة الفرق هو في الاسم فقط ولكن هي نفس الاداة.
كيفية اضافة خاصية اوميزة اقرأ ايضا الي مدونة بلوجر.
* توجة الي لوحة تحكم بلوجر واضغط علي تبويب التنسيق.
* توجة الي اخر صفحة التنسيق فوق الفوتر مباشرة سوف تجد ميزة اقرأ ايضا.
* اضغط علي علامة القلم بجانبة ثم قم بتنشيط وتفعيل الخاصية من النافذه اعلاه.
اصبحت الميزه الان جاهزه للعمل تلقائياً.
طريقة اضافة خاصية مواضيع ذات الصلة الي مدونة بلوجر.
* توجة الي لوحة تحكم بلوجر خاصتك.
* اضغط علي تبويب المظهر.
* قم بعمل نسخة احتياطية للقالب الحالي في حال حصل خطأ يمكنك استرجاع القالب الحالي.
* اضغط علي السهم بجانب التخصيص واختار تعديل html
* ابحث عن الوسم </head> وستجده في اسفل الصفحة قم بلصق الكود التالي فوقة مباشرةً.
*قم بالبحث عن <data:post.body/> ستجدة مكرراً عده مرات الثاني اوالثالث هو المطلوب قم بلصق الكود التالي فوقه مباشرةً
4- اضافة صندوق الانضمام الي الاعضاء بمدونة بلوجر
من الاضافات الجميلة التي تضاف الي مدونة بلوجر، بجانب الشكل لها اهمية كبيره بوضع صندوق للاشتراك للزوار.
رغم انه يعمل بكود جافا سكريبت لكن من المحبز اضافتة لان يعطي طابع الاحترافية والتفاعل في المدونة.
ومن مميزاته ان هذا الكود لا يضاف الي القالب بالمدونة بل يتم اضافته في اداة جديده في التنسيق.
طريقة اضافة صندوق انضمام الي اعضاء بمدونة بلوجر.
* توجة الي لوحة تحكم بلوجر.
* اضغط علي تبويب التنسيق.
* اختار اداة " اضافة اداة" واضف اداة جديده.
* اختار "javascrip|HTMl"
* قم بنسخ الكود التالي وقم بلصق الكود داخل الاداة الجديده.
* قم بحفظ الاداة.
5- اضافة اداة مربع النص بداخل مواضيع بلوجر
سوف نستخدم اليوم سكريبت بسيط لاضافة مربع النص بمدونة بلوجر، هذه الاداة من الاضافات التي يمكنك ان تحتاجها في اضافة نص في مربع يمكن نسخ هذا النص ويمكن ايضاً اضافة كود كملف مستخدم في شرح معين.
وسوف نستخدم كود اضافة مربع نص داخل مواضيع بلوجروهذا السكريبت سوف تضيفه فقط داخل المقال المراد اضافة نص داخل مربع.
طريقة اضافة سكريبت مربع النص بمدونة بلوجر.
* قم بنسخ الكود التالي
* قم بفتح المنشور او المقال المراد اضافة مربع نص بداخل.
* قم بتغير الملف من "عرض وضع الانشاء" الي "عرضhtml" عن طريق القلم في اعلي المنشور من ناحية اليمين.
* الصق الكود في المكان المراد اظهار مربع النص به في المقال.
* انسخ النص المراد اظهاره داخل مربع النص. وقم بلصقة في مكان "ادخل النص او الكود هنا".
* عد الي وضع "عرض وضع الانشاء" سوف تري مربع النص وبداخلة النص المراد عرضة داخل مربع في المنشور.
إرسال تعليق