طريقة التسجيل المعتمدة داخل معهد هيلبرنت

الى كل من واجه مشكله اثناء التسجيل بالمعهد



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

اضافة صناديق لعرض الاكواد لمدونات بلوجر

-------------------------------------------------- السلام عليكم -------------------------------------------------- تستعمل صناديق syntax highlighter خصيصا في وضع...

احصائياتى

الردود
0

المشاهدات
721
Mr Hero
.:: صديق المنتدى ::.
  • Mr Hero has much to be proud ofMr Hero has much to be proud ofMr Hero has much to be proud ofMr Hero has much to be proud ofMr Hero has much to be proud ofMr Hero has much to be proud ofMr Hero has much to be proud ofMr Hero has much to be proud of

  • Mr Hero غير متواجد حالياً

المشاركات
659

+التقييم
213

تاريخ التسجيل
Nov 2015

الاقامة
ارض الله

نظام التشغيل
windows 7

رقم العضوية
622
04-07-2016, 08:34 PM
المشاركة 1
04-07-2016, 08:34 PM
المشاركة 1
افتراضي اضافة صناديق لعرض الاكواد لمدونات بلوجر

--------------------------------------------------
السلام عليكم
--------------------------------------------------

تستعمل صناديق syntax highlighter خصيصا في وضع الأكواد مثل Css و Html, Xml وغيرها بحيث توفر دعما يشمل النسخ بالضغط مرتين على الكود وتوضح كل اسم للوسوم مع تلوينه كما أن الاضافة تتوفر بأربعة ألوان زاهية كما سنشاهد بوضوح أكثر في المعاينة التالية



معاينة


طريقة التركيب

1. حرر القالب >> ابحث عن ]]></b:skin> وضع الكود التالي فوقه

كود PHP:
/* CSS Pre-Code Syntax Highlighter */
pre {
    
padding50px 10px 10px 10px;
    
margin.5em 0;
    
white-spacepre;
    
word-wrap: break-word;
    
overflowauto;
    
background-color#2c323c;
    
positionrelative;
    
border-radius4px;
    
max-height500px;
    
font-familysans-serif;
    
clearboth;
}

pre::before {
    
font-size16px;
    
contentattr(title);
    
positionabsolute;
    
top0;
    
background-color#eee;
    
padding10px;
    
left0;
    
right0;
    
color#fff;
    
text-transformuppercase;
    
displayblock;
    
margin0 0 15px 0;
    
font-weightbold;
        
text-alignleft;
}

pre::after {
    
content'اضغط مرتين لنسخ الكود';
    
padding2px 10px;
    
widthauto;
    
heightauto;
    
positionabsolute;
    
right8px;
    
top8px;
    
color#fff;
    
line-height20px;
    
transitionall 0.3s ease-in-out;
}

pre:hover::after {
    
opacity0;
    
top: -8px;
    
visibilityvisible;
}

code {
    
font-familyConsolas,Monaco,'
    Andale Mono'
,'Courier New',Courier,Monospace;
    
line-height16px;
    
color#88a9ad;
    
background-colortransparent;
    
padding1px 2px;
    
font-size12px;
}

pre code {
    
displayblock;
    
backgroundnone;
    
bordernone;
    
color#e9e9e9;
    
directionltr;
    
text-alignleft;
    
word-spacingnormal;
    
padding0 0;
    
font-weightbold;
}

code .token.punctuation {
    
color#ccc;
}

pre code .token.punctuation {
    
color#fafafa;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
    
color#777;
}

code .namespace {
    
opacity.8;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
    
color#e5dc56;
}

code .token.selector,code .token.attr-name,code .token.string {
    
color#88a9ad;
}

pre code .token.selector,pre code .token.attr-name {
    
color#fafafa;
}

pre code .token.string {
    
color#40ee46;
}

code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
    
color#ccc;
}

code .token.operator {
    
color#1887dd;
}

code .token.atrule,code .token.attr-value {
    
color#009999;
}

pre code .token.atrule,pre code .token.attr-value {
    
color#1baeb0;
}

code .token.keyword {
    
color#e13200;
    
font-styleitalic;
}

code .token.comment {
    
font-styleitalic;
}

code .token.regex {
    
color#ccc;
}

code .token.important {
    
font-weightbold;
}

code .token.entity {
    
cursorhelp;
}

pre mark {
    
background-color#ea4f4e!important;
    
color#fff!important;
    
padding2px;
    
border-radius2px;
}

code mark {
    
background-color#ea4f4e!important;
    
color#fff!important;
    
padding2px;
    
border-radius2px;
}

pre code mark {
    
background-color#ea4f4e!important;
    
color#fff!important;
    
padding2px;
    
border-radius2px;
}

