آخر التدوينات

تحميل خط Cornerstone الأنيق

تحميل خط Cornerstone الأنيق

الخطوط الإضافية هى مهمة للغاية من اجل تصميم افضل سواء كان فى تصميم الصور او المواقع او ما شابه الآن يمكنك تحميل خط Cornerstone خط رائع وجذاب تصميم انيق وهو صالح لإستخدامة للعناوين يمكنك تجربته بعد تحميله من هادي ستور .
  

صور stock عالية الجودة الجزء الأول

صور stock عالية الجودة الجزء الأول

السلام عليكم ورحمة الله وبركاتة / كيفكم إخوانى الكرام اتمنى ان تكونوا بأفضل حال أعتذر عن الفترة السابقة بسبب انقطاعى بسبب ظروف خاصة بى فى هذة التدوينة اعرض عليكم 15 خلفية للفوتوشوب عالية الجودة للمصممين جاهزين للإستخدام الجزء الأول حمل الملف الآن 😏
 
كولكشن خلفيات متنوعة 2016

كولكشن خلفيات متنوعة 2016

السلام عليكم ورحمة الله وبركاتة 
 متابعينا الكرام إذا كنت من المهتمين بكل جديد بالنسبة للخلفيات لجهازك حمل الآن مجموعة خلفيات جديدة 2016 متنوعة و بمقاسات مختلفة تناسب جميع الأجهزة حقاً كولكشن رائع مناسب للجميع لانه كما ذكرنا يحتوى على مجموعة صور متنوعة .
- عدد الخلفيات : 232       
 - حجم الملف : 162.7 MB
خلفيات شهر رمضان الكريم 2016

خلفيات شهر رمضان الكريم 2016

السلام عليكم ورحمة الله وبركاتة 
بمناسبة شهر رمضان الكريم أعاده الله علينا وعليكم بالخير وعلى الأمة العربية والإسلامية بكل خير وامان إختارنا لك 26 خلفية خاصة بالشهر الكريم إحترافية وبجودة ودقة عالية الخلفيات رائعة وجديدة لا تفوتك .
مخطوطات وخلفيات 2016 بمناسبة شهر رمضان EPS

مخطوطات وخلفيات 2016 بمناسبة شهر رمضان EPS

شهر رمضان المبارك اعاده الله علينا بالخير والبركات فهو شهر للصيام والقيام وحسن العبادات وفيه تفتح أبواب الجنان وتغلق أبواب النيران وبهذة المناسبة الكريمة نقدم لك مخطوطات شهر رمضان الكريم + صور ستوكات بجودة عالية جداً وبدقة إحترافية بصيغة EPS والآن لمشاهدة الملحق و للتحميل .
مخطوطات شهر رمضان الكريم


تحميل الصـــــــــور
طريقة وضع خلفية للنص داخل المواضيع

طريقة وضع خلفية للنص داخل المواضيع

بسم الله الرحمن الرحيم / السلام عليكم ورحمة الله وبركاتة
دروس عديدة لتخصيص التدوينة / الموضوع فى مدونات بلوجر سنشرح الآن كيفية إضافة خلفية للنص / صورة داخل مواضيع بلوجر إضافة كود بسيط جداً لإضافة خلفية للنص من خلال تستطيع تخصيص الخلفية كيفما شئت والآن تابع الشرح .
  1. قم بكتابة موضوع جديد عادى جداً ولكن إختر محرر HTML التدوينة مثل الصورة التالية 
 
 * ستستخدم الكود التالى إذا كنت تريد خلفية لون فقط ولمزيد من اكواد الالوان قم بزيارة هذة الصفحة من هنا
    <div style="background-color: #444; color: #fff; padding: 10px;">ضع النص الخاص بك هنا</div>
* وهذا الكود إذا كنت تريد وضع صورة كخلفية للنص 
    <div style="background: url(رابط الصورة هنا); background-size: cover; color: #000; padding: 10px;">النص الخاص بك هنا </div>
صورة توضح كيفية وضع الخلفية من محرر التدوينة


حل مشكله No data فى تصنيف موقعك لدى اليكسا

