عيد الاضحى المبارك


مواضيع تهمك

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

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

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

احصائياتى

الردود
0

المشاهدات
1492
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 غير متواجد حالياً

المشاركات
614

+التقييم
217

تاريخ التسجيل
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] اضافة اداة عيد الاضحى المبارك لمدونات بلوجر addM3rfa ركن تطوير المواقع 0 07-29-2020 02:27 PM
[blogger] اضافة اداة رمضان كريم لمدونات بلوجر بشكل رائع addM3rfa ركن تطوير المواقع 2 06-30-2020 04:18 PM
[blogger] اضافة أحدث المواضيع متحركة لمدونات بلوجر هيلبرنت ركن تطوير المواقع 0 10-09-2017 08:46 PM
اضافة تابعنا على مواقع التواصل الاجتماعي لمدونات بلوجر الاعصر ركن تطوير المواقع 0 01-18-2016 12:20 AM
أفضل كود لمدونات بلوجر هيلبرنت ركن تقنيات محركات البحث سيو SEO 1 10-14-2015 12:21 AM




الساعة الآن 10:46 PM
RSS 2.0XML Site MapTAGS SiteInfo SiteRSS FeedMap SectionsvB MapsMap TagSitemap ForumMaps Forum