.
comments pre {
    
padding10px 10px 15px 10px;
    
background#2c323c;
}

.
comments pre::before {
    
content'Code';
    
font-size13px;
    
positionrelative;
    
top0;
    
background-color#f56954;
    
padding3px 10px;
    
left0;
    
right0;
    
color#fff;
    
text-transformuppercase;
    
displayinline-block;
    
margin0 0 10px 0;
    
font-weightbold;
    
border-radius4px;
    
bordernone;
}

.
comments pre::after {
    
font-size11px;
}

.
comments pre code {
    
color#eee;
}

.
comments pre.line-numbers {
    
padding-left10px;
}

pre.line-numbers {
    
positionrelative;
    
padding-left3.0em;
    
counter-resetlinenumber;
}

pre.line-numbers code {
    
positionrelative;
}

.
line-numbers .line-numbers-rows {
    
height100%;
    
positionabsolute;
    
pointer-eventsnone;
    
top0;
    
font-size100%;
    
left: -3.5em;
    
width3em;
    -
webkit-user-selectnone;
    -
moz-user-selectnone;
    -
ms-user-selectnone;
    
padding0;
}

.
line-numbers-rows span {
    
pointer-eventsnone;
    
displayblock;
    
counter-incrementlinenumber;
}

.
line-numbers-rows span:before {
    
contentcounter(linenumber);
    
color#999;
    
displayblock;
    
padding-right0.8em;
    
text-alignright;
    
transition350ms;
}

pre[data-codetype='CSSku']:before {
    
background-color#00a1d6;
}

pre[data-codetype='HTMLku']:before {
    
background-color#3cc888;
}

pre[data-codetype='JavaScriptku']:before {
    
background-color#ff3c41;
}

pre[data-codetype='JQueryku']:before {
    
background-color#e5b460;


2. ضع الكود التالي فوق </body>


كود PHP:
<script src='//cdn.rawgit.com/iHussam/ar1web/master/preline.js' type='text/javascript'/>
<
b:if cond='data:blog.pageType != &quot;index&quot;'>
<
script type='text/javascript'>
// Line Numbers
$(&#39;pre').attr('class', 'line-numbers');
Prism.hooks.add(&quot;after-highlight&quot;,function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf(&quot;line-numbers&quot;)===-1){return}var n=1+e.code.split(&quot;\n&quot;).length;var r;lines=new Array(n);lines=lines.join(&quot;<span/>&quot;);r=document.createElement(&quot;span&quot;);r.className=&quot;line-numbers-rows&quot;;r.innerHTML=lines;if(t.hasAttribute(&quot;data-start&quot;)){t.style.counterReset=&quot;linenumber &quot;+(parseInt(t.getAttribute(&quot;data-start&quot;),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> 
3. قم بحفظ العمل
* ما يتبقى عليك إلا وضع أحد الصناديق أو جميعها في موضوع بتبويب HTML بنسخ الأكواد التالية وحفظها عندك

كود PHP:
<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
* ملاحظة : لوضع أي كود به وسوم <> عليك بتحويله أولا ثم وضعه بداخل الصندوق - محول الأكواد من هنا

----------------------------------------------------------------
و السلام عليكم ورحمة الله وبركاته
----------------------------------------------------------------


اضافة رد

العلامات المرجعية

اضافة صناديق لعرض الاكواد لمدونات بلوجر


أدوات الموضوع

الانتقال السريع

المواضيع المتشابهه للموضوع: اضافة صناديق لعرض الاكواد لمدونات بلوجر
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
[blogger] أضافة باقى على رمضان لمدونات بلوجر هيلبرنت ركن تطوير المواقع 1 02-27-2019 12:42 PM
[blogger] اضافة أحدث المواضيع متحركة لمدونات بلوجر هيلبرنت ركن تطوير المواقع 0 10-09-2017 08:46 PM
اضافة تابعنا على مواقع التواصل الاجتماعي لمدونات بلوجر الاعصر ركن تطوير المواقع 0 01-18-2016 12:20 AM
اربعة اضافات مهمة لمدونات بلوجر هيلبرنت ركن تطوير المواقع 0 10-21-2015 03:47 AM
أفضل كود لمدونات بلوجر هيلبرنت ركن تقنيات محركات البحث سيو SEO 1 10-14-2015 12:21 AM




الساعة الآن 04:13 PM
Powered by vBulletin® Copyright ©2000 - 2019, Jelsoft Enterprises Ltd. TranZ By Almuhajir
RSS 2.0XML Site MapTAGS SiteInfo SiteRSS FeedMap SectionsvB MapsMap TagSitemap ForumMaps Forum