حل مشكله No data فى تصنيف موقعك لدى اليكسا

بسم الله الرحمن الرحيم
مرحباً بكم إخوانى الكرام مشكله بسيطة وشائعة لدى البعض وهو عند إضافة مربع إحصائيات اليكسا تجد عبارة No data” أو “No rank ولا يوجد اى إحصائيات لحل هذة المشكله عليك بالتسجيل بالموقع لان هذة المشكله هى لا يوجد بيانات لدى اليكسا لتصنيف موقعك فيتوجب عليك التسجيل وتقديم بيانات موقعك كاملاً حتى يظهر ترتيب موقعك لا اليكسا تقوم من حين لآخر بتحديث بيانات موقعك لكى تظهر الإحصائيات بشكل أدق ايضا عند تعبئة البيانات الخاصة بموقعك يجب تحديد بلدك حتى يظهر اليكسا ترتيب موقعك محلياً .
فقط هذة حل المشكله وهى تقديم بيانات كافية لدى اليكسا كيفية التسجيل بموقع اليكسا بالطريقة الجديدة سيتم شرحها لاحقاً بامر الله
طريقة إزالة التمدد فى قوالب بلوجر

طريقة إزالة التمدد فى قوالب بلوجر

السلام عليكم ورحمة الله وبركاتة
نتحدث اليوم عن مشكله تحدث عند البعض عند تركيب بعض قوالب بلوجر وهى " تمدد القوالب " بمعنى تكون مساحة فارغة بالجنب أو يكون جزء من المدونة وهذا ما سنوضحة من خلال هذة التدوينة البسيطة حل هذة المشكله بسيط جداً وهو إضافة كود بسيط جداً لكى تختفى هذة المشكلة : إبحث عن هذا الوسم ]]></b:skin> وضع الكود التالى قبله / أعلاه
 html {overflow-x: hidden;} 
- ولكن بعض القوالب تظهر الزيادات بشكل مختلف يعنى يكون جزء من محتوى المدونة نفسه خارج عرض الشاشة لديك وفى مثل هذة الحالة فإن المشكله ليست كما قلنا من قبل ولكن يحتاج للتعديل البسيط على القالب شاهد الصورة التالية : -
  •  شاهد الصورة السابقة لأحد المدونات القالب به 2 سيد بار + المحتوى الجزء المحدد باللون الأحمر مساحة كبيرة وعلى اليسار السيد  بار لم يظهر كاملاً ليست المشكله بالسيد بار 2 ولكن فى تقليص المساحة فى هذة المشكله تحتاج لتقليل المساحة قليلاً تقليل عرض المواضيع أو السيد بار بالجهة اليسرى .
شكراً لكم وأتمنى التوفيق للجميع
موك أب تاثير على النص مع شرح التعديل

موك أب تاثير على النص مع شرح التعديل

السلام عليكم ورحمة الله وبركاتة
إذا كنت ممن تبحث عن طريقة سهلة وبسيطة لكتابة إسمك بشكل لطيف إذن عليك بتحميل هذا الملف psd موك اب إحترافى جاهز للتعديل عليه كما تشاء + فيديو بسيط لشرح طريقة التعديل.
بوستر إحترافى جاهز للتعديل

بوستر إحترافى جاهز للتعديل

 السلام عليكم ورحمة الله وبركاتة ...التصميمات مفتوحة المصدر اصبحت توفر لك الوقت والجهد وخصوصا إذا كنت بسيط فى إستخدامك لبرامج التصميم لذلك نقدم لك بوستر إعلانى تصميم أنيق وإحترافى وجزاب جاهز للتعديل psd موك اب حمله الآن من هادي ستور فقط.
خط Pacha الأكثر جمالاً واناقة

خط Pacha الأكثر جمالاً واناقة

السلام عليكم ورحمة الله وبركاتة 
كيف حالكم إخوانى الكرام أتمنى ان تكونوا بخير وعافية مدونة هادى ستور تهتم دائماً فى تقديم افضل ما لديها وخط Pacha خط مميز وانيق بمعنى الكلمة تصميم إحترافى وجزاب حمله فقط من مدونة هادي ستور.
تحميل خط BlowBrush

تحميل خط BlowBrush

السلام عليكم ورحمة الله وبركاتة ... تحميل خط BlowBrush المميز هو متاح للإستخدام الشخصى والتجارى لمسة رائعة على جميع الأحرف بشكل رائع يستخدم بشكل أفضل فى الكتابة على الجدران هناك معاينة للخط .
طريقة تغيير شكل عرض مواضيع المدونة

طريقة تغيير شكل عرض مواضيع المدونة

السلام عليكم ورحمة الله وبركاتة 
درسنا اليوم سنشرح لكم طريقة تغير التخطيط فى عرض مواضيع المدونة لأكثر من شكل مختلف بإستخدام css يجب التنسيق فى عرض محتوى مدونتك على حسب محتوى المدونة وحسب المواضيع التى تناقشها ويجب أيضاً عرضها بشكل مناسب للقارئ فى هذة التدوينة البسيطة سنشرح لك كيفية تغير عرض مواضيع المدونة باكثر من شكل مختلف وكما يناسبك.
مهم جداً قبل البدء فى الشرح:
1- حفظ نسخة إحتياطية من القالب فى حالة وجود اى أخطاء يمكنك إستعادة القالب كما كان من قبل
2- إذهب إلى صفحة تحرير القالب
3- بإستخدام CTRL+F سنبحث عن هذا الوسم </head> ونضع الكود التالى قبلة مباشرة
<script type='text/javascript'>
posts_no_thumb_sum = 100;
posts_thumb_sum = 100;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" /></a></span>';
summ = posts_thumb_sum;
}
else {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="http://2.bp.blogspot.com/-Gbn3dT1R9Yo/VPXSJ8lih_I/AAAAAAAALDQ/24wFWdfFvu4/s1600/sorry-image-not-available.png" style="margin-top: -30px;" /></a></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<a href="'+ pURL +'"><div class="post-summary-text">' + removeHtmlTag(div.innerHTML,summ) + '</div></a>';
div.innerHTML = summary;
}
//]]>
</script>
4- إبحث عن هذا الوسم  <data:post.body/> ستجد 3 من هذا الوسم ربما يكون الثانى أو الثالث المقصود عندما تجد الوسم      المناسب ضع الكود التالى أسفلة مباشرة
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <div expr:id='&quot;summary&quot; + data:post.id'>
            <data:post.body/>
        </div>
        <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;);</script>
        <b:if cond='data:post.allowComments'>
            <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                <data:post.numComments/>
            </a>
        </b:if>
    </b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <data:post.body/>
