شرح تركيب صناديق لعرض الأكواد الى موقع blogger بكل سهوله
السلام عليكم متابعي موقع ومدونة مايند ايجي - mindegy1 مرحبا بكم من جديد, اليوم سوف نتعرف كيف يمكن ان نضيف صناديق لعرض الأكواد داخل مدونة بلوجر بكل سهوله, هذه الصناديق تعطي منظر وشكل احترافي لموقعك وتحسن من شكله العام وعندما يصبح قالبك ذو منظر عام جيد سيحبك الزوار وايضا محركات البحث ستحب موقعك وتظهرك في الصفحات الاولى لذلك لا تستهين بأي شيئ في موقعك من حيث الاضافات وغيره لان هذا له عامل كبير على تحسين الموقع.
ما يميز هذه الصناديق انهم تستعمل في وضع الأكواد مثل Css و Html, Xml وغيرها بحيث توفر دعما يشمل النسخ بالضغط مرتين على الكود, أن الاضافة تتوفر بأربعة ألوان جميله يمكنك وضعهم في موقعك ويمكنك معاينة الاكواد قبل الاستخدام, فالاضافه توحي للزائر بأنك تهتم بادق التفاصيل في موقعك وتسعى الى راحت الزائر وهذا امر محبب لدى محركات البحث ولدى الزوار
معاينه
قبل الشروع في شرح تركيب الاكواد على موقع blogger اذا كنت تريد اضافات اكثر واضافات احترافيه للتعديل على قالب بلوجر الخاص بك يمكنك تصفح قسم اضافات بلوجر في الموقع وستجد العديد والعديد من الاكواد البرمجه الرائعه.
شرح طريقة تركيب مربع الاكواد في بلوجر :
- اولا قم بالتوجه الى موقع blogger
- قم بعملية blogger تسجيل الدخول
- توجه الى تحرير القالب ومن ثم
- ابحث عن ]]></b:skin> وضع الكود التالي فوقه
الان ابحث عن </body> وضع الكود التالي فو
<script src='//cdn.rawgit.com/iHussam/ar1web/master/preline.js' type='text/javascript'/>
<b:if cond='data:blog.pageType != "index"'>
<script type='text/javascript'>
// Line Numbers
$('pre').attr('class', 'line-numbers');
Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span/>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})
//<![CDATA[
// Selection
for(var pres=document.querySelectorAll("pre,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
//]]>
</script>
</b:if>احفظ القالب ومبروك عليك الاضافه في موقعك واذا كنت تريد استخدام الاكواد داخل المقاله يمكنك فتح التدوينه بتبويب HTML بنسخ الأكواد التالية وحفظها عندك ( انسخ كود منهم وقم بوضع الكود الخاص بك داخله )
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup">ضع هنا كود الـHTML</code></pre>
<pre data-codetype="CSSku" title="CSS"><code class="language-css">ضع هنا كود الـCss</code></pre>
<pre data-codetype="JavaScriptku" title="Javascript"><code class="language-javascript">ضع هنا كود الـJavascript</code></pre>
<pre data-codetype="JQueryku" title="jQuery"><code class="language-javascript">ضع هنا كود الـjQuery</code></pre>
استبدل جمله ضع هنا كود الـ بالكود الذي تريده.
للتنويه الاضافه منقوله من عرب ويب
تعليقات
إرسال تعليق