</b:if>
5- الآن عليك بإختيار الشكل المناسب إبحث عن هذا الوسم </head> وضع كود الشكل الذى تود تركيبة قبلة / أعلاه
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType!= &quot;item&quot;'>
<style>
#blog-pager {
clear:both;
}
.post {
height: auto;
width:30.8%;
overflow: hidden;
display:inline-block;
text-decoration:none;
float:left;
margin:0 1.1% 2%;
padding: 0px !important;
}
h3.post-title a {
font-size:75%;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
text-transform:uppercase;
padding:0;
color:#444;
}
h3.post-title {
height: 26px;
text-align:center;
width:100%;
margin:0!important;
padding-bottom: 4%;
}
.date-header {
display: none;
}
.post-body a {
text-decoration: none;
}
.posts-thumb {
width:100%!important;
height:190px!important;
overflow:hidden;
clear:both;
}
.post-body img {
display:block;
width:100%!important;
height:auto!important;
max-width:800px!important;
max-height:400px!important;
min-width:190px!important;
min-height:190px!important;
border:none;
outline:none;
position:relative;
margin: 0px;
padding:0;
}
.post-summary-text {
color:#777;
font-size:100%!important;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
text-align:center;
clear:both;
overflow:hidden;
margin:5px 0 0;
padding:7% 10%;
}
a.comment-bubble {
color:#fff;
text-decoration:none;
font-size:100%;
font-weight: bold;
right:10px;
position:absolute;
top:165px;
text-shadow:1px 2px 1px #333;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
}
a.comment-bubble:before {
content: &quot;Comments: &quot;;
}
.post-header,.post-footer {
display:none;
}
</style></b:if></b:if>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType!= &quot;item&quot;'>
<style>
#blog-pager {
clear:both;
}
.post {
height:auto;
width:31%;
display:inline-block;
text-decoration:none;
float:left;
margin:0 1.1% 2%;
padding:0!important;
}
h3.post-title a {
font-size:75%;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
text-transform:uppercase;
color:#111;
padding:0;
}
h3.post-title {
text-align:center;
height:22px;
position:absolute;
bottom:23%;
width:100%;
z-index:101;
overflow:hidden;
margin:0!important;
padding:10px 0;
}
.date-header {
visibility:hidden;
height:0!important;
width:0!important;
margin:0!important;
padding:0!important;
}
.posts-thumb {
width:100%!important;
height:190px!important;
overflow:hidden;
clear:both;
border-bottom:3px solid #00C8BD;
border-top:3px solid #558ABB;
}
.posts-thumb:hover {
border-top:3px solid #FF664E;
border-bottom:3px solid #FEBE36;
}
.post-body {
border-radius:2px;
box-shadow:0 0 6px 1px rgba(0,0,0,0.1);
position:relative;
height:auto;
}
.post-body a {
text-decoration: none;
}
.post-body img {
display:block;
width:100%!important;
height:auto!important;
max-width:800px!important;
max-height:400px!important;
min-width:190px!important;
min-height:190px!important;
border:none;
outline:none;
position:relative;
margin: 0px;
padding:0;
}
.post-summary-text {
color:#555;
background:#f5f5f5 url(http://1.bp.blogspot.com/-rh-PYvqjzSs/VPTARkPOSVI/AAAAAAAALC4/GyFFEnl2TO8/s1600/blueprint.png);
font-size:100%!important;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
text-align:center;
clear:both;
overflow:hidden;
margin:5px 0 0;
padding:17% 10% 6%;
}
a.comment-bubble {
color:#fff;
text-decoration:none;
font-size:110%;
right:10px;
position:absolute;
top:165px;
text-shadow:1px 2px 1px #333;
font-family: &#39;Pacifico&#39;, cursive;
}
a.comment-bubble:before {
content: &quot;Comments: &quot; url(http://4.bp.blogspot.com/-t1i_svebif4/VPMpZqPrKzI/AAAAAAAALAg/TRJ2Un238Gs/s1600/heart-active.png);
}
.post-header,.post-footer {
display:none;
}
</style></b:if></b:if>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType!= &quot;item&quot;'>
<style>
#blog-pager {
clear:both;
}
.post {
height:auto;
width:31%;
display:inline-block;
text-decoration:none;
float:left;
margin:0 1.1% 2%;
padding:0!important;
}
h3.post-title a {
font-size:95%;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
text-transform:uppercase;
color:#fff;
padding:0;
text-shadow: 2px 2px 3px #222;
}
h3.post-title {
height: 22px;
text-align:center;
position:absolute;
top:1%;
width:100%;
z-index:101;
overflow:hidden;
margin:0!important;
padding:10px 0;
}
.date-header {
visibility:hidden;
height:0!important;
width:0!important;
margin:0!important;
padding:0!important;
}
.posts-thumb {
width:100%!important;
height:190px!important;
overflow:hidden;
clear:both;
}
.post-body {
border-radius:2px;
box-shadow:0 5px 4px 1px rgba(0,0,0,0.1);
position:relative;
overflow: hidden;
}
.post-body a {
text-decoration: none;
}
.post-body img {
display:block;
width:100%!important;
height:auto!important;
max-width:800px!important;
max-height:400px!important;
min-width:190px!important;
min-height:190px!important;
border:none;
outline:none;
position:relative;
margin: 0px;
padding:0;
}
.post-summary-text {
cursor: pointer;
background-color: rgba(44, 77, 163, 0.8);
color:#fff;
font-size:120%!important;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
clear:both;
overflow:hidden;
padding:25% 10% 0%;
left: 0;
position: absolute;
text-align: center;
vertical-align: bottom;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
top: 0;
transform: scale(1);
opacity: 0;
z-index: 10;
height: 100%;
transition: all 300ms ease-out 0s;
}
.post-summary-text:hover {
opacity: 1;
}
a.comment-bubble {
color:#fff;
text-decoration:none;
font-size:100%;
width: 100%;
text-align: center;
position:absolute;
top:165px;
left: 0px;
text-shadow:1px 2px 1px #333;
font-family: &#39;Pacifico&#39;, cursive;
z-index: 122;
}
a.comment-bubble:before {
content: &quot;Comments: &quot;;
}
.post-header,.post-footer {
display:none;
}
</style></b:if></b:if>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType!= &quot;item&quot;'>
<style>
#blog-pager {
clear:both;
}
.post {
height:auto;
width:31%;
display:inline-block;
text-decoration:none;
float:left;
margin:0 1.1% 2%;
padding:0!important;
}
h3.post-title a {
font-size:95%;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
text-transform:uppercase;
color:#fff;
padding:0;
text-shadow: 2px 2px 3px #222;
}
h3.post-title {
height: 22px;
text-align:center;
position:absolute;
top:1%;
width:100%;
z-index:101;
overflow:hidden;
margin:0!important;
padding:10px 0;
}
.date-header {
visibility:hidden;
height:0!important;
width:0!important;
margin:0!important;
padding:0!important;
}
.posts-thumb {
width:100%!important;
height:190px!important;
overflow:hidden;
clear:both;
}
.post-body {
border-radius:2px;
box-shadow:0 5px 4px 1px rgba(0,0,0,0.1);
position:relative;
overflow: hidden;
}
.post-body a {
text-decoration: none;
}
.post-body img {
display:block;
width:100%!important;
height:auto!important;
max-width:800px!important;
max-height:400px!important;
min-width:190px!important;
min-height:190px!important;
border:none;
outline:none;
position:relative;
margin: 0px;
padding:0;
}
.post-summary-text {
cursor: pointer;
background-color: rgba(44, 77, 163, 0.8);
color:#fff;
font-size:120%!important;
font-family: &#39;Open Sans Condensed&#39;, sans-serif;
clear:both;
overflow:hidden;
padding:25% 10% 0%;
left: 0;
position: absolute;
text-align: center;
vertical-align: bottom;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
top: 0;
transform: scale(1);
opacity: 0;
z-index: 10;
height: 100%;
transition: all 300ms ease-out 0s;
}
.post-summary-text:hover {
opacity: 1;
}
a.comment-bubble {
color:#fff;
text-decoration:none;
font-size:100%;
width: 100%;
text-align: center;
position:absolute;
top:165px;
left: 0px;
text-shadow:1px 2px 1px #333;
font-family: &#39;Pacifico&#39;, cursive;
z-index: 122;
}
a.comment-bubble:before {
content: &quot;Comments: &quot;;
}
.post-header,.post-footer {
display:none;
}
</style></b:if></b:if>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>
6- إضغط على زر المعاينة وشاهد التعديلات قم إحفظ القالب وأى إستفسار لا تتردد فى كتابتة
والسلام عليكم ورحمة الله وبركاتة
تغيير شكل الإقتباس بطريقة إحترافية مثل المواقع

تغيير شكل الإقتباس بطريقة إحترافية مثل المواقع

كيفكم إخوانى الكرام سنتكلم عن كيفية تحسين مظهر شكل الإقتباس لديك مثل المواقع والمنتديات عن طريق إضافة كود بسيط وسيعرض لك الكود بشكل إحترافى ويميز أكواد الـ HTML و CSS3 و جافاسكريبت و جى كويرى تابع معنا الشرح.
الخطوة الأولى: الدخول إلى لوحة بلوجر & تحرير القالب & إبحث عن هذا الوسم </style> وضع الكود التالى قبلة مباشرة
/* CSS Syntax Highlighter */
pre {padding:35px 10px 10px 10px;margin:.5em 0;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#333;position:relative;max-height:500px;box-shadow:0 0 0 1px #eee;border-radius:3px;}
pre::before {font-size:13px;content:attr(title);position:absolute;top:0;background-color:transparent;padding:6px 10px 7px 10px;left:0;right:0;color:#333;display:block;margin:0 0 15px 0;font-weight:700;box-shadow:0 0 3px #ccc;}
pre::after {content:&quot;إضغط مرتين لتحديد الكل&quot;;padding:2px 10px;width:auto;height:auto;position:absolute;right:8px;top:4px;font-size:12px;color:#888;line-height:20px;transition:all 0.3s ease-in-out;}
pre:hover::after {opacity:0;top:-8px;visibility:visible;}
code {line-height:16px;color:#aaa;background-color:transparent;
padding:1px 2px;font-size:12px;}
pre code {display:block;background:none;border:none;color:#aaa;direction:ltr;
text-align:left;word-spacing:normal;padding:10px;font-weight:bold;}
code .token.punctuation {color:#bbb;}
pre code .token.punctuation {color:#777;}
code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {color:#aaa;}
code .namespace {opacity:.8;}
code .token.property,code .token.tag,code .token.boolean,code .token.number {color:#d75046;}
code .token.selector,code .token.attr-name,code .token.string {color:#88a9ad;}
pre code .token.selector,pre code .token.attr-name {color:#00a1d6;}
pre code .token.string {color:#6fb401;}
code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {color:#5ac954;}
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-style:italic;}
code .token.comment {font-style:italic;}
code .token.regex {color:#ccc;}
code .token.important {font-weight:bold;}
code .token.entity {cursor:help;}
pre mark {background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;}
code mark {background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;}
pre code mark {background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px;}
.comments pre {padding:10px 10px 15px 10px;background:#333;border-radius:3px;box-shadow:inset 0 0 5px rgba(0,0,0,0.2);text-shadow:0 -1px 0 rgba(0,0,0,0.3);}
.comments pre::before {content:&#39;Code&#39;;font-size:10px;font-weight:700;position:relative;top:0;background-color:#363636;padding:2px 8px;left:0;right:0;color:#fff;text-transform:uppercase;display:inline-block;margin:0 0 10px 0;border:none;border-radius:2px;border:1px solid #2a2a2a;box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),inset 0 20px 20px rgba(255,255,255,0.1);text-shadow: 0 -1px 0 rgba(0,0,0,0.3);}
.comments pre::after {font-size:11px;}
.comments pre code {color:#aaa;}
.comments pre.line-numbers {padding-left:10px;}
pre.line-numbers {position:relative;padding-left:3.0em;counter-reset:linenumber;}
pre.line-numbers &gt; code {position:relative;}
.line-numbers .line-numbers-rows {height:100%;position:absolute;top:0;font-size:100%;left:-3.5em;width:3.5em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;padding:10px 0 0 0;background:#444;}
.line-numbers-rows &gt; span {display:block;counter-increment:linenumber;}
.line-numbers-rows &gt; span:before {content:counter(linenumber);color:#aaa;display:block;
padding-right:0.8em;text-align:right;transition:350ms;}
الخطوة الثانية: إبحث عن هذا الوسم </body> وضع الكود التالى قبلة مباشرة
<script src='https://cdn.rawgit.com/msdesign92/ms-design/master/pismaa.js' type='text/javascript'/>
<script>
$(&#39;pre&#39;).attr(&#39;class&#39;, &#39;line-numbers&#39;);
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)})
</script>
* الآن قم بحفظ القالب ولإستخدام هذا النموذج عند إنشاء موضوع جديد إختار HTML وضع الكود التالى 
<pre title="HTML" data-codetype ="HTMLku">
<code class="language-markup"> ... YOUR HTML CODE HERE ... </code></pre> <pre title="CSS" data-codetype ="CSSku">
<code class="language-css"> ... YOUR CSS CODE HERE ... </code></pre> <pre title="Javascript" data-codetype ="JavaScriptku">
<code class="language-javascript"> ... YOUR JAVASCRIPT CODE HERE ... </code></pre> <pre title="jQuery" data-codetype ="JQueryku">
<code class="language-javascript"> ... YOUR jQuery CODE HERE ... </code></pre>
وضع كل كود فى المكان المخصص له
جميع الحقوق محفوظة © 2017 - 2014| مدونة هادى